Suggestion : Power Today chart

[slopemad]

A current day chart which shows power today so far (PV, battery, grid, load), and forecast for the rest of the day. (obviously substituting my entities with more appropriate entities)

type: custom:apexcharts-card
header:
  show: true
  title: Power Today
  show_states: true
  colorize_states: true
graph_span: 24h
span:
  start: day
  offset: '-0h'
now:
  show: true
series:
  - entity: sensor.givtcp_saXXXXXXXX_battery_power
    stroke_width: 1
    curve: smooth
    name: battery actual
    unit: w
    extend_to: now
    color: green
  - entity: predbat.battery_power_best
    stroke_width: 1
    color: green
    curve: smooth
    name: battery best
    unit: w
    data_generator: >
      let res = []; for (const [key, value] of
      Object.entries(entity.attributes.results)) { res.push([new
      Date(key).getTime(), value*1000.0]); } return res.sort((a, b) => { return
      a[0] - b[0]  })
    show:
      in_header: false
  - entity: sensor.givtcp_saXXXXXXXX_pv_power
    type: area
    name: PV Actual
    float_precision: 0
    color: yellow
    opacity: 0.5
    unit: w
    transform: return x;
    extend_to: now
    show:
      legend_value: true
      in_header: true
    stroke_width: 1
    group_by:
      func: avg
      duration: 30m
  - entity: predbat.pv_power_best
    stroke_width: 1
    color: yellow
    curve: smooth
    name: pv best
    unit: w
    data_generator: >
      let res = []; for (const [key, value] of
      Object.entries(entity.attributes.results)) { res.push([new
      Date(key).getTime(), value*1000.0]); } return res.sort((a, b) => { return
      a[0] - b[0]  })
    show:
      in_header: false
  - entity: sensor.emoncms_grid_power
    stroke_width: 1
    color: red
    curve: smooth
    name: grid actual
    unit: w
    extend_to: now
  - entity: predbat.grid_power_best
    stroke_width: 1
    color: red
    curve: smooth
    name: grid best
    unit: w
    data_generator: >
      let res = []; for (const [key, value] of
      Object.entries(entity.attributes.results)) { res.push([new
      Date(key).getTime(), value*1000.0]); } return res.sort((a, b) => { return
      a[0] - b[0]  })
    show:
      in_header: false
  - entity: sensor.givtcp_saXXXXXXXX_load_power
    stroke_width: 1
    color: purple
    curve: smooth
    name: load actual
    unit: w
    extend_to: now
  - entity: predbat.load_power_best
    stroke_width: 1
    color: purple
    curve: smooth
    name: load best
    unit: w
    data_generator: >
      let res = []; for (const [key, value] of
      Object.entries(entity.attributes.results)) { res.push([new
      Date(key).getTime(), value*1000.0]); } return res.sort((a, b) => { return
      a[0] - b[0]  })
    show:
      in_header: false

[springfall2008]

This is the standard chart in Predbat, I think yours has the history as well which is nice, I might think of incorporating that in the future but I'd need to add Predbat entities to replicate the history otherwise the sensor names will vary