Ich möchte mir eine Apex Chart Card erstellen, welche mir meine Zeiten im Bett anzeigt. Die entsprechende Entität ist: binary_sensor.withings_im_bett
Ziel ist es das ich 7 Balken habe, mit dem deutschen Datum untendrunter, also 28.06, 29.06 usw.
Links möchte ich eine Y-Achse haben, welche unten um 00:00 Uhr beginnt und oben um 23:59 Uhr aufhört
Wenn ich im Bett bin soll dieser Bereich des Balkens blau dargestellt werden, wenn ich nicht im Bett bin, soll die Farbe an dieser Stelle grün sein.
Also so ähnlich wie auf dem Screenshot. Allerdings ist mir noch nicht klar wo das “Unbekannt” herrührt
Hier mal der Code wie ich es bisher versuche, aber das führt halt immer zu Fehlern.
type: custom:apexcharts-card
header:
title: 🛏️ Im Bett (7 Tage)
show: true
graph_span: 7d
span:
start: day
offset: "-6d"
apex_config:
chart:
type: rangeBar
height: 320px
plotOptions:
bar:
horizontal: true
barHeight: 100%
xaxis:
type: category
yaxis:
min: 0
max: 1440
tickAmount: 12
labels:
formatter: |
return function (val) {
const h = Math.floor(val / 60);
const m = val % 60;
return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
};
series:
- type: custom
name: Im Bett
color: "#3498db"
show:
in_chart: true
legend_value: false
data_generator: |
const result = [];
const entity = 'binary_sensor.withings_im_bett';
const historyItems = history(entity).filter(e => e.state === 'on');
historyItems.forEach(e => {
const start = new Date(e.last_changed);
const end = new Date(e.last_updated);
const day = start.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
const minutes = d => d.getHours() * 60 + d.getMinutes();
result.push({
x: day,
y: [minutes(start), minutes(end)],
});
});
return result;
Könnt Ihr mir da weiterhelfen?
, müsste ich mir auch erst einmal genauer anschauen.