I use graphs (custom:mini-graph-card)
- type: "custom:mini-graph-card"
entities:
- entity: sensor.total_sleep_yesterday
name: Sleep
show_state: true
show_indicator: true
color: "#9AA0A6"
unit: h
decimals: 2
hours_to_show: 336 # 14 * 24
points_per_hour: 0.0416666666666666666666666666666666666666666 # 1 / 24
update_interval: 43200 # 12 * 60 * 60
more_info: false
align_icon: left
align_header: left
align_state: center
show:
graph: bar
And tables (custom:flex-table-card)
- type: custom:flex-table-card
title: Weekly Sleep
entities:
include: sensor.sleep_quality
columns:
- name: Day
modify: >-
['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].join('<br />')
prop: attributes
- name: Bedtime
align: right
modify: >-
[
x.monday.bedtime_start_hour,
x.tuesday.bedtime_start_hour,
x.wednesday.bedtime_start_hour,
x.thursday.bedtime_start_hour,
x.friday.bedtime_start_hour,
x.saturday.bedtime_start_hour,
x.sunday.bedtime_start_hour,
].join('<br />')
prop: attributes
- name: Wake Up
align: right
modify: >-
[
x.monday.bedtime_end_hour,
x.tuesday.bedtime_end_hour,
x.wednesday.bedtime_end_hour,
x.thursday.bedtime_end_hour,
x.friday.bedtime_end_hour,
x.saturday.bedtime_end_hour,
x.sunday.bedtime_end_hour,
].join('<br />')
prop: attributes
- name: Sleep
align: right
modify: >-
[
x.monday.total_sleep_duration,
x.tuesday.total_sleep_duration,
x.wednesday.total_sleep_duration,
x.thursday.total_sleep_duration,
x.friday.total_sleep_duration,
x.saturday.total_sleep_duration,
x.sunday.total_sleep_duration,
]
.map(x => Number(x).toFixed(2) + ' h')
.join('<br />')
prop: attributes
- name: Awake
align: right
modify: >
[
x.monday.awake_duration,
x.tuesday.awake_duration,
x.wednesday.awake_duration,
x.thursday.awake_duration,
x.friday.awake_duration,
x.saturday.awake_duration,
x.sunday.awake_duration,
]
.map(x => Number(x).toFixed(2) + ' h')
.join('<br />')
prop: attributes
If it’s useful, I can add this to the component description.
Nonetheless, if there’s a good custom card, I would love to see it!