I tried to create a dashboard to display information from Uptime Kuma in HA. For this I use Uptime Kima integration providing data and Uptime Card to display data for specific entities. As I have almost 70 monitored devices configured, I decided to use dectluttering card to simpplify setup. Additionally, as I wanted to have some more interactive data presentation, I created 3 helpers:
- input_select to choose what timeframe I want to display (1h, 2h, 6h, 12h, 1d, 2d, 3d, 1w, 2w, 1m)
- input_number that converts selected timeframe to number of hours (needed for uptime card)
- input_number that select appropriate number of bars to be displayed by uptime card, depending on selected timeframe (to avoid config with 50 bars to display data for 6h, that would not give nice time ditribution per bar).
Then I use these helpers as variables in config-template-card to populate parameters in uptime card. Whole concept almost works, with one exception; when custom template variable is given as input to amounts of bars in uptime card, card displays only the very first bar in the chart, leaving rest of the space empty. I made some experiments, substituting number of bars with number of hours to display (from first helper) and strangely I can see that number is accepted as width of bar is changing to exactly 1/number of hours, of the chart area. So for 1h single bar takes whole width, for 2h it takes half of the area, for 6h it take 1/6 of width and so on.
Here is the code for decluttering card template:
decluttering_templates:
uptime:
card:
type: custom:config-template-card
entities:
- input_number.uptimekuma_hours # helper that contains number of hours to be displayed
- input_number.uptimekuma_points # helper that contains number of bars to be displyed
variables:
- states["input_number.uptimekuma_hours"].state
- states["input_number.uptimekuma_points"].state
card:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 250px auto
grid-template-rows: 50px
grid-template-areas: |
"name graph"
cards:
- type: markdown
view_layout:
grid-area: name
content: |
### {{ state_attr('[[entity]]', 'friendly_name') }} # markdown card to display entity friendly name
card_mod:
style: |
ha-card {
margin-top: 0px;
}
- type: custom:uptime-card
view_layout:
grid-area: graph
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: -10px;
}
entity: '[[entity]]' # entity selected to display data for
title_adaptive_color: false
status_adaptive_color: false
icon_adaptive_color: false
show:
header: false
title: false
icon: false
status: false
footer: false
average: false
timeline: true
tooltip:
hour24: true
ok: up
ko: down
hours_to_show: ${vars[0]} # here goes number of hours to be displayed by uptime card
color:
none: '#333'
bar:
height: 10
round: 2
amount: ${vars[1]} # here goes number of bars to be dplayed - this causes problems
alignment:
header: left
init:
animation: slide
And here for the card itself (only part for few entities):
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- input_select.uptimekuma_period # thias is the helper for selection of time period to be displayed
- type: custom:decluttering-card
template: uptime
variables:
- entity: sensor.uptimekuma_192_168_52_21 # here actual entity to display data for goes
- type: custom:decluttering-card
template: uptime
variables:
- entity: sensor.uptimekuma_accesspoint_basement
- type: custom:decluttering-card
template: uptime
variables:
- entity: sensor.uptimekuma_accesspoint_floor
Here is the actual outcome. The first picture show how it should look like (number of bars configured manually (12h, 48 bars):
And here the same selection but done with template card variable (again 12h, 48 bars):
So it seems that uptime card accepts to some extend config template variable to calculate width of the bar, but does nto diaplays all the bars correctly.
Anyone faced something similar? Is it uptime card bug or am I doing something wrong? Any other idea how this could be achieved?