HitonabiandClaude Opus 5.5
948e55e4f2
Tiefblauer Grund mit Lichtflecken in den Bereichsfarben, Glasflächen mit Lichtkante (flaeche), ruhigere Schrift (Überschriften normal geschrieben, Großbuchstaben nur als kleines Etikett) und dezente Bewegung. - Startseite neu: Geräte-Ring mit Gesamtlage, drei Eckwerte, Instrumente (8 Messringe), Bereichskarten mit Kacheln je Modell, Baustein und Gerät (Symbol, Zustandspunkt, Update direkt an der Kachel), Speicher/NAS, Zeitleisten „Als Nächstes“ und „Zuletzt eingespielt“. - Panel, Schildchen, Kennzahl, Verlaufslinie, Seitenleiste und Kopf im neuen Look — wirkt schon auf allen Seiten. - Symbole je Gerät (lib/geraetebild): Farbe des Bereichs, Zustände nur als Punkt. Vorbilder: Heimdall, Dashy, Homepage, umbrelOS, Pulse. Noch nicht ausgerollt (kein dist): erst nach dem Ja des Users. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
import { cn } from "cn"
|
|
import { type Einheit, wertText } from "@/lib/messung"
|
|
import type { Messpunkt } from "@/lib/typen"
|
|
import { Sparkline } from "./Sparkline"
|
|
|
|
const ZUSTAND = {
|
|
ruhig: { wert: "text-foreground", marke: null },
|
|
gelb: { wert: "text-bernstein", marke: "hoch" },
|
|
rot: { wert: "text-rot-text", marke: "kritisch" },
|
|
} as const
|
|
|
|
/**
|
|
* Eine Kennzahl mit Verlauf: Beschriftung, der aktuelle Wert groß, darunter die Linie des Zeitraums.
|
|
* Überschreitet der Wert eine Grenze, färbt er sich und sagt es auch in Worten („hoch“, „kritisch“).
|
|
*/
|
|
export function Kennzahl({ label, wert, einheit, punkte, max, zustand = "ruhig", farbe, zeitraumText }: {
|
|
label: string
|
|
wert: number | null | undefined
|
|
einheit: Einheit
|
|
punkte?: Messpunkt[]
|
|
max: number
|
|
zustand?: keyof typeof ZUSTAND
|
|
farbe?: string
|
|
/** z. B. „letzte Stunde“ — für die Beschreibung der Linie. */
|
|
zeitraumText: string
|
|
}) {
|
|
const z = ZUSTAND[zustand]
|
|
return (
|
|
<div className="flaeche-innen flex min-w-0 flex-col gap-1.5 rounded-xl px-3.5 pt-3 pb-2">
|
|
<span className="etikett text-[11px] text-text-3">{label}</span>
|
|
<span className="flex items-baseline gap-2">
|
|
<span className={cn("font-anzeige text-[28px] leading-none font-semibold tabular-nums", z.wert)}>{wertText(wert, einheit)}</span>
|
|
{z.marke && <span className={cn("etikett text-[10.5px]", z.wert)}>{z.marke}</span>}
|
|
</span>
|
|
{punkte && punkte.length > 1 && (
|
|
<Sparkline punkte={punkte} max={max} farbe={farbe} beschriftung={`${label}, ${zeitraumText}`} />
|
|
)}
|
|
{/* Kommt der Verlauf noch (erster Abruf), bleibt die Höhe gleich — kein Springen der Kacheln. */}
|
|
{punkte && punkte.length <= 1 && <span className="h-9" aria-hidden />}
|
|
</div>
|
|
)
|
|
}
|