Energy Bar Graph
Displays a stacked bar graph of energy data. Generic in the datum shape, so it can be reused for source breakdowns, device-by-device usage, or any other per-category time series.
Energy today
Usage
import {
EnergyBarChart,
type EnergyBarSeries,
} from '@epilot/spark-ui/energy-bar-chart'<EnergyBarChart data={data} series={series} getCategory={getCategory} />The chart is generic in the datum type. The default datum is the built-in HourBucket shape ({ hour, solar, battery, grid }). For any other shape, parametrise it:
<EnergyBarChart<MyBucket>
data={buckets}
series={mySeries}
getCategory={(bucket) => bucket.hour}
/>Each EnergyBarSeries<T> reads its value off the datum via getValue, so series and data stay decoupled.
Examples
Source breakdown
The default shape: one series per power source (solar / battery / grid).
Energy today
Device usage with untracked share
A generic instantiation showing per-device consumption stacked together with a gray Untracked series for whatever the home consumed that didn't get attributed to a metered device.
Device usage today
API Reference
EnergyBarChart<TDatum>
A thin wrapper over BarChart that supplies an animated renderTotal. It forwards data, series, getCategory, categories, categoryTicks, formatCategory, highlightedCategory, showHighlightLine, title, yAxisUnit, formatValue, height, and className to BarChart.
| Prop | Type | Default |
|---|---|---|
data | TDatum[] | — |
series | EnergyBarSeries<TDatum>[] | — |
getCategory | (datum: TDatum) => Category | — |
formatValue | (value: number) => string | — |
totalSuffix | string | — |
totalFormat | Format (NumberFlow format) | — |
Category is string \| number. EnergyBarSeries<TDatum> is an alias of BarChartSeries<TDatum> (key, label, color, optional hoverFill, getValue). The default TDatum is the built-in HourBucket ({ hour, solar, battery, grid }).