@epilot/spark-ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/components/popover.js

@@ -0,0 +1,56 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+//#region src/components/popover.tsx
+const PopoverAnchorContext = React$1.createContext(null);
+function Popover(props) {
+	const [anchor, setAnchor] = React$1.useState(null);
+	const value = React$1.useMemo(() => ({
+		anchor,
+		setAnchor
+	}), [anchor]);
+	return /* @__PURE__ */ jsx(PopoverAnchorContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(Popover$1.Root, { ...props })
+	});
+}
+function PopoverTrigger(props) {
+	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+/** Anchors the popover to this element instead of the trigger. Pass `render` to
+* wrap an existing element (was radix `asChild`). */
+function PopoverAnchor({ render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref: React$1.useContext(PopoverAnchorContext)?.setAnchor,
+		props: mergeProps({ "data-slot": "popover-anchor" }, props)
+	});
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, side, alignOffset, anchor, ...props }) {
+	const context = React$1.useContext(PopoverAnchorContext);
+	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+		align,
+		alignOffset,
+		anchor: anchor ?? context?.anchor ?? void 0,
+		className: "isolate z-50",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
+			"data-slot": "popover-content",
+			className: cn("z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
+			...props
+		})
+	}) });
+}
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+
+//# sourceMappingURL=popover.js.map

package/dist/components/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":["React","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\n// Base UI dropped the Anchor part; the anchor element registers itself here and\n// PopoverContent feeds it to the Positioner.\nconst PopoverAnchorContext = React.createContext<{\n  anchor: HTMLElement | null\n  setAnchor: (element: HTMLElement | null) => void\n} | null>(null)\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null)\n  const value = React.useMemo(() => ({ anchor, setAnchor }), [anchor])\n  return (\n    <PopoverAnchorContext.Provider value={value}>\n      <PopoverPrimitive.Root {...props} />\n    </PopoverAnchorContext.Provider>\n  )\n}\n\nfunction PopoverTrigger(\n  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n/** Anchors the popover to this element instead of the trigger. Pass `render` to\n * wrap an existing element (was radix `asChild`). */\nfunction PopoverAnchor({ render, ...props }: useRender.ComponentProps<'div'>) {\n  const context = React.useContext(PopoverAnchorContext)\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    ref: context?.setAnchor,\n    props: mergeProps<'div'>(\n      { 'data-slot': 'popover-anchor' } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'\n  >\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  side,\n  alignOffset,\n  anchor,\n  ...props\n}: PopoverContentProps) {\n  const context = React.useContext(PopoverAnchorContext)\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor ?? context?.anchor ?? undefined}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 w-72 origin-(--transform-origin) rounded-lg border border-gray-a1 bg-gray-1 p-4 text-gray-a12 shadow-md outline-hidden transition-[opacity,scale,translate] duration-100 motion-reduce:transition-none',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            // exit: fade + zoom (was animate-out)\n            'data-ending-style:scale-95 data-ending-style:opacity-0',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }\n"],"mappings":";;;;;;;;AAQA,MAAM,uBAAuBA,QAAM,cAGzB,KAAK;AAEf,SAAS,QAAQ,OAA2D;CAC1E,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAA6B,KAAK;CACpE,MAAM,QAAQA,QAAM,eAAe;EAAE;EAAQ;EAAW,GAAG,CAAC,OAAO,CAAC;AACpE,QACE,oBAAC,qBAAqB,UAAtB;EAAsC;YACpC,oBAACC,UAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;EACN,CAAA;;AAIpC,SAAS,eACP,OACA;AACA,QAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;;;AAK5E,SAAS,cAAc,EAAE,QAAQ,GAAG,SAA0C;AAE5E,QAAO,UAAU;EACf,gBAAgB;EAChB;EACA,KAJcD,QAAM,WAAW,qBAInB,EAAE;EACd,OAAO,WACL,EAAE,aAAa,kBAAkB,EACjC,MACD;EACF,CAAC;;AASJ,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,MACA,aACA,QACA,GAAG,SACmB;CACtB,MAAM,UAAUA,QAAM,WAAW,qBAAqB;AACtD,QACE,oBAACC,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,QAAQ,UAAU,SAAS,UAAU,KAAA;EACrC,WAAU;EACJ;EACM;YAEZ,oBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,+MAEA,8DACA,mNAEA,0DACA,UACD;GACD,GAAI;GACJ,CAAA;EAC0B,CAAA,EACN,CAAA"}

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

