Great to hear. @mfisher224 - maybe this will help you too if it’s still an issue. And I can confirm negative isn’t the issue, it was just an unavailable sensor which I presume returned a string such as “unavailable” rather than an integer.
Also, huge thank you to @seanblanchfield - I love this visualization. I was quickly able to pinpoint a ton of usage in my house thanks to this. And a few perplexing mystery consumers to hunt down some day.
1 Like
Thanks for the great detective work @edlin303.
Changing the line
${ Math.max(...vars.map(v => states[v.entity].state))}
to
${ Math.max(...vars.map(v => states[v.entity].state).filter(n => !isNaN(n)))}
should filter out any non-numbers from the expression and hopefully avoid the display issue with unavailable sensors. It would definitely be nicer to log an error about any sensors like this, but it’s not immediately obvious to me how to do this without spamming the javascript console with a message every time the meter is rendered.
If anyone reading this knows if there is a place in custom:config-template-card to run template code only at startup, let me know. We could put something like the following in there:
let badEntities = vars.filter(v => isNaN(states[v.entity].state));
if(badEntities.length) {
console.warning("Power meter was provided with non-numerical entities: ", badEntities);
}
3 Likes
Hi, Did you solve this problem. I am struggling with this at my hass and with no results.
Wow, this is exactly what I had in mind to build, glad I found this before I spent the time, you saved me a ton of work. Thank you.
I used the “Group” helper in “sum” mode to make finding the unaccounted power calculation a bit easier to maintain. Whenever I monitor a new device, I add it to that helper group. The unaccounted power template sensor is {{ ( states('sensor.house_load_power') | float * 1000 ) - ( states('sensor.individual_devices_total_power') | float ) | round(1) }}
2 Likes
Based on the comments above, I have updated my blog post with new code that gracefully handles problems with the power sensors, such as them not existing, typos, being in an unknown state etc.
Any problems with any of the sensors will now be logged to the javascript console. In the meantime, the power meter should continue to display. If anyone wants update their existing code with this changes, you can just update the entities and max parameters passed to the bar-card:
entities: |-
${ vars.filter(v => {
let ent = states[v.entity];
if(ent === undefined || ent.state === undefined) {
console.warn(`Power meter: Entity ${v.entity} not found`);
}
else if(ent.state === 'unknown') {
console.warn(`Power meter: Entity ${v.entity} state is unknown`);
}
else if(isNaN(ent.state)) {
console.warn(`Power meter: Entity ${v.entity} state is not a number`);
}
else return Number(ent.state) > 5;
}).sort((v1,v2) => states[v2.entity].state - states[v1.entity].state)}
and
max: ${ Math.max(...vars.map(v => states[v.entity]).filter(e => !!e).map(e => e.state).filter(n => !isNaN(n))) }
Hello @seanblanchfield and thank you for this. For my (very crowded) dashboard I’m trying to do two separate cards in a horizontal stack, one showing the first 5 top consuming devices and the second showing devices 6 to 10 following the same order. Also for aesthetic reasons I’d like to always show ten bars (5 + 5) even if the value is 0.
Could yo help me modify your code to achieve this? Thanks!
It looks like recent updates have broken the severity colors of the bar chart. rgb codes work, but the width of the bars isn’t working anymore. The colors also look muted when using rgb values, which was the first issue I started seeing with recent updates until the colors were gone completely.
This is what it looks like with rgb values
I’m sorry to hear that. I’m still on 2024.3.3 and don’t have that problem. I don’t expect to get the opportunity to upgrade to 2024.5 for a few weeks. I’d be interested in hearing if other people here are experiencing the same thing.
I feel like my issues started with 2024.4. I’d also be curious if others running newer versions are experiencing this problem.
Do you have a relation of what color each severity range is? What format are you using in your original code? The values are too long for hex.
hello @seanblanchfield
I have configured the same you have done but it does not work:
type: custom:config-template-card
variables:
- entity: sensor.00047400008fbafbp
name: Asciugatrice e Dyson Power
- entity: sensor.000474000159f5a7p
name: Cappa Power
- entity: sensor.000474000123f363p
name: Climatizzatore Sala Power
- entity: sensor.000474000123f310p
name: Climatizzatori Camere Power
- entity: sensor.00047400008fbe87p
name: Forno Microonde Power
- entity: sensor.000474000025824fp
name: Giorno Notte Power
- entity: sensor.00047400008fbe85p
name: Lavastoviglie Power
- entity: sensor.000474000123f2bap
name: Piano cottura Induzione Power
- entity: sensor.00047400008f9151p
name: Presa Audio Video Power
- entity: sensor.00047400008fbe54p
name: Presa Forno power
- entity: sensor.00047400008fbb0dp
name: Presa Lavatrice Power
- entity: sensor.00047400008fbe84p
name: Presa Mobile kaki Power
- entity: sensor.00047400008fbaffp
name: Presa Roomba Power
- entity: sensor.00047400008fb6cap
name: Presa Scrivania Camera da letto Power
- entity: sensor.00047400008fbafdp
name: Presa Scrivania Cameretta Power
- entity: sensor.00047400008fa99ap
name: Presa USB Telecamera Sala Power
- entity: sensor.00047400008fb6f9p
name: Vasca Idromassaggio Power
entities:
- sensor.00047400008fbafbp
- sensor.000474000159f5a7p
- sensor.000474000123f363p
- sensor.000474000123f310p
- sensor.00047400008fbe87p
- sensor.000474000025824fp
- sensor.00047400008fbe85p
- sensor.000474000123f2bap
- sensor.00047400008f9151p
- sensor.00047400008fbe54p
- sensor.00047400008fbb0dp
- sensor.00047400008fbe84p
- sensor.00047400008fbaffp
- sensor.00047400008fb6cap
- sensor.00047400008fbafdp
- sensor.00047400008fa99ap
- sensor.00047400008fb6f9p
element:
type: custom:bar-card
entities: >-
${ vars.filter(v => {
let ent = states[v.entity];
if(ent === undefined || ent.state === undefined) {
console.warn(`Power meter: Entity ${v.entity} not found`);
}
else if(ent.state === 'unknown') {
console.warn(`Power meter: Entity ${v.entity} state is unknown`);
}
else if(isNaN(ent.state)) {
console.warn(`Power meter: Entity ${v.entity} state is not a number`);
}
else return Number(ent.state) > 5;
}).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]).filter(e => !!e).map(e
=> e.state).filter(n => !isNaN(n))) }
height: 20px
stack: vertical
decimal: 0
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 > * {
margin: 1px
}
bar-card-name,
bar-card-value {
font-size: 0.9rem;
color: #ffffffaa;
font-weight: bold;
}
bar-card-value {
font-weight: bolder;
}
bar-card-indicator {
margin-top: 4px;
transform: scaleY(-1);
}
Could you please help me to understand why?
Thanks in advance for your support.
I just updated to 2024.5 expecting to hit this issue, but I didn’t. The power meter is still working correctly.
Looking more closely at the screenshot you posted, I find it strange that there are issues with the rendering of both the gauge card and the bar-card. One of these is native to HA and the other is 3rd party. They have little in common, except for the entities you are passing into them. I suggest you debug the gauge card alone, which should work as officially documented. This might lead you to the underlying issue affecting the bar-card too.
1 Like
You haven’t me provided with much info. In what way does it not work?
General tips:
- check each of your sensors in HA dev tools to make sure they are correct and have values.
- check the javascript console in your browser’s dev tools for any error messages.
- make sure you have both
custom:config-template-cardandcustom:bar-cardinstalled correctly. Confirm they are working with a more simple test that this one. - you could take the
jinja2templates in your card, and put them into the HA dev tools template editor to test them. You can set avarsvariable to an array with the same value (convert the yaml array to JSON using an online converter of your fav LLM).Jinja2documentation is linked from the HA dev tools template editor page.
hello @seanblanchfield
At the end, I decided to not use gauge card.
I worked on it and the bar card works partially.
It does not work the colors, all the bars are blue and remain blue.
I will do the tests you suggested but need to find some time 
Really thanks for your help for now
1 Like
Oh, I didn’t enable severity on the gauge card, that’s why it shows up as blue only.
But knowing that your update didn’t break it, I need to look at all other cards/plugins in my environment, one of them must be breaking the custom-bar-card
Thanks
edit: I looked at my code more closely and it seems the code in the max: line got truncated at some point. Fixing that restored the display. I did have to go back to your color code for the colors to look right.
1 Like
So this has stopped working on my Debian 12 install since the 2024.7.0 update. Rolled back to 2024.6.0 and it works.
I’m on 2024.07.1 and i was unaffected by the upgrade. Still works fine. I wonder if an entity you are displaying was affected by the upgrade.
Next time you try, if there are still issues, check your web browser’s JavaScript console for any errors or warnings that might give a clue.
Thanks, seems this was the case, one device was temporarily offline (not powered) at the time of the upgrade, not sure why it worked again when I rolled it back
Thank you so much. It works perfectly for my HA setup…!!!
Awesome work @seanblanchfield !
Unfortunately, I have a little issue. I have multiple sensors that have unit_of_measurement: kW instead of Watts (W). So for example, in the case of 1234 W, entity.state is 1.234 with entity.attributes.unit_of_measurement: "kW". This project then displays it as 1 W. The HA energy dashboard and other integrations/custom cards handle these sensors just fine, so I’d rather not try to rework those. Adding another template sensor that multiplies the state value by 1000 would be a valid workaround I guess, but also unneccessary baggage.
I tried fiddling with the code here, but I have no experience whatsoever with javascript (only a Python hobbyist). I added another else if to the entities logic like this - it works, but it’ll (surely obvious to you) interfere with displaying the sensor in question in other places on the same dashboard:
else if ((ent.attributes.unit_of_measurement === 'kW' || ent.is_kw === true) && ent.last_multiplication != ent.last_changed) {
console.info(`Power meter: multiply new value with 1000 (kW to W)`)
ent.state = ent.state * 1000;
ent.last_multiplication = ent.last_changed;
ent.is_kw = true;
ent.attributes.unit_of_measurement = 'W';
return Number(ent.state) > 0;
}
I’d greatly appreciate if you could develop a valid solution to this problem if you ever find the time and motivation.