Energi_data_service Apex ny

type: vertical-stack
cards:
  - square: false
    columns: 3
    type: grid
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style: >
            ha-card {
              --ha-card-border-radius: 50px;
              --ha-card-background: rgba(222, 260, 260, 0.02);
              --icon-symbol-size: 40px;
            }

            ha-state-icon {

            animation: bounce 2.5s cubic-bezier(0.30, 2.40, 0.85, 2.50)
            infinite;
             transform-origin: 50% 0%;
            }

            @keyframes bounce {

            0%, 100% { transform: translateY(0px) scaleY(0.9); }

            80% { transform: translateY(3px); }

            }

            mushroom-shape-icon {
             --shape-color: transparent !important;
             --shape-color-disabled: transparent !important;
            }
        primary: '  Laveste'
        secondary: >-
          I dag: {{ state_attr("sensor.energi_data_service","today_min").price |
          round(2) }} kr

          I morgen: {% if state_attr("sensor.energi_data_service",
          "tomorrow_valid") -%}
            {{ state_attr("sensor.energi_data_service","tomorrow_min").price | round(2) }} kr
          {%- else -%}

          N/A

          {%- endif %}
        icon: mdi:transfer-down
        multiline_secondary: true
        fill_container: false
        layout: vertical
        icon_color: green
      - type: custom:mushroom-template-card
        card_mod:
          style: >
            ha-card {
              --ha-card-border-radius: 50px;
              --ha-card-background: rgba(222, 260, 260, 0.02);
              --icon-symbol-size: 40px;
            }

            ha-state-icon {

            animation: bounce 2.5s cubic-bezier(0.30, 2.40, 0.85, 2.50)
            infinite;
             transform-origin: 50% 100%;
            }

            @keyframes bounce {

            0%, 100% { transform: translateY(0px) scaleY(0.9); }

            80% { transform: translateY(-3px); }

            }

            mushroom-shape-icon {
             --shape-color: transparent !important;
             --shape-color-disabled: transparent !important;
            }
        primary: Højeste
        secondary: >-
          I dag: {{ state_attr("sensor.energi_data_service","today_max").price |
          round(2) }} kr

          I morgen: {% if state_attr("sensor.energi_data_service",
          "tomorrow_valid") -%}
            {{ state_attr("sensor.energi_data_service","tomorrow_max").price | round(2) }} kr
          {%- else -%}
            N/A
          {%- endif %}
        icon: mdi:transfer-up
        multiline_secondary: true
        fill_container: true
        layout: vertical
        icon_color: red
      - type: custom:mushroom-template-card
        card_mod:
          style: |
            ha-card {
              --ha-card-border-radius: 50px;
              --ha-card-background: rgba(222, 260, 260, 0.02);
              --icon-symbol-size: 40px;
            }
            mushroom-shape-icon {
             --shape-color: transparent !important;
             --shape-color-disabled: transparent !important;
            }
        primary: Pris
        secondary: >-
          Nu: {% set current_price = states('sensor.energi_data_service') %}{{
          current_price | round(2) }} kr

          Total: {{ states('sensor.dagens_pris_for_kobt_strom') | round(2) }} kr
        icon: mdi:cash-multiple
        multiline_secondary: true
        fill_container: true
        layout: vertical
        icon_color: blue
  - type: custom:apexcharts-card
    card_mod:
      style: |
        ha-card {
        --ha-card-border-radius: 20px;
        --ha-card-background: rgba(222, 260, 260, 0.02);
        }
    show:
      last_updated: false
    experimental:
      color_threshold: true
    apex_config:
      chart:
        height: 320px
      xaxis:
        type: datetime
        labels:
          datetimeFormatter:
            hour: H
        tickPlacement: 'on'
    graph_span: 28h
    span:
      start: hour
      offset: '-1h'
    now:
      show: true
      label: Nu
    header:
      title: El-priser pr. time(Kr./kWh)+Abn.(83,02kr./mdr.)
      show: true
      show_states: true
      colorize_states: true
    yaxis:
      - min: ~0
        max: '|+0.0|'
        decimals: 2
        apex_config:
          max: auto
          tickAmount: 5
    series:
      - entity: sensor.energi_data_service
        color_threshold:
          - value: -1
            color: darkgreen
            opacity: 0.7
          - value: 1
            color: lightgreen
          - value: 2
            color: green
            opacity: 0.7
          - value: 2.5
            color: red
          - value: 3
            color: darkred
        name: Lige nu
        type: area
        show:
          in_header: false
          header_color_threshold: true
          in_chart: true
        stroke_width: 2
        float_precision: 2
        unit: ' kr'
        data_generator: |
          var today = entity.attributes.raw_today.map((start, index) => {
            return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
          });

          var extradata = entity.attributes.forecast.map((start, index) => {
            return [new Date(start["hour"]).getTime(), entity.attributes.forecast[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.concat(extradata)