@epilot/spark-ui 0.20.0 → 0.20.1

package/dist/components/solar-forecast-chart.js

@@ -0,0 +1,103 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import "../utils/chars.js";
+import { oneDecimalFormat } from "../utils/format.js";
+import { LineChart } from "./line-chart.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/solar-forecast-chart.tsx
+const DEFAULT_HEIGHT = 220;
+const BASE_MARGIN = {
+	top: 8,
+	right: 8,
+	bottom: 28,
+	left: 34
+};
+/** Extra headroom for the weather icon row pinned above the plot. */
+const WEATHER_ROW_HEIGHT = 24;
+function defaultFormatValue(value) {
+	return `${oneDecimalFormat.format(value)} kW`;
+}
+function defaultFormatTime(date) {
+	return date.getHours().toString().padStart(2, "0");
+}
+/**
+* Responsive line plot of measured production (solid) against a forecast
+* (dashed) over a day. Optionally overlays hourly weather icons and
+* sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its
+* container; compose a title and any summary around it.
+*/
+function SolarForecastChart({ produced, forecast, producedLabel = "Produced", forecastLabel = "Forecast", formatValue = defaultFormatValue, yAxisUnit = "kW", formatTime = defaultFormatTime, formatTooltipTime, weather, sunrise, sunset, formatMarkerTime, curve = "monotone", height = DEFAULT_HEIGHT, className, zoomable, zoomResetLabel, zoomDomain, onZoomDomainChange }) {
+	const containerRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const ro = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) setWidth(entry.contentRect.width);
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	const hasWeather = weather != null && weather.length > 0;
+	const margin = {
+		...BASE_MARGIN,
+		top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top
+	};
+	const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime;
+	const topContent = hasWeather ? weather.map((point, i) => {
+		const WeatherGlyph = point.icon;
+		return {
+			key: `weather-${point.date.valueOf()}-${i}`,
+			date: point.date,
+			content: /* @__PURE__ */ jsx(WeatherGlyph, { className: "text-gray-light [--spark-icon-size:18px]" })
+		};
+	}) : void 0;
+	const referenceLines = [sunrise && {
+		key: "sunrise",
+		date: sunrise,
+		label: formatMarker(sunrise)
+	}, sunset && {
+		key: "sunset",
+		date: sunset,
+		label: formatMarker(sunset)
+	}].filter((x) => Boolean(x));
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cn("w-full", className),
+		children: width > 0 && /* @__PURE__ */ jsx(LineChart, {
+			width,
+			height,
+			margin,
+			curve,
+			series: [{
+				id: "produced",
+				data: produced,
+				label: producedLabel
+			}, {
+				id: "forecast",
+				data: forecast,
+				label: forecastLabel,
+				dashed: true
+			}],
+			showGrid: true,
+			xTickCount: 6,
+			yTickCount: 4,
+			yAxisUnit,
+			formatDate: formatTime,
+			formatTooltipDate: formatTooltipTime ?? formatTime,
+			formatValue,
+			referenceLines: referenceLines.length > 0 ? referenceLines : void 0,
+			topContent,
+			zoomable,
+			zoomResetLabel,
+			zoomDomain,
+			onZoomDomainChange
+		})
+	});
+}
+//#endregion
+export { SolarForecastChart, SolarForecastChart as default };
+
+//# sourceMappingURL=solar-forecast-chart.js.map

