Using additional data fields eg text labels from same data source array as X and Y.

[deltamelter]

I'm trying to work out how to access what should be text from a datasource array to add to the numeric value with a text description.

greennessForecast: 
- validFrom: '2024-11-01T23:00:00+00:00'
  validTo: '2024-11-02T06:00:00+00:00'
  greennessScore: 11
  greennessIndex: LOW
  highlightFlag: false
- validFrom: '2024-11-02T23:00:00+00:00'
  validTo: '2024-11-03T06:00:00+00:00'
  greennessScore: 9
  greennessIndex: LOW
  highlightFlag: false
- validFrom: '2024-11-03T23:00:00+00:00'
  validTo: '2024-11-04T06:00:00+00:00'
  greennessScore: 6
  greennessIndex: LOW
  highlightFlag: false
- validFrom: '2024-11-04T23:00:00+00:00'
  validTo: '2024-11-05T06:00:00+00:00'
  greennessScore: 7
  greennessIndex: LOW
  highlightFlag: false
- validFrom: '2024-11-05T23:00:00+00:00'
  validTo: '2024-11-06T06:00:00+00:00'
  greennessScore: 15
  greennessIndex: LOW
  highlightFlag: true
- validFrom: '2024-11-06T23:00:00+00:00'
  validTo: '2024-11-07T06:00:00+00:00'
  greennessScore: 34
  greennessIndex: MEDIUM
  highlightFlag: true
- validFrom: '2024-11-07T23:00:00+00:00'
  validTo: '2024-11-08T06:00:00+00:00'
  greennessScore: 41
  greennessIndex: MEDIUM
  highlightFlag: true

device_class: timestamp
friendly_name: Greenness Forecast

This is what I have tried so far. The colour is working ok, but I want the text from the greennessIndex [LOW, MEDIUM, HIGH] to appear via texttemplate. I'm not sure if this index is even text. In any case, I can calculate the text from greennessScore or the numeric value give to the Index when I dumped it in console log.
I wasn't able to make this work as a function on texttemplate either. Any ideas?

How do I refer to one of these other values in a texttemplate, it only seems to see x or y and customdata doesn't seem to work as the docs suggest. I might have misunderstood that.

  - entity: sensor.greenness_forecast
    attribute: greennessForecast
    name: greenness
    texttemplate: "%{customdata.grindex}"
    type: bar
    customdata:
      - fn: |-
          ({ meta }) => ({
            grindex: meta.greennessForecast.map(({ greennessIndex }) => greennessIndex)
          });
    filters:
      - fn: |-
          ({ meta }) => ({
            xs: meta.greennessForecast.map(({ validFrom }) => validFrom),
            ys: meta.greennessForecast.map(({ greennessScore }) => greennessScore)
          })
    marker:
      color: |
        $ex 
          { 
            let colors = [];
            for (let d of meta.greennessForecast) {
              if (d.greennessScore !== undefined && d.greennessScore !== null) {
                if (d.greennessScore >= 70) {
                  colors.push('green');
                } else if (d.greennessScore >= 40) {
                  colors.push('#ffa500');
                } else {
                  colors.push('red');
                }
              }
            }
            return colors;
          }

[dbuezas]

try like this:

    customdata: |
      $fn ({ meta }) => ({
          grindex: meta.greennessForecast.map(({ greennessIndex }) => greennessIndex)
      });

Or

    customdata: |
      $ex ({ grindex: meta.greennessForecast.map(({ greennessIndex }) => greennessIndex)})

fn: is a filter. I should have named it differently

[deltamelter]

neither works 😞

I noticed on the hover over its shows x, y and null. is that third value being (incorrectly) pulled from the entity?

[dbuezas]

Oh, I see, there's a separate issue: you are returning an object with an array, but should return an array of objects

$ex meta.greennessForecast.map(({ greennessIndex }) => ({ grindex: greennessIndex }))

[deltamelter]

Ah, perfect, that works

I was just coming to share the meta, as dumped in the console.log.

{
    "greennessForecast": [
        {
            "validFrom": "2024-11-01T23:00:00+00:00",
            "validTo": "2024-11-02T06:00:00+00:00",
            "greennessScore": 11,
            "greennessIndex": "LOW",
            "highlightFlag": false
        },
        {
            "validFrom": "2024-11-02T23:00:00+00:00",
            "validTo": "2024-11-03T06:00:00+00:00",
            "greennessScore": 9,
            "greennessIndex": "LOW",
            "highlightFlag": false
        },
        {
            "validFrom": "2024-11-03T23:00:00+00:00",
            "validTo": "2024-11-04T06:00:00+00:00",
            "greennessScore": 6,
            "greennessIndex": "LOW",
            "highlightFlag": false
        },
        {
            "validFrom": "2024-11-04T23:00:00+00:00",
            "validTo": "2024-11-05T06:00:00+00:00",
            "greennessScore": 7,
            "greennessIndex": "LOW",
            "highlightFlag": false
        },
        {
            "validFrom": "2024-11-05T23:00:00+00:00",
            "validTo": "2024-11-06T06:00:00+00:00",
            "greennessScore": 15,
            "greennessIndex": "LOW",
            "highlightFlag": true
        },
        {
            "validFrom": "2024-11-06T23:00:00+00:00",
            "validTo": "2024-11-07T06:00:00+00:00",
            "greennessScore": 34,
            "greennessIndex": "MEDIUM",
            "highlightFlag": true
        },
        {
            "validFrom": "2024-11-07T23:00:00+00:00",
            "validTo": "2024-11-08T06:00:00+00:00",
            "greennessScore": 41,
            "greennessIndex": "MEDIUM",
            "highlightFlag": true
        }
    ],
    "device_class": "timestamp",
    "friendly_name": "Greenness Forecast"
}