tabbed-card
tabbed-card copied to clipboard
kinghat
Data in one tabbed card only shows up after navigating to different dashboard and back again
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:
- Load the dashboard (no graph)
- Navigate to the Energy dahsbaord and back again (graph appears)
- Force reload (no graph)
- 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?
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.
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
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?
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.
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-cardbefore, 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.
@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?
A quick check at the breakfast table suggests that it works, both in mobile app and in Firefox on macOS.
Thanks!
I also have this problem on my Android companion app. The chips on my first tab wont load. 2nd and 3rd do load.
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?
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.
Get rid of card-mod code and test again Yes, you are right. It's the card-mode "z-index"
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'
