Create a bar chart, and having bar width propostional to the time elpased between to consecutive dates

[r-jean-pierre]

Hi all,
I would like to enhance one of the graph I did to reach perfection :-)

So 99% of the time, I have a value every 30 mins, I know the start date, end date, value.
The initial difficulty was the sensor is encoding everything in its attributes which makes a simple thing to require help of a data scientist:

It's a reverse list of values in two attributes time and consumption

It took me some time to end-up with this working code:

filters:
          - fn: |-
              ({ meta }) => ({
                xs: meta.time.map((date) => new Date(date)-3600*1000*0).reverse(),
                ys: meta.consumption.map((value) => value*0.001).reverse()
              })
          - filter: new Date(x).getHours() >= 6 && new Date(x).getHours() < 22
        offset: $fn() => 1000*60*0
        width: $fn() => 1000*60*30

So finding x and y is done, and as the frequency was supposed to always be 30mins, I used width: $fn() => 1000*60*30 (so it works on left side)

But it is incorrect for the general case: it should be the difference date[t+1] - date[t]
(otherwise i have gaps on the right side, as the utility provider was forced to give data aggregated per hour instead of 30mins)

Can anyone give me a hint to "compute" and "encode" this into the width attribute of plotly?
And as a challenge in the challenge, note that I used filter: new Date(x).getHours() >= 6 && new Date(x).getHours() < 22 so that i can fill either blue or yellow my bars depending of the hour of the day

[dbuezas]

You can pass an array to width, which you can compute va $ex

https://plotly.com/javascript/bar-charts/#customizing-individual-bar-widths

[r-jean-pierre]

After some trials&errors, I think I succeeded with:

width: |
    $ex  {
      const dates = hass.states["sensor.xxx"].attributes["time"];
      const diffs = [];
      for (let i = 1; i < dates.length; i++) {
        const date1 = new Date(dates[i-1]);
        const date2 = new Date(dates[i]);
        if ((date2.getHours() >= 6) && (date2.getHours() < 22)) {
          if (i == 1) {
            diffs.push((date1 - date2));
          }
          diffs.push((date1 - date2));
        }
      }
      return diffs.reverse();
    }

I don't know if a more elegant solution is possible, but it seems to do the job

If it can help others :-)

I noticed also something which is likely due to plotly itself I presume:
the mouse hover is center around the x location (e.g. 9H), but as my bar is from 9h to 10h, then of course at the mouse location after 9h31, it displays data from the next bar (10h-11h)
I tweaked a bit with offsets etc. but without good overall results. It treats bar like if they were data points

[dbuezas]

Looks good!
You could put the filters first and the width after to simplify a bit

[deltamelter]

I use a number of variable width bars. bar width is in milliseconds. By default all bars are centred on the x value but to start the left side of the bar on the x value instead, use offset: 0
Some of my data sources have a duration:

  - entity: sensor.named_storms
    offset: 0
    opacity: 0.5
    width: $ex meta.data.map(({ Duration }) => Duration )

some only have a start_time and end_time so calculate the duration:

  - entity: sensor.powerup_events
    offset: 0
    width: >-
      $ex meta.powerups.map(({ validFrom, validTo }) => new
      Date(validTo).getTime() - new Date(validFrom).getTime())

Sometimes I reduce the width by 60000 and use offset: 30000. This makes a gap between the bars where that is desired.

[r-jean-pierre]

In fact I used offset: 0, but it doesn't "work" as it should (this i what the documentation says) maybe it is due to the fact that I have to compute my xy and ys in filters?

[r-jean-pierre]

Anyhow, thanks for the idea: I also reduced width and added a small offset, so that, if I zoom a bit, I have a nice and tiny narrow gap between each bar:

Besides I spend time to test things appart from HomeAssistant (plotly python, using example from the documentation), and I confirm that the behaviour when passing the mouse over bar is different with custom:plotly-graph
but again, not really a big deal!

Thanks for the help

[dbuezas]

Regarding the mouse, I think the shadow dom used by home assistant breaks the coordinates calculations of plotlyjs. The mouse position is taken relative to the top left of the page instead of relative to the plot.

It may also be that I broke it with the custom css

[r-jean-pierre]

Yes possible, I also noticed that xref (or yref) set to either "container" or "paper" is also behaving differently