package/dist/components/solar-forecast-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"solar-forecast-chart.js","names":[],"sources":["../../src/components/solar-forecast-chart.tsx"],"sourcesContent":["import type { SparkIcon } from '@epilot/spark-icons'\nimport { type JSX, type ReactNode, useEffect, useRef, useState } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport { oneDecimalFormat } from '../utils/format'\nimport {\n  LineChart,\n  type LineChartCurve,\n  type LineChartDatum,\n} from './line-chart'\n\nconst DEFAULT_HEIGHT = 220\n// `left` leaves room for the y-axis tick labels + unit (matches the 34px gutter\n// used by BarChart / PowerHistoryChart).\nconst BASE_MARGIN = { top: 8, right: 8, bottom: 28, left: 34 }\n/** Extra headroom for the weather icon row pinned above the plot. */\nconst WEATHER_ROW_HEIGHT = 24\n\nfunction defaultFormatValue(value: number): string {\n  return `${oneDecimalFormat.format(value)}${NARROW_NBSP}kW`\n}\n\nfunction defaultFormatTime(date: Date): string {\n  return date.getHours().toString().padStart(2, '0')\n}\n\nexport interface SolarForecastWeatherPoint {\n  date: Date\n  icon: SparkIcon\n}\n\nexport interface SolarForecastChartProps {\n  /** Measured production, drawn as the solid line. */\n  produced: LineChartDatum[]\n  /** Predicted production, drawn as the dashed line. */\n  forecast: LineChartDatum[]\n  /** Tooltip label for the produced series. */\n  producedLabel?: ReactNode\n  /** Tooltip label for the forecast series. */\n  forecastLabel?: ReactNode\n  /** Tooltip value formatter. Defaults to one-decimal kW (power). */\n  formatValue?: (value: number) => string\n  /** Unit shown once atop the y-axis; ticks render as plain numbers. Defaults to \"kW\". */\n  yAxisUnit?: string\n  /** X-axis tick formatter. Defaults to the zero-padded hour. */\n  formatTime?: (date: Date) => string\n  /** Tooltip time formatter. Defaults to `formatTime`. */\n  formatTooltipTime?: (date: Date) => string\n  /**\n   * Hourly weather icons drawn along the top of the plot, aligned to the time\n   * axis. Their dates must fall within the plotted day.\n   */\n  weather?: SolarForecastWeatherPoint[]\n  /** Sunrise time, drawn as a labelled vertical marker on the plot. */\n  sunrise?: Date\n  /** Sunset time, drawn as a labelled vertical marker on the plot. */\n  sunset?: Date\n  /** Label formatter for the sunrise/sunset markers. Defaults to `formatTime`. */\n  formatMarkerTime?: (date: Date) => string\n  curve?: LineChartCurve\n  height?: number\n  className?: string\n  zoomable?: boolean\n  zoomResetLabel?: string\n  zoomDomain?: [Date, Date] | null\n  onZoomDomainChange?: (domain: [Date, Date] | null) => void\n}\n\n/**\n * Responsive line plot of measured production (solid) against a forecast\n * (dashed) over a day. Optionally overlays hourly weather icons and\n * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its\n * container; compose a title and any summary around it.\n */\nexport function SolarForecastChart({\n  produced,\n  forecast,\n  producedLabel = 'Produced',\n  forecastLabel = 'Forecast',\n  formatValue = defaultFormatValue,\n  yAxisUnit = 'kW',\n  formatTime = defaultFormatTime,\n  formatTooltipTime,\n  weather,\n  sunrise,\n  sunset,\n  formatMarkerTime,\n  curve = 'monotone',\n  height = DEFAULT_HEIGHT,\n  className,\n  zoomable,\n  zoomResetLabel,\n  zoomDomain,\n  onZoomDomainChange,\n}: SolarForecastChartProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const ro = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setWidth(entry.contentRect.width)\n    })\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [])\n\n  const hasWeather = weather != null && weather.length > 0\n  const margin = {\n    ...BASE_MARGIN,\n    top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top,\n  }\n  const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime\n\n  const topContent = hasWeather\n    ? weather.map((point, i) => {\n        const WeatherGlyph = point.icon\n        return {\n          key: `weather-${point.date.valueOf()}-${i}`,\n          date: point.date,\n          content: (\n            <WeatherGlyph className=\"text-gray-light [--spark-icon-size:18px]\" />\n          ),\n        }\n      })\n    : undefined\n\n  const referenceLines = [\n    sunrise && { key: 'sunrise', date: sunrise, label: formatMarker(sunrise) },\n    sunset && { key: 'sunset', date: sunset, label: formatMarker(sunset) },\n  ].filter((x): x is { key: string; date: Date; label: string } => Boolean(x))\n\n  return (\n    <div ref={containerRef} className={cn('w-full', className)}>\n      {width > 0 && (\n        <LineChart\n          width={width}\n          height={height}\n          margin={margin}\n          curve={curve}\n          series={[\n            { id: 'produced', data: produced, label: producedLabel },\n            {\n              id: 'forecast',\n              data: forecast,\n              label: forecastLabel,\n              dashed: true,\n            },\n          ]}\n          showGrid\n          xTickCount={6}\n          yTickCount={4}\n          yAxisUnit={yAxisUnit}\n          formatDate={formatTime}\n          formatTooltipDate={formatTooltipTime ?? formatTime}\n          formatValue={formatValue}\n          referenceLines={\n            referenceLines.length > 0 ? referenceLines : undefined\n          }\n          topContent={topContent}\n          zoomable={zoomable}\n          zoomResetLabel={zoomResetLabel}\n          zoomDomain={zoomDomain}\n          onZoomDomainChange={onZoomDomainChange}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default SolarForecastChart\n"],"mappings":";;;;;;;;AAWA,MAAM,iBAAiB;AAGvB,MAAM,cAAc;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAI,MAAM;AAAG;;AAE7D,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB,OAAuB;CACjD,OAAO,GAAG,iBAAiB,OAAO,KAAK;AACzC;AAEA,SAAS,kBAAkB,MAAoB;CAC7C,OAAO,KAAK,SAAS,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG;AACnD;;;;;;;AAkDA,SAAgB,mBAAmB,EACjC,UACA,UACA,gBAAgB,YAChB,gBAAgB,YAChB,cAAc,oBACd,YAAY,MACZ,aAAa,mBACb,mBACA,SACA,SACA,QACA,kBACA,QAAQ,YACR,SAAS,gBACT,WACA,UACA,gBACA,YACA,sBACuC;CACvC,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CAEpC,gBAAgB;EACd,MAAM,KAAK,aAAa;EACxB,IAAI,CAAC,IAAI;EACT,MAAM,KAAK,IAAI,gBAAgB,YAAY;GACzC,MAAM,QAAQ,QAAQ;GACtB,IAAI,OAAO,SAAS,MAAM,YAAY,KAAK;EAC7C,CAAC;EACD,GAAG,QAAQ,EAAE;EACb,aAAa,GAAG,WAAW;CAC7B,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,WAAW,QAAQ,QAAQ,SAAS;CACvD,MAAM,SAAS;EACb,GAAG;EACH,KAAK,aAAa,YAAY,MAAM,qBAAqB,YAAY;CACvE;CACA,MAAM,eAAe,oBAAoB,qBAAqB;CAE9D,MAAM,aAAa,aACf,QAAQ,KAAK,OAAO,MAAM;EACxB,MAAM,eAAe,MAAM;EAC3B,OAAO;GACL,KAAK,WAAW,MAAM,KAAK,QAAQ,EAAE,GAAG;GACxC,MAAM,MAAM;GACZ,SACE,oBAAC,cAAD,EAAc,WAAU,2CAA4C,CAAA;EAExE;CACF,CAAC,IACD,KAAA;CAEJ,MAAM,iBAAiB,CACrB,WAAW;EAAE,KAAK;EAAW,MAAM;EAAS,OAAO,aAAa,OAAO;CAAE,GACzE,UAAU;EAAE,KAAK;EAAU,MAAM;EAAQ,OAAO,aAAa,MAAM;CAAE,CACvE,EAAE,QAAQ,MAAuD,QAAQ,CAAC,CAAC;CAE3E,OACE,oBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,GAAG,UAAU,SAAS;YACtD,QAAQ,KACP,oBAAC,WAAD;GACS;GACC;GACA;GACD;GACP,QAAQ,CACN;IAAE,IAAI;IAAY,MAAM;IAAU,OAAO;GAAc,GACvD;IACE,IAAI;IACJ,MAAM;IACN,OAAO;IACP,QAAQ;GACV,CACF;GACA,UAAA;GACA,YAAY;GACZ,YAAY;GACD;GACX,YAAY;GACZ,mBAAmB,qBAAqB;GAC3B;GACb,gBACE,eAAe,SAAS,IAAI,iBAAiB,KAAA;GAEnC;GACF;GACM;GACJ;GACQ;EACrB,CAAA;CAEA,CAAA;AAET"}

package/dist/components/stepper.cjs

@@ -1,9 +1,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/stepper.tsx

