Config-template-card

[maxym]

Hello.

I have a problem with apex chart augmented by config-template-card .

Sometimes, the card stopped working, showing a refresh circle, while all graphs disappeared.

The devconsole mentions apexcharts, but after if I remove config-template-card, leaving apex chart alone, it doesn’t hang. Here are 2 versions of the chart, with and without the use of a template card, showing that the latter is still working.

Is there anything known that might cause this issue? What can I do to debug it better and find/fix the rootcause?

Here is the code of the card that uses template card

type: custom:config-template-card
variables:
  startCharging: |
    (() => {
      const s = states['sensor.pv_ctrl_cheapest_hours']?.attributes?.data?.start;
      if (!s || s === 'unknown' || s === 'unavailable' || s === 'undefined') return new Date().setHours(0,0,0,0);
      return new Date(s).getTime();
    })()
  endCharging: |
    (() => {
      const s = states['sensor.pv_ctrl_cheapest_hours']?.attributes?.data?.end;
      if (!s || s === 'unknown' || s === 'unavailable' || s === 'undefined') return new Date().setHours(0,0,0,0);
      return new Date(s).getTime();
    })()
  startDischargingEvening: |
    (() => {
      const s = states['sensor.pv_ctrl_most_expensive_hours_evening']?.attributes?.data?.start;
      if (!s || s === 'unknown' || s === 'unavailable' || s === 'undefined') return new Date().setHours(0,0,0,0);
      return new Date(s).getTime();
    })()
  endDischargingEvening: |
    (() => {
      const s = states['sensor.pv_ctrl_most_expensive_hours_evening']?.attributes?.data?.end;
      if (!s || s === 'unknown' || s === 'unavailable' || s === 'undefined') return new Date().setHours(0,0,0,0);
      return new Date(s).getTime();
    })()
  startDischargingMorning: |
    (() => {
      const s = states['sensor.pv_ctrl_most_expensive_hours_morning']?.attributes?.data?.start;
      if (!s || s === 'unknown' || s === 'unavailable' || s === 'undefined') return new Date().setHours(0,0,0,0);
      return new Date(s).getTime();
    })()
  endDischargingMorning: |
    (() => {
      const s = states['sensor.pv_ctrl_most_expensive_hours_morning']?.attributes?.data?.end;
      if (!s || s === 'unknown' || s === 'unavailable' || s === 'undefined') return new Date().setHours(0,0,0,0);
      return new Date(s).getTime();
    })()
  min_export_price: |
    (() => { 
      const s =  states['input_number.pv_ctrl_min_export_price']?.state;
      if (!s || s === 'unknown' || s === 'unavailable' || s === 'undefined') return 0;
      return Number(s);
    })()  
entities:
  - sensor.pv_ctrl_cheapest_hours
  - sensor.pv_ctrl_most_expensive_hours_morning
  - sensor.pv_ctrl_most_expensive_hours_evening
  - input_number.pv_ctrl_min_export_price
card:
  type: custom:apexcharts-card
  update_interval: 1min
  header:
    show: true
    title: Electricity spot price
    show_states: true
    colorize_states: true
  graph_span: 48h
  span:
    start: day
  now:
    show: true
    label: Now
    color: "#448866"
  series:
    - entity: sensor.pv_ctrl_spot_electricity_prices
      name: Current spot price
      show:
        in_chart: false
        in_header: true
        name_in_header: true
    - entity: sensor.pv_ctrl_spot_electricity_prices
      name: Spot price
      type: line
      data_generator: |
        const src = hass.states['sensor.pv_ctrl_spot_electricity_prices'];
        if (!src || !src.attributes.data) return [];

        return src.attributes.data.map((item) => {
          return [
            new Date(item.time).getTime(),
            item.price
          ];
        });
      stroke_width: 1
      curve: stepline
      show:
        in_chart: true
        in_header: false
    - entity: sensor.sql_pv_earnings_today
      transform: return hass.states['sensor.sql_pv_earnings_today'].attributes.avoided;
      name: Avoided
      show:
        in_chart: false
        in_header: true
    - entity: sensor.sql_pv_earnings_today
      transform: return hass.states['sensor.sql_pv_earnings_today'].attributes.sold;
      name: Sold
      show:
        in_chart: false
        in_header: true
    - entity: sensor.sql_pv_earnings_today
      transform: return hass.states['sensor.sql_pv_earnings_today'].attributes.purchased;
      name: Purchased
      show:
        in_chart: false
        in_header: true
  apex_config:
    grid:
      borderColor: rgba(118,128,128, 0.2)
    xaxis:
      type: datetime
    annotations:
      xaxis:
        - x: EVAL:new Date().setHours(24,0,0,0)
          borderColor: "#888888"
          strokeDashArray: 1
          label:
            text: Tomorrow
            borderWidth: 0
            style:
              background: DimGrey
              color: white
              border: 0px
        - x: ${startDischargingMorning}
          x2: ${endDischargingMorning}
          fillColor: var(--purple-color)
          opacity: 0.2
        - x: ${startDischargingEvening}
          x2: ${endDischargingEvening}
          fillColor: var(--purple-color)
          opacity: 0.2
        - x: ${startCharging}
          x2: ${endCharging}
          fillColor: "#B3F7CA"
          opacity: 0.3
      yaxis:
        - "y": ${min_export_price}
          borderColor: "#00AA00"
          strokeDashArray: 4
          label:
            text: ${min_export_price + ' threshold'}
            borderWidth: 0
            style:
              background: DimGrey
              color: white