trendGradient über Props übergeben

[lenschith]

Hallo zusammen,

ich bastle gerade an einem Custom Widget (Standalone List Item) und verzweifle an der oh-trend Komponente bzw. der Übergabe des trendGradient über die Widget-Props.

Screenshot 2026-02-12 120730.png

Das Problem: Ich möchte den Farbverlauf der Trendline flexibel über die Widget-Einstellungen (Props) definieren. Wenn ich das Array mit den Farben direkt fest im Code eintrage, funktioniert alles wunderbar. Sobald ich aber versuche, den Wert aus den Props zu ziehen, bleibt die Trendline hartnäckig grau.

Hier sind die beiden Beispiele zum Vergleich:

1. So funktioniert es (Hardcodiert im Widget):
Wenn ich die Farben direkt in die Config schreibe, wird der Verlauf korrekt angezeigt:

Code: Alles auswählen

- component: oh-trend
  config:
    trendItem: =props.mainItem
    trendGradient: ['red','yellow','blue'] # <--- Das klappt!
    trendSampling: 20

2. So funktioniert es NICHT (Über Props):
Egal wie ich versuche, die Prop zu übergeben, die Linie bleibt grau (Standardfarbe).

Die Prop-Definition:

Code: Alles auswählen

  parameters:
    - description: Farbverlauf Trendline
      label: trendGradient
      name: trendGradient
      required: false
      type: TEXT   

Der Aufruf im Widget:

Code: Alles auswählen

- component: oh-trend
  config:
    trendItem: =props.mainItem
    trendGradient: =props.trendGradient # <--- Das bleibt grau

Das Widget:

Code: Alles auswählen

uid: DefaultStandalone_List_Trendline
tags:
  - default standalone
  - lenschith
  - list
  - trendline
props:
  parameters:
    - context: item
      label: Item für Text & Trend
      name: mainItem
      required: true
      type: TEXT
    - description: Farbverlauf Trendline
      label: trendGradient
      name: trendGradient
      required: false
      type: TEXT      
    - label: Titel
      name: title
      required: false
      type: TEXT
    - label: Subtitle
      name: subtitle
      required: false
      type: TEXT
    - label: Icon
      name: icon
      required: false
      type: TEXT
    - label: Badge Text (optional)
      name: badge
      required: false
      type: TEXT
    - label: Badge Color (optional)
      name: badgecolor
      required: false
      type: TEXT
  parameterGroups:
    - name: action
      context: action
      label: Kachelaction
      description: Action die ausgeführt wird wenn die Kachel gedrückt wird.
timestamp: Feb 12, 2026, 8:45:59 AM
component: oh-list-item
config:
  action: "=props.action ? props.action : 'none'"
  actionPropsParameterGroup: action
  icon: "=props.icon ? props.icon : 'oh:loading'"
  link: "=props.action ? true : false"
  no-chevron: "=props.action ? false : true"
  style:
    cursor: "=props.action ? 'pointer' : 'default'"
    pointer-events: "=props.action ? 'auto' : 'none'"
  subtitle: "=props.subtitle ? props.subtitle : ''"
  title: "=props.title ? props.title : props.mainItem"
slots:
  after:
    - component: f7-row
      config:
        style:
          align-items: center
          display: flex
          gap: 12px
          height: 38px
          justify-content: flex-end
          min-width: 150px
      slots:
        default:
          - component: f7-chip
            config:
              style:
                background: "=props.badgecolor ? props.badgecolor : '#d3d3d3'"
                color: black
                font-size: 11px
                height: 22px
                line-height: 22px
                opacity: 0.9
                z-index: 2
              text: =props.badge
              visible: "=props.badge ? true : false"
          - component: div
            config:
              style:
                align-items: center
                display: flex
                height: 100%
                justify-content: flex-end
                margin-left: -20px
                position: relative
                width: 90px
            slots:
              default:
                - component: oh-trend
                  config:
                    style:
                      filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.3))
                      height: 100%
                      opacity: 0.6
                      position: absolute
                      right: -10px
                      stroke-width: 8
                      width: 100%
                    trendGradient: =props.trendGradient
                    trendItem: =props.mainItem
                    trendSampling: 20
                    visible: "=props.trendGradient ? true : false"
                - component: Label
                  config:
                    style:
                      font-weight: 700
                      position: relative
                      z-index: 3
                    text: =items[props.mainItem].displayState || items[props.mainItem].state

Ich finde den Fehler nicht, Vielleicht hat jemand einen Tipp.
Gruß Lenschi