I have been playing with a few things and will do so today. I do love the radialbar chart however I have been unsucessful at getting it to display the way I want. On mouse over it displays a “%” because that is the nature of the card. Essentially it takes a “max” and the value would then give you a “%” of max. Well this is no good really because I could not template the max.
Now, I created a new sensor that just has the data for the HP, Speed, etc. and it sets the state to the “max” of those values (good start). However, I still cannot get it to display the actual point value in the center.
I may go to gauges which I know I can display the actual value.
Right now (using the original sensor and a fixed “max” of 200, it is like this:
type: custom:apexcharts-card
header:
show: false
show_states: true
colorize_states: true
chart_type: radialBar
all_series_config:
max: 200
show:
legend_value: false
series:
- entity: sensor.random_pokemon
name: HP
data_generator: >
return [[new Date(entity.state).getTime(),
entity.attributes.stats[0].base_stat]]
- entity: sensor.random_pokemon
name: Attack
data_generator: >
return [[new Date(entity.state).getTime(),
entity.attributes.stats[1].base_stat]]
- entity: sensor.random_pokemon
name: Defense
data_generator: >
return [[new Date(entity.state).getTime(),
entity.attributes.stats[2].base_stat]]
- entity: sensor.random_pokemon
name: Special Attack
data_generator: >
return [[new Date(entity.state).getTime(),
entity.attributes.stats[3].base_stat]]
- entity: sensor.random_pokemon
name: Special Defense
data_generator: >
return [[new Date(entity.state).getTime(),
entity.attributes.stats[4].base_stat]]
- entity: sensor.random_pokemon
name: Speed
data_generator: >
return [[new Date(entity.state).getTime(),
entity.attributes.stats[5].base_stat]]
One option with gauge and card-templater with a custom sensor of just the stats as attributes:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:card-templater
entities:
- sensor.random_pokemon
card:
type: custom:gauge-card
entity: sensor.pokemon_base_stats
attribute: hp
measurement: ''
title: HP
min: 0
max_template: >-
{{ (state_attr("sensor.random_pokemon","stats") |
map(attribute="base_stat") | max) * 1.1 }}
- type: custom:card-templater
entities:
- sensor.random_pokemon
card:
type: custom:gauge-card
entity: sensor.pokemon_base_stats
attribute: defense
measurement: ''
title: Defense
min: 0
max_template: >-
{{ (state_attr("sensor.random_pokemon","stats") |
map(attribute="base_stat") | max) * 1.1 }}
- type: custom:card-templater
entities:
- sensor.random_pokemon
card:
type: custom:gauge-card
entity: sensor.pokemon_base_stats
attribute: special-attack
measurement: ''
title: Special Attack
min: 0
max_template: >-
{{ (state_attr("sensor.random_pokemon","stats") |
map(attribute="base_stat") | max) * 1.1 }}
- type: custom:card-templater
entities:
- sensor.random_pokemon
card:
type: custom:gauge-card
entity: sensor.pokemon_base_stats
attribute: special-defense
measurement: ''
title: Special Defense
min: 0
max_template: >-
{{ (state_attr("sensor.random_pokemon","stats") |
map(attribute="base_stat") | max) * 1.1 }}
- type: custom:card-templater
entities:
- sensor.random_pokemon
card:
type: custom:gauge-card
entity: sensor.pokemon_base_stats
attribute: speed
measurement: ''
title: Speed
min: 0
max_template: >-
{{ (state_attr("sensor.random_pokemon","stats") |
map(attribute="base_stat") | max) * 1.1 }}
NOTE: This sets the max value of the gauge to 110% of the largest stat. This gives them some value in examining them all together with your eye as they all have the same baseline. One could plug in severity in the templates likely and color bars based on % of the largest stat.
I would note that no matter what I have tried, I cannot template “max” in the Apex card. It just does not work. I posted in their forum but there was no solutions given that work. At this time, this is the best I could do. I also created a new sensor with just this data to make it easier as:
###
### Pokemon Base Stats
###
sensor:
- name: Pokemon Base Stats
state: '{{ state_attr("sensor.random_pokemon","stats") | map(attribute="base_stat") | max }}'
attributes:
hp: '{{ state_attr("sensor.random_pokemon","stats")[0].base_stat }}'
attack: '{{ state_attr("sensor.random_pokemon","stats")[1].base_stat }}'
defense: '{{ state_attr("sensor.random_pokemon","stats")[2].base_stat }}'
special-attack: '{{ state_attr("sensor.random_pokemon","stats")[3].base_stat }}'
special-defense: '{{ state_attr("sensor.random_pokemon","stats")[4].base_stat }}'
speed: '{{ state_attr("sensor.random_pokemon","stats")[5].base_stat }}'
It assumes that (and I believe this is correct) that the attributes are always in that order. There is likely a better way to select them based on the names, but heck … this is just fun for my 60 yr old self.
Here is a little coloring applied using severity:
- type: custom:card-templater
entities:
- sensor.random_pokemon
card:
type: custom:gauge-card
entity: sensor.pokemon_base_stats
attribute: hp
measurement: ''
title: HP
min: 0
max_template: >-
{{ (state_attr("sensor.random_pokemon","stats") |
map(attribute="base_stat") | max) * 1.1 }}
severity:
red_template: >-
{{ (state_attr("sensor.random_pokemon","stats") |
map(attribute="base_stat") | max) * 0.8 }}
green_template: >-
{{ (state_attr("sensor.random_pokemon","stats") |
map(attribute="base_stat") | max) * 0.3 }}
amber_template: >-
{{ (state_attr("sensor.random_pokemon","stats") |
map(attribute="base_stat") | max) * 0.6 }}
