@epilot/spark-ui 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/components/empty-state.js

@@ -0,0 +1,33 @@
+"use client";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/empty-state.tsx
+function EmptyState({ action, description, icon, title }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center gap-4 rounded-2xl border border-dashed border-gray px-6 py-12 text-center",
+		children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				className: "flex size-12 items-center justify-center rounded-xl bg-base-gray-soft",
+				children: /* @__PURE__ */ jsx(MaterialSymbol, {
+					className: "text-[20px] text-gray-light",
+					name: icon
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-base font-bold text-gray",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "mx-auto max-w-md text-sm text-gray-light",
+					children: description
+				})]
+			}),
+			action
+		]
+	});
+}
+//#endregion
+export { EmptyState };
+
+//# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\n\ninterface EmptyStateProps {\n  title: string\n  description?: string\n  icon?: MaterialSymbolIconName\n  action?: ReactNode\n}\n\nexport function EmptyState({\n  action,\n  description,\n  icon,\n  title,\n}: EmptyStateProps) {\n  return (\n    <div className=\"flex flex-col items-center gap-4 rounded-2xl border border-dashed border-gray px-6 py-12 text-center\">\n      {icon && (\n        <div className=\"flex size-12 items-center justify-center rounded-xl bg-base-gray-soft\">\n          <MaterialSymbol className=\"text-[20px] text-gray-light\" name={icon} />\n        </div>\n      )}\n      <div className=\"flex flex-col gap-1\">\n        <h3 className=\"text-base font-bold text-gray\">{title}</h3>\n        {description && (\n          <p className=\"mx-auto max-w-md text-sm text-gray-light\">\n            {description}\n          </p>\n        )}\n      </div>\n      {action}\n    </div>\n  )\n}\n\nexport type { EmptyStateProps }\n"],"mappings":";;;;AAaA,SAAgB,WAAW,EACzB,QACA,aACA,MACA,SACkB;AAClB,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,QACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD;KAAgB,WAAU;KAA8B,MAAM;KAAQ,CAAA;IAClE,CAAA;GAER,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,MAAD;KAAI,WAAU;eAAiC;KAAW,CAAA,EACzD,eACC,oBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA,CAEF;;GACL;GACG"}

package/dist/components/energy-bar-chart.cjs

@@ -0,0 +1,24 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+const require_components_bar_chart = require("./bar-chart.cjs");
+const require_components_number_flow = require("./number-flow.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/energy-bar-chart.tsx
+function EnergyBarChart({ totalSuffix, totalFormat, className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_bar_chart.BarChart, {
+		...rest,
+		className,
+		renderTotal: (value, animated) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_number_flow, {
+			value,
+			animated,
+			...totalSuffix !== void 0 && { suffix: totalSuffix },
+			...totalFormat !== void 0 && { format: totalFormat },
+			className: "text-base font-bold text-gray tabular-nums"
+		})
+	});
+}
+//#endregion
+exports.EnergyBarChart = EnergyBarChart;
+
+//# sourceMappingURL=energy-bar-chart.cjs.map

package/dist/components/energy-bar-chart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"energy-bar-chart.cjs","names":["BarChart","NumberFlow"],"sources":["../../src/components/energy-bar-chart.tsx"],"sourcesContent":["import {\n  BarChart,\n  type BarChartCategory,\n  type BarChartLineSeries,\n  type BarChartSeries,\n} from './bar-chart'\nimport NumberFlow, { type Format } from './number-flow'\n\nexport type Category = BarChartCategory\n\nexport interface HourBucket {\n  hour: number\n  solar: number\n  battery: number\n  grid: number\n}\n\nexport type EnergyBarSeries<TDatum = HourBucket> = BarChartSeries<TDatum>\nexport type EnergyBarLineSeries<TDatum = HourBucket> =\n  BarChartLineSeries<TDatum>\n\ninterface EnergyBarChartProps<TDatum> {\n  data: TDatum[]\n  series: BarChartSeries<TDatum>[]\n  lines?: BarChartLineSeries<TDatum>[]\n  getCategory: (datum: TDatum) => Category\n  categories?: Category[]\n  categoryTicks?: Category[]\n  formatCategory?: (category: Category) => string\n  formatTooltipCategory?: (category: Category) => string\n  highlightedCategory?: Category\n  showHighlightLine?: boolean\n  title?: string\n  yAxisUnit?: string\n  formatValue?: (value: number) => string\n  totalSuffix?: string\n  totalFormat?: Format\n  height?: number\n  className?: string\n}\n\nexport function EnergyBarChart<TDatum>({\n  totalSuffix,\n  totalFormat,\n  className,\n  ...rest\n}: EnergyBarChartProps<TDatum>): React.ReactElement {\n  return (\n    <BarChart<TDatum>\n      {...rest}\n      className={className}\n      renderTotal={(value, animated) => (\n        <NumberFlow\n          value={value}\n          animated={animated}\n          {...(totalSuffix !== undefined && { suffix: totalSuffix })}\n          {...(totalFormat !== undefined && { format: totalFormat })}\n          className=\"text-base font-bold text-gray tabular-nums\"\n        />\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAyCA,SAAgB,eAAuB,EACrC,aACA,aACA,WACA,GAAG,QAC+C;AAClD,QACE,iBAAA,GAAA,kBAAA,KAACA,6BAAAA,UAAD;EACE,GAAI;EACO;EACX,cAAc,OAAO,aACnB,iBAAA,GAAA,kBAAA,KAACC,gCAAD;GACS;GACG;GACV,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,aAAa;GACzD,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,aAAa;GACzD,WAAU;GACV,CAAA;EAEJ,CAAA"}

