Displaying calculated value in hovertext

[paradox460]

I'm building a small graph that shows the cost per day of fuel for my car. The actual cost is derived from a few sensors: average_gas_price, average_fuel_consumption, and a statistical value calculated off differences in the odometer from one day to the next.

I've got a decent enough graph rendering:

However, I'd like to add some data to the hovertext that shows the precursor values, specifically the gallons consumed and odometer delta readings, as well as the price for that day. I am unsure as how to do this with each day's values, as I didn't see any way to access the index of the currently hovered item, so pulling the data out of vars seemed impossible.

YAML

type: custom:plotly-graph
hours_to_show: $ex 7*24
title: Daily driving cost
config:
  scrollZoom: false
layout:
  xaxis:
    fixedrange: true
  yaxis:
    fixedrange: true
entities:
  - entity: sensor.2023_ascent_touring_average_fuel_consumption
    internal: true
    type: bar
    statistic: mean
    period: day
    filters:
      - store_var: mpg
  - entity: sensor.average_gas_price
    internal: true
    statistic: mean
    period: day
    filters:
      - store_var: price
  - entity: sensor.2023_ascent_touring_odometer
    type: bar
    statistic: state
    period: day
    name: Cost
    unit_of_measurement: USD
    filters:
      - delta
      - map_y: >-
          {
            const gals = y / vars.mpg.ys[i];
            return gals * vars.price.ys[i];
          }

[dbuezas]

Hi there!

You have two options:

• Use a universal function/expression ($fn or $ex) to fill customdata: with an array and then access it from hovertemplate:. See this discussion
• directly fill text: with a $fn/$ex, see api and plotly docs

[paradox460]

I got some custom text working, however it appears to have an off-by-one error, that I can't seem to track down

YAML

type: custom:plotly-graph
hours_to_show: $ex 7*24
title: Daily driving cost
config:
  scrollZoom: false
layout:
  xaxis:
    fixedrange: true
  yaxis:
    fixedrange: true
entities:
  - entity: sensor.2023_ascent_touring_average_fuel_consumption
    internal: true
    type: bar
    statistic: mean
    period: day
    filters:
      - store_var: mpg
  - entity: sensor.average_gas_price
    internal: true
    statistic: mean
    period: day
    filters:
      - store_var: price
  - entity: sensor.2023_ascent_touring_odometer
    type: bar
    statistic: state
    period: day
    name: Cost
    unit_of_measurement: USD
    customdata: |-
      $fn ({statistics, vars}) => {
        console.log(statistics)
        return statistics.map(({change: y}, i) => {
          console.log(`customdata: ${y}, idx: ${i}`)
          const mpg = vars.mpg.ys[i];
          const price = vars.price.ys[i];
          const gals = y / vars.mpg.ys[i];
          const calc = gals * price;
          return {
            gals,
            mpg,
            price,
            distance: y,
            calc
          };
        });
      }
    hovertemplate: |-
      Cost: %{y}<br>
      Gals: %{customdata.gals}<br>
      MPG: %{customdata.mpg}<br>
      Price: %{customdata.price}<br>
      Distance: %{customdata.distance}<br>
      Calc: %{customdata.calc}
    filters:
      - delta
      - map_y: >-
          {
            console.log(`map: ${y}`)
            const gals = y / vars.mpg.ys[i];
            return gals * vars.price.ys[i];
          }

CleanShot.2024-03-05.at.09.31.32.mp4

As you can see in the clip, when you hover over an item, you get information for the previous entity (the first line of the hover, the Cost line, shows the y value of that bin, all other lines reference customdata)

[dbuezas]

If you have 1-off issues, it may be that the other is missing a datapoint for early feb. To confirm, use hours_to_show: 4d.
If that is the case, the only solution I see is to index backwards (so from the end instead of from the start).

You can do this by

reverse_i = -statistics.length-1-i;
const mpg = vars.mpg.ys.at(reverse_i);

