texttemplate - display a calculated extra entity value

[gregmc2023]

Sorry for the noob question, but how do you reference "y" in a customdata expression?

I'm trying to display a second value in the texttemplate which is a function of the "y" value.
In this example I've graphed the energy delivered by my Wattpilot EV charger. I also wish to display the percentage of the car's 80kWh battery this represents.
I've tried following the example config for customdata--but get an error when I attempt to use "y" in the expression. (Also tried storing the value in vars, but get a similar error.)

type: custom:plotly-graph
entities:
  - entity: sensor.wattpilot_totally_charged
    statistic: sum
    period: 5minute
    showlegend: false
    filters:
      - map_y_numbers: (y - ys[0])/1000
    name: Energy added
    unit_of_measurement: ' '
    show_value: true
    customdata: |
      $fn ({statistics}) => 
        statistics.map( () => ({ extra_attr: (y / 80) }) )
    texttemplate: <b> %{y:.1f} kWh</b> <br> 
      %{customdata.extra_attr}
hours_to_show: 168
layout:
  height: 250
  margin:
    r: 200
    l: 40
    t: 50

[dbuezas]

Try with this:

customdata: |
      $fn ({statistics}) => { 
        console.log(statistics); // look at the chrome devtools console
        return statistics.map(({mean}) => ({ extra_attr: (mean / 80) }) )
      }

[gregmc2023]

Thanks for your prompt reply!

If I use that code I get "NaN". But I suspect you're giving me a nudge in the direction of the answer, however, I'm still not sure what to do with it and haven't managed to google any useful hints.

In chrome dev tools console I can see the html produced by plotly, but don't I need to get the value from HA?

Would I be right to assume that customdata is not returning a number, as extra_attr: (mean / 80) displays "NaN" and extra_attr: (mean) displays "%{customdata.extra_attr}"?

Sorry, I'm still completely lost.

[dbuezas]

customdata: |
      $ex ys.map(y => ({ extra_attr: y / 80 }) )

Would be the shortest way to do it.

[gregmc2023]

customdata: |
      $ex ys.map(y => ({ extra_attr: y }) )

displays 0, but at least that's a number. 🙂

[dbuezas]

https://github.com/dbuezas/lovelace-plotly-graph-card?tab=readme-ov-file#debugging may help you debugging in the future 💪

[gregmc2023]

Thank you! That gives me something to work with, so I'll see if I can figure out the next step.

[gregmc2023]

Well, I don't understand why, in customdata, y returned the first value rather than the last value, but ys[ys.length - 1] did the trick.
Here's where I ended up:

type: custom:plotly-graph
entities:
  - entity: sensor.wattpilot_totally_charged
    statistic: sum
    period: 5minute
    showlegend: false
    filters:
      - map_y_numbers: (y - ys[0])/1000
    name: Energy added
    unit_of_measurement: ' '
    show_value: true
    customdata: |
      $ex ys.map(y => ({ extra_attr: ys[ys.length - 1]/80 * 100 }) )
    texttemplate: <b> %{y:.1f} kWh</b> <br> %{customdata.extra_attr:.0f} %
hours_to_show: 168
layout:
  height: 250
  margin:
    r: 200
    l: 40
    t: 50

Thanks again for your help, and for bringing plotly-graph to us! 🙂

[dbuezas]

That's odd... Did you try:
$ex ys.map(y => ({ extra_attr: y/80 * 100 }) )?

[gregmc2023]

Yeah, it seems weird to me that $ex ys.map(y => ({ extra_attr: y }) ) seems to return the first value in the series, ie zero.

Here it is:

type: custom:plotly-graph
entities:
  - entity: sensor.wattpilot_totally_charged
    statistic: sum
    period: 5minute
    showlegend: false
    filters:
      - map_y_numbers: (y - ys[0])/1000
    name: Energy added
    unit_of_measurement: ' '
    show_value: true
    customdata: |
      $ex ys.map(y => ({ extra_attr: y }) )
    texttemplate: <b> %{y:.1f} kWh</b> <br> %{customdata.extra_attr:.2f} 
hours_to_show: 168
layout:
  height: 250
  margin:
    r: 200
    l: 40
    t: 50

Now, sensor.wattpilot_totally_charged has a state_class total_increasing, so if I delete the filter:

type: custom:plotly-graph
entities:
  - entity: sensor.wattpilot_totally_charged
    statistic: sum
    period: 5minute
    showlegend: false

    name: Energy added
    unit_of_measurement: ' '
    show_value: true
    customdata: |
      $ex ys.map(y => ({ extra_attr: y }) )
    texttemplate: <b> %{y:.1f} kWh</b> <br> %{customdata.extra_attr:.2f} 
hours_to_show: 168
layout:
  height: 250
  margin:
    r: 200
    l: 40
    t: 50

[dbuezas]

Ohhh, that's because show_value is not a feature of plotly, it is part of this card and it creates a new trace with only the last point.
You could even use the actual ys.at(-1) value in the text template and it would work fine too

[gregmc2023]

Thankyou! Like this:

    customdata: |
      $ex ys.map(y => ({ extra_attr: ys.at(-1)/80*100 }) )