package/dist/components/energy-bar-chart.d.cts

@@ -0,0 +1,43 @@
+"use client";
+
+import { BarChartCategory, BarChartLineSeries, BarChartSeries } from "./bar-chart.cjs";
+import { t as Format } from "../number-flow-DMJouddg.cjs";
+
+//#region src/components/energy-bar-chart.d.ts
+type Category = BarChartCategory;
+interface HourBucket {
+  hour: number;
+  solar: number;
+  battery: number;
+  grid: number;
+}
+type EnergyBarSeries<TDatum = HourBucket> = BarChartSeries<TDatum>;
+type EnergyBarLineSeries<TDatum = HourBucket> = BarChartLineSeries<TDatum>;
+interface EnergyBarChartProps<TDatum> {
+  data: TDatum[];
+  series: BarChartSeries<TDatum>[];
+  lines?: BarChartLineSeries<TDatum>[];
+  getCategory: (datum: TDatum) => Category;
+  categories?: Category[];
+  categoryTicks?: Category[];
+  formatCategory?: (category: Category) => string;
+  formatTooltipCategory?: (category: Category) => string;
+  highlightedCategory?: Category;
+  showHighlightLine?: boolean;
+  title?: string;
+  yAxisUnit?: string;
+  formatValue?: (value: number) => string;
+  totalSuffix?: string;
+  totalFormat?: Format;
+  height?: number;
+  className?: string;
+}
+declare function EnergyBarChart<TDatum>({
+  totalSuffix,
+  totalFormat,
+  className,
+  ...rest
+}: EnergyBarChartProps<TDatum>): React.ReactElement;
+//#endregion
+export { Category, EnergyBarChart, EnergyBarLineSeries, EnergyBarSeries, HourBucket };
+//# sourceMappingURL=energy-bar-chart.d.cts.map

package/dist/components/energy-bar-chart.d.ts

@@ -0,0 +1,43 @@
+"use client";
+
+import { BarChartCategory, BarChartLineSeries, BarChartSeries } from "./bar-chart.js";
+import { t as Format } from "../number-flow-DSbucQ_K.js";
+
+//#region src/components/energy-bar-chart.d.ts
+type Category = BarChartCategory;
+interface HourBucket {
+  hour: number;
+  solar: number;
+  battery: number;
+  grid: number;
+}
+type EnergyBarSeries<TDatum = HourBucket> = BarChartSeries<TDatum>;
+type EnergyBarLineSeries<TDatum = HourBucket> = BarChartLineSeries<TDatum>;
+interface EnergyBarChartProps<TDatum> {
+  data: TDatum[];
+  series: BarChartSeries<TDatum>[];
+  lines?: BarChartLineSeries<TDatum>[];
+  getCategory: (datum: TDatum) => Category;
+  categories?: Category[];
+  categoryTicks?: Category[];
+  formatCategory?: (category: Category) => string;
+  formatTooltipCategory?: (category: Category) => string;
+  highlightedCategory?: Category;
+  showHighlightLine?: boolean;
+  title?: string;
+  yAxisUnit?: string;
+  formatValue?: (value: number) => string;
+  totalSuffix?: string;
+  totalFormat?: Format;
+  height?: number;
+  className?: string;
+}
+declare function EnergyBarChart<TDatum>({
+  totalSuffix,
+  totalFormat,
+  className,
+  ...rest
+}: EnergyBarChartProps<TDatum>): React.ReactElement;
+//#endregion
+export { Category, EnergyBarChart, EnergyBarLineSeries, EnergyBarSeries, HourBucket };
+//# sourceMappingURL=energy-bar-chart.d.ts.map

package/dist/components/energy-bar-chart.js

@@ -0,0 +1,22 @@
+"use client";
+import { BarChart } from "./bar-chart.js";
+import NumberFlow from "./number-flow.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/energy-bar-chart.tsx
+function EnergyBarChart({ totalSuffix, totalFormat, className, ...rest }) {
+	return /* @__PURE__ */ jsx(BarChart, {
+		...rest,
+		className,
+		renderTotal: (value, animated) => /* @__PURE__ */ jsx(NumberFlow, {
+			value,
+			animated,
+			...totalSuffix !== void 0 && { suffix: totalSuffix },
+			...totalFormat !== void 0 && { format: totalFormat },
+			className: "text-base font-bold text-gray tabular-nums"
+		})
+	});
+}
+//#endregion
+export { EnergyBarChart };
+
+//# sourceMappingURL=energy-bar-chart.js.map

