Card YAML

[lwis]

Hi 👋 Thanks for the excellent NG data integration!

I was wondering if you could share the YAML for your example cards? Particularly the 96h wind forecast!

[JRascagneres]

@lwis Yeah, its something I need to put in the repo but here goes....

Wind generation:

type: custom:apexcharts-card
header:
  show: true
  title: 92 Hour Wind Generation
  show_states: true
  colorize_states: true
graph_span: 92h
apex_config:
  xaxis:
    tooltip:
      enabled: false
now:
  show: true
  color: red
  label: now
span:
  start: day
  offset: '-1d'
series:
  - entity: sensor.national_grid_grid_generation_national_wind_mwh
    name: National Generation
    color: cyan
    opacity: 0.8
    stroke_width: 2
    type: line
    extend_to: false
    group_by:
      func: avg
      duration: 1h
    show:
      legend_value: false
      in_header: raw
  - entity: sensor.national_grid_wind_forecast
    color: green
    opacity: 0.8
    name: Latest Forecast
    data_generator: |
      var now = new Date().getTime();
      var forecastData = entity.attributes.forecast.filter(entry => {
        var startTime = new Date(entry.start_time).getTime();
        if (startTime > start){
          return true
        }
        return false
      });

      return forecastData.map(entry => {
        return [entry.start_time, entry.generation] 
      });
    type: column
    show:
      legend_value: false
      in_header: raw
    fill_raw: last
  - entity: sensor.national_grid_wind_forecast_earliest
    color: red
    opacity: 0.8
    stroke_width: 2
    name: Earliest Forecast
    data_generator: |
      var now = new Date().getTime();
      var forecastData = entity.attributes.forecast.filter(entry => {
        var startTime = new Date(entry.start_time).getTime();
        if (startTime > start){
          return true
        }
        return false
      });

      return forecastData.map(entry => {
        return [entry.start_time, entry.generation] 
      });
    type: line
    show:
      legend_value: false
      in_header: raw
    fill_raw: last
yaxis:
  - min: 0
    max: ~20000
    decimals: 0

My generation source and interconnectors just use the standard HA stuff:

chart_type: line
period: 5minute
type: statistics-graph
entities:
  - entity: sensor.national_grid_grid_generation_gas_mwh
    name: Gas
  - entity: sensor.national_grid_grid_generation_coal_mwh
    name: Coal
  - entity: sensor.national_grid_grid_generation_biomass_mwh
    name: Biomass
  - entity: sensor.national_grid_grid_generation_nuclear_mwh
    name: Nuclear
  - entity: sensor.national_grid_grid_generation_wind_mwh
    name: Wind
  - entity: sensor.national_grid_grid_generation_solar_mwh
    name: Solar
  - entity: sensor.national_grid_grid_generation_hydro_mwh
    name: Hydro
  - entity: sensor.national_grid_grid_generation_other_mwh
    name: Other
stat_types:
  - mean
days_to_show: 2
hide_legend: false
title: Generation Source

chart_type: line
period: 5minute
type: statistics-graph
entities:
  - entity: sensor.national_grid_grid_generation_belgium_mwh
    name: Belgium
  - entity: sensor.national_grid_grid_generation_france_mwh
    name: France
  - entity: sensor.national_grid_grid_generation_ireland_mwh
    name: Ireland
  - entity: sensor.national_grid_grid_generation_netherlands_mwh
    name: Netherlands
  - entity: sensor.national_grid_grid_generation_norway_mwh
    name: Norway
  - entity: sensor.national_grid_grid_generation_denmark_mw
    name: Denmark
stat_types:
  - mean
days_to_show: 2
hide_legend: false
title: Interconnectors

Any others you particularly want now?

[lwis]

That's perfect, thank you!

[JRascagneres]

@lwis Come back and share if you have any suggestions / tweaks that improve them 😉

[ando2040]

Here are my cards formatted as a vertical stack, hope someone finds them useful. Due credit to @gjlipman for the inspiration.

