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:

```yaml 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:

``` 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:

``` 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: https://github.com/kinghat/tabbed-card/pull/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"

[stomko11]

I am experiencing similar with weather card, regardless if HA Companion app (android) or browser. Basically to simulate that, i added just weather card in tabbed card, and the other card next to it that is the same weather card. While weather card gets always displayed, the one in the tabbed card fails to load ocasionally. Few more refreshes and it is back.

Example:

refreshed twice and got this:

Code is simple: Weather card only:

type: custom:weather-chart-card
entity: weather.domov
show_time: true
show_date: true
humid: sensor.humidity
winddir: sensor.ecowitt_winddir_word
windspeed: sensor.wind_speed
feels_like: sensor.home_real_feel
show_feels_like: true
press: sensor.absolute_pressure
temp: sensor.outdoor_temperature
units:
  speed: km/h
  pressure: ''
forecast:
  precipitation_type: ''
  style: style2
  type: daily
  show_wind_forecast: false
show_current_condition: true
show_attributes: true
show_humidity: true
show_pressure: true
icons_size: '38'
animated_icons: true
icon_style: style2
current_temp_size: '35'

And the same wrapped in tabbed card:

type: custom:tabbed-card
options: {}
tabs:
  - attributes:
      icon: mdi:weather-sunny
    card:
      type: custom:weather-chart-card
      entity: weather.domov
      show_time: true
      show_date: true
      humid: sensor.humidity
      winddir: sensor.ecowitt_winddir_word
      windspeed: sensor.wind_speed
      feels_like: sensor.domov_real_feel
      show_feels_like: true
      press: sensor.absolute_pressure
      temp: sensor.outdoor_temperature
      units:
        speed: km/h
        pressure: ''
      forecast:
        precipitation_type: ''
        style: style2
        type: daily
        show_wind_forecast: false
      show_current_condition: true
      show_attributes: true
      show_humidity: true
      show_pressure: true
      icons_size: '38'
      animated_icons: true
      icon_style: style2
      current_temp_size: '35'