package/dist/components/energy-bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"energy-bar-chart.js","names":[],"sources":["../../src/components/energy-bar-chart.tsx"],"sourcesContent":["import {\n  BarChart,\n  type BarChartCategory,\n  type BarChartLineSeries,\n  type BarChartSeries,\n} from './bar-chart'\nimport NumberFlow, { type Format } from './number-flow'\n\nexport type Category = BarChartCategory\n\nexport interface HourBucket {\n  hour: number\n  solar: number\n  battery: number\n  grid: number\n}\n\nexport type EnergyBarSeries<TDatum = HourBucket> = BarChartSeries<TDatum>\nexport type EnergyBarLineSeries<TDatum = HourBucket> =\n  BarChartLineSeries<TDatum>\n\ninterface EnergyBarChartProps<TDatum> {\n  data: TDatum[]\n  series: BarChartSeries<TDatum>[]\n  lines?: BarChartLineSeries<TDatum>[]\n  getCategory: (datum: TDatum) => Category\n  categories?: Category[]\n  categoryTicks?: Category[]\n  formatCategory?: (category: Category) => string\n  formatTooltipCategory?: (category: Category) => string\n  highlightedCategory?: Category\n  showHighlightLine?: boolean\n  title?: string\n  yAxisUnit?: string\n  formatValue?: (value: number) => string\n  totalSuffix?: string\n  totalFormat?: Format\n  height?: number\n  className?: string\n}\n\nexport function EnergyBarChart<TDatum>({\n  totalSuffix,\n  totalFormat,\n  className,\n  ...rest\n}: EnergyBarChartProps<TDatum>): React.ReactElement {\n  return (\n    <BarChart<TDatum>\n      {...rest}\n      className={className}\n      renderTotal={(value, animated) => (\n        <NumberFlow\n          value={value}\n          animated={animated}\n          {...(totalSuffix !== undefined && { suffix: totalSuffix })}\n          {...(totalFormat !== undefined && { format: totalFormat })}\n          className=\"text-base font-bold text-gray tabular-nums\"\n        />\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;AAyCA,SAAgB,eAAuB,EACrC,aACA,aACA,WACA,GAAG,QAC+C;AAClD,QACE,oBAAC,UAAD;EACE,GAAI;EACO;EACX,cAAc,OAAO,aACnB,oBAAC,YAAD;GACS;GACG;GACV,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,aAAa;GACzD,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,aAAa;GACzD,WAAU;GACV,CAAA;EAEJ,CAAA"}

package/dist/components/energy-breakdown.cjs

@@ -0,0 +1,81 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+require("../utils/chars.cjs");
+const require_utils_format = require("../utils/format.cjs");
+const require_components_donut_chart = require("./donut-chart.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/energy-breakdown.tsx
+function formatBreakdownCenter(v) {
+	if (v >= 1e3) return require_utils_format.formatThousands(v);
+	if (v >= 100) return require_utils_format.integerFormat.format(v);
+	if (v >= 10) return require_utils_format.oneDecimalFormat.format(v);
+	return require_utils_format.twoDecimalFormat.format(v);
+}
+function EnergyBreakdown({ title, subtitle, items, centerSub = "kWh" }) {
+	const sortedItems = (0, react.useMemo)(() => [...items].sort((a, b) => b.value - a.value), [items]);
+	const total = items.reduce((s, i) => s + i.value, 0);
+	const centerTotal = items.filter((i) => !i.excludeFromCenterTotal).reduce((s, i) => s + i.value, 0);
+	if (total === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-4 pt-3 pb-5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm font-semibold text-gray",
+				children: title
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs text-gray-light",
+				children: subtitle
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-6",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_donut_chart.DonutChart, {
+				centerLabel: formatBreakdownCenter(centerTotal),
+				centerSub,
+				segments: sortedItems.map(({ value, color }) => ({
+					value,
+					color
+				}))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-1 flex-col gap-3",
+				children: sortedItems.map(({ label, value, color }) => {
+					const pct = value / total * 100;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col gap-1.5",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-baseline justify-between gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "min-w-0 truncate text-sm font-medium text-gray",
+								children: label
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-gray-light",
+									children: require_utils_format.formatEnergy(value)
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-semibold text-gray",
+									children: `${require_utils_format.integerFormat.format(pct)} %`
+								})]
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "h-1 w-full overflow-hidden rounded-full bg-slate-a4",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "h-full rounded-full",
+								style: {
+									width: `${pct}%`,
+									background: color
+								}
+							})
+						})]
+					}, label);
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+exports.EnergyBreakdown = EnergyBreakdown;
+
+//# sourceMappingURL=energy-breakdown.cjs.map