type: vertical-stack
cards:
  - type: custom:apexcharts-card
    header:
      show: true
      title: 3-Day UK Low Carbon Generation History/Now/Forecast
      show_states: true
      colorize_states: true
    graph_span: 6d
    apex_config:
      xaxis:
        tooltip:
          enabled: false
      stroke:
        dashArray:
          - 2
          - 2
          - 0
          - 2
          - 0
          - 2
          - 0
          - 2
    now:
      show: true
      color: red
    span:
      start: day
      offset: '-2d'
    series:
      - entity: sensor.national_grid_grid_generation_low_carbon_percentage
        yaxis_id: percent
        color: green
        opacity: 0.8
        stroke_width: 2
        name: Low Carbon
        data_generator: ''
        type: line
        show:
          legend_value: false
      - entity: sensor.national_grid_total_demand_mw
        yaxis_id: MW
        color: red
        opacity: 0.8
        stroke_width: 2
        name: Demand
        data_generator: ''
        type: line
        show:
          legend_value: false
      - entity: sensor.national_grid_grid_demand_three_day_forecast
        yaxis_id: MW
        color: red
        opacity: 0.8
        stroke_width: 2
        name: Forecast
        data_generator: |
          var now = new Date().getTime();
          var forecastData = entity.attributes.forecast.filter(entry => {
            var startTime = new Date(entry.start_time).getTime();
            if (startTime > start){
              return true
            }
            return false
          });

          return forecastData.map(entry => {
            return [entry.start_time, entry.national_demand] 
          });
        type: line
        show:
          legend_value: false
          in_header: false
        fill_raw: last
      - entity: sensor.national_grid_grid_generation_wind_mw
        yaxis_id: MW
        color: blue
        opacity: 0.8
        stroke_width: 2
        name: Wind
        data_generator: ''
        type: line
        show:
          legend_value: false
      - entity: sensor.national_grid_wind_forecast_now_to_three_day
        yaxis_id: MW
        color: blue
        opacity: 0.8
        stroke_width: 2
        name: Wind Forecast
        data_generator: |
          var now = new Date().getTime();
          var forecastData = entity.attributes.forecast.filter(entry => {
            var startTime = new Date(entry.start_time).getTime();
            if (startTime > start){
              return true
            }
            return false
          });

          return forecastData.map(entry => {
            return [entry.start_time, entry.generation] 
          });
        type: line
        show:
          legend_value: false
          in_header: false
        fill_raw: last
      - entity: sensor.national_grid_grid_generation_solar_mw
        yaxis_id: MW
        color: yellow
        opacity: 0.8
        stroke_width: 2
        name: Solar
        data_generator: ''
        type: line
        show:
          legend_value: false
      - entity: sensor.national_grid_embedded_solar_forecast_three_day
        yaxis_id: MW
        color: yellow
        opacity: 0.8
        stroke_width: 2
        name: Embedded
        data_generator: |
          var now = new Date().getTime();
          var forecastData = entity.attributes.forecast.filter(entry => {
            var startTime = new Date(entry.start_time).getTime();
            if (startTime > start){
              return true
            }
            return false
          });

          return forecastData.map(entry => {
            return [entry.start_time, entry.generation] 
          });
        type: line
        show:
          legend_value: false
          in_header: false
        fill_raw: last
      - entity: sensor.national_grid_grid_generation_nuclear_mw
        yaxis_id: MW
        color: grey
        opacity: 0.8
        stroke_width: 2
        name: Nuclear
        data_generator: ''
        type: line
        show:
          legend_value: false
    yaxis:
      - id: MW
        min: 0
        max: ~50000
        decimals: 0
      - id: percent
        min: 0
        opposite: true
        max: 100
        show: true
        decimals: 0
  - type: custom:apexcharts-card
    header:
      show: true
      title: Long-Range UK Generation Forecast
      show_states: true
      colorize_states: true
    graph_span: 16d
    apex_config:
      xaxis:
        tooltip:
          enabled: false
      stroke:
        dashArray:
          - 2
          - 0
          - 2
          - 0
          - 2
          - 0
          - 2
    now:
      show: true
      color: red
    span:
      start: day
      offset: '-1d'
    series:
      - entity: sensor.national_grid_total_demand_mw
        color: red
        opacity: 0.8
        stroke_width: 2
        name: Demand
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: false
      - entity: sensor.national_grid_grid_demand_fourteen_day_forecast
        color: red
        opacity: 0.8
        stroke_width: 2
        name: Forecast
        data_generator: |
          var now = new Date().getTime();
          var forecastData = entity.attributes.forecast.filter(entry => {
            var startTime = new Date(entry.start_time).getTime();
            if (startTime > start){
              return true
            }
            return false
          });

          return forecastData.map(entry => {
            return [entry.start_time, entry.national_demand] 
          });
        type: line
        show:
          legend_value: false
          in_header: false
        fill_raw: last
      - entity: sensor.national_grid_grid_generation_wind_mw
        color: blue
        opacity: 0.8
        stroke_width: 2
        name: Wind
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: false
      - entity: sensor.national_grid_wind_forecast_fourteen_day
        color: blue
        opacity: 0.8
        stroke_width: 2
        name: Forecast
        data_generator: |
          var now = new Date().getTime();
          var forecastData = entity.attributes.forecast.filter(entry => {
            var startTime = new Date(entry.start_time).getTime();
            if (startTime > start){
              return true
            }
            return false
          });

          return forecastData.map(entry => {
            return [entry.start_time, entry.generation] 
          });
        type: line
        show:
          legend_value: false
          in_header: false
        fill_raw: last
      - entity: sensor.national_grid_grid_generation_solar_mw
        color: yellow
        opacity: 0.8
        stroke_width: 2
        name: Solar
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: false
      - entity: sensor.national_grid_embedded_solar_forecast_fourteen_day
        color: yellow
        opacity: 0.8
        stroke_width: 2
        name: Embedded
        data_generator: |
          var now = new Date().getTime();
          var forecastData = entity.attributes.forecast.filter(entry => {
            var startTime = new Date(entry.start_time).getTime();
            if (startTime > start){
              return true
            }
            return false
          });

          return forecastData.map(entry => {
            return [entry.start_time, entry.generation] 
          });
        type: line
        show:
          legend_value: false
          in_header: false
        fill_raw: last
      - entity: sensor.national_grid_grid_generation_nuclear_mw
        color: grey
        opacity: 0.8
        stroke_width: 2
        name: Nuclear
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: false
    yaxis:
      - min: 0
        max: ~50000
        decimals: 0
  - type: custom:apexcharts-card
    stacked: false
    header:
      show: true
      title: 3-day UK Generation Type History (Figures reflect now)
      show_states: true
      colorize_states: true
    graph_span: 80h
    apex_config:
      xaxis:
        tooltip:
          enabled: false
    now:
      show: true
      color: red
      label: now
    span:
      start: day
      offset: '-60h'
    series:
      - entity: sensor.national_grid_grid_generation_gas_mw
        color: purple
        opacity: 0.8
        stroke_width: 2
        name: Gas
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: raw
      - entity: sensor.national_grid_grid_generation_coal_mw
        color: black
        opacity: 0.8
        stroke_width: 2
        name: Coal
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: raw
      - entity: sensor.national_grid_grid_generation_oil_mw
        color: goldenrod
        opacity: 0.8
        stroke_width: 2
        name: Oil
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: raw
      - entity: sensor.national_grid_grid_generation_biomass_mw
        color: brown
        opacity: 0.8
        stroke_width: 2
        name: Biomass
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: raw
      - entity: sensor.national_grid_grid_generation_nuclear_mw
        color: grey
        opacity: 0.8
        stroke_width: 2
        name: Nuclear
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: raw
      - entity: sensor.national_grid_grid_generation_wind_mw
        color: blue
        opacity: 0.8
        stroke_width: 2
        name: Wind
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: raw
      - entity: sensor.national_grid_grid_generation_solar_mw
        color: yellow
        opacity: 0.8
        stroke_width: 2
        name: Solar
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: raw
      - entity: sensor.national_grid_grid_generation_hydro_mw
        color: aqua
        opacity: 0.8
        stroke_width: 2
        name: Hydro
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: raw
      - entity: sensor.national_grid_grid_generation_pumped_storage_mw
        color: deepskyblue
        opacity: 0.8
        stroke_width: 2
        name: Gravity
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: raw
      - entity: sensor.national_grid_grid_generation_other_mw
        color: orange
        opacity: 0.8
        stroke_width: 2
        name: Other
        data_generator: ''
        type: line
        show:
          legend_value: false
          in_header: raw
    yaxis:
      - min: 0
        max: ~35000
        decimals: 0

[JRascagneres]

@ando2040 This is sweet. Might need to add a community contributions thing somewhere