Data in one tabbed card only shows up after navigating to different dashboard and back again

[Aephir]

This issue is, for me, when using the tabbed card in combination with apexcharts-card.

No data will appear on the graph until navigating to a different dasshboard and back again. As soon as I force-refresh, the data disappears again.

The same apexchart outside of a tabbed-card does not show this behavior, but neither does a sankey-chart inside the same tabbed card.

I also created an issue at the apexchart-card repo, as I first thought it was "just" about the apexchart. I have given some more details there.

This is the lovelace card in question:

type: custom:tabbed-card
options: {}
tabs:
  - label: Electricity prices
    card:
      type: custom:apexcharts-card
      header:
        show: true
        title: Electricity Prices (Total)
        show_states: false
      graph_span: 2d
      now:
        show: true
        color: red
      span:
        start: day
      series:
        - entity: sensor.electricity_price_total
          name: Total
          data_generator: |
            return entity.attributes.total_today.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
        - entity: sensor.electricity_price_total
          name: Total
          data_generator: |
            return entity.attributes.total_tomorrow.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
        - entity: sensor.nordpool_kwh_dk2_dkk_3_095_0
          name: Raw
          data_generator: |
            return entity.attributes.raw_today.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
        - entity: sensor.nordpool_kwh_dk2_dkk_3_095_0
          name: Raw
          data_generator: |
            return entity.attributes.raw_tomorrow.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
      yaxis:
        - min: 0
    attributes:
      icon: mdi:currency-eur
      show_name: false
      show_icon: true
      show_state: false
  - label: Electricity use
    card:
      type: custom:sankey-chart
      show_names: true
      sections:
        - entities:
            - entity_id: sensor.home_power_consumption
              name: Total
              children:
                - sensor.dishwasher_power_consumption_w
                - sensor.dryer_power_w
                - sensor.openevse_current_power_usage
                - sensor.basement_media_power_electric_consumption_w
                - sensor.office_electric_consumption_w
                - sensor.shed_power_electric_consumption_w
                - sensor.wemo_outdoor_current_power
                - sensor.all_lights_power_w
                - sensor.all_speakers_power_w
                - sensor.all_switches_power_w
                - sensor.server_power_w
        - entities:
            - sensor.dishwasher_power_consumption_w
            - sensor.dryer_power_w
            - sensor.openevse_current_power_usage
            - sensor.basement_media_power_electric_consumption_w
            - sensor.office_electric_consumption_w
            - sensor.shed_power_electric_consumption_w
            - sensor.wemo_outdoor_current_power
            - sensor.all_lights_power_w
            - sensor.all_speakers_power_w
            - sensor.all_switches_power_w
            - sensor.server_power_w
    attributes:
      icon: mdi:lightning-bolt
      show_name: false
      show_icon: true
      show_state: false
  - label: Electricity chart
    card:
      type: vertical-stack
      cards:
        - type: gauge
          entity: sensor.home_power_consumption
          min: 0
          name: Current Electricity Usage
          max: 5000
          needle: true
          severity:
            green: 0
            yellow: 750
            red: 2500
        - type: custom:config-template-card
          variables:
            - entity: sensor.openevse_current_power_usage
              name: Car Charger
            - entity: sensor.all_lights_power_w
              name: Lights
            - entity: sensor.all_speakers_power_w
              name: Speakers
            - entity: sensor.all_switches_power_w
              name: Switches
            - entity: sensor.basement_media_power_electric_consumption_w
              name: Basement Media
            - entity: sensor.office_electric_consumption_w
              name: Office
            - entity: sensor.shed_power_electric_consumption_w
              name: Shed
            - entity: sensor.dishwasher_power_consumption_w
              name: Dishwasher
            - entity: sensor.dryer_power_w
              name: Dryer
            - entity: sensor.espresso_electric_consumption_w
              name: Espresso
            - entity: sensor.wemo_outdoor_current_power
              name: Chicken Coop
            - entity: sensor.server_power_w
              name: Server & Network
          entities:
            - sensor.openevse_current_power_usage
            - sensor.all_lights_power_w
            - sensor.all_speakers_power_w
            - sensor.all_switches_power_w
            - sensor.basement_media_power_electric_consumption_w
            - sensor.office_electric_consumption_w
            - sensor.dishwasher_power_consumption_w
            - sensor.dryer_power_w
            - sensor.espresso_electric_consumption_w
            - sensor.shed_power_electric_consumption_w
            - sensor.wemo_outdoor_current_power
            - sensor.server_power_w
          element:
            type: custom:bar-card
            entities: >-
              ${vars.filter(v => states[v.entity].state > 0).sort((v1,v2) =>
              states[v2.entity].state-states[v1.entity].state)}
            direction: right
            entity_row: true
            min: 0
            max: ${ Math.max(...vars.map(v => states[v.entity].state))}
            height: 20px
            stack: vertical
            decimal: 1
            icon: mdi:flash
            positions:
              icon: 'off'
              indicator: outside
              name: inside
              value: inside
            severity:
              - color: '#a1a1a18a'
                from: 0
                to: 2
              - color: '#3ea8328a'
                from: 2
                to: 10
              - color: '#85a8328a'
                from: 10
                to: 50
              - color: '#a8a4328a'
                from: 50
                to: 200
              - color: '#a887328a'
                from: 200
                to: 500
              - color: '#a867328a'
                from: 500
                to: 1000
              - color: '#a846328a'
                from: 1000
                to: 3000
              - color: '#a832328a'
                from: 3000
                to: 10000
            style: "states > * {\n  margin: 1px;\n}\nbar-card-name,\nbar-card-value {\n  font-size: 0.9rem;\n  color: '#ffffffaa';\n  font-weight: bold;\n}\nbar-card-value\t{\n  font-weight: bolder;\n}\nbar-card-indicator {\n  margin-top: 4px;\n  transform: scaleY(-1);\n}"
    attributes:
      icon: mdi:gauge-low
      show_name: false
      show_icon: true
      show_state: false