package/dist/components/energy-breakdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"energy-breakdown.cjs","names":["formatThousands","integerFormat","oneDecimalFormat","twoDecimalFormat","DonutChart","formatEnergy"],"sources":["../../src/components/energy-breakdown.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport {\n  formatEnergy,\n  formatThousands,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n} from '../utils/format'\nimport { DonutChart } from './donut-chart'\n\nexport type BreakdownItem = {\n  label: string\n  value: number\n  color: string\n  excludeFromCenterTotal?: boolean\n}\n\nexport type EnergyBreakdownProps = {\n  title: string\n  subtitle: string\n  items: BreakdownItem[]\n  centerSub?: string\n}\n\nfunction formatBreakdownCenter(v: number) {\n  if (v >= 1000) return formatThousands(v)\n  if (v >= 100) return integerFormat.format(v)\n  if (v >= 10) return oneDecimalFormat.format(v)\n  return twoDecimalFormat.format(v)\n}\n\nexport function EnergyBreakdown({\n  title,\n  subtitle,\n  items,\n  centerSub = 'kWh',\n}: EnergyBreakdownProps) {\n  const sortedItems = useMemo(\n    () => [...items].sort((a, b) => b.value - a.value),\n    [items],\n  )\n\n  const total = items.reduce((s, i) => s + i.value, 0)\n  const centerTotal = items\n    .filter((i) => !i.excludeFromCenterTotal)\n    .reduce((s, i) => s + i.value, 0)\n\n  const dataEmpty = total === 0\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-4 pt-3 pb-5\">\n      <div className=\"flex flex-col gap-0.5\">\n        <span className=\"text-sm font-semibold text-gray\">{title}</span>\n        <span className=\"text-xs text-gray-light\">{subtitle}</span>\n      </div>\n\n      <div className=\"flex items-center gap-6\">\n        <DonutChart\n          centerLabel={formatBreakdownCenter(centerTotal)}\n          centerSub={centerSub}\n          segments={sortedItems.map(({ value, color }) => ({ value, color }))}\n        />\n\n        <div className=\"flex flex-1 flex-col gap-3\">\n          {sortedItems.map(({ label, value, color }) => {\n            const pct = (value / total) * 100\n            return (\n              <div key={label} className=\"flex flex-col gap-1.5\">\n                <div className=\"flex items-baseline justify-between gap-2\">\n                  <span className=\"min-w-0 truncate text-sm font-medium text-gray\">\n                    {label}\n                  </span>\n                  <span className=\"flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums\">\n                    <span className=\"text-gray-light\">\n                      {formatEnergy(value)}\n                    </span>\n                    <span className=\"font-semibold text-gray\">\n                      {`${integerFormat.format(pct)}${NARROW_NBSP}%`}\n                    </span>\n                  </span>\n                </div>\n                <div className=\"h-1 w-full overflow-hidden rounded-full bg-slate-a4\">\n                  <div\n                    className=\"h-full rounded-full\"\n                    style={{ width: `${pct}%`, background: color }}\n                  />\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAS,sBAAsB,GAAW;AACxC,KAAI,KAAK,IAAM,QAAOA,qBAAAA,gBAAgB,EAAE;AACxC,KAAI,KAAK,IAAK,QAAOC,qBAAAA,cAAc,OAAO,EAAE;AAC5C,KAAI,KAAK,GAAI,QAAOC,qBAAAA,iBAAiB,OAAO,EAAE;AAC9C,QAAOC,qBAAAA,iBAAiB,OAAO,EAAE;;AAGnC,SAAgB,gBAAgB,EAC9B,OACA,UACA,OACA,YAAY,SACW;CACvB,MAAM,eAAA,GAAA,MAAA,eACE,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,EAClD,CAAC,MAAM,CACR;CAED,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;CACpD,MAAM,cAAc,MACjB,QAAQ,MAAM,CAAC,EAAE,uBAAuB,CACxC,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;AAInC,KAFkB,UAAU,EAEb,QAAO;AAEtB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAmC;IAAa,CAAA,EAChE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAA2B;IAAgB,CAAA,CACvD;MAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD;IACE,aAAa,sBAAsB,YAAY;IACpC;IACX,UAAU,YAAY,KAAK,EAAE,OAAO,aAAa;KAAE;KAAO;KAAO,EAAE;IACnE,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,YAAY,KAAK,EAAE,OAAO,OAAO,YAAY;KAC5C,MAAM,MAAO,QAAQ,QAAS;AAC9B,YACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAiB,WAAU;gBAA3B,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;OAAK,WAAU;iBAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;QAAM,WAAU;kBACb;QACI,CAAA,EACP,iBAAA,GAAA,kBAAA,MAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAAM,WAAU;mBACbC,qBAAAA,aAAa,MAAM;SACf,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAAM,WAAU;mBACb,GAAGJ,qBAAAA,cAAc,OAAO,IAAI;SACxB,CAAA,CACF;UACH;UACN,iBAAA,GAAA,kBAAA,KAAC,OAAD;OAAK,WAAU;iBACb,iBAAA,GAAA,kBAAA,KAAC,OAAD;QACE,WAAU;QACV,OAAO;SAAE,OAAO,GAAG,IAAI;SAAI,YAAY;SAAO;QAC9C,CAAA;OACE,CAAA,CACF;QApBI,MAoBJ;MAER;IACE,CAAA,CACF;KACF"}

package/dist/components/energy-breakdown.d.cts

@@ -0,0 +1,26 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/energy-breakdown.d.ts
+type BreakdownItem = {
+  label: string;
+  value: number;
+  color: string;
+  excludeFromCenterTotal?: boolean;
+};
+type EnergyBreakdownProps = {
+  title: string;
+  subtitle: string;
+  items: BreakdownItem[];
+  centerSub?: string;
+};
+declare function EnergyBreakdown({
+  title,
+  subtitle,
+  items,
+  centerSub
+}: EnergyBreakdownProps): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { BreakdownItem, EnergyBreakdown, EnergyBreakdownProps };
+//# sourceMappingURL=energy-breakdown.d.cts.map

