type: custom:apexcharts-card
apex_config:
  chart:
    animations:
      enabled: false
  annotations:
    xaxis:
      - x: EVAL:new Date(new Date().setHours(24, 0, 0, 0))
        borderColor: "#ff4081"
        strokeDashArray: 0
        label:
          text: Midnatt
          style:
            color: "#ffffff"
            background: "#ff4081"
  grid:
    yaxis:
      lines:
        show: true
    xaxis:
      lines:
        show: true
    strokeDashArray: 0.5
    strokeWidth: 0.5
  tooltip:
    enabled: true
    x:
      show: true
      formatter: |
        EVAL:(val) => {
          const d = new Date(val);
          return d.toLocaleString([], {hour: '2-digit', minute:'2-digit'});
        }
    "y":
      formatter: |
        EVAL:(val) => (Number(val).toFixed(2) + ' kr/kWh')
  dataLabels:
    enabled: false
  legend:
    show: false
  xaxis:
    type: datetime
    tickAmount: 8
    labels:
      rotate: 0
      formatter: |
        EVAL:(value) => {
          const d = new Date(value);
          const h = d.getHours();
          return [0, 6, 12, 18].includes(h) ? ('0' + h).slice(-2) + ' ' : '';
        }
  yaxis:
    forceNiceScale: true
    decimalsInFloat: 2
    labels:
      formatter: |
        EVAL:(val) => (Number(val).toFixed(2) + ' kr')
  plotOptions:
    bar:
      grouped: false
      columnWidth: 100%
  fill:
    type: solid
  stroke:
    show: false
  colors:
    - "#888888"
now:
  show: true
  label: Nu
header:
  show: true
  title: El-priser idag och imorgon
  show_states: false
graph_span: 2d
span:
  start: day
series:
  - entity: sensor.nordpool_YOUR_VALUE_HERE
    name: Idag
    type: column
    data_generator: >
      const raw = entity.attributes.raw_today;

      const arr = Array.isArray(raw) ? raw : (typeof raw === 'string' ?
      JSON.parse(raw) : []);


      // Diskret palett (WCAG-vänliga kulörer på mörkt tema)

      const colorFor = (v) => {
        if (isNaN(v))   return '#888888';
        if (v < 0)      return '#ffc0cb'; // pink
        if (v < 0.50)   return '#add8e6'; // lightblue
        if (v < 1.00)   return '#00ffff'; // cyan
        if (v < 2.00)   return '#90ee90'; // lightgreen
        if (v < 3.00)   return '#ffff00'; // yellow
        if (v < 4.00)   return '#ffd700'; // gold
        if (v < 5.00)   return '#ffa500'; // orange
        return '#ff0000';                 // red
      };


      return arr.map((e) => {
        const val = Number(e.value);
        const time = new Date(e.start);
        if (Number.isNaN(val) || !time) return null;
        return { x: time, y: val, fillColor: colorFor(val) };
      }).filter(Boolean);
    show:
      legend_value: false
      in_header: false
      extremas: false
      datalabels: false
    extend_to: end
  - entity: sensor.nordpool_YOUR_VALUE_HERE
    name: Imorgon
    type: column
    data_generator: >
      const raw = entity.attributes.raw_tomorrow;

      const arr = Array.isArray(raw) ? raw : (typeof raw === 'string' ?
      JSON.parse(raw) : []);


      const dim = (hex, alpha=0.75) => {
        // konvertera HEX till RGBA med alfa för att dimma färgen
        const h = hex.replace('#','');
        const r = parseInt(h.substring(0,2),16);
        const g = parseInt(h.substring(2,4),16);
        const b = parseInt(h.substring(4,6),16);
        return `rgba(${r},${g},${b},${alpha})`;
      };


      const colorForBase = (v) => {
        if (isNaN(v))   return '#999999';
        if (v < 0)      return '#ffc0cb'; // pink
        if (v < 0.50)   return '#add8e6'; // lightblue
        if (v < 1.00)   return '#00ffff'; // cyan
        if (v < 2.00)   return '#90ee90'; // lightgreen
        if (v < 3.00)   return '#ffff00'; // yellow
        if (v < 4.00)   return '#ffd700'; // gold
        if (v < 5.00)   return '#ffa500'; // orange
        return '#ff0000';                 // red
      };


      return arr.map((e) => {
        const val = Number(e.value);
        const time = new Date(e.start);
        if (Number.isNaN(val) || !time) return null;
        return { x: time, y: val, fillColor: dim(colorForBase(val), 0.70) }; // lite blekare
      }).filter(Boolean);
    show:
      legend_value: false
      in_header: false
      extremas: false
      datalabels: false
    extend_to: end