@@ -0,0 +1,358 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+require("../utils/chars.cjs");
+const require_utils_format = require("../utils/format.cjs");
+const require_components_chart = require("./chart.cjs");
+const require_components_series_legend = require("./series-legend.cjs");
+const require_components_typography = require("./typography.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _visx_event = require("@visx/event");
+let _visx_scale = require("@visx/scale");
+let _visx_shape = require("@visx/shape");
+let _visx_curve = require("@visx/curve");
+let _visx_tooltip = require("@visx/tooltip");
+let _visx_vendor_d3_array = require("@visx/vendor/d3-array");
+let cnfast = require("cnfast");
+//#region src/components/power-history-chart.tsx
+const AREA_KEYS = [
+	"solar",
+	"grid",
+	"battery"
+];
+const SERIES_KEYS = [
+	"solar",
+	"grid",
+	"battery",
+	"consumption"
+];
+const SERIES_COLORS = {
+	solar: "var(--orange-a9)",
+	grid: "var(--blue-9)",
+	battery: "var(--green-a9)",
+	consumption: "var(--gray-12)"
+};
+const PADDING_TOP = 20;
+const PADDING_BOTTOM = 28;
+const PADDING_RIGHT = 8;
+const Y_AXIS_GUTTER = 34;
+const X_TICK_COUNT = 6;
+const DEFAULT_HEIGHT = 260;
+const tBisector = (0, _visx_vendor_d3_array.bisector)((d) => d.t);
+function niceStep(rough) {
+	const normalized = rough === 0 ? 1 : rough;
+	const magnitude = Math.pow(10, Math.floor(Math.log10(normalized)));
+	return ([
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].find((value) => value * magnitude >= normalized) ?? 10) * magnitude;
+}
+function buildAreaYTicks(min, max) {
+	const step = niceStep((max - min || 1) / 4);
+	const lo = Math.floor(min / step) * step;
+	const hi = Math.ceil(max / step) * step;
+	const ticks = [];
+	for (let value = lo; value <= hi + step * .001; value += step) ticks.push(Number(value.toFixed(6)));
+	return {
+		ticks,
+		lo,
+		hi
+	};
+}
+function formatYTick(value) {
+	return Math.abs(value) >= 10 ? require_utils_format.integerFormat.format(value) : require_utils_format.oneDecimalFormat.format(value);
+}
+/**
+* Diverging "power sources" area chart over a continuous time axis: solar
+* (orange), grid (blue) and battery (green) areas around a zero baseline, with
+* consumption overlaid as a line. Negative values (grid feed-in, battery
+* charging) dip below zero. For instantaneous power (day view). A legend at the
+* top toggles each series on/off; the y-axis rescales to the visible ones. visx.
+*/
+function PowerHistoryChart({ data, unit, formatX, formatValue, labels, highlightAt, title, className, height = DEFAULT_HEIGHT }) {
+	const containerRef = (0, react.useRef)(null);
+	const [width, setWidth] = (0, react.useState)(0);
+	const [hiddenSeries, setHiddenSeries] = (0, react.useState)(() => /* @__PURE__ */ new Set());
+	const toggleSeries = (0, react.useCallback)((id) => {
+		setHiddenSeries((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	const isHidden = (0, react.useCallback)((key) => hiddenSeries.has(key), [hiddenSeries]);
+	const { showTooltip, hideTooltip, tooltipData, tooltipLeft, tooltipTop, tooltipOpen } = (0, _visx_tooltip.useTooltip)();
+	(0, react.useEffect)(() => {
+		const element = containerRef.current;
+		if (!element) return;
+		const resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			setWidth(entry.contentRect.width);
+		});
+		resizeObserver.observe(element);
+		return () => resizeObserver.disconnect();
+	}, []);
+	const fmtValue = (value) => formatValue ? formatValue(value) : `${require_utils_format.twoDecimalFormat.format(value)} ${unit}`;
+	const tMin = data.length ? data[0]?.t ?? 0 : 0;
+	const tMax = data.length ? data[data.length - 1]?.t ?? 0 : 0;
+	const { yMin, yMax } = (0, react.useMemo)(() => {
+		let min = 0;
+		let max = 0;
+		for (const d of data) {
+			if (!hiddenSeries.has("solar")) max = Math.max(max, d.solar);
+			if (!hiddenSeries.has("consumption")) max = Math.max(max, d.consumption);
+			if (!hiddenSeries.has("grid")) {
+				max = Math.max(max, d.grid);
+				min = Math.min(min, d.grid);
+			}
+			if (!hiddenSeries.has("battery")) {
+				max = Math.max(max, d.battery);
+				min = Math.min(min, d.battery);
+			}
+		}
+		return {
+			yMin: min,
+			yMax: max
+		};
+	}, [data, hiddenSeries]);
+	const { ticks: yTicks, lo, hi } = (0, react.useMemo)(() => buildAreaYTicks(yMin, yMax), [yMin, yMax]);
+	const plotRight = Math.max(Y_AXIS_GUTTER, width - PADDING_RIGHT);
+	const xScale = (0, react.useMemo)(() => (0, _visx_scale.scaleLinear)({
+		domain: [tMin, tMax === tMin ? tMin + 1 : tMax],
+		range: [Y_AXIS_GUTTER, plotRight]
+	}), [
+		tMin,
+		tMax,
+		plotRight
+	]);
+	const yScale = (0, react.useMemo)(() => (0, _visx_scale.scaleLinear)({
+		domain: [lo, hi === lo ? lo + 1 : hi],
+		range: [height - PADDING_BOTTOM, PADDING_TOP]
+	}), [
+		lo,
+		hi,
+		height
+	]);
+	const xTicks = (0, react.useMemo)(() => {
+		if (tMax <= tMin) return [tMin];
+		return Array.from({ length: X_TICK_COUNT }, (_, i) => tMin + i / (X_TICK_COUNT - 1) * (tMax - tMin));
+	}, [tMin, tMax]);
+	const handleTooltip = (0, react.useCallback)((event) => {
+		const point = (0, _visx_event.localPoint)(event);
+		if (!point || data.length === 0) return;
+		const xMs = xScale.invert(point.x);
+		const index = tBisector.left(data, xMs, 1);
+		const d0 = data[index - 1];
+		const d1 = data[index];
+		if (!d0) return;
+		const d = d1 && xMs - d0.t > d1.t - xMs ? d1 : d0;
+		showTooltip({
+			tooltipData: d,
+			tooltipLeft: xScale(d.t),
+			tooltipTop: PADDING_TOP
+		});
+	}, [
+		data,
+		showTooltip,
+		xScale
+	]);
+	const legendItems = SERIES_KEYS.map((key) => ({
+		id: key,
+		label: labels[key],
+		color: SERIES_COLORS[key]
+	}));
+	const tooltipRows = tooltipData ? SERIES_KEYS.filter((key) => !isHidden(key)).map((key) => ({
+		key,
+		label: labels[key],
+		color: SERIES_COLORS[key],
+		value: fmtValue(tooltipData[key])
+	})) : [];
+	const showHighlight = highlightAt !== void 0 && highlightAt >= tMin && highlightAt <= tMax;
+	const [tooltipRef, tooltipSize] = require_components_chart.useMeasuredSize();
+	const tooltipPos = require_components_chart.clampTooltipPosition({
+		anchorX: tooltipLeft ?? 0,
+		anchorY: tooltipTop ?? PADDING_TOP,
+		width,
+		height,
+		tipWidth: tooltipSize.width,
+		tipHeight: tooltipSize.height,
+		placement: "beside"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, cnfast.cn)("flex w-full flex-col gap-2", className),
+		children: [
+			title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.SectionTitle, { children: title }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_series_legend.SeriesLegend, {
+				items: legendItems,
+				hiddenIds: hiddenSeries,
+				onToggle: toggleSeries
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "px-1 text-xs text-gray-light",
+				children: unit
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: containerRef,
+				className: "relative w-full",
+				style: { height },
+				children: [width > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+					width,
+					height,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: AREA_KEYS.map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+							id: `power-history-fill-${key}`,
+							x1: "0",
+							y1: "0",
+							x2: "0",
+							y2: "1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+								offset: "0%",
+								stopColor: SERIES_COLORS[key],
+								stopOpacity: .35
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+								offset: "100%",
+								stopColor: SERIES_COLORS[key],
+								stopOpacity: .04
+							})]
+						}, key)) }),
+						yTicks.map((tick) => {
+							const y = yScale(tick);
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+								x1: Y_AXIS_GUTTER,
+								x2: plotRight,
+								y1: y,
+								y2: y,
+								stroke: "var(--gray-a4)",
+								strokeWidth: 1
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+								x: Y_AXIS_GUTTER - 7,
+								y: y + 3,
+								textAnchor: "end",
+								fill: "var(--gray-a11)",
+								fontSize: 10,
+								children: formatYTick(tick)
+							})] }, `y-tick-${tick}`);
+						}),
+						AREA_KEYS.filter((key) => !isHidden(key)).map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.Area, {
+							data,
+							x: (d) => xScale(d.t),
+							y0: yScale(0),
+							y1: (d) => yScale(d[key]),
+							curve: _visx_curve.curveMonotoneX,
+							fill: `url(#power-history-fill-${key})`,
+							stroke: "transparent"
+						}, `area-${key}`)),
+						AREA_KEYS.filter((key) => !isHidden(key)).map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.LinePath, {
+							data,
+							x: (d) => xScale(d.t),
+							y: (d) => yScale(d[key]),
+							curve: _visx_curve.curveMonotoneX,
+							stroke: SERIES_COLORS[key],
+							strokeWidth: 1.5,
+							fill: "none"
+						}, `line-${key}`)),
+						!isHidden("consumption") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.LinePath, {
+							data,
+							x: (d) => xScale(d.t),
+							y: (d) => yScale(d.consumption),
+							curve: _visx_curve.curveMonotoneX,
+							stroke: SERIES_COLORS.consumption,
+							strokeWidth: 1.5,
+							fill: "none"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: Y_AXIS_GUTTER,
+							x2: plotRight,
+							y1: yScale(0),
+							y2: yScale(0),
+							stroke: "var(--slate-a6)",
+							strokeWidth: 1
+						}),
+						showHighlight && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: xScale(highlightAt),
+							x2: xScale(highlightAt),
+							y1: PADDING_TOP,
+							y2: height - PADDING_BOTTOM,
+							stroke: "var(--spark-a9)",
+							strokeWidth: 1.5,
+							strokeDasharray: "5 4",
+							pointerEvents: "none"
+						}),
+						xTicks.map((tick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+							x: xScale(tick),
+							y: height - PADDING_BOTTOM + 16,
+							textAnchor: "middle",
+							fill: "var(--gray-a11)",
+							fontSize: 10,
+							children: formatX(tick)
+						}, `x-tick-${tick}`)),
+						tooltipOpen && tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+								x1: xScale(tooltipData.t),
+								x2: xScale(tooltipData.t),
+								y1: PADDING_TOP,
+								y2: height - PADDING_BOTTOM,
+								stroke: "var(--slate-a6)",
+								strokeDasharray: "4 4",
+								pointerEvents: "none"
+							}),
+							AREA_KEYS.filter((key) => !isHidden(key)).map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+								cx: xScale(tooltipData.t),
+								cy: yScale(tooltipData[key]),
+								r: 3.5,
+								fill: SERIES_COLORS[key],
+								stroke: "white",
+								strokeWidth: 1.5,
+								pointerEvents: "none"
+							}, `dot-${key}`)),
+							!isHidden("consumption") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+								cx: xScale(tooltipData.t),
+								cy: yScale(tooltipData.consumption),
+								r: 3.5,
+								fill: SERIES_COLORS.consumption,
+								stroke: "white",
+								strokeWidth: 1.5,
+								pointerEvents: "none"
+							})
+						] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+							x: Y_AXIS_GUTTER,
+							y: PADDING_TOP,
+							width: Math.max(0, plotRight - Y_AXIS_GUTTER),
+							height: Math.max(0, height - PADDING_BOTTOM - PADDING_TOP),
+							fill: "transparent",
+							onMouseMove: handleTooltip,
+							onMouseLeave: hideTooltip,
+							onTouchMove: handleTooltip,
+							onTouchEnd: hideTooltip
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: tooltipRef,
+					className: "pointer-events-none absolute z-10",
+					style: {
+						left: tooltipPos.left,
+						top: tooltipPos.top,
+						opacity: tooltipOpen && tooltipData ? 1 : 0,
+						transition: "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
+					},
+					children: tooltipData && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_chart.ChartTooltipCard, {
+						label: formatX(tooltipData.t),
+						rows: tooltipRows
+					})
+				})]
+			})
+		]
+	});
+}
+//#endregion
+exports.PowerHistoryChart = PowerHistoryChart;
+
+//# sourceMappingURL=power-history-chart.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"power-history-chart.cjs","names":["integerFormat","oneDecimalFormat","valueFormat","useMeasuredSize","clampTooltipPosition","SectionTitle","SeriesLegend","Area","curveMonotoneX","LinePath","ChartTooltipCard"],"sources":["../../src/components/power-history-chart.tsx"],"sourcesContent":["import { curveMonotoneX } from '@visx/curve'\nimport { localPoint } from '@visx/event'\nimport { scaleLinear } from '@visx/scale'\nimport { Area, LinePath } from '@visx/shape'\nimport { useTooltip } from '@visx/tooltip'\nimport { bisector } from '@visx/vendor/d3-array'\nimport * as React from 'react'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport {\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat as valueFormat,\n} from '../utils/format'\nimport {\n  ChartTooltipCard,\n  type ChartTooltipRow,\n  clampTooltipPosition,\n  useMeasuredSize,\n} from './chart'\nimport { SeriesLegend, type SeriesLegendItem } from './series-legend'\nimport { SectionTitle } from './typography'\n\nexport interface PowerHistoryPoint {\n  /** Epoch milliseconds. */\n  t: number\n  solar: number\n  /** Signed: positive = import, negative = feed-in. */\n  grid: number\n  /** Signed: positive = discharge, negative = charge. */\n  battery: number\n  consumption: number\n}\n\nexport interface PowerHistoryChartProps {\n  data: PowerHistoryPoint[]\n  /** Axis/tooltip unit, e.g. \"kW\". */\n  unit: string\n  formatX: (t: number) => string\n  formatValue?: (value: number) => string\n  labels: {\n    solar: string\n    grid: string\n    battery: string\n    consumption: string\n  }\n  /** Epoch ms to mark with the current-time dashed line (omit to hide). */\n  highlightAt?: number\n  title?: string\n  className?: string\n  height?: number\n}\n\nconst AREA_KEYS = ['solar', 'grid', 'battery'] as const\n\n// All toggleable series, in legend order. The areas (solar/grid/battery) plus\n// the consumption overlay line.\nconst SERIES_KEYS = ['solar', 'grid', 'battery', 'consumption'] as const\ntype SeriesKey = (typeof SERIES_KEYS)[number]\n\nconst SERIES_COLORS = {\n  solar: 'var(--orange-a9)',\n  grid: 'var(--blue-9)',\n  battery: 'var(--green-a9)',\n  consumption: 'var(--gray-12)',\n} as const\n\nconst PADDING_TOP = 20\nconst PADDING_BOTTOM = 28\nconst PADDING_RIGHT = 8\nconst Y_AXIS_GUTTER = 34\nconst X_TICK_COUNT = 6\nconst DEFAULT_HEIGHT = 260\n\nconst tBisector = bisector<PowerHistoryPoint, number>((d) => d.t)\n\nfunction niceStep(rough: number) {\n  const normalized = rough === 0 ? 1 : rough\n  const magnitude = Math.pow(10, Math.floor(Math.log10(normalized)))\n  const steps = [1, 2, 2.5, 5, 10]\n  return (\n    (steps.find((value) => value * magnitude >= normalized) ?? 10) * magnitude\n  )\n}\n\n// Nice y ticks that always include zero, supporting negative values (feed-in /\n// battery charging dip below the baseline).\nfunction buildAreaYTicks(min: number, max: number) {\n  const step = niceStep((max - min || 1) / 4)\n  const lo = Math.floor(min / step) * step\n  const hi = Math.ceil(max / step) * step\n  const ticks: number[] = []\n  for (let value = lo; value <= hi + step * 0.001; value += step) {\n    ticks.push(Number(value.toFixed(6)))\n  }\n  return { ticks, lo, hi }\n}\n\nfunction formatYTick(value: number) {\n  return Math.abs(value) >= 10\n    ? integerFormat.format(value)\n    : oneDecimalFormat.format(value)\n}\n\n/**\n * Diverging \"power sources\" area chart over a continuous time axis: solar\n * (orange), grid (blue) and battery (green) areas around a zero baseline, with\n * consumption overlaid as a line. Negative values (grid feed-in, battery\n * charging) dip below zero. For instantaneous power (day view). A legend at the\n * top toggles each series on/off; the y-axis rescales to the visible ones. visx.\n */\nexport function PowerHistoryChart({\n  data,\n  unit,\n  formatX,\n  formatValue,\n  labels,\n  highlightAt,\n  title,\n  className,\n  height = DEFAULT_HEIGHT,\n}: PowerHistoryChartProps) {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n  const [hiddenSeries, setHiddenSeries] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  )\n\n  const toggleSeries = useCallback((id: string) => {\n    setHiddenSeries((prev) => {\n      const next = new Set(prev)\n      if (next.has(id)) {\n        next.delete(id)\n      } else {\n        next.add(id)\n      }\n      return next\n    })\n  }, [])\n\n  const isHidden = useCallback(\n    (key: SeriesKey) => hiddenSeries.has(key),\n    [hiddenSeries],\n  )\n\n  const {\n    showTooltip,\n    hideTooltip,\n    tooltipData,\n    tooltipLeft,\n    tooltipTop,\n    tooltipOpen,\n  } = useTooltip<PowerHistoryPoint>()\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const tMin = data.length ? (data[0]?.t ?? 0) : 0\n  const tMax = data.length ? (data[data.length - 1]?.t ?? 0) : 0\n\n  const { yMin, yMax } = useMemo(() => {\n    let min = 0\n    let max = 0\n    for (const d of data) {\n      if (!hiddenSeries.has('solar')) max = Math.max(max, d.solar)\n      if (!hiddenSeries.has('consumption')) max = Math.max(max, d.consumption)\n      if (!hiddenSeries.has('grid')) {\n        max = Math.max(max, d.grid)\n        min = Math.min(min, d.grid)\n      }\n      if (!hiddenSeries.has('battery')) {\n        max = Math.max(max, d.battery)\n        min = Math.min(min, d.battery)\n      }\n    }\n    return { yMin: min, yMax: max }\n  }, [data, hiddenSeries])\n\n  const {\n    ticks: yTicks,\n    lo,\n    hi,\n  } = useMemo(() => buildAreaYTicks(yMin, yMax), [yMin, yMax])\n\n  const plotRight = Math.max(Y_AXIS_GUTTER, width - PADDING_RIGHT)\n\n  const xScale = useMemo(\n    () =>\n      scaleLinear<number>({\n        domain: [tMin, tMax === tMin ? tMin + 1 : tMax],\n        range: [Y_AXIS_GUTTER, plotRight],\n      }),\n    [tMin, tMax, plotRight],\n  )\n\n  const yScale = useMemo(\n    () =>\n      scaleLinear<number>({\n        domain: [lo, hi === lo ? lo + 1 : hi],\n        range: [height - PADDING_BOTTOM, PADDING_TOP],\n      }),\n    [lo, hi, height],\n  )\n\n  const xTicks = useMemo(() => {\n    if (tMax <= tMin) return [tMin]\n    return Array.from(\n      { length: X_TICK_COUNT },\n      (_, i) => tMin + (i / (X_TICK_COUNT - 1)) * (tMax - tMin),\n    )\n  }, [tMin, tMax])\n\n  const handleTooltip = useCallback(\n    (\n      event:\n        | React.TouchEvent<SVGRectElement>\n        | React.MouseEvent<SVGRectElement>,\n    ) => {\n      const point = localPoint(event)\n      if (!point || data.length === 0) return\n\n      const xMs = xScale.invert(point.x)\n      const index = tBisector.left(data, xMs, 1)\n      const d0 = data[index - 1]\n      const d1 = data[index]\n      if (!d0) return\n\n      const d = d1 && xMs - d0.t > d1.t - xMs ? d1 : d0\n      showTooltip({\n        tooltipData: d,\n        tooltipLeft: xScale(d.t),\n        tooltipTop: PADDING_TOP,\n      })\n    },\n    [data, showTooltip, xScale],\n  )\n\n  const legendItems: SeriesLegendItem[] = SERIES_KEYS.map((key) => ({\n    id: key,\n    label: labels[key],\n    color: SERIES_COLORS[key],\n  }))\n\n  const tooltipRows: ChartTooltipRow[] = tooltipData\n    ? SERIES_KEYS.filter((key) => !isHidden(key)).map((key) => ({\n        key,\n        label: labels[key],\n        color: SERIES_COLORS[key],\n        value: fmtValue(tooltipData[key]),\n      }))\n    : []\n\n  const showHighlight =\n    highlightAt !== undefined && highlightAt >= tMin && highlightAt <= tMax\n\n  const [tooltipRef, tooltipSize] = useMeasuredSize<HTMLDivElement>()\n  const tooltipPos = clampTooltipPosition({\n    anchorX: tooltipLeft ?? 0,\n    anchorY: tooltipTop ?? PADDING_TOP,\n    width,\n    height,\n    tipWidth: tooltipSize.width,\n    tipHeight: tooltipSize.height,\n    placement: 'beside',\n  })\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n      <SeriesLegend\n        items={legendItems}\n        hiddenIds={hiddenSeries}\n        onToggle={toggleSeries}\n      />\n      <span className=\"px-1 text-xs text-gray-light\">{unit}</span>\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && (\n          <svg width={width} height={height}>\n            <defs>\n              {AREA_KEYS.map((key) => (\n                <linearGradient\n                  key={key}\n                  id={`power-history-fill-${key}`}\n                  x1=\"0\"\n                  y1=\"0\"\n                  x2=\"0\"\n                  y2=\"1\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    stopColor={SERIES_COLORS[key]}\n                    stopOpacity={0.35}\n                  />\n                  <stop\n                    offset=\"100%\"\n                    stopColor={SERIES_COLORS[key]}\n                    stopOpacity={0.04}\n                  />\n                </linearGradient>\n              ))}\n            </defs>\n\n            {yTicks.map((tick) => {\n              const y = yScale(tick)\n              return (\n                <g key={`y-tick-${tick}`}>\n                  <line\n                    x1={Y_AXIS_GUTTER}\n                    x2={plotRight}\n                    y1={y}\n                    y2={y}\n                    stroke=\"var(--gray-a4)\"\n                    strokeWidth={1}\n                  />\n                  <text\n                    x={Y_AXIS_GUTTER - 7}\n                    y={y + 3}\n                    textAnchor=\"end\"\n                    fill=\"var(--gray-a11)\"\n                    fontSize={10}\n                  >\n                    {formatYTick(tick)}\n                  </text>\n                </g>\n              )\n            })}\n\n            {AREA_KEYS.filter((key) => !isHidden(key)).map((key) => (\n              <Area<PowerHistoryPoint>\n                key={`area-${key}`}\n                data={data}\n                x={(d) => xScale(d.t)}\n                y0={yScale(0)}\n                y1={(d) => yScale(d[key])}\n                curve={curveMonotoneX}\n                fill={`url(#power-history-fill-${key})`}\n                stroke=\"transparent\"\n              />\n            ))}\n\n            {AREA_KEYS.filter((key) => !isHidden(key)).map((key) => (\n              <LinePath<PowerHistoryPoint>\n                key={`line-${key}`}\n                data={data}\n                x={(d) => xScale(d.t)}\n                y={(d) => yScale(d[key])}\n                curve={curveMonotoneX}\n                stroke={SERIES_COLORS[key]}\n                strokeWidth={1.5}\n                fill=\"none\"\n              />\n            ))}\n\n            {!isHidden('consumption') && (\n              <LinePath<PowerHistoryPoint>\n                data={data}\n                x={(d) => xScale(d.t)}\n                y={(d) => yScale(d.consumption)}\n                curve={curveMonotoneX}\n                stroke={SERIES_COLORS.consumption}\n                strokeWidth={1.5}\n                fill=\"none\"\n              />\n            )}\n\n            <line\n              x1={Y_AXIS_GUTTER}\n              x2={plotRight}\n              y1={yScale(0)}\n              y2={yScale(0)}\n              stroke=\"var(--slate-a6)\"\n              strokeWidth={1}\n            />\n\n            {showHighlight && (\n              <line\n                x1={xScale(highlightAt)}\n                x2={xScale(highlightAt)}\n                y1={PADDING_TOP}\n                y2={height - PADDING_BOTTOM}\n                stroke=\"var(--spark-a9)\"\n                strokeWidth={1.5}\n                strokeDasharray=\"5 4\"\n                pointerEvents=\"none\"\n              />\n            )}\n\n            {xTicks.map((tick) => (\n              <text\n                key={`x-tick-${tick}`}\n                x={xScale(tick)}\n                y={height - PADDING_BOTTOM + 16}\n                textAnchor=\"middle\"\n                fill=\"var(--gray-a11)\"\n                fontSize={10}\n              >\n                {formatX(tick)}\n              </text>\n            ))}\n\n            {tooltipOpen && tooltipData && (\n              <>\n                <line\n                  x1={xScale(tooltipData.t)}\n                  x2={xScale(tooltipData.t)}\n                  y1={PADDING_TOP}\n                  y2={height - PADDING_BOTTOM}\n                  stroke=\"var(--slate-a6)\"\n                  strokeDasharray=\"4 4\"\n                  pointerEvents=\"none\"\n                />\n                {AREA_KEYS.filter((key) => !isHidden(key)).map((key) => (\n                  <circle\n                    key={`dot-${key}`}\n                    cx={xScale(tooltipData.t)}\n                    cy={yScale(tooltipData[key])}\n                    r={3.5}\n                    fill={SERIES_COLORS[key]}\n                    stroke=\"white\"\n                    strokeWidth={1.5}\n                    pointerEvents=\"none\"\n                  />\n                ))}\n                {!isHidden('consumption') && (\n                  <circle\n                    cx={xScale(tooltipData.t)}\n                    cy={yScale(tooltipData.consumption)}\n                    r={3.5}\n                    fill={SERIES_COLORS.consumption}\n                    stroke=\"white\"\n                    strokeWidth={1.5}\n                    pointerEvents=\"none\"\n                  />\n                )}\n              </>\n            )}\n\n            <rect\n              x={Y_AXIS_GUTTER}\n              y={PADDING_TOP}\n              width={Math.max(0, plotRight - Y_AXIS_GUTTER)}\n              height={Math.max(0, height - PADDING_BOTTOM - PADDING_TOP)}\n              fill=\"transparent\"\n              onMouseMove={handleTooltip}\n              onMouseLeave={hideTooltip}\n              onTouchMove={handleTooltip}\n              onTouchEnd={hideTooltip}\n            />\n          </svg>\n        )}\n\n        <div\n          ref={tooltipRef}\n          className=\"pointer-events-none absolute z-10\"\n          style={{\n            left: tooltipPos.left,\n            top: tooltipPos.top,\n            opacity: tooltipOpen && tooltipData ? 1 : 0,\n            transition:\n              'left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out',\n          }}\n        >\n          {tooltipData && (\n            <ChartTooltipCard\n              label={formatX(tooltipData.t)}\n              rows={tooltipRows}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,54 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/power-history-chart.d.ts
+interface PowerHistoryPoint {
+  /** Epoch milliseconds. */
+  t: number;
+  solar: number;
+  /** Signed: positive = import, negative = feed-in. */
+  grid: number;
+  /** Signed: positive = discharge, negative = charge. */
+  battery: number;
+  consumption: number;
+}
+interface PowerHistoryChartProps {
+  data: PowerHistoryPoint[];
+  /** Axis/tooltip unit, e.g. "kW". */
+  unit: string;
+  formatX: (t: number) => string;
+  formatValue?: (value: number) => string;
+  labels: {
+    solar: string;
+    grid: string;
+    battery: string;
+    consumption: string;
+  };
+  /** Epoch ms to mark with the current-time dashed line (omit to hide). */
+  highlightAt?: number;
+  title?: string;
+  className?: string;
+  height?: number;
+}
+/**
+ * Diverging "power sources" area chart over a continuous time axis: solar
+ * (orange), grid (blue) and battery (green) areas around a zero baseline, with
+ * consumption overlaid as a line. Negative values (grid feed-in, battery
+ * charging) dip below zero. For instantaneous power (day view). A legend at the
+ * top toggles each series on/off; the y-axis rescales to the visible ones. visx.
+ */
+declare function PowerHistoryChart({
+  data,
+  unit,
+  formatX,
+  formatValue,
+  labels,
+  highlightAt,
+  title,
+  className,
+  height
+}: PowerHistoryChartProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PowerHistoryChart, PowerHistoryChartProps, PowerHistoryPoint };
+//# sourceMappingURL=power-history-chart.d.cts.map

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

