title: El
path: el
type: custom:masonry-layout
layout:
  width: 300
  max_cols: 1
cards:
  - type: custom:decluttering-card
    template: subpanel_title_template
    variables:
      - title: El
      - alignment: start

  - type: energy-distribution
    link_dashboard: true

  - type: horizontal-stack
    cards:
      - type: gauge
        name: Forbrug
        entity: sensor.elmaler_power
        min: 0
        max: 9000
        needle: true
        segments:
          - from: 0
            color: green
          - from: 1000
            color: darkgreen
          - from: 3000
            color: yellow
          - from: 5000
            color: orange
          - from: 7000
            color: red

      - type: gauge
        entity: sensor.steca_inverter_10_0_1_4_ac_power
        name: Produktion
        min: 0
        max: 1100
        needle: true
        segments:
          - from: 0
            color: red
          - from: 100
            color: orange
          - from: 300
            color: yellow
          - from: 600
            color: green

  - type: custom:config-template-card
    entities:
      - sensor.energi_data_service
      - 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: 48h
      span:
        end: day
        offset: +24h
      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: 4
            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"]];
              });
              today = today.concat(tomorrow)
            }

            return today;