ApexChart: yesterday/today/tomorrow swipe

This sets up a card showing today's energy graph by default. You can swipe left for yesterday's energy graph and swipe right for tomorrow's energy graph.

Requirements

1. RomRider/apexcharts-card to render the graphs.

2. bramkragten/swipe-card (optional) to allow swiping between the graphs. If this is not installed then each type: custom:apexcharts-card should be added separately in the dashboard.

3. BJReplay/ha-solcast-solar for the solar forecast.

4. Additional sensors not provided by OMIE Home Assistant:

   • sensor.MY_SOLAR_AC_POWER: solar panels production (W).
   • sensor.MY_HOME_CONSUMPTION: your home's electricity consumption (W).
   • sensor.MY_ELECTRICITY_PURCHASE_PRICE: electricity purchase price (€/MWh). Examples in Tarifários Portugal.
   • sensor.MY_ELECTRICITY_SALE_PRICE: electricity purchase price (€/MWh). Examples in Tarifários Portugal.
   • sensor.sensor.solcast_forecast_today: provided by BJReplay/ha-solcast-solar
   • sensor.sensor.solcast_forecast_tomorrow: provided by BJReplay/ha-solcast-solar

   All are optional but you will have to remove any missing sensors from the YAML.

Dashboard YAML

type: custom:swipe-card
start_card: 2
cards:
  - type: custom:apexcharts-card
    update_interval: 1h
    header:
      show: true
      title: Yesterday
    span:
      start: day
      offset: '-1d'
    graph_span: 1d
    all_series_config:
      extend_to: false
      stroke_width: 1
      group_by:
        func: avg
        duration: 15m
    apex_config:
      dataLabels:
        enabled: true
        dropShadow:
          enabled: true
    series:
      - entity: sensor.MY_SOLAR_AC_POWER
        name: Solar
        yaxis_id: power
        type: area
        fill_raw: 'null'
        transform: return x / 1000
        unit: kW
        show:
          legend_value: false
      - entity: sensor.MY_HOME_CONSUMPTION
        name: Load
        yaxis_id: power
        type: area
        fill_raw: zero
        transform: return x / 1000
        unit: kW
        show:
          legend_value: false
      - entity: sensor.MY_ELECTRICITY_PURCHASE_PRICE
        name: Buy
        yaxis_id: price
        type: line
        curve: stepline
        stroke_width: 0.5
        show:
          extremas: true
          legend_value: false
      - entity: sensor.MY_ELECTRICITY_SALE_PRICE
        name: Sell
        yaxis_id: price
        type: line
        curve: stepline
        fill_raw: 'null'
        show:
          extremas: true
          legend_value: false
    yaxis:
      - id: power
        align_to: 0.5
      - id: price
        opposite: true
        align_to: 1
        min: '|-10|'
        max: '|10|'
  - type: custom:apexcharts-card
    update_interval: 5m
    header:
      show: true
    span:
      start: day
    graph_span: 1d
    all_series_config:
      type: area
      extend_to: false
      stroke_width: 1
      group_by:
        func: avg
        duration: 15m
    series:
      - entity: sensor.MY_SOLAR_AC_POWER
        name: Solar
        yaxis_id: power
        fill_raw: 'null'
        transform: return x / 1000
        unit: kW
        show:
          legend_value: false
      - entity: sensor.MY_HOME_CONSUMPTION
        name: Load
        yaxis_id: power
        fill_raw: zero
        transform: return x / 1000
        unit: kW
        show:
          legend_value: false
      - entity: sensor.MY_ELECTRICITY_PURCHASE_PRICE
        name: Buy
        yaxis_id: price
        type: line
        curve: stepline
        data_generator: |
          return Object.entries(entity.attributes.today_hours)
                       .map(([dateString, price]) => [ new Date(dateString), price ])
        show:
          extremas: true
          legend_value: false
      - entity: sensor.MY_ELECTRICITY_SALE_PRICE
        name: Sell
        yaxis_id: price
        type: line
        curve: stepline
        fill_raw: 'null'
        data_generator: |
          return ((hours) => 
            Object.keys(hours)
                  .map((dateString) => [ new Date(dateString), hours[dateString]])
                  .map(([date, price]) => [ date, (date.getHours() > 6 && date.getHours() < 21) ? price : null])
          )(entity.attributes.today_hours)
        show:
          extremas: true
          legend_value: false
      - entity: sensor.solcast_pv_forecast_forecast_today
        name: Forecast
        yaxis_id: power
        type: line
        curve: smooth
        fill_raw: 'null'
        data_generator: |
          return (() => {
            const to_pair = ({period_start,pv_estimate}) => ([
              new Date(period_start),
              pv_estimate
            ])

            const has_solar = ([,kWh]) => kWh !== 0

            return entity.attributes.detailedForecast
                        .map(to_pair)
                        .filter(has_solar)
          })()
        show:
          legend_value: false
    yaxis:
      - id: power
        align_to: 0.5
      - id: price
        opposite: true
        min: '|-5|'
        max: '|5|'
        align_to: 1
  - type: custom:apexcharts-card
    update_interval: 1h
    header:
      title: Tomorrow
      show: true
    span:
      start: day
      offset: +1d
    graph_span: 1d
    all_series_config:
      type: area
      extend_to: false
      stroke_width: 1
      group_by:
        func: avg
        duration: 15m
    series:
      - entity: sensor.MY_ELECTRICITY_PURCHASE_PRICE
        name: Buy
        yaxis_id: price
        type: line
        curve: stepline
        color: '#E74C3C'
        data_generator: >
          return ((hs) => Object.keys(hs).map((dt) => [ new Date(dt), hs[dt]
          ]))(entity.attributes.tomorrow_hours)
        show:
          extremas: true
          legend_value: false
      - entity: sensor.MY_ELECTRICITY_SALE_PRICE
        name: Sell
        yaxis_id: price
        type: line
        curve: stepline
        color: purple
        fill_raw: 'null'
        data_generator: |
          return ((hours) => {
            return Object.keys(hours)
                         .map((dateString) => [ new Date(dateString), hours[dateString]])
                         .map(([date, price]) => [ date, (date.getHours() > 6 && date.getHours() < 21) ? price : null])
          })(entity.attributes.tomorrow_hours)
        show:
          extremas: true
          legend_value: false
      - entity: sensor.solcast_pv_forecast_forecast_tomorrow
        name: Forecast
        yaxis_id: power
        type: line
        curve: smooth
        color: '#F1C40F'
        fill_raw: 'null'
        data_generator: |
          return (() => {
            const to_pair = ({period_start,pv_estimate}) => ([
              new Date(period_start),
              pv_estimate
            ])

            const has_solar = ([,kW]) => kW !== 0
            const is_future = ([datetime,]) => datetime.getTime() > Date.now()

            return entity.attributes.detailedHourly
                        .map(to_pair)
                        .filter(has_solar)
          })()
        group_by:
          func: raw
          duration: 1h
        show:
          legend_value: false
    yaxis:
      - id: power
        align_to: 0.5
      - id: price
        opposite: true
        min: '|-5|'
        max: '|5|'
        align_to: 1