Cover Card Chart

- type: 'custom:button-card'
  view_layout:
    grid-area: 'r1'
  entity: sensor.price_level
  name: >
    [[[
      return `<span><b>${states['sensor.electricity_price_syrenvagen_34_ore'].state}</b> <sup style="font-size:0.6em">öre/kWh</sup></span>`
    ]]]
  show_name: true
  show_icon: false
  show_label: false
  show_state: false
  tap_action:
    actione: none
  styles:
    grid:
      - grid-template-areas: '"n" "item1"'
      - grid-template-rows: 2fr 1fr
      - row-gap: 12px
    card:
      - height: 100%
      - border-radius: 8px
      - box-shadow: none
      - background: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,0,0,0) 100%), bottom / cover no-repeat url("/local/images/card-energy2.jpeg")
      - padding: 0 1em
    name:
      - color: '#fff'
      - text-align: left
      - font-size: 1.6em
      #- font-weight: bold
      - justify-self: start
      - align-self: end
      - z-index: 2
    custom_fields:
      item1:
        - color: '#fff'
        - text-align: left
        - font-size: 1em
        - font-weight: normal
        - justify-self: start
        - align-self: start
        - overflow-wrap: anywhere
        - width: 75%
        - z-index: 2
      chart:
        - position: absolute
        - width: 100%
        - margin: 0 auto
        - opacity: 0.5
        - z-index: 1
  custom_fields:
    item1: >
      [[[
        if (states['sensor.price_level'].state == "VERY_CHEAP")
          return '<span>Elpriset är just nu <b>väldigt billigt</b>.<br>Perfekt att köra igång tvätt- och diskmaskin.</span>';

        else if (states['sensor.price_level'].state == "CHEAP")
          return '<span>Elpriset är just nu <b>billigt</b>.<br>Kör på som vanligt!</span>';

        else if (states['sensor.price_level'].state == "NORMAL")
          return '<span>Elpriset är just nu <b>normalt</b>,<br>men det skadar inte att spara.</span>';

        else if (states['sensor.price_level'].state == "EXPENSIVE")
          return '<span>Elpriset är just nu <b>relativt högt</b>,<br>så tänk till lite extra.</span>';

        return '<span>Elpriset är just nu <b>väldigt högt</b>.<br>Bäst att stänga ner helt, va?</span>';
      ]]]

    chart:
      card:
        type: custom:apexcharts-card
        card_mod:
          style: |
            ha-card {
              #margin-bottom: 28px;
              ha-card-background: none;
              box-shadow: none;
              border-radius: 0px;
              padding: 0px;
              margin: 0px;
              -webkit-mask-image: -webkit-gradient(linear, left center, 25% center, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));

        view_layout:
          grid-area: 'r7'
        layout: minimal
        graph_span: 2d
        span:
          start: day
        all_series_config:
          stroke_width: 4
        header:
          title: Price (SEK) vs Consumption (kWh)
          show: false
        now:
          show: false
          label: Now
        apex_config:

          legend:
            show: false
        series:
          - entity: sensor.nordpool_kwh_se3_sek_3_10_0 #displays current value in header
            name: Just nu
            show:
              in_chart: false
          - entity: sensor.nordpool_kwh_se3_sek_3_10_0
            name: Today
            type: column
            color: '#d91084'
            data_generator: |
              return entity.attributes.raw_today.map((entry) => {
                return [new Date(entry.start), entry.value];
              });
            show:
              legend_value: false
              in_header: false
          - entity: sensor.nordpool_kwh_se3_sek_3_10_0
            name: Tomorrow
            type: column
            color: '#f0129275'
            data_generator: |
              return entity.attributes.raw_tomorrow.map((entry) => {
                return [new Date(entry.start), entry.value];
              });
            show:
              legend_value: false
              in_header: false