See example where:

1. Load the dashboard (no graph)
2. Navigate to the Energy dahsbaord and back again (graph appears)
3. Force reload (no graph)
4. Navigate to a different dashboard and back (graph appears again)
   

EDIT: Upon force reload, I see this in the browser console:

Loading failed for the module with source “https://hass.REDACTED.DOMAIN/config/www/community/lovelace-card-mod/card-mod.js”. [0:1:8883](https://hass.REDACTED.DOMAIN/lovelace-mobile/0)
Loading module from “https://hass.REDACTED.DOMAIN/config/www/community/lovelace-card-mod/card-mod.js” was blocked because of a disallowed MIME type (“text/html”).
[0](https://hass.REDACTED.DOMAIN/lovelace-mobile/0)
Uncaught (in promise) TypeError: error loading dynamically imported module: https://hass.REDACTED.DOMAIN/config/www/community/lovelace-card-mod/card-mod.js

In the issue in the apexcharts-card, there was a suggestion for where the error occurs, perhaps this is helpful?

[kinghat]

hi, is this still an issue for you? what version of the tabbed-card are you running and can you provide minimal reproducible config? also what browser and devices is this occurring on?

edit: if it is still an issue for you can you test the most recent alpha available in hacs or here: https://github.com/kinghat/tabbed-card/releases/tag/v0.4.0-alpha.1 as there was rendering work done there.

[Aephir]

Hi, this is still an issue. I tested a bit though, and I only observe this on my phone (Android) and on my laptop using Firefox browser. I don't see it on my girlfriend's phone (iOS) or when using a different browser on my laptop (I tested both Safari and Chrome, and didn't see the issue).

Guess I should have tested more browser, I just assumed it was universal since it was both on my phone and computer.

If it's still relevant, I'm using the tabbed card v0.3.2. Were any of the 0.4.0-alpha.1 specific for anything Android/Firefox?

This works:

Details

type: custom:apexcharts-card
header:
  show: true
  title: Electricity Prices (Total)
  show_states: false
graph_span: 2d
now:
  show: true
  color: red
span:
  start: day
series:
  - entity: sensor.electricity_price_total
    name: Total
    data_generator: |
      return entity.attributes.total_today.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
    type: column
    show:
      legend_value: false
      in_header: false
  - entity: sensor.electricity_price_total
    name: Total
    data_generator: |
      return entity.attributes.total_tomorrow.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
    type: column
    show:
      legend_value: false
      in_header: false
  - entity: sensor.nordpool_kwh_dk2_dkk_3_095_0
    name: Raw
    data_generator: |
      return entity.attributes.raw_today.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
    type: column
    show:
      legend_value: false
      in_header: false
  - entity: sensor.nordpool_kwh_dk2_dkk_3_095_0
    name: Raw
    data_generator: |
      return entity.attributes.raw_tomorrow.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
    type: column
    show:
      legend_value: false
      in_header: false
yaxis:
  - min: 0

This (same chart, but in the tabbed-card) does not:

Details

type: custom:tabbed-card
options: {}
tabs:
  - label: Electricity prices
    card:
      type: custom:apexcharts-card
      header:
        show: true
        title: Electricity Prices (Total)
        show_states: false
      graph_span: 2d
      now:
        show: true
        color: red
      span:
        start: day
      series:
        - entity: sensor.electricity_price_total
          name: Total
          data_generator: |
            return entity.attributes.total_today.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
        - entity: sensor.electricity_price_total
          name: Total
          data_generator: |
            return entity.attributes.total_tomorrow.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
        - entity: sensor.nordpool_kwh_dk2_dkk_3_095_0
          name: Raw
          data_generator: |
            return entity.attributes.raw_today.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
        - entity: sensor.nordpool_kwh_dk2_dkk_3_095_0
          name: Raw
          data_generator: |
            return entity.attributes.raw_tomorrow.map((entry) => {
              return [new Date(entry.start), entry.value];
            });
          type: column
          show:
            legend_value: false
            in_header: false
      yaxis:
        - min: 0
    attributes:
      icon: mdi:currency-eur
      show_name: false
      show_icon: true
      show_state: false

[kinghat]

Hi, this is still an issue. I tested a bit though, and I only observe this on my phone (Android) and on my laptop using Firefox browser. I don't see it on my girlfriend's phone (iOS) or when using a different browser on my laptop (I tested both Safari and Chrome, and didn't see the issue).

Guess I should have tested more browser, I just assumed it was universal since it was both on my phone and computer.

might try clearing the cache on those browsers/apps and try again.

If it's still relevant, I'm using the tabbed card v0.3.2. Were any of the 0.4.0-alpha.1 specific for anything Android/Firefox?

yes there are changes that would affect the way the card is loaded. please test the alpha. EDIT: wait to test the alpha till i push a fix for loading the card which was fixed in 0.3.2: #117

This (same chart, but in the tabbed-card) does not:

can you fix this formatting?

[Aephir]

might try clearing the cache on those browsers/apps and try again.

Done, but unfortunately didn't help.

yes there are changes that would affect the way the card is loaded. please test the alpha.

Done, but I'm not able to see whether the issue is fixed in v0.4.0-alpha.1, because the entirety of the "tabbed" card is broken - icons are huge and no longer reside as selectors for tabs of the cards they are supposed to (in fact, there are no "tabs" anymore, only the HUGE icons for each tab):

In this version where there are no longer tabs, the graph renders correctly (but it also did outside of the tabbed-card before, so can't say whether the changes in 0.4.0-alpha.1 helped or not). I'll revert to 0.3.2 for now.

can you fix this formatting?

Yes, sorry, fixed.

[kinghat]

Done, but I'm not able to see whether the issue is fixed in v0.4.0-alpha.1, because the entirety of the "tabbed" card is broken - icons are huge and no longer reside as selectors for tabs of the cards they are supposed to (in fact, there are no "tabs" anymore, only the HUGE icons for each tab):

In this version where there are no longer tabs, the graph renders correctly (but it also did outside of the tabbed-card before, so can't say whether the changes in 0.4.0-alpha.1 helped or not). I'll revert to 0.3.2 for now.

ya i edited the comment to note that i havent released an update for the alpha that fixes a breaking change in ha. once i push a release to that i will post back here for you to try that.

[kinghat]

@Aephir i just pushed the cherry-picked fix for the alpha release: https://github.com/kinghat/tabbed-card/releases/tag/v0.4.0-alpha.2. could you update to that when its available on hacs and test please?

[Aephir]

A quick check at the breakfast table suggests that it works, both in mobile app and in Firefox on macOS.

Thanks!

[Tommywelle]

I also have this problem on my Android companion app. The chips on my first tab wont load. 2nd and 3rd do load.

[kinghat]

I also have this problem on my Android companion app. The chips on my first tab wont load. 2nd and 3rd do load.

what version of the card are you running? is the android app updated to latest version and have you cleared its app cache?

[tomg1970]

I don't know if this is the same problem. For me it looks like this when I am on the page where there is a tabbed card and in edit mode.

[ildar170975]

@tomg1970
Get rid of card-mod code and test again

[tomg1970]

Get rid of card-mod code and test again
Yes, you are right. It's the card-mode "z-index"