Energy Breakdown
A donut + list combo that breaks total energy into named categories with shares.
Where it went todayAcross all consumers
Home8.4 kWh52 %
EV charger5.1 kWh31 %
Heat pump2.7 kWh17 %
Usage
import { EnergyBreakdown } from '@epilot/spark-ui/energy-breakdown'<EnergyBreakdown
title="Where it went today"
subtitle="Across all consumers"
items={[
{ label: 'Home', value: 8.4, color: 'var(--mauve-11)' },
{ label: 'EV charger', value: 5.1, color: 'var(--blue-9)' },
{ label: 'Heat pump', value: 2.7, color: 'var(--orange-9)' },
]}
/>The center label is the sum of all items' values, formatted with sensible decimal precision. Item shares are computed from the total of items (so they always add to 100%).
API Reference
EnergyBreakdown
| Prop | Type | Default |
|---|---|---|
title | string | — |
subtitle | string | — |
items | BreakdownItem[] | — |
centerSub | string | "kWh" |
BreakdownItem
| Field | Type | Notes |
|---|---|---|
label | string | Shown in the side list |
value | number | Used for the share calc and donut arc |
color | string | Any CSS color |
excludeFromCenterTotal | boolean | Skip this item from the centered total (e.g. exclude self-consumption from a feed-in donut). |