package/dist/components/energy-breakdown.d.ts

@@ -0,0 +1,26 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/energy-breakdown.d.ts
+type BreakdownItem = {
+  label: string;
+  value: number;
+  color: string;
+  excludeFromCenterTotal?: boolean;
+};
+type EnergyBreakdownProps = {
+  title: string;
+  subtitle: string;
+  items: BreakdownItem[];
+  centerSub?: string;
+};
+declare function EnergyBreakdown({
+  title,
+  subtitle,
+  items,
+  centerSub
+}: EnergyBreakdownProps): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { BreakdownItem, EnergyBreakdown, EnergyBreakdownProps };
+//# sourceMappingURL=energy-breakdown.d.ts.map

package/dist/components/energy-breakdown.js

@@ -0,0 +1,79 @@
+"use client";
+import "../utils/chars.js";
+import { formatEnergy, formatThousands, integerFormat, oneDecimalFormat, twoDecimalFormat } from "../utils/format.js";
+import { DonutChart } from "./donut-chart.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/energy-breakdown.tsx
+function formatBreakdownCenter(v) {
+	if (v >= 1e3) return formatThousands(v);
+	if (v >= 100) return integerFormat.format(v);
+	if (v >= 10) return oneDecimalFormat.format(v);
+	return twoDecimalFormat.format(v);
+}
+function EnergyBreakdown({ title, subtitle, items, centerSub = "kWh" }) {
+	const sortedItems = useMemo(() => [...items].sort((a, b) => b.value - a.value), [items]);
+	const total = items.reduce((s, i) => s + i.value, 0);
+	const centerTotal = items.filter((i) => !i.excludeFromCenterTotal).reduce((s, i) => s + i.value, 0);
+	if (total === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4 pt-3 pb-5",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-semibold text-gray",
+				children: title
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-gray-light",
+				children: subtitle
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-6",
+			children: [/* @__PURE__ */ jsx(DonutChart, {
+				centerLabel: formatBreakdownCenter(centerTotal),
+				centerSub,
+				segments: sortedItems.map(({ value, color }) => ({
+					value,
+					color
+				}))
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 flex-col gap-3",
+				children: sortedItems.map(({ label, value, color }) => {
+					const pct = value / total * 100;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1.5",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-baseline justify-between gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 truncate text-sm font-medium text-gray",
+								children: label
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-gray-light",
+									children: formatEnergy(value)
+								}), /* @__PURE__ */ jsx("span", {
+									className: "font-semibold text-gray",
+									children: `${integerFormat.format(pct)} %`
+								})]
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "h-1 w-full overflow-hidden rounded-full bg-slate-a4",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "h-full rounded-full",
+								style: {
+									width: `${pct}%`,
+									background: color
+								}
+							})
+						})]
+					}, label);
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { EnergyBreakdown };
+
+//# sourceMappingURL=energy-breakdown.js.map