But you'll also get in trouble if some sensor is missing data at the end, although that may be fixable by adding a resample filter.

[paradox460]

Resampling each segment did fix it. Here's the updated YAML:

YAML

type: custom:plotly-graph
hours_to_show: 7d
title: Daily driving cost
config:
  scrollZoom: false
layout:
  xaxis:
    fixedrange: true
  yaxis:
    fixedrange: true
entities:
  - entity: sensor.2023_ascent_touring_average_fuel_consumption
    internal: true
    type: bar
    statistic: mean
    period: day
    filters:
      - resample: 1d
      - store_var: mpg
  - entity: sensor.average_gas_price
    internal: true
    statistic: mean
    period: day
    filters:
      - resample: 1d
      - store_var: price
  - entity: sensor.2023_ascent_touring_odometer
    type: bar
    statistic: state
    period: day
    name: Cost
    unit_of_measurement: USD
    customdata: |-
      $fn ({statistics, vars}) => {
        console.log(statistics)
        return statistics.map(({change: y}, i) => {
          console.log(`customdata: ${y}, idx: ${i}`)
          const mpg = vars.mpg.ys[i];
          const price = vars.price.ys[i];
          const gals = y / vars.mpg.ys[i];
          const calc = gals * price;
          return {
            gals,
            mpg,
            price,
            distance: y,
            calc
          };
        });
      }
    hovertemplate: |-
      Cost: %{y}<br>
      Gals: %{customdata.gals}<br>
      MPG: %{customdata.mpg}<br>
      Price: %{customdata.price}<br>
      Distance: %{customdata.distance}<br>
      Calc: %{customdata.calc}
    filters:
      - resample: 1d
      - delta
      - map_y: >-
          {
            console.log(`map: ${y}`)
            const gals = y / vars.mpg.ys[i];
            return gals * vars.price.ys[i];
          }

When I get the chart exactly as I want it, I'll edit this comment with a second YAML which is the "final" one without the debug console logs, for other people to reference.

Here's a "final" YAML, that does pretty much most of what I want:

YAML

type: custom:plotly-graph
hours_to_show: 10d
title: Daily driving costs
config:
  scrollZoom: false
layout:
  xaxis:
    fixedrange: true
    showgrid: false
    showline: false
  yaxis:
    fixedrange: true
    showgrid: false
    showline: false
entities:
  - entity: sensor.2023_ascent_touring_average_fuel_consumption
    internal: true
    type: bar
    statistic: mean
    period: day
    filters:
      - resample: 1d
      - store_var: mpg
  - entity: sensor.average_gas_price
    internal: true
    statistic: mean
    period: day
    filters:
      - resample: 1d
      - store_var: price
  - entity: sensor.2023_ascent_touring_odometer
    type: bar
    statistic: state
    period: day
    name: Cost
    unit_of_measurement: USD
    customdata: |-
      $fn ({statistics, vars}) =>
        statistics.map(({change: distance}, i) => {
          const mpg = vars.mpg.ys[i];
          const price = vars.price.ys[i];
          const gals = distance / mpg;
          return {
            gals,
            price,
            distance
          };
        });
    hovertemplate: >-
      <b>%{x}</b><br> %{y:$.2f}<br>
      %{customdata.gals:.2f} gal @ %{customdata.price:$.2f}<br>
      %{customdata.distance:2,} mi
      <extra></extra>
    texttemplate: '%{y:$.2f}<br> %{customdata.distance:2,}mi'
    filters:
      - delta
      - resample: 1d
      - map_y: |-
          {
            const gals = y / vars.mpg.ys[i];
            return gals * vars.price.ys[i];
          }

That will generate a graph tha looks like this:

Thanks!

[paradox460]

One interesting thing I noted. When resampling, all the X buckets seem to have been set to 1700 hours.

Is the "fix" simply just to use a map_x and drop the timestamp out of the Date object?

[dbuezas]

MMM that's odd... Are you by any chance on a gmt-7 time zone?

[paradox460]

Indeed I am!