Apexcard elpriser

type: custom:config-template-card
entities:
  - sensor.stromligning_current_price
  - sensor.historic_energy_price_percentiles
config_templates: default
variables:
  max_price_threshold: |
    () => {
      return states['sensor.historic_energy_price_percentiles'].attributes['99th']
    }
  get_yellow_threshold: |
    () => {
      return states['sensor.historic_energy_price_percentiles'].attributes['25th']
    }
  get_orange_threshold: |
    () => {
      return states['sensor.historic_energy_price_percentiles'].attributes['75th']
    }
  get_darkred_threshold: |
    () => {
      return states['sensor.historic_energy_price_percentiles'].attributes['95th']
    }
card:
  type: custom:apexcharts-card
  graph_span: 47h
  span:
    end: day
    offset: +23h
  apex_config:
    chart:
      height: 200px
    grid:
      show: true
      borderColor: rgb(158, 158, 158)
      strokeDashArray: 2
    annotations:
      position: back
      yaxis:
        - "y": 0
          y2: ${ get_yellow_threshold() }
          fillColor: rgb(76, 175, 80)
          strokeDashArray: 0
          borderColor: "#00000000"
        - "y": ${ get_yellow_threshold() }
          y2: ${ get_orange_threshold() }
          fillColor: rgb(255, 193, 7)
          strokeDashArray: 0
          borderColor: "#00000000"
        - "y": ${ get_orange_threshold() }
          y2: ${ get_darkred_threshold() }
          fillColor: rgb(255, 152, 0)
          strokeDashArray: 0
          borderColor: "#00000000"
        - "y": ${ get_darkred_threshold() }
          y2: ${ max_price_threshold() }
          fillColor: rgb(244, 67, 54)
          strokeDashArray: 0
          borderColor: "#00000000"
        - "y": ${ max_price_threshold() }
          y2: 100
          fillColor: rgb(255, 0, 0)
          strokeDashArray: 0
          borderColor: "#00000000"
  header:
    show: true
    title: Elpriser pr. time (DKK/kWh)
    show_states: true
    colorize_states: true
  now:
    label: Nu
    show: true
    color: black
  yaxis:
    - min: "|-0.5|"
      max: "|+0.5|"
      apex_config:
        tickAmount: 12
        forceNiceScale: false
        decimalsInFloat: 1
  series:
    - name: Nu
      entity: sensor.energi_data_service
      color: rgb(33, 150, 243)
      float_precision: 2
      data_generator: |
        return [[new Date(), entity.state]]
      show:
        in_chart: false
    - name: Current
      entity: sensor.energi_data_service
      stroke_width: 3
      float_precision: 2
      type: line
      color: rgb(33, 150, 243)
      extend_to: false
      show:
        in_header: false
      data_generator: |
        var today = entity.attributes.raw_today.map((start, index) => {
          return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
        });
        if (entity.attributes.tomorrow_valid) {
          var tomorrow = entity.attributes.raw_tomorrow.map((start, index) => {
            return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
          });

          var data = today.concat(tomorrow);
        } else {
          var data = today
        }
        return data;