package/dist/components/energy-breakdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"energy-breakdown.js","names":[],"sources":["../../src/components/energy-breakdown.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport {\n  formatEnergy,\n  formatThousands,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n} from '../utils/format'\nimport { DonutChart } from './donut-chart'\n\nexport type BreakdownItem = {\n  label: string\n  value: number\n  color: string\n  excludeFromCenterTotal?: boolean\n}\n\nexport type EnergyBreakdownProps = {\n  title: string\n  subtitle: string\n  items: BreakdownItem[]\n  centerSub?: string\n}\n\nfunction formatBreakdownCenter(v: number) {\n  if (v >= 1000) return formatThousands(v)\n  if (v >= 100) return integerFormat.format(v)\n  if (v >= 10) return oneDecimalFormat.format(v)\n  return twoDecimalFormat.format(v)\n}\n\nexport function EnergyBreakdown({\n  title,\n  subtitle,\n  items,\n  centerSub = 'kWh',\n}: EnergyBreakdownProps) {\n  const sortedItems = useMemo(\n    () => [...items].sort((a, b) => b.value - a.value),\n    [items],\n  )\n\n  const total = items.reduce((s, i) => s + i.value, 0)\n  const centerTotal = items\n    .filter((i) => !i.excludeFromCenterTotal)\n    .reduce((s, i) => s + i.value, 0)\n\n  const dataEmpty = total === 0\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-4 pt-3 pb-5\">\n      <div className=\"flex flex-col gap-0.5\">\n        <span className=\"text-sm font-semibold text-gray\">{title}</span>\n        <span className=\"text-xs text-gray-light\">{subtitle}</span>\n      </div>\n\n      <div className=\"flex items-center gap-6\">\n        <DonutChart\n          centerLabel={formatBreakdownCenter(centerTotal)}\n          centerSub={centerSub}\n          segments={sortedItems.map(({ value, color }) => ({ value, color }))}\n        />\n\n        <div className=\"flex flex-1 flex-col gap-3\">\n          {sortedItems.map(({ label, value, color }) => {\n            const pct = (value / total) * 100\n            return (\n              <div key={label} className=\"flex flex-col gap-1.5\">\n                <div className=\"flex items-baseline justify-between gap-2\">\n                  <span className=\"min-w-0 truncate text-sm font-medium text-gray\">\n                    {label}\n                  </span>\n                  <span className=\"flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums\">\n                    <span className=\"text-gray-light\">\n                      {formatEnergy(value)}\n                    </span>\n                    <span className=\"font-semibold text-gray\">\n                      {`${integerFormat.format(pct)}${NARROW_NBSP}%`}\n                    </span>\n                  </span>\n                </div>\n                <div className=\"h-1 w-full overflow-hidden rounded-full bg-slate-a4\">\n                  <div\n                    className=\"h-full rounded-full\"\n                    style={{ width: `${pct}%`, background: color }}\n                  />\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAyBA,SAAS,sBAAsB,GAAW;AACxC,KAAI,KAAK,IAAM,QAAO,gBAAgB,EAAE;AACxC,KAAI,KAAK,IAAK,QAAO,cAAc,OAAO,EAAE;AAC5C,KAAI,KAAK,GAAI,QAAO,iBAAiB,OAAO,EAAE;AAC9C,QAAO,iBAAiB,OAAO,EAAE;;AAGnC,SAAgB,gBAAgB,EAC9B,OACA,UACA,OACA,YAAY,SACW;CACvB,MAAM,cAAc,cACZ,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,EAClD,CAAC,MAAM,CACR;CAED,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;CACpD,MAAM,cAAc,MACjB,QAAQ,MAAM,CAAC,EAAE,uBAAuB,CACxC,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;AAInC,KAFkB,UAAU,EAEb,QAAO;AAEtB,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAmC;IAAa,CAAA,EAChE,oBAAC,QAAD;IAAM,WAAU;cAA2B;IAAgB,CAAA,CACvD;MAEN,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,YAAD;IACE,aAAa,sBAAsB,YAAY;IACpC;IACX,UAAU,YAAY,KAAK,EAAE,OAAO,aAAa;KAAE;KAAO;KAAO,EAAE;IACnE,CAAA,EAEF,oBAAC,OAAD;IAAK,WAAU;cACZ,YAAY,KAAK,EAAE,OAAO,OAAO,YAAY;KAC5C,MAAM,MAAO,QAAQ,QAAS;AAC9B,YACE,qBAAC,OAAD;MAAiB,WAAU;gBAA3B,CACE,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,oBAAC,QAAD;QAAM,WAAU;kBACb;QACI,CAAA,EACP,qBAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,oBAAC,QAAD;SAAM,WAAU;mBACb,aAAa,MAAM;SACf,CAAA,EACP,oBAAC,QAAD;SAAM,WAAU;mBACb,GAAG,cAAc,OAAO,IAAI;SACxB,CAAA,CACF;UACH;UACN,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,OAAD;QACE,WAAU;QACV,OAAO;SAAE,OAAO,GAAG,IAAI;SAAI,YAAY;SAAO;QAC9C,CAAA;OACE,CAAA,CACF;QApBI,MAoBJ;MAER;IACE,CAAA,CACF;KACF"}

package/dist/components/energy-history-chart.cjs

@@ -0,0 +1,64 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-aJGBMT86.cjs");
+require("../utils/chars.cjs");
+const require_utils_format = require("../utils/format.cjs");
+const require_components_energy_bar_chart = require("./energy-bar-chart.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/energy-history-chart.tsx
+/**
+* Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
+* (blue) energy sources stacked per bucket, the total height being the energy
+* consumed. Grid feed-in (translucent blue) dips below the baseline as an
+* export. For cumulative energy (week/month/year views). Thin wrapper over the
+* shared visx `BarChart`, so it inherits the card tooltip and both indicators.
+*/
+function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels, omitSeries, highlightedBucket, showHighlightLine, title, className, height = 260, categoryTicks }) {
+	const fmtValue = (value) => formatValue ? formatValue(value) : `${require_utils_format.twoDecimalFormat.format(value)} ${unit}`;
+	const omitted = new Set(omitSeries);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_energy_bar_chart.EnergyBarChart, {
+		data,
+		series: [
+			{
+				key: "solar",
+				label: labels.solar,
+				color: "var(--orange-9)",
+				getValue: (d) => d.solar
+			},
+			{
+				key: "battery",
+				label: labels.battery,
+				color: "var(--green-9)",
+				getValue: (d) => d.battery
+			},
+			{
+				key: "grid",
+				label: labels.grid,
+				color: "var(--blue-9)",
+				getValue: (d) => d.grid
+			},
+			...labels.gridFeedIn !== void 0 ? [{
+				key: "gridFeedIn",
+				label: labels.gridFeedIn,
+				color: "var(--blue-7)",
+				getValue: (d) => -Math.max(0, d.gridFeedIn ?? 0)
+			}] : []
+		].filter((s) => !omitted.has(s.key)),
+		getCategory: (d) => d.bucket,
+		title,
+		yAxisUnit: unit,
+		height,
+		className,
+		formatValue: fmtValue,
+		categoryTicks,
+		...formatBucketLabel && { formatTooltipCategory: (category) => formatBucketLabel(String(category)) },
+		totalSuffix: unit,
+		totalFormat: { maximumFractionDigits: 2 },
+		...highlightedBucket !== void 0 && { highlightedCategory: highlightedBucket },
+		...showHighlightLine !== void 0 && { showHighlightLine }
+	});
+}
+//#endregion
+exports.EnergyHistoryChart = EnergyHistoryChart;
+
+//# sourceMappingURL=energy-history-chart.cjs.map