package/dist/components/stepper.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/stepper.tsx
 const Stepper = React$1.forwardRef(({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, formatValue = (v) => String(v), disabled, className, commitDelayMs = 400, "aria-label": ariaLabel, decreaseLabel, increaseLabel }, ref) => {

package/dist/components/table.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_skeleton = require("./skeleton.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/table.tsx

package/dist/components/table.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { Skeleton } from "./skeleton.js";
-import { ArrowDownward, ArrowUpward, SwapVert } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { ArrowDownward, ArrowUpward, SwapVert } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/table.tsx
 const TableContext = React$1.createContext({

package/dist/components/tabs.cjs

@@ -1,9 +1,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_tabs = require("@base-ui/react/tabs");
 let cnfast = require("cnfast");

package/dist/components/tabs.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 //#region src/components/tabs.tsx

package/dist/components/toast.cjs

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
 const require_components_spinner = require("./spinner.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_toast = require("@base-ui/react/toast");
 let cnfast = require("cnfast");

package/dist/components/toast.js

@@ -3,8 +3,8 @@
 import { cn } from "../utils/cn.js";
 import { buttonVariants } from "./button.js";
 import { Spinner } from "./spinner.js";
-import { Cancel, CheckCircle, Close, Info, Warning } from "@epilot/spark-icons";
 import "react";
+import { Cancel, CheckCircle, Close, Info, Warning } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";
 //#region src/components/toast.tsx

package/dist/components/tooltip.cjs

@@ -1,9 +1,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_tooltip = require("@base-ui/react/tooltip");
 let cnfast = require("cnfast");

package/dist/components/tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { Info } from "@epilot/spark-icons";
 import "react";
+import { Info } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 //#region src/components/tooltip.tsx

package/dist/number-flow-Bch81ixZ.d.cts

@@ -0,0 +1,14 @@
+"use client";
+
+import { Format, NumberFlowProps, NumberFlowProps as NumberFlowProps$1 } from "@number-flow/react";
+
+//#region src/components/number-flow.d.ts
+declare function NumberFlow({
+  locales,
+  prefix,
+  suffix,
+  ...props
+}: NumberFlowProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { NumberFlow as n, NumberFlowProps$1 as r, Format as t };
+//# sourceMappingURL=number-flow-Bch81ixZ.d.cts.map

package/dist/number-flow-Bch81ixZ.d.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import { Format, NumberFlowProps, NumberFlowProps as NumberFlowProps$1 } from "@number-flow/react";
+
+//#region src/components/number-flow.d.ts
+declare function NumberFlow({
+  locales,
+  prefix,
+  suffix,
+  ...props
+}: NumberFlowProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { NumberFlow as n, NumberFlowProps$1 as r, Format as t };
+//# sourceMappingURL=number-flow-Bch81ixZ.d.ts.map

package/dist/utils/build-sankey-nodes.cjs

@@ -0,0 +1,72 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/utils/build-sankey-nodes.ts
+function buildSankeyNodes({ solarPower, batteryPower, gridPower, floorShares, deviceSharesByFloor }) {
+	const solar = Math.max(0, solarPower);
+	const gridImport = Math.max(0, gridPower);
+	const gridExport = Math.max(0, -gridPower);
+	const batteryDischarge = Math.max(0, batteryPower);
+	const batteryCharge = Math.max(0, -batteryPower);
+	const solarToBattery = Math.min(solar, batteryCharge);
+	const gridToBattery = Math.min(gridImport, batteryCharge - solarToBattery);
+	const solarToFeedIn = Math.min(solar - solarToBattery, gridExport);
+	const batteryToFeedIn = Math.min(batteryDischarge, gridExport - solarToFeedIn);
+	const links = [
+		{
+			source: "grid",
+			target: "home",
+			value: gridImport - gridToBattery
+		},
+		{
+			source: "solar",
+			target: "home",
+			value: solar - solarToBattery - solarToFeedIn
+		},
+		{
+			source: "battery",
+			target: "home",
+			value: batteryDischarge - batteryToFeedIn
+		},
+		{
+			source: "solar",
+			target: "battery",
+			value: solarToBattery
+		},
+		{
+			source: "grid",
+			target: "battery",
+			value: gridToBattery
+		},
+		{
+			source: "solar",
+			target: "gridFeedIn",
+			value: solarToFeedIn
+		},
+		{
+			source: "battery",
+			target: "gridFeedIn",
+			value: batteryToFeedIn
+		}
+	];
+	if (!floorShares) return links;
+	const homeWatts = solar - solarToBattery - solarToFeedIn + (gridImport - gridToBattery) + (batteryDischarge - batteryToFeedIn);
+	for (const [floorId, share] of Object.entries(floorShares)) {
+		const floorWatts = homeWatts * share;
+		links.push({
+			source: "home",
+			target: floorId,
+			value: floorWatts
+		});
+		const deviceShares = deviceSharesByFloor?.[floorId] ?? {};
+		for (const [deviceId, deviceShare] of Object.entries(deviceShares)) links.push({
+			source: floorId,
+			target: deviceId,
+			value: floorWatts * deviceShare
+		});
+	}
+	return links;
+}
+//#endregion
+exports.buildSankeyNodes = buildSankeyNodes;
+
+//# sourceMappingURL=build-sankey-nodes.cjs.map

package/dist/utils/build-sankey-nodes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-sankey-nodes.cjs","names":[],"sources":["../../src/utils/build-sankey-nodes.ts"],"sourcesContent":["import type { SankeyChartLink } from '../components/sankey-chart'\n\ntype SankeyNodesArgs = {\n  solarPower: number\n  /**\n   * Signed storage power: positive = discharging into the home, negative =\n   * charging from solar/grid. Charging power is routed into the `battery`\n   * node so it isn't mistakenly attributed to home consumption.\n   */\n  batteryPower: number\n  gridPower: number\n  floorShares?: Record<string, number>\n  deviceSharesByFloor?: Record<string, Record<string, number>>\n}\n\nfunction buildSankeyNodes({\n  solarPower,\n  batteryPower,\n  gridPower,\n  floorShares,\n  deviceSharesByFloor,\n}: SankeyNodesArgs): SankeyChartLink[] {\n  const solar = Math.max(0, solarPower)\n  const gridImport = Math.max(0, gridPower)\n  const gridExport = Math.max(0, -gridPower)\n  const batteryDischarge = Math.max(0, batteryPower)\n  const batteryCharge = Math.max(0, -batteryPower)\n\n  // Charge the battery from solar surplus first, then from the grid. Routing\n  // the charge flow into the `battery` node (a sink while charging) keeps it\n  // out of the `home` node, which should reflect actual consumption only.\n  const solarToBattery = Math.min(solar, batteryCharge)\n  const gridToBattery = Math.min(gridImport, batteryCharge - solarToBattery)\n\n  // Grid feed-in (export). Cover it from the solar surplus first, then fall\n  // back to battery discharge. Like battery charging, this must not land in the\n  // `home` node — it's power leaving the house, not consumption.\n  const solarToFeedIn = Math.min(solar - solarToBattery, gridExport)\n  const batteryToFeedIn = Math.min(batteryDischarge, gridExport - solarToFeedIn)\n\n  const links: SankeyChartLink[] = [\n    { source: 'grid', target: 'home', value: gridImport - gridToBattery },\n    {\n      source: 'solar',\n      target: 'home',\n      value: solar - solarToBattery - solarToFeedIn,\n    },\n    {\n      source: 'battery',\n      target: 'home',\n      value: batteryDischarge - batteryToFeedIn,\n    },\n    { source: 'solar', target: 'battery', value: solarToBattery },\n    { source: 'grid', target: 'battery', value: gridToBattery },\n    { source: 'solar', target: 'gridFeedIn', value: solarToFeedIn },\n    { source: 'battery', target: 'gridFeedIn', value: batteryToFeedIn },\n  ]\n\n  if (!floorShares) return links\n\n  const homeWatts =\n    solar -\n    solarToBattery -\n    solarToFeedIn +\n    (gridImport - gridToBattery) +\n    (batteryDischarge - batteryToFeedIn)\n\n  for (const [floorId, share] of Object.entries(floorShares)) {\n    const floorWatts = homeWatts * share\n    links.push({ source: 'home', target: floorId, value: floorWatts })\n\n    const deviceShares = deviceSharesByFloor?.[floorId] ?? {}\n    for (const [deviceId, deviceShare] of Object.entries(deviceShares)) {\n      links.push({\n        source: floorId,\n        target: deviceId,\n        value: floorWatts * deviceShare,\n      })\n    }\n  }\n\n  return links\n}\n\nexport { buildSankeyNodes }\n"],"mappings":";;;AAeA,SAAS,iBAAiB,EACxB,YACA,cACA,WACA,aACA,uBACqC;CACrC,MAAM,QAAQ,KAAK,IAAI,GAAG,UAAU;CACpC,MAAM,aAAa,KAAK,IAAI,GAAG,SAAS;CACxC,MAAM,aAAa,KAAK,IAAI,GAAG,CAAC,SAAS;CACzC,MAAM,mBAAmB,KAAK,IAAI,GAAG,YAAY;CACjD,MAAM,gBAAgB,KAAK,IAAI,GAAG,CAAC,YAAY;CAK/C,MAAM,iBAAiB,KAAK,IAAI,OAAO,aAAa;CACpD,MAAM,gBAAgB,KAAK,IAAI,YAAY,gBAAgB,cAAc;CAKzE,MAAM,gBAAgB,KAAK,IAAI,QAAQ,gBAAgB,UAAU;CACjE,MAAM,kBAAkB,KAAK,IAAI,kBAAkB,aAAa,aAAa;CAE7E,MAAM,QAA2B;EAC/B;GAAE,QAAQ;GAAQ,QAAQ;GAAQ,OAAO,aAAa;EAAc;EACpE;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,QAAQ,iBAAiB;EAClC;EACA;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,mBAAmB;EAC5B;EACA;GAAE,QAAQ;GAAS,QAAQ;GAAW,OAAO;EAAe;EAC5D;GAAE,QAAQ;GAAQ,QAAQ;GAAW,OAAO;EAAc;EAC1D;GAAE,QAAQ;GAAS,QAAQ;GAAc,OAAO;EAAc;EAC9D;GAAE,QAAQ;GAAW,QAAQ;GAAc,OAAO;EAAgB;CACpE;CAEA,IAAI,CAAC,aAAa,OAAO;CAEzB,MAAM,YACJ,QACA,iBACA,iBACC,aAAa,kBACb,mBAAmB;CAEtB,KAAK,MAAM,CAAC,SAAS,UAAU,OAAO,QAAQ,WAAW,GAAG;EAC1D,MAAM,aAAa,YAAY;EAC/B,MAAM,KAAK;GAAE,QAAQ;GAAQ,QAAQ;GAAS,OAAO;EAAW,CAAC;EAEjE,MAAM,eAAe,sBAAsB,YAAY,CAAC;EACxD,KAAK,MAAM,CAAC,UAAU,gBAAgB,OAAO,QAAQ,YAAY,GAC/D,MAAM,KAAK;GACT,QAAQ;GACR,QAAQ;GACR,OAAO,aAAa;EACtB,CAAC;CAEL;CAEA,OAAO;AACT"}

package/dist/utils/build-sankey-nodes.d.cts

@@ -0,0 +1,27 @@
+"use client";
+
+import { SankeyChartLink } from "../components/sankey-chart.cjs";
+
+//#region src/utils/build-sankey-nodes.d.ts
+type SankeyNodesArgs = {
+  solarPower: number;
+  /**
+   * Signed storage power: positive = discharging into the home, negative =
+   * charging from solar/grid. Charging power is routed into the `battery`
+   * node so it isn't mistakenly attributed to home consumption.
+   */
+  batteryPower: number;
+  gridPower: number;
+  floorShares?: Record<string, number>;
+  deviceSharesByFloor?: Record<string, Record<string, number>>;
+};
+declare function buildSankeyNodes({
+  solarPower,
+  batteryPower,
+  gridPower,
+  floorShares,
+  deviceSharesByFloor
+}: SankeyNodesArgs): SankeyChartLink[];
+//#endregion
+export { buildSankeyNodes };
+//# sourceMappingURL=build-sankey-nodes.d.cts.map

package/dist/utils/build-sankey-nodes.d.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import { SankeyChartLink } from "../components/sankey-chart.js";
+
+//#region src/utils/build-sankey-nodes.d.ts
+type SankeyNodesArgs = {
+  solarPower: number;
+  /**
+   * Signed storage power: positive = discharging into the home, negative =
+   * charging from solar/grid. Charging power is routed into the `battery`
+   * node so it isn't mistakenly attributed to home consumption.
+   */
+  batteryPower: number;
+  gridPower: number;
+  floorShares?: Record<string, number>;
+  deviceSharesByFloor?: Record<string, Record<string, number>>;
+};
+declare function buildSankeyNodes({
+  solarPower,
+  batteryPower,
+  gridPower,
+  floorShares,
+  deviceSharesByFloor
+}: SankeyNodesArgs): SankeyChartLink[];
+//#endregion
+export { buildSankeyNodes };
+//# sourceMappingURL=build-sankey-nodes.d.ts.map

package/dist/utils/build-sankey-nodes.js

@@ -0,0 +1,71 @@
+"use client";
+//#region src/utils/build-sankey-nodes.ts
+function buildSankeyNodes({ solarPower, batteryPower, gridPower, floorShares, deviceSharesByFloor }) {
+	const solar = Math.max(0, solarPower);
+	const gridImport = Math.max(0, gridPower);
+	const gridExport = Math.max(0, -gridPower);
+	const batteryDischarge = Math.max(0, batteryPower);
+	const batteryCharge = Math.max(0, -batteryPower);
+	const solarToBattery = Math.min(solar, batteryCharge);
+	const gridToBattery = Math.min(gridImport, batteryCharge - solarToBattery);
+	const solarToFeedIn = Math.min(solar - solarToBattery, gridExport);
+	const batteryToFeedIn = Math.min(batteryDischarge, gridExport - solarToFeedIn);
+	const links = [
+		{
+			source: "grid",
+			target: "home",
+			value: gridImport - gridToBattery
+		},
+		{
+			source: "solar",
+			target: "home",
+			value: solar - solarToBattery - solarToFeedIn
+		},
+		{
+			source: "battery",
+			target: "home",
+			value: batteryDischarge - batteryToFeedIn
+		},
+		{
+			source: "solar",
+			target: "battery",
+			value: solarToBattery
+		},
+		{
+			source: "grid",
+			target: "battery",
+			value: gridToBattery
+		},
+		{
+			source: "solar",
+			target: "gridFeedIn",
+			value: solarToFeedIn
+		},
+		{
+			source: "battery",
+			target: "gridFeedIn",
+			value: batteryToFeedIn
+		}
+	];
+	if (!floorShares) return links;
+	const homeWatts = solar - solarToBattery - solarToFeedIn + (gridImport - gridToBattery) + (batteryDischarge - batteryToFeedIn);
+	for (const [floorId, share] of Object.entries(floorShares)) {
+		const floorWatts = homeWatts * share;
+		links.push({
+			source: "home",
+			target: floorId,
+			value: floorWatts
+		});
+		const deviceShares = deviceSharesByFloor?.[floorId] ?? {};
+		for (const [deviceId, deviceShare] of Object.entries(deviceShares)) links.push({
+			source: floorId,
+			target: deviceId,
+			value: floorWatts * deviceShare
+		});
+	}
+	return links;
+}
+//#endregion
+export { buildSankeyNodes };
+
+//# sourceMappingURL=build-sankey-nodes.js.map

package/dist/utils/build-sankey-nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-sankey-nodes.js","names":[],"sources":["../../src/utils/build-sankey-nodes.ts"],"sourcesContent":["import type { SankeyChartLink } from '../components/sankey-chart'\n\ntype SankeyNodesArgs = {\n  solarPower: number\n  /**\n   * Signed storage power: positive = discharging into the home, negative =\n   * charging from solar/grid. Charging power is routed into the `battery`\n   * node so it isn't mistakenly attributed to home consumption.\n   */\n  batteryPower: number\n  gridPower: number\n  floorShares?: Record<string, number>\n  deviceSharesByFloor?: Record<string, Record<string, number>>\n}\n\nfunction buildSankeyNodes({\n  solarPower,\n  batteryPower,\n  gridPower,\n  floorShares,\n  deviceSharesByFloor,\n}: SankeyNodesArgs): SankeyChartLink[] {\n  const solar = Math.max(0, solarPower)\n  const gridImport = Math.max(0, gridPower)\n  const gridExport = Math.max(0, -gridPower)\n  const batteryDischarge = Math.max(0, batteryPower)\n  const batteryCharge = Math.max(0, -batteryPower)\n\n  // Charge the battery from solar surplus first, then from the grid. Routing\n  // the charge flow into the `battery` node (a sink while charging) keeps it\n  // out of the `home` node, which should reflect actual consumption only.\n  const solarToBattery = Math.min(solar, batteryCharge)\n  const gridToBattery = Math.min(gridImport, batteryCharge - solarToBattery)\n\n  // Grid feed-in (export). Cover it from the solar surplus first, then fall\n  // back to battery discharge. Like battery charging, this must not land in the\n  // `home` node — it's power leaving the house, not consumption.\n  const solarToFeedIn = Math.min(solar - solarToBattery, gridExport)\n  const batteryToFeedIn = Math.min(batteryDischarge, gridExport - solarToFeedIn)\n\n  const links: SankeyChartLink[] = [\n    { source: 'grid', target: 'home', value: gridImport - gridToBattery },\n    {\n      source: 'solar',\n      target: 'home',\n      value: solar - solarToBattery - solarToFeedIn,\n    },\n    {\n      source: 'battery',\n      target: 'home',\n      value: batteryDischarge - batteryToFeedIn,\n    },\n    { source: 'solar', target: 'battery', value: solarToBattery },\n    { source: 'grid', target: 'battery', value: gridToBattery },\n    { source: 'solar', target: 'gridFeedIn', value: solarToFeedIn },\n    { source: 'battery', target: 'gridFeedIn', value: batteryToFeedIn },\n  ]\n\n  if (!floorShares) return links\n\n  const homeWatts =\n    solar -\n    solarToBattery -\n    solarToFeedIn +\n    (gridImport - gridToBattery) +\n    (batteryDischarge - batteryToFeedIn)\n\n  for (const [floorId, share] of Object.entries(floorShares)) {\n    const floorWatts = homeWatts * share\n    links.push({ source: 'home', target: floorId, value: floorWatts })\n\n    const deviceShares = deviceSharesByFloor?.[floorId] ?? {}\n    for (const [deviceId, deviceShare] of Object.entries(deviceShares)) {\n      links.push({\n        source: floorId,\n        target: deviceId,\n        value: floorWatts * deviceShare,\n      })\n    }\n  }\n\n  return links\n}\n\nexport { buildSankeyNodes }\n"],"mappings":";;AAeA,SAAS,iBAAiB,EACxB,YACA,cACA,WACA,aACA,uBACqC;CACrC,MAAM,QAAQ,KAAK,IAAI,GAAG,UAAU;CACpC,MAAM,aAAa,KAAK,IAAI,GAAG,SAAS;CACxC,MAAM,aAAa,KAAK,IAAI,GAAG,CAAC,SAAS;CACzC,MAAM,mBAAmB,KAAK,IAAI,GAAG,YAAY;CACjD,MAAM,gBAAgB,KAAK,IAAI,GAAG,CAAC,YAAY;CAK/C,MAAM,iBAAiB,KAAK,IAAI,OAAO,aAAa;CACpD,MAAM,gBAAgB,KAAK,IAAI,YAAY,gBAAgB,cAAc;CAKzE,MAAM,gBAAgB,KAAK,IAAI,QAAQ,gBAAgB,UAAU;CACjE,MAAM,kBAAkB,KAAK,IAAI,kBAAkB,aAAa,aAAa;CAE7E,MAAM,QAA2B;EAC/B;GAAE,QAAQ;GAAQ,QAAQ;GAAQ,OAAO,aAAa;EAAc;EACpE;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,QAAQ,iBAAiB;EAClC;EACA;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,mBAAmB;EAC5B;EACA;GAAE,QAAQ;GAAS,QAAQ;GAAW,OAAO;EAAe;EAC5D;GAAE,QAAQ;GAAQ,QAAQ;GAAW,OAAO;EAAc;EAC1D;GAAE,QAAQ;GAAS,QAAQ;GAAc,OAAO;EAAc;EAC9D;GAAE,QAAQ;GAAW,QAAQ;GAAc,OAAO;EAAgB;CACpE;CAEA,IAAI,CAAC,aAAa,OAAO;CAEzB,MAAM,YACJ,QACA,iBACA,iBACC,aAAa,kBACb,mBAAmB;CAEtB,KAAK,MAAM,CAAC,SAAS,UAAU,OAAO,QAAQ,WAAW,GAAG;EAC1D,MAAM,aAAa,YAAY;EAC/B,MAAM,KAAK;GAAE,QAAQ;GAAQ,QAAQ;GAAS,OAAO;EAAW,CAAC;EAEjE,MAAM,eAAe,sBAAsB,YAAY,CAAC;EACxD,KAAK,MAAM,CAAC,UAAU,gBAAgB,OAAO,QAAQ,YAAY,GAC/D,MAAM,KAAK;GACT,QAAQ;GACR,QAAQ;GACR,OAAO,aAAa;EACtB,CAAC;CAEL;CAEA,OAAO;AACT"}

package/dist/utils/format.cjs

@@ -23,6 +23,17 @@ const integerFormat = decimalsFormat(0);
 const oneDecimalFormat = decimalsFormat(1);
 const twoDecimalFormat = decimalsFormat(2);
 const formatThousands = (n) => integerFormat.format(n);
+const formatEnergy = (v) => {
+	if (v >= 1e6) return `${twoDecimalFormat.format(v / 1e3)} MWh`;
+	if (v >= 1e3) return `${integerFormat.format(v)} kWh`;
+	if (v >= 10) return `${oneDecimalFormat.format(v)} kWh`;
+	return `${twoDecimalFormat.format(v)} kWh`;
+};
+const formatPower = (value, { signed = false } = {}) => {
+	if (value == null) return "—";
+	const rounded = Math.round(value);
+	return `${signed && rounded > 0 ? "+" : ""}${integerFormat.format(rounded)} W`;
+};
 const formatPercent = (value) => {
 	if (value == null) return "—";
 	return `${integerFormat.format(value)} %`;
@@ -33,7 +44,9 @@ const formatRatio = (value) => {
 };
 //#endregion
 exports.decimalsFormat = decimalsFormat;
+exports.formatEnergy = formatEnergy;
 exports.formatPercent = formatPercent;
+exports.formatPower = formatPower;
 exports.formatRatio = formatRatio;
 exports.formatThousands = formatThousands;
 exports.integerFormat = integerFormat;

package/dist/utils/format.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"format.cjs","names":[],"sources":["../../src/utils/format.ts"],"sourcesContent":["import { EM_DASH, NARROW_NBSP } from './chars'\n\ninterface LocaleNumberFormat {\n  format: (value: number) => string\n}\n\nfunction getDocumentLang(): string | undefined {\n  return typeof document === 'undefined'\n    ? undefined\n    : document.documentElement.lang || undefined\n}\n\nconst localeNumberFormat = (\n  options?: Intl.NumberFormatOptions,\n): LocaleNumberFormat => {\n  const cache = new Map<string, Intl.NumberFormat>()\n  return {\n    format: (value) => {\n      const locale = getDocumentLang()\n      const key = locale ?? ''\n      let formatter = cache.get(key)\n      if (!formatter) {\n        formatter = new Intl.NumberFormat(locale, options)\n        cache.set(key, formatter)\n      }\n      return formatter.format(value)\n    },\n  }\n}\n\nconst decimalsFormat = (decimals: number) =>\n  localeNumberFormat({ maximumFractionDigits: decimals })\n\nconst integerFormat = decimalsFormat(0)\nconst oneDecimalFormat = decimalsFormat(1)\nconst twoDecimalFormat = decimalsFormat(2)\n\nconst formatThousands = (n: number) => integerFormat.format(n)\n\nconst formatPercent = (value: number | null): string => {\n  if (value == null) return EM_DASH\n  return `${integerFormat.format(value)}${NARROW_NBSP}%`\n}\n\nconst formatRatio = (value: number | null): string => {\n  if (value == null) return EM_DASH\n  return `${integerFormat.format(value * 100)}${NARROW_NBSP}%`\n}\n\nexport {\n  formatThousands,\n  formatPercent,\n  formatRatio,\n  localeNumberFormat,\n  decimalsFormat,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n}\n"],"mappings":";;;;AAMA,SAAS,kBAAsC;CAC7C,OAAO,OAAO,aAAa,cACvB,KAAA,IACA,SAAS,gBAAgB,QAAQ,KAAA;AACvC;AAEA,MAAM,sBACJ,YACuB;CACvB,MAAM,wBAAQ,IAAI,IAA+B;CACjD,OAAO,EACL,SAAS,UAAU;EACjB,MAAM,SAAS,gBAAgB;EAC/B,MAAM,MAAM,UAAU;EACtB,IAAI,YAAY,MAAM,IAAI,GAAG;EAC7B,IAAI,CAAC,WAAW;GACd,YAAY,IAAI,KAAK,aAAa,QAAQ,OAAO;GACjD,MAAM,IAAI,KAAK,SAAS;EAC1B;EACA,OAAO,UAAU,OAAO,KAAK;CAC/B,EACF;AACF;AAEA,MAAM,kBAAkB,aACtB,mBAAmB,EAAE,uBAAuB,SAAS,CAAC;AAExD,MAAM,gBAAgB,eAAe,CAAC;AACtC,MAAM,mBAAmB,eAAe,CAAC;AACzC,MAAM,mBAAmB,eAAe,CAAC;AAEzC,MAAM,mBAAmB,MAAc,cAAc,OAAO,CAAC;AAE7D,MAAM,iBAAiB,UAAiC;CACtD,IAAI,SAAS,MAAM,OAAA;CACnB,OAAO,GAAG,cAAc,OAAO,KAAK;AACtC;AAEA,MAAM,eAAe,UAAiC;CACpD,IAAI,SAAS,MAAM,OAAA;CACnB,OAAO,GAAG,cAAc,OAAO,QAAQ,GAAG;AAC5C"}
+{"version":3,"file":"format.cjs","names":[],"sources":["../../src/utils/format.ts"],"sourcesContent":["import { EM_DASH, NARROW_NBSP } from './chars'\n\ninterface LocaleNumberFormat {\n  format: (value: number) => string\n}\n\nfunction getDocumentLang(): string | undefined {\n  return typeof document === 'undefined'\n    ? undefined\n    : document.documentElement.lang || undefined\n}\n\nconst localeNumberFormat = (\n  options?: Intl.NumberFormatOptions,\n): LocaleNumberFormat => {\n  const cache = new Map<string, Intl.NumberFormat>()\n  return {\n    format: (value) => {\n      const locale = getDocumentLang()\n      const key = locale ?? ''\n      let formatter = cache.get(key)\n      if (!formatter) {\n        formatter = new Intl.NumberFormat(locale, options)\n        cache.set(key, formatter)\n      }\n      return formatter.format(value)\n    },\n  }\n}\n\nconst decimalsFormat = (decimals: number) =>\n  localeNumberFormat({ maximumFractionDigits: decimals })\n\nconst integerFormat = decimalsFormat(0)\nconst oneDecimalFormat = decimalsFormat(1)\nconst twoDecimalFormat = decimalsFormat(2)\n\nconst formatThousands = (n: number) => integerFormat.format(n)\n\nconst formatEnergy = (v: number) => {\n  if (v >= 1_000_000) {\n    return `${twoDecimalFormat.format(v / 1000)}${NARROW_NBSP}MWh`\n  }\n  if (v >= 1_000) return `${integerFormat.format(v)}${NARROW_NBSP}kWh`\n  if (v >= 10) return `${oneDecimalFormat.format(v)}${NARROW_NBSP}kWh`\n  return `${twoDecimalFormat.format(v)}${NARROW_NBSP}kWh`\n}\n\nconst formatPower = (\n  value: number | null,\n  { signed = false }: { signed?: boolean } = {},\n): string => {\n  if (value == null) return EM_DASH\n  const rounded = Math.round(value)\n  const sign = signed && rounded > 0 ? '+' : ''\n  return `${sign}${integerFormat.format(rounded)}${NARROW_NBSP}W`\n}\n\nconst formatPercent = (value: number | null): string => {\n  if (value == null) return EM_DASH\n  return `${integerFormat.format(value)}${NARROW_NBSP}%`\n}\n\nconst formatRatio = (value: number | null): string => {\n  if (value == null) return EM_DASH\n  return `${integerFormat.format(value * 100)}${NARROW_NBSP}%`\n}\n\nexport {\n  formatThousands,\n  formatEnergy,\n  formatPower,\n  formatPercent,\n  formatRatio,\n  localeNumberFormat,\n  decimalsFormat,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n}\n"],"mappings":";;;;AAMA,SAAS,kBAAsC;CAC7C,OAAO,OAAO,aAAa,cACvB,KAAA,IACA,SAAS,gBAAgB,QAAQ,KAAA;AACvC;AAEA,MAAM,sBACJ,YACuB;CACvB,MAAM,wBAAQ,IAAI,IAA+B;CACjD,OAAO,EACL,SAAS,UAAU;EACjB,MAAM,SAAS,gBAAgB;EAC/B,MAAM,MAAM,UAAU;EACtB,IAAI,YAAY,MAAM,IAAI,GAAG;EAC7B,IAAI,CAAC,WAAW;GACd,YAAY,IAAI,KAAK,aAAa,QAAQ,OAAO;GACjD,MAAM,IAAI,KAAK,SAAS;EAC1B;EACA,OAAO,UAAU,OAAO,KAAK;CAC/B,EACF;AACF;AAEA,MAAM,kBAAkB,aACtB,mBAAmB,EAAE,uBAAuB,SAAS,CAAC;AAExD,MAAM,gBAAgB,eAAe,CAAC;AACtC,MAAM,mBAAmB,eAAe,CAAC;AACzC,MAAM,mBAAmB,eAAe,CAAC;AAEzC,MAAM,mBAAmB,MAAc,cAAc,OAAO,CAAC;AAE7D,MAAM,gBAAgB,MAAc;CAClC,IAAI,KAAK,KACP,OAAO,GAAG,iBAAiB,OAAO,IAAI,GAAI;CAE5C,IAAI,KAAK,KAAO,OAAO,GAAG,cAAc,OAAO,CAAC;CAChD,IAAI,KAAK,IAAI,OAAO,GAAG,iBAAiB,OAAO,CAAC;CAChD,OAAO,GAAG,iBAAiB,OAAO,CAAC;AACrC;AAEA,MAAM,eACJ,OACA,EAAE,SAAS,UAAgC,CAAC,MACjC;CACX,IAAI,SAAS,MAAM,OAAA;CACnB,MAAM,UAAU,KAAK,MAAM,KAAK;CAEhC,OAAO,GADM,UAAU,UAAU,IAAI,MAAM,KAC1B,cAAc,OAAO,OAAO;AAC/C;AAEA,MAAM,iBAAiB,UAAiC;CACtD,IAAI,SAAS,MAAM,OAAA;CACnB,OAAO,GAAG,cAAc,OAAO,KAAK;AACtC;AAEA,MAAM,eAAe,UAAiC;CACpD,IAAI,SAAS,MAAM,OAAA;CACnB,OAAO,GAAG,cAAc,OAAO,QAAQ,GAAG;AAC5C"}

package/dist/utils/format.d.cts

@@ -10,8 +10,14 @@ declare const integerFormat: LocaleNumberFormat;
 declare const oneDecimalFormat: LocaleNumberFormat;
 declare const twoDecimalFormat: LocaleNumberFormat;
 declare const formatThousands: (n: number) => string;
+declare const formatEnergy: (v: number) => string;
+declare const formatPower: (value: number | null, {
+  signed
+}?: {
+  signed?: boolean;
+}) => string;
 declare const formatPercent: (value: number | null) => string;
 declare const formatRatio: (value: number | null) => string;
 //#endregion
-export { decimalsFormat, formatPercent, formatRatio, formatThousands, integerFormat, localeNumberFormat, oneDecimalFormat, twoDecimalFormat };
+export { decimalsFormat, formatEnergy, formatPercent, formatPower, formatRatio, formatThousands, integerFormat, localeNumberFormat, oneDecimalFormat, twoDecimalFormat };
 //# sourceMappingURL=format.d.cts.map

package/dist/utils/format.d.ts

@@ -10,8 +10,14 @@ declare const integerFormat: LocaleNumberFormat;
 declare const oneDecimalFormat: LocaleNumberFormat;
 declare const twoDecimalFormat: LocaleNumberFormat;
 declare const formatThousands: (n: number) => string;
+declare const formatEnergy: (v: number) => string;
+declare const formatPower: (value: number | null, {
+  signed
+}?: {
+  signed?: boolean;
+}) => string;
 declare const formatPercent: (value: number | null) => string;
 declare const formatRatio: (value: number | null) => string;
 //#endregion
-export { decimalsFormat, formatPercent, formatRatio, formatThousands, integerFormat, localeNumberFormat, oneDecimalFormat, twoDecimalFormat };
+export { decimalsFormat, formatEnergy, formatPercent, formatPower, formatRatio, formatThousands, integerFormat, localeNumberFormat, oneDecimalFormat, twoDecimalFormat };
 //# sourceMappingURL=format.d.ts.map

package/dist/utils/format.js

@@ -22,6 +22,17 @@ const integerFormat = decimalsFormat(0);
 const oneDecimalFormat = decimalsFormat(1);
 const twoDecimalFormat = decimalsFormat(2);
 const formatThousands = (n) => integerFormat.format(n);
+const formatEnergy = (v) => {
+	if (v >= 1e6) return `${twoDecimalFormat.format(v / 1e3)} MWh`;
+	if (v >= 1e3) return `${integerFormat.format(v)} kWh`;
+	if (v >= 10) return `${oneDecimalFormat.format(v)} kWh`;
+	return `${twoDecimalFormat.format(v)} kWh`;
+};
+const formatPower = (value, { signed = false } = {}) => {
+	if (value == null) return "—";
+	const rounded = Math.round(value);
+	return `${signed && rounded > 0 ? "+" : ""}${integerFormat.format(rounded)} W`;
+};
 const formatPercent = (value) => {
 	if (value == null) return "—";
 	return `${integerFormat.format(value)} %`;
@@ -31,6 +42,6 @@ const formatRatio = (value) => {
 	return `${integerFormat.format(value * 100)} %`;
 };
 //#endregion
-export { decimalsFormat, formatPercent, formatRatio, formatThousands, integerFormat, localeNumberFormat, oneDecimalFormat, twoDecimalFormat };
+export { decimalsFormat, formatEnergy, formatPercent, formatPower, formatRatio, formatThousands, integerFormat, localeNumberFormat, oneDecimalFormat, twoDecimalFormat };
 
 //# sourceMappingURL=format.js.map

package/dist/utils/format.js.map

@@ -1 +1 @@
-{"version":3,"file":"format.js","names":[],"sources":["../../src/utils/format.ts"],"sourcesContent":["import { EM_DASH, NARROW_NBSP } from './chars'\n\ninterface LocaleNumberFormat {\n  format: (value: number) => string\n}\n\nfunction getDocumentLang(): string | undefined {\n  return typeof document === 'undefined'\n    ? undefined\n    : document.documentElement.lang || undefined\n}\n\nconst localeNumberFormat = (\n  options?: Intl.NumberFormatOptions,\n): LocaleNumberFormat => {\n  const cache = new Map<string, Intl.NumberFormat>()\n  return {\n    format: (value) => {\n      const locale = getDocumentLang()\n      const key = locale ?? ''\n      let formatter = cache.get(key)\n      if (!formatter) {\n        formatter = new Intl.NumberFormat(locale, options)\n        cache.set(key, formatter)\n      }\n      return formatter.format(value)\n    },\n  }\n}\n\nconst decimalsFormat = (decimals: number) =>\n  localeNumberFormat({ maximumFractionDigits: decimals })\n\nconst integerFormat = decimalsFormat(0)\nconst oneDecimalFormat = decimalsFormat(1)\nconst twoDecimalFormat = decimalsFormat(2)\n\nconst formatThousands = (n: number) => integerFormat.format(n)\n\nconst formatPercent = (value: number | null): string => {\n  if (value == null) return EM_DASH\n  return `${integerFormat.format(value)}${NARROW_NBSP}%`\n}\n\nconst formatRatio = (value: number | null): string => {\n  if (value == null) return EM_DASH\n  return `${integerFormat.format(value * 100)}${NARROW_NBSP}%`\n}\n\nexport {\n  formatThousands,\n  formatPercent,\n  formatRatio,\n  localeNumberFormat,\n  decimalsFormat,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n}\n"],"mappings":";;;AAMA,SAAS,kBAAsC;CAC7C,OAAO,OAAO,aAAa,cACvB,KAAA,IACA,SAAS,gBAAgB,QAAQ,KAAA;AACvC;AAEA,MAAM,sBACJ,YACuB;CACvB,MAAM,wBAAQ,IAAI,IAA+B;CACjD,OAAO,EACL,SAAS,UAAU;EACjB,MAAM,SAAS,gBAAgB;EAC/B,MAAM,MAAM,UAAU;EACtB,IAAI,YAAY,MAAM,IAAI,GAAG;EAC7B,IAAI,CAAC,WAAW;GACd,YAAY,IAAI,KAAK,aAAa,QAAQ,OAAO;GACjD,MAAM,IAAI,KAAK,SAAS;EAC1B;EACA,OAAO,UAAU,OAAO,KAAK;CAC/B,EACF;AACF;AAEA,MAAM,kBAAkB,aACtB,mBAAmB,EAAE,uBAAuB,SAAS,CAAC;AAExD,MAAM,gBAAgB,eAAe,CAAC;AACtC,MAAM,mBAAmB,eAAe,CAAC;AACzC,MAAM,mBAAmB,eAAe,CAAC;AAEzC,MAAM,mBAAmB,MAAc,cAAc,OAAO,CAAC;AAE7D,MAAM,iBAAiB,UAAiC;CACtD,IAAI,SAAS,MAAM,OAAA;CACnB,OAAO,GAAG,cAAc,OAAO,KAAK;AACtC;AAEA,MAAM,eAAe,UAAiC;CACpD,IAAI,SAAS,MAAM,OAAA;CACnB,OAAO,GAAG,cAAc,OAAO,QAAQ,GAAG;AAC5C"}
+{"version":3,"file":"format.js","names":[],"sources":["../../src/utils/format.ts"],"sourcesContent":["import { EM_DASH, NARROW_NBSP } from './chars'\n\ninterface LocaleNumberFormat {\n  format: (value: number) => string\n}\n\nfunction getDocumentLang(): string | undefined {\n  return typeof document === 'undefined'\n    ? undefined\n    : document.documentElement.lang || undefined\n}\n\nconst localeNumberFormat = (\n  options?: Intl.NumberFormatOptions,\n): LocaleNumberFormat => {\n  const cache = new Map<string, Intl.NumberFormat>()\n  return {\n    format: (value) => {\n      const locale = getDocumentLang()\n      const key = locale ?? ''\n      let formatter = cache.get(key)\n      if (!formatter) {\n        formatter = new Intl.NumberFormat(locale, options)\n        cache.set(key, formatter)\n      }\n      return formatter.format(value)\n    },\n  }\n}\n\nconst decimalsFormat = (decimals: number) =>\n  localeNumberFormat({ maximumFractionDigits: decimals })\n\nconst integerFormat = decimalsFormat(0)\nconst oneDecimalFormat = decimalsFormat(1)\nconst twoDecimalFormat = decimalsFormat(2)\n\nconst formatThousands = (n: number) => integerFormat.format(n)\n\nconst formatEnergy = (v: number) => {\n  if (v >= 1_000_000) {\n    return `${twoDecimalFormat.format(v / 1000)}${NARROW_NBSP}MWh`\n  }\n  if (v >= 1_000) return `${integerFormat.format(v)}${NARROW_NBSP}kWh`\n  if (v >= 10) return `${oneDecimalFormat.format(v)}${NARROW_NBSP}kWh`\n  return `${twoDecimalFormat.format(v)}${NARROW_NBSP}kWh`\n}\n\nconst formatPower = (\n  value: number | null,\n  { signed = false }: { signed?: boolean } = {},\n): string => {\n  if (value == null) return EM_DASH\n  const rounded = Math.round(value)\n  const sign = signed && rounded > 0 ? '+' : ''\n  return `${sign}${integerFormat.format(rounded)}${NARROW_NBSP}W`\n}\n\nconst formatPercent = (value: number | null): string => {\n  if (value == null) return EM_DASH\n  return `${integerFormat.format(value)}${NARROW_NBSP}%`\n}\n\nconst formatRatio = (value: number | null): string => {\n  if (value == null) return EM_DASH\n  return `${integerFormat.format(value * 100)}${NARROW_NBSP}%`\n}\n\nexport {\n  formatThousands,\n  formatEnergy,\n  formatPower,\n  formatPercent,\n  formatRatio,\n  localeNumberFormat,\n  decimalsFormat,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n}\n"],"mappings":";;;AAMA,SAAS,kBAAsC;CAC7C,OAAO,OAAO,aAAa,cACvB,KAAA,IACA,SAAS,gBAAgB,QAAQ,KAAA;AACvC;AAEA,MAAM,sBACJ,YACuB;CACvB,MAAM,wBAAQ,IAAI,IAA+B;CACjD,OAAO,EACL,SAAS,UAAU;EACjB,MAAM,SAAS,gBAAgB;EAC/B,MAAM,MAAM,UAAU;EACtB,IAAI,YAAY,MAAM,IAAI,GAAG;EAC7B,IAAI,CAAC,WAAW;GACd,YAAY,IAAI,KAAK,aAAa,QAAQ,OAAO;GACjD,MAAM,IAAI,KAAK,SAAS;EAC1B;EACA,OAAO,UAAU,OAAO,KAAK;CAC/B,EACF;AACF;AAEA,MAAM,kBAAkB,aACtB,mBAAmB,EAAE,uBAAuB,SAAS,CAAC;AAExD,MAAM,gBAAgB,eAAe,CAAC;AACtC,MAAM,mBAAmB,eAAe,CAAC;AACzC,MAAM,mBAAmB,eAAe,CAAC;AAEzC,MAAM,mBAAmB,MAAc,cAAc,OAAO,CAAC;AAE7D,MAAM,gBAAgB,MAAc;CAClC,IAAI,KAAK,KACP,OAAO,GAAG,iBAAiB,OAAO,IAAI,GAAI;CAE5C,IAAI,KAAK,KAAO,OAAO,GAAG,cAAc,OAAO,CAAC;CAChD,IAAI,KAAK,IAAI,OAAO,GAAG,iBAAiB,OAAO,CAAC;CAChD,OAAO,GAAG,iBAAiB,OAAO,CAAC;AACrC;AAEA,MAAM,eACJ,OACA,EAAE,SAAS,UAAgC,CAAC,MACjC;CACX,IAAI,SAAS,MAAM,OAAA;CACnB,MAAM,UAAU,KAAK,MAAM,KAAK;CAEhC,OAAO,GADM,UAAU,UAAU,IAAI,MAAM,KAC1B,cAAc,OAAO,OAAO;AAC/C;AAEA,MAAM,iBAAiB,UAAiC;CACtD,IAAI,SAAS,MAAM,OAAA;CACnB,OAAO,GAAG,cAAc,OAAO,KAAK;AACtC;AAEA,MAAM,eAAe,UAAiC;CACpD,IAAI,SAAS,MAAM,OAAA;CACnB,OAAO,GAAG,cAAc,OAAO,QAAQ,GAAG;AAC5C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/spark-ui",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "React UI component library from Spark SDK",
   "homepage": "https://spark-ui.epilot.io/docs/ui",
   "license": "Apache-2.0",