tobias
e1d570992e
Drei zusammengehörige Teile in einem Repository: - homeassistant/ Das fertige, im Einsatz befindliche Home-Assistant-Panel (panel_custom Custom Element + pyscript-Backend). Echte Fahrzeug- und Personendaten (fahrzeugprofil.json, fahrten.jsonl, tankvorgaenge.jsonl, Tankbelege) bleiben per .gitignore außen vor; die anonymisierte Vorlage fahrzeugprofil.example.json ist mit dabei. - design-system/ Eigenständige React-Komponentenbibliothek (@audi-dash/ui), die die visuelle Sprache des Panels nachbildet - ohne Audi-Markenzeichen und ohne die lizenzierte Hausschrift. Dient als Grundlage für Claude Design. War bis hierher ein eigenes Repository und ist in dieses eingeschmolzen worden. - companion-app/ Datenschicht der neuen App DataMetric360 (iOS/Android via Capacitor, zusätzlich als Iframe im HA-Dashboard). Noch ohne Oberfläche: REST- und WebSocket-Zugriff auf Home Assistant plus Warteschlange für Änderungen ohne Netz. Ersetzt das eingespritzte hass-Objekt, das nur innerhalb des HA-Frontends existiert. Dazu die Projektdokumentation: SPECIFICATION.md (Ist-Stand des Panels), COMPANION_APP_ARCHITECTURE.md (Architekturentscheidungen der neuen App), AUDIT_2026-08-10.md, DESIGN_BRIEF_DATAMETRIC360.md und der ursprüngliche Bauauftrag. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import * as React from "react";
|
|
import { Fig } from "../Fig/Fig";
|
|
|
|
export interface ProgressRingProps {
|
|
/** 0-100 */
|
|
percent: number;
|
|
/** Center figure - defaults to the rounded percent value. */
|
|
value?: React.ReactNode;
|
|
unit?: string;
|
|
label?: React.ReactNode;
|
|
size?: number;
|
|
className?: string;
|
|
}
|
|
|
|
const RADIUS = 64;
|
|
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
|
|
|
|
export function ProgressRing({
|
|
percent,
|
|
value,
|
|
unit,
|
|
label,
|
|
size = 150,
|
|
className,
|
|
}: ProgressRingProps) {
|
|
const clamped = Math.max(0, Math.min(100, percent));
|
|
const offset = CIRCUMFERENCE * (1 - clamped / 100);
|
|
const classes = ["ads-ring"];
|
|
if (className) classes.push(className);
|
|
|
|
return (
|
|
<div className={classes.join(" ")} style={{ width: size, height: size }}>
|
|
<svg viewBox="0 0 150 150" width={size} height={size}>
|
|
<circle cx="75" cy="75" r={RADIUS} className="ads-ring__track" />
|
|
<circle
|
|
cx="75"
|
|
cy="75"
|
|
r={RADIUS}
|
|
className="ads-ring__arc"
|
|
strokeDasharray={CIRCUMFERENCE}
|
|
strokeDashoffset={offset}
|
|
/>
|
|
</svg>
|
|
<span className="ads-ring__mid">
|
|
<Fig value={value ?? Math.round(clamped)} unit={unit} />
|
|
{label !== undefined && <span className="ads-label">{label}</span>}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|