@@ -0,0 +1,54 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/power-history-chart.d.ts
+interface PowerHistoryPoint {
+  /** Epoch milliseconds. */
+  t: number;
+  solar: number;
+  /** Signed: positive = import, negative = feed-in. */
+  grid: number;
+  /** Signed: positive = discharge, negative = charge. */
+  battery: number;
+  consumption: number;
+}
+interface PowerHistoryChartProps {
+  data: PowerHistoryPoint[];
+  /** Axis/tooltip unit, e.g. "kW". */
+  unit: string;
+  formatX: (t: number) => string;
+  formatValue?: (value: number) => string;
+  labels: {
+    solar: string;
+    grid: string;
+    battery: string;
+    consumption: string;
+  };
+  /** Epoch ms to mark with the current-time dashed line (omit to hide). */
+  highlightAt?: number;
+  title?: string;
+  className?: string;
+  height?: number;
+}
+/**
+ * Diverging "power sources" area chart over a continuous time axis: solar
+ * (orange), grid (blue) and battery (green) areas around a zero baseline, with
+ * consumption overlaid as a line. Negative values (grid feed-in, battery
+ * charging) dip below zero. For instantaneous power (day view). A legend at the
+ * top toggles each series on/off; the y-axis rescales to the visible ones. visx.
+ */
+declare function PowerHistoryChart({
+  data,
+  unit,
+  formatX,
+  formatValue,
+  labels,
+  highlightAt,
+  title,
+  className,
+  height
+}: PowerHistoryChartProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PowerHistoryChart, PowerHistoryChartProps, PowerHistoryPoint };
+//# sourceMappingURL=power-history-chart.d.ts.map