package/dist/components/energy-history-chart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"energy-history-chart.cjs","names":["valueFormat","EnergyBarChart"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { EnergyBarChart } from './energy-bar-chart'\n\nexport interface EnergyHistoryDatum {\n  /** Bucket label/id (e.g. weekday, day-of-month, month). */\n  bucket: string\n  /** Solar used on-site (kWh, ≥ 0). */\n  solar: number\n  /** Battery discharged (kWh, ≥ 0). */\n  battery: number\n  /** Grid imported (kWh, ≥ 0). */\n  grid: number\n  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */\n  gridFeedIn?: number\n}\n\nexport interface EnergyHistoryChartProps {\n  data: EnergyHistoryDatum[]\n  /** Axis/tooltip unit, e.g. \"kWh\". */\n  unit: string\n  formatValue?: (value: number) => string\n  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n  formatBucketLabel?: (bucket: string) => string\n  labels: {\n    solar: string\n    battery: string\n    grid: string\n    /** Optional; when set, grid feed-in is drawn below the baseline. */\n    gridFeedIn?: string\n  }\n  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */\n  omitSeries?: readonly EnergyHistorySeriesKey[]\n  /** Bucket to mark with the current-period dashed line. */\n  highlightedBucket?: string\n  showHighlightLine?: boolean\n  title?: string\n  className?: string\n  height?: number\n  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n  categoryTicks?: string[]\n}\n\nexport type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn'\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. Grid feed-in (translucent blue) dips below the baseline as an\n * export. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n  data,\n  unit,\n  formatValue,\n  formatBucketLabel,\n  labels,\n  omitSeries,\n  highlightedBucket,\n  showHighlightLine,\n  title,\n  className,\n  height = 260,\n  categoryTicks,\n}: EnergyHistoryChartProps) {\n  const fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const omitted = new Set<EnergyHistorySeriesKey>(omitSeries)\n  const allSeries: BarChartSeries<EnergyHistoryDatum>[] = [\n    {\n      key: 'solar',\n      label: labels.solar,\n      color: 'var(--orange-9)',\n      getValue: (d) => d.solar,\n    },\n    {\n      key: 'battery',\n      label: labels.battery,\n      color: 'var(--green-9)',\n      getValue: (d) => d.battery,\n    },\n    {\n      key: 'grid',\n      label: labels.grid,\n      color: 'var(--blue-9)',\n      getValue: (d) => d.grid,\n    },\n    ...(labels.gridFeedIn !== undefined\n      ? [\n          {\n            key: 'gridFeedIn',\n            label: labels.gridFeedIn,\n            color: 'var(--blue-7)',\n            getValue: (d: EnergyHistoryDatum) =>\n              -Math.max(0, d.gridFeedIn ?? 0),\n          },\n        ]\n      : []),\n  ]\n  const series = allSeries.filter(\n    (s) => !omitted.has(s.key as EnergyHistorySeriesKey),\n  )\n\n  return (\n    <EnergyBarChart<EnergyHistoryDatum>\n      data={data}\n      series={series}\n      getCategory={(d) => d.bucket}\n      title={title}\n      yAxisUnit={unit}\n      height={height}\n      className={className}\n      formatValue={fmtValue}\n      categoryTicks={categoryTicks}\n      {...(formatBucketLabel && {\n        formatTooltipCategory: (category: string | number) =>\n          formatBucketLabel(String(category)),\n      })}\n      totalSuffix={unit}\n      totalFormat={{ maximumFractionDigits: 2 }}\n      {...(highlightedBucket !== undefined && {\n        highlightedCategory: highlightedBucket,\n      })}\n      {...(showHighlightLine !== undefined && { showHighlightLine })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqDA,SAAgB,mBAAmB,EACjC,MACA,MACA,aACA,mBACA,QACA,YACA,mBACA,mBACA,OACA,WACA,SAAS,KACT,iBAC0B;CAC1B,MAAM,YAAY,UAChB,cACI,YAAY,MAAM,GAClB,GAAGA,qBAAAA,iBAAY,OAAO,MAAM,IAAiB;CAEnD,MAAM,UAAU,IAAI,IAA4B,WAAW;AAoC3D,QACE,iBAAA,GAAA,kBAAA,KAACC,oCAAAA,gBAAD;EACQ;EACN,QAPW;GA9Bb;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD,GAAI,OAAO,eAAe,KAAA,IACtB,CACE;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MACT,CAAC,KAAK,IAAI,GAAG,EAAE,cAAc,EAAE;IAClC,CACF,GACD,EAAE;GAEgB,CAAC,QACtB,MAAM,CAAC,QAAQ,IAAI,EAAE,IAA8B,CAMpC;EACd,cAAc,MAAM,EAAE;EACf;EACP,WAAW;EACH;EACG;EACX,aAAa;EACE;EACf,GAAK,qBAAqB,EACxB,wBAAwB,aACtB,kBAAkB,OAAO,SAAS,CAAC,EACtC;EACD,aAAa;EACb,aAAa,EAAE,uBAAuB,GAAG;EACzC,GAAK,sBAAsB,KAAA,KAAa,EACtC,qBAAqB,mBACtB;EACD,GAAK,sBAAsB,KAAA,KAAa,EAAE,mBAAmB;EAC7D,CAAA"}

package/dist/components/energy-history-chart.d.cts

@@ -0,0 +1,66 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/energy-history-chart.d.ts
+interface EnergyHistoryDatum {
+  /** Bucket label/id (e.g. weekday, day-of-month, month). */
+  bucket: string;
+  /** Solar used on-site (kWh, ≥ 0). */
+  solar: number;
+  /** Battery discharged (kWh, ≥ 0). */
+  battery: number;
+  /** Grid imported (kWh, ≥ 0). */
+  grid: number;
+  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */
+  gridFeedIn?: number;
+}
+interface EnergyHistoryChartProps {
+  data: EnergyHistoryDatum[];
+  /** Axis/tooltip unit, e.g. "kWh". */
+  unit: string;
+  formatValue?: (value: number) => string;
+  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */
+  formatBucketLabel?: (bucket: string) => string;
+  labels: {
+    solar: string;
+    battery: string;
+    grid: string; /** Optional; when set, grid feed-in is drawn below the baseline. */
+    gridFeedIn?: string;
+  };
+  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */
+  omitSeries?: readonly EnergyHistorySeriesKey[];
+  /** Bucket to mark with the current-period dashed line. */
+  highlightedBucket?: string;
+  showHighlightLine?: boolean;
+  title?: string;
+  className?: string;
+  height?: number;
+  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */
+  categoryTicks?: string[];
+}
+type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn';
+/**
+ * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
+ * (blue) energy sources stacked per bucket, the total height being the energy
+ * consumed. Grid feed-in (translucent blue) dips below the baseline as an
+ * export. For cumulative energy (week/month/year views). Thin wrapper over the
+ * shared visx `BarChart`, so it inherits the card tooltip and both indicators.
+ */
+declare function EnergyHistoryChart({
+  data,
+  unit,
+  formatValue,
+  formatBucketLabel,
+  labels,
+  omitSeries,
+  highlightedBucket,
+  showHighlightLine,
+  title,
+  className,
+  height,
+  categoryTicks
+}: EnergyHistoryChartProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { EnergyHistoryChart, EnergyHistoryChartProps, EnergyHistoryDatum, EnergyHistorySeriesKey };
+//# sourceMappingURL=energy-history-chart.d.cts.map

package/dist/components/energy-history-chart.d.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/energy-history-chart.d.ts
+interface EnergyHistoryDatum {
+  /** Bucket label/id (e.g. weekday, day-of-month, month). */
+  bucket: string;
+  /** Solar used on-site (kWh, ≥ 0). */
+  solar: number;
+  /** Battery discharged (kWh, ≥ 0). */
+  battery: number;
+  /** Grid imported (kWh, ≥ 0). */
+  grid: number;
+  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */
+  gridFeedIn?: number;
+}
+interface EnergyHistoryChartProps {
+  data: EnergyHistoryDatum[];
+  /** Axis/tooltip unit, e.g. "kWh". */
+  unit: string;
+  formatValue?: (value: number) => string;
+  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */
+  formatBucketLabel?: (bucket: string) => string;
+  labels: {
+    solar: string;
+    battery: string;
+    grid: string; /** Optional; when set, grid feed-in is drawn below the baseline. */
+    gridFeedIn?: string;
+  };
+  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */
+  omitSeries?: readonly EnergyHistorySeriesKey[];
+  /** Bucket to mark with the current-period dashed line. */
+  highlightedBucket?: string;
+  showHighlightLine?: boolean;
+  title?: string;
+  className?: string;
+  height?: number;
+  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */
+  categoryTicks?: string[];
+}
+type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn';
+/**
+ * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
+ * (blue) energy sources stacked per bucket, the total height being the energy
+ * consumed. Grid feed-in (translucent blue) dips below the baseline as an
+ * export. For cumulative energy (week/month/year views). Thin wrapper over the
+ * shared visx `BarChart`, so it inherits the card tooltip and both indicators.
+ */
+declare function EnergyHistoryChart({
+  data,
+  unit,
+  formatValue,
+  formatBucketLabel,
+  labels,
+  omitSeries,
+  highlightedBucket,
+  showHighlightLine,
+  title,
+  className,
+  height,
+  categoryTicks
+}: EnergyHistoryChartProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { EnergyHistoryChart, EnergyHistoryChartProps, EnergyHistoryDatum, EnergyHistorySeriesKey };
+//# sourceMappingURL=energy-history-chart.d.ts.map