Bar chart with different integration times, bar widths and y axis ranges

[andrzej-r]

I am trying to implement a bar chart showing energy consumption in kWh. By default, I'd like the integration/reporting interval to be 1 hour, however when I zoom out, I'd like to switch to daily, weekly or monthly figures and adjust the bar width and y axis accordingly.

The code below works to some extent but the bar width keeps changing erratically when I zoom in/out or pan the view. Setting the width manually does not work because it would have to be a constant fraction of the X-axis range.

Also, I'd like to fix the Y-axis ranges to 4 different values for period=hour/day/week/month but still being fixed within a single period.

Code:

type: custom:plotly-graph
title: Solar Energy
hours_to_show: current_day
defaults:
  entity:
    line:
      width: 1
      shape: line
    statistic: mean
    period:
      0m: hour
      3d: day
      30d: week
      90d: month
    hovertemplate: false
entities:
  - entity: sensor.self_consumption_energy_total_kwh
    name: Consumption
    type: bar
    marker:
      color: '#b4771f80'
    texttemplate: ' %{y:.1f} kWh'
    statistic: state
    filters:
      - fn: |-
          (params) => {
            const ys = [];
            ys.push(0); 
            for (let i = 1; i < params.statistics.length; i++){
              ys.push(params.statistics[i].state-params.statistics[i-1].state);
            }
            return { ys };
          }
  - entity: sensor.export_energy_total_kwh
    name: Export
    type: bar
    marker:
      color: '#771fb480'
    texttemplate: ' %{y:.1f} kWh'
    statistic: state
    filters:
      - fn: |-
          (params) => {
            const ys = [];
            ys.push(0); 
            for (let i = 1; i < params.statistics.length; i++){
              ys.push(params.statistics[i].state-params.statistics[i-1].state);
            }
            return { -ys };
          }
fn: |
  $fn({getFromConfig, vars}) => {
    const range = getFromConfig("visible_range");
    const width = range[1] - range[0];
    vars.xrange = (h) => {
      let start = new Date((range[0] + range[1])/2.0);
      start.setHours(0, 0, 0, 0);
      if (h >= 24*7) start.setFullYear(start.getFullYear(), start.getMonth(), start.getDate()-start.getDay());
      if (h >= 24*30) start.setDate(1);
      if (h >= 24*365) start.setMonth(0);
      return [start.getTime(), start.getTime() + 1000*60*60*h];
    }
    vars.scroll = (label, p) => ({
      args: [
        {
          layout: {
            "xaxis.range": [range[0] + width*p, range[1] + width*p],
          }
        }, {
          transition: {
            duration: 150,
          }
        }
      ],
      label,
      method: "animate",
    })    
    vars.zoom = (label, h) => ({
      args: [
        {
          layout: {  
            "xaxis.range": vars.xrange(h),
          }
        }
      ],
      label,
      method: "animate",
    })
  }
layout:
  hovermode: x unified
  barmode: stack
  updatemenus:
    - buttons:
        - $fn({vars}) => vars.scroll( '<', -1.0)
        - $fn({vars}) => vars.scroll( '>', 1.0)
      direction: right
      active: -1
      pad:
        r: 10
        t: 10
      type: buttons
      x: 1
      xanchor: right
      y: 1
      yanchor: top
    - buttons:
        - $fn({vars}) => vars.zoom( '1y', 24*365)
        - $fn({vars}) => vars.zoom( '1m', 24*31)
        - $fn({vars}) => vars.zoom( '1w', 24*7)
        - $fn({vars}) => vars.zoom( '1d', 24)
      direction: right
      active: -1
      pad:
        r: 10
        t: 10
      type: buttons
      x: 0
      xanchor: left
      y: 1
      yanchor: top

[dbuezas]

You can get the visible range with getFromConfig("visible_range");, you could use that to tweak the entity filters and y range. I'm not sure how well this would work though, you'll have to try it out. And please come back too show your results, this is quite interesting :)

An alternative that may work is to change the parameters via buttons which store things in vars.