Example Dashboard‐components

Threshold chart:

Will render a chart that shows the running threshold barriers (for start/stop of charging) and the continous calculated threshold in percentage of your registred peak.

type: custom:apexcharts-card
apex_config:
  chart:
    height: 300px
header:
  show: true
  title: Threshold
  show_states: false
  colorize_states: true
yaxis:
  - id: first
    decimals: 0
    show: true
    apex_config:
      tickAmount: 10
    min: 0
    max: ~100
series:
  - entity: sensor.peaqev_threshold
    extend_to: now
    color: '#EAAA44'
    stroke_width: 1
    type: area
    opacity: 0.1
    yaxis_id: first
    name: current percentage
  - entity: sensor.peaqev_threshold
    attribute: start_threshold
    stroke_width: 1
    color: '#55aa00'
    extend_to: now
    opacity: 0.8
    yaxis_id: first
    name: start
  - entity: sensor.peaqev_threshold
    attribute: stop_threshold
    stroke_width: 1
    color: '#aa1200'
    opacity: 0.8
    yaxis_id: first
    extend_to: now
    name: stop
graph_span: 1h
span:
  start: hour
  offset: +5s
update_interval: 10s

Price-consumption chart:

Will render a "live-update" of your daily consumption and layover the daily prices from Nordpool.

type: custom:apexcharts-card
apex_config:
  chart:
    height: 300px
  legend:
    show: false
yaxis:
  - id: first
    decimals: 1
    min: ~0
    max: 3
    show: false
    opposite: true
  - id: second
    min: 0
    max: 2
    decimals: 1
    opposite: false
    show: true
    apex_config:
      tickAmount: 4
experimental:
  color_threshold: true
header:
  show: false
  show_states: false
  colorize_states: false
series:
  - entity: sensor.nordpool_kwh_se3_sek_3_10_025
    stroke_width: 0
    color: orange
    type: area
    curve: stepline
    yaxis_id: first
    name: prices
    opacity: 0.5
    data_generator: |
      return (entity.attributes.today.map((val, idx) => {
        return [new Date(new Date().setHours(idx,0,0)), val];
      }));
    show:
      legend_value: false
    color_threshold:
      - value: -0.01
        color: '#B2F3ED'
      - value: 0.25
        color: '#BAF5CA'
      - value: 0.5
        color: '#F4E2A2'
      - value: 1
        color: '#F5DD89'
      - value: 2
        color: '#F59596'
      - value: 3
        color: '#F54844'
      - value: 10
        color: black
  - entity: sensor.peaqev_energy_including_car_hourly
    stroke_width: 1
    color: blue
    yaxis_id: second
    name: averages
    type: line
    curve: stepline
    transform: return x;
    unit: kWh
    extend_to: now
    show:
      legend_value: false
    group_by:
      duration: 60min
      func: max
now:
  show: true
graph_span: 24h
span:
  start: day
update_interval: 60s