Exakte Zeitangabe im Historie-Diagramm anzeigen

Einleitung
Die Visualisierung von Daten in Smart-Home-Anwendungen ist entscheidend für die Analyse und das Verständnis von Systemverhalten. Insbesondere die Darstellung von Zeit in Diagrammen kann oft ungenau oder schwer verständlich sein. In diesem Artikel wird erläutert, wie man die Zeitangaben in einem Diagramm so anpassen kann, dass sie in einem benutzerfreundlichen Format angezeigt werden.

Problem
Ein Benutzer möchte in einem Diagramm, das die Betriebszeit eines PCs darstellt, anstelle von Dezimalzahlen wie 0,6 die exakte Zeit in Stunden und Minuten anzeigen. Dies verbessert die Lesbarkeit und das Verständnis der dargestellten Daten.

Lösung
Um die exakte Zeit in einem Diagramm anzuzeigen, kann die apexcharts-card verwendet werden, die eine benutzerdefinierte Konfiguration ermöglicht. Durch die Anpassung der dataLabels-Einstellungen kann die Darstellung der Zeitwerte modifiziert werden. Der folgende Code zeigt, wie dies umgesetzt werden kann:

type: custom:apexcharts-card
apex_config:
  chart:
    height: 140%
  dataLabels:
    enabled: true
    formatter: |
      EVAL: (val) => {
        const h = Math.floor(val);
        const m = Math.round((val - h) * 60);
        return `${h}h ${m}min`;
      }
    background:
      enabled: false
    style:
      colors:
        - var(--primary-text-color)
graph_span: 1w
span:
  end: day
header:
  show: true
  title: Betriebszeit von Noèls PC
experimental:
  color_threshold: true
yaxis:
  - id: left
    min: ~0
    apex_config:
      forceNiceScale: true
series:
  - entity: sensor.noels_rechner_betriebszeit
    type: column
    yaxis_id: left
    float_precision: 1
    show:
      datalabels: true
    group_by:
      func: last
      duration: 1d
    color_threshold:
      - color: grey
        value: 1
card_mod:
  class: top-level-chart

In diesem Code wird die formatter-Funktion verwendet, um die Dezimalwerte in Stunden und Minuten umzurechnen. Die Umrechnung erfolgt durch die Berechnung der Stunden (Math.floor(val)) und der Minuten (Math.round((val - h) * 60)).

Schritte zur Umsetzung
1. Füge die apexcharts-card in dein Smart-Home-Dashboard ein.
2. Kopiere den oben angegebenen YAML-Code in die Konfiguration der Karte.
3. Stelle sicher, dass der Sensor sensor.noels_rechner_betriebszeit korrekt konfiguriert ist und die Betriebszeit in Stunden als Dezimalzahl liefert.
4. Speichere die Änderungen und lade das Dashboard neu, um die aktualisierte Darstellung zu sehen.

Hintergrundwissen
Die apexcharts-card ist eine leistungsstarke Karte für Home Assistant, die auf der ApexCharts-Bibliothek basiert. Sie ermöglicht die Darstellung von Zeitreihendaten in verschiedenen Formaten. Die Verwendung von benutzerdefinierten Formatierern in der dataLabels-Konfiguration ist eine effektive Methode, um die Lesbarkeit der Daten zu verbessern. Dezimalzahlen können oft schwer verständlich sein, insbesondere wenn es um Zeitangaben geht.

Zusätzliche Infos

Hinweise & Best Practices
- Überprüfe die Genauigkeit der Sensorwerte, um sicherzustellen, dass die angezeigten Zeiten korrekt sind.
- Experimentiere mit verschiedenen Diagrammtypen und -konfigurationen, um die beste Darstellung für deine Daten zu finden.
- Halte die Software und die verwendeten Komponenten auf dem neuesten Stand, um von Verbesserungen und neuen Funktionen zu profitieren.