@epilot/spark-ui 0.20.0 → 0.21.0

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { TimeDomain } from "../utils/chart-zoom.cjs";
+
+//#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;
+  /** Tooltip time formatter. Defaults to `formatX`; use to keep the tooltip's
+   * full clock time when the axis ticks are compact (hour-only). */
+  formatTooltipX?: (t: number) => string;
+  formatValue?: (value: number) => string;
+  labels: {
+    solar: string;
+    grid: string;
+    battery: string;
+    consumption: string;
+  };
+  /** Series to drop entirely (no legend entry, area, or tooltip row). */
+  omitSeries?: readonly PowerHistorySeriesKey[];
+  /** Epoch ms to mark with the current-time dashed line (omit to hide). */
+  highlightAt?: number;
+  title?: string;
+  className?: string;
+  height?: number;
+  zoomable?: boolean;
+  zoomResetLabel?: string;
+  zoomDomain?: TimeDomain | null;
+  onZoomDomainChange?: (domain: TimeDomain | null) => void;
+}
+declare const SERIES_KEYS: readonly ["solar", "grid", "battery", "consumption"];
+type PowerHistorySeriesKey = (typeof SERIES_KEYS)[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,
+  formatTooltipX,
+  formatValue,
+  labels,
+  omitSeries,
+  highlightAt,
+  title,
+  className,
+  height,
+  zoomable,
+  zoomResetLabel,
+  zoomDomain,
+  onZoomDomainChange
+}: PowerHistoryChartProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { PowerHistoryChart, PowerHistoryChartProps, PowerHistoryPoint, PowerHistorySeriesKey };
+//# sourceMappingURL=power-history-chart.d.cts.map

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { TimeDomain } from "../utils/chart-zoom.js";
+
+//#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;
+  /** Tooltip time formatter. Defaults to `formatX`; use to keep the tooltip's
+   * full clock time when the axis ticks are compact (hour-only). */
+  formatTooltipX?: (t: number) => string;
+  formatValue?: (value: number) => string;
+  labels: {
+    solar: string;
+    grid: string;
+    battery: string;
+    consumption: string;
+  };
+  /** Series to drop entirely (no legend entry, area, or tooltip row). */
+  omitSeries?: readonly PowerHistorySeriesKey[];
+  /** Epoch ms to mark with the current-time dashed line (omit to hide). */
+  highlightAt?: number;
+  title?: string;
+  className?: string;
+  height?: number;
+  zoomable?: boolean;
+  zoomResetLabel?: string;
+  zoomDomain?: TimeDomain | null;
+  onZoomDomainChange?: (domain: TimeDomain | null) => void;
+}
+declare const SERIES_KEYS: readonly ["solar", "grid", "battery", "consumption"];
+type PowerHistorySeriesKey = (typeof SERIES_KEYS)[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,
+  formatTooltipX,
+  formatValue,
+  labels,
+  omitSeries,
+  highlightAt,
+  title,
+  className,
+  height,
+  zoomable,
+  zoomResetLabel,
+  zoomDomain,
+  onZoomDomainChange
+}: PowerHistoryChartProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { PowerHistoryChart, PowerHistoryChartProps, PowerHistoryPoint, PowerHistorySeriesKey };
+//# sourceMappingURL=power-history-chart.d.ts.map

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

@@ -0,0 +1,496 @@
+"use client";
+import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { cn } from "../utils/cn.js";
+import "../utils/chars.js";
+import { twoDecimalFormat } from "../utils/format.js";
+import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
+import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
+import { SeriesLegend } from "./series-legend.js";
+import { SectionTitle } from "./typography.js";
+import { buildTimeTicks } from "../utils/chart-time-ticks.js";
+import * as React$1 from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { localPoint } from "@visx/event";
+import { scaleLinear } from "@visx/scale";
+import { Area, LinePath } from "@visx/shape";
+import { curveMonotoneX } from "@visx/curve";
+import { useTooltip } from "@visx/tooltip";
+import { bisector } from "@visx/vendor/d3-array";
+//#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(--neutral-12)"
+};
+const PADDING_TOP = 20;
+const PADDING_BOTTOM = 28;
+const PADDING_RIGHT = 8;
+const X_TICK_COUNT = 6;
+const DEFAULT_HEIGHT = 260;
+const DETAILED_X_AXIS_THRESHOLD = 360 * 60 * 1e3;
+const tBisector = bisector((d) => d.t);
+function touchDistance(a, b) {
+	return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+}
+function touchMidpoint(a, b) {
+	return {
+		clientX: (a.clientX + b.clientX) / 2,
+		clientY: (a.clientY + b.clientY) / 2
+	};
+}
+/**
+* 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, formatTooltipX, formatValue, labels, omitSeries, highlightAt, title, className, height = DEFAULT_HEIGHT, zoomable = false, zoomResetLabel, zoomDomain, onZoomDomainChange }) {
+	const plotClipId = React$1.useId();
+	const fmtTooltipX = formatTooltipX ?? formatX;
+	const containerRef = useRef(null);
+	const reducedMotion = useReducedMotion();
+	const [width, setWidth] = useState(0);
+	const [hiddenSeries, setHiddenSeries] = useState(() => /* @__PURE__ */ new Set());
+	const omitted = useMemo(() => new Set(omitSeries), [omitSeries]);
+	const toggleSeries = useCallback((id) => {
+		setHiddenSeries((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	const isHidden = useCallback((key) => omitted.has(key) || hiddenSeries.has(key), [hiddenSeries, omitted]);
+	const { showTooltip, hideTooltip, tooltipData, tooltipLeft, tooltipTop, tooltipOpen } = useTooltip();
+	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) : `${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 zoom = useChartZoom({
+		enabled: zoomable,
+		fullDomain: useMemo(() => {
+			if (data.length === 0) return null;
+			return [tMin, tMax];
+		}, [
+			data.length,
+			tMin,
+			tMax
+		]),
+		zoomDomain,
+		onZoomDomainChange
+	});
+	const viewMin = zoom.zoomWindow?.[0] ?? tMin;
+	const viewMax = zoom.zoomWindow?.[1] ?? tMax;
+	const visibleData = useMemo(() => data.filter((d) => d.t >= viewMin && d.t <= viewMax), [
+		data,
+		viewMin,
+		viewMax
+	]);
+	const { yMin, yMax } = useMemo(() => {
+		let min = 0;
+		let max = 0;
+		for (const d of visibleData) {
+			if (!isHidden("solar")) max = Math.max(max, d.solar);
+			if (!isHidden("consumption")) max = Math.max(max, d.consumption);
+			if (!isHidden("grid")) {
+				max = Math.max(max, d.grid);
+				min = Math.min(min, d.grid);
+			}
+			if (!isHidden("battery")) {
+				max = Math.max(max, d.battery);
+				min = Math.min(min, d.battery);
+			}
+		}
+		return {
+			yMin: min,
+			yMax: max
+		};
+	}, [visibleData, isHidden]);
+	const { ticks: yTicks, min: lo, max: hi } = useMemo(() => buildYAxisScale(yMin, yMax), [yMin, yMax]);
+	const displayedYDomain = useAnimatedChartDomain([lo, hi], {
+		animateChanges: zoom.isPinching,
+		reducedMotion
+	});
+	const gutter = useMemo(() => measureYAxisGutter(yTicks, formatYAxisTick), [yTicks]);
+	const plotRight = Math.max(gutter, width - PADDING_RIGHT);
+	const xScale = useMemo(() => scaleLinear({
+		domain: [viewMin, viewMax === viewMin ? viewMin + 1 : viewMax],
+		range: [gutter, plotRight]
+	}), [
+		viewMin,
+		viewMax,
+		plotRight,
+		gutter
+	]);
+	const plotHeight = Math.max(0, height - PADDING_BOTTOM - PADDING_TOP);
+	const plotWidth = Math.max(0, plotRight - gutter);
+	const yScale = useMemo(() => scaleLinear({
+		domain: [displayedYDomain[0], displayedYDomain[1] === displayedYDomain[0] ? displayedYDomain[0] + 1 : displayedYDomain[1]],
+		range: [height - PADDING_BOTTOM, PADDING_TOP]
+	}), [displayedYDomain, height]);
+	const xTicks = useMemo(() => buildTimeTicks(viewMin, viewMax, X_TICK_COUNT), [viewMin, viewMax]);
+	const formatAxisX = zoom.isZoomed && viewMax - viewMin <= DETAILED_X_AXIS_THRESHOLD ? fmtTooltipX : formatX;
+	const domainXFromEvent = useCallback((event) => {
+		const point = localPoint(event);
+		if (!point) return null;
+		return xScale.invert(point.x);
+	}, [xScale]);
+	const handleTooltip = useCallback((event) => {
+		if (zoom.isBrushing || zoom.isPanning) return;
+		const point = 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,
+		zoom.isBrushing,
+		zoom.isPanning
+	]);
+	const legendItems = SERIES_KEYS.filter((key) => !omitted.has(key)).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 >= viewMin && highlightAt <= viewMax;
+	const [tooltipRef, tooltipSize] = useMeasuredSize();
+	const tooltipPos = clampTooltipPosition({
+		anchorX: tooltipLeft ?? 0,
+		anchorY: tooltipTop ?? PADDING_TOP,
+		width,
+		height,
+		tipWidth: tooltipSize.width,
+		tipHeight: tooltipSize.height,
+		placement: "beside"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full flex-col gap-2", className),
+		children: [
+			title && /* @__PURE__ */ jsx(SectionTitle, { children: title }),
+			/* @__PURE__ */ jsx(SeriesLegend, {
+				items: legendItems,
+				hiddenIds: hiddenSeries,
+				onToggle: toggleSeries
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "px-1 text-xs text-gray-light",
+				children: unit
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: containerRef,
+				className: "relative w-full",
+				style: { height },
+				children: [
+					width > 0 && /* @__PURE__ */ jsxs("svg", {
+						width,
+						height,
+						children: [
+							/* @__PURE__ */ jsxs("defs", { children: [AREA_KEYS.map((key) => /* @__PURE__ */ jsxs("linearGradient", {
+								id: `power-history-fill-${key}`,
+								x1: "0",
+								y1: "0",
+								x2: "0",
+								y2: "1",
+								children: [/* @__PURE__ */ jsx("stop", {
+									offset: "0%",
+									stopColor: SERIES_COLORS[key],
+									stopOpacity: .35
+								}), /* @__PURE__ */ jsx("stop", {
+									offset: "100%",
+									stopColor: SERIES_COLORS[key],
+									stopOpacity: .04
+								})]
+							}, key)), /* @__PURE__ */ jsx("clipPath", {
+								id: plotClipId,
+								children: /* @__PURE__ */ jsx("rect", {
+									height: plotHeight,
+									width: plotWidth,
+									x: gutter,
+									y: PADDING_TOP
+								})
+							})] }),
+							yTicks.map((tick) => {
+								const y = yScale(tick);
+								return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+									x1: gutter,
+									x2: plotRight,
+									y1: y,
+									y2: y,
+									stroke: "var(--neutral-a4)",
+									strokeWidth: 1
+								}), /* @__PURE__ */ jsx("text", {
+									x: gutter - 7,
+									y: y + 3,
+									textAnchor: "end",
+									fill: "var(--neutral-a11)",
+									fontSize: 10,
+									children: formatYAxisTick(tick)
+								})] }, `y-tick-${tick}`);
+							}),
+							/* @__PURE__ */ jsxs("g", {
+								clipPath: `url(#${plotClipId})`,
+								"data-testid": "chart-plot-clip",
+								children: [
+									AREA_KEYS.filter((key) => !isHidden(key)).map((key) => /* @__PURE__ */ jsx(Area, {
+										data,
+										x: (d) => xScale(d.t),
+										y0: yScale(0),
+										y1: (d) => yScale(d[key]),
+										curve: curveMonotoneX,
+										fill: `url(#power-history-fill-${key})`,
+										stroke: "transparent"
+									}, `area-${key}`)),
+									AREA_KEYS.filter((key) => !isHidden(key)).map((key) => /* @__PURE__ */ jsx(LinePath, {
+										data,
+										x: (d) => xScale(d.t),
+										y: (d) => yScale(d[key]),
+										curve: curveMonotoneX,
+										stroke: SERIES_COLORS[key],
+										strokeWidth: 1.5,
+										fill: "none"
+									}, `line-${key}`)),
+									!isHidden("consumption") && /* @__PURE__ */ jsx(LinePath, {
+										data,
+										x: (d) => xScale(d.t),
+										y: (d) => yScale(d.consumption),
+										curve: curveMonotoneX,
+										stroke: SERIES_COLORS.consumption,
+										strokeWidth: 1.5,
+										fill: "none"
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("line", {
+								x1: gutter,
+								x2: plotRight,
+								y1: yScale(0),
+								y2: yScale(0),
+								stroke: "var(--neutral-a6)",
+								strokeWidth: 1
+							}),
+							showHighlight && /* @__PURE__ */ 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, index) => /* @__PURE__ */ jsx("text", {
+								x: xScale(tick),
+								y: height - PADDING_BOTTOM + 16,
+								textAnchor: index === 0 ? "start" : index === xTicks.length - 1 ? "end" : "middle",
+								fill: "var(--neutral-a11)",
+								fontSize: 10,
+								children: formatAxisX(tick)
+							}, `x-tick-${tick}`)),
+							tooltipOpen && tooltipData && !zoom.isBrushing && !zoom.isPanning && /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsx("line", {
+									x1: xScale(tooltipData.t),
+									x2: xScale(tooltipData.t),
+									y1: PADDING_TOP,
+									y2: height - PADDING_BOTTOM,
+									stroke: "var(--neutral-a6)",
+									strokeDasharray: "4 4",
+									pointerEvents: "none"
+								}),
+								AREA_KEYS.filter((key) => !isHidden(key)).map((key) => /* @__PURE__ */ 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__ */ jsx("circle", {
+									cx: xScale(tooltipData.t),
+									cy: yScale(tooltipData.consumption),
+									r: 3.5,
+									fill: SERIES_COLORS.consumption,
+									stroke: "white",
+									strokeWidth: 1.5,
+									pointerEvents: "none"
+								})
+							] }),
+							zoom.brushBand && /* @__PURE__ */ jsx("rect", {
+								"data-testid": "chart-brush-band",
+								x: Math.min(xScale(zoom.brushBand[0]), xScale(zoom.brushBand[1])),
+								y: PADDING_TOP,
+								width: Math.abs(xScale(zoom.brushBand[1]) - xScale(zoom.brushBand[0])),
+								height: plotHeight,
+								fill: "var(--spark-a4)",
+								pointerEvents: "none"
+							}),
+							/* @__PURE__ */ jsx("rect", {
+								x: gutter,
+								y: PADDING_TOP,
+								width: plotWidth,
+								height: plotHeight,
+								fill: "transparent",
+								style: zoomable ? { touchAction: "pan-y" } : void 0,
+								onMouseLeave: () => {
+									if (!zoom.isBrushing) hideTooltip();
+								},
+								onMouseMove: (event) => {
+									if (zoom.isBrushing) {
+										const domainX = domainXFromEvent(event);
+										if (domainX != null) zoom.onPointerMove(domainX);
+										return;
+									}
+									handleTooltip(event);
+								},
+								onPointerDown: (event) => {
+									if (!zoomable || event.pointerType === "touch") return;
+									if (event.button !== 0) return;
+									const domainX = domainXFromEvent(event);
+									if (domainX == null) return;
+									event.currentTarget.setPointerCapture?.(event.pointerId);
+									hideTooltip();
+									zoom.onPointerDown(domainX);
+								},
+								onPointerMove: (event) => {
+									if (!zoomable) return;
+									const domainX = domainXFromEvent(event);
+									if (domainX != null) zoom.onPointerMove(domainX);
+								},
+								onPointerUp: (event) => {
+									if (!zoomable) return;
+									const domainX = domainXFromEvent(event);
+									if (domainX != null) zoom.onPointerUp(domainX);
+									else zoom.onPointerCancel();
+								},
+								onPointerCancel: () => {
+									zoom.onPointerCancel();
+								},
+								onDoubleClick: () => {
+									if (zoomable) zoom.onDoubleClick();
+								},
+								onTouchStart: (event) => {
+									if (!zoomable) return;
+									if (event.touches.length === 2) {
+										const [a, b] = [event.touches[0], event.touches[1]];
+										if (!a || !b) return;
+										const point = localPoint(event.currentTarget, touchMidpoint(a, b));
+										if (!point) return;
+										const midpoint = Math.min(1, Math.max(0, (point.x - gutter) / plotWidth));
+										zoom.onPinchStart(touchDistance(a, b), midpoint);
+										hideTooltip();
+										return;
+									}
+									if (event.touches.length === 1 && zoom.isZoomed) {
+										const point = localPoint(event);
+										if (!point) return;
+										zoom.onPanStart({
+											x: (point.x - gutter) / plotWidth,
+											y: (point.y - PADDING_TOP) / plotHeight
+										});
+										hideTooltip();
+									}
+								},
+								onTouchMove: (event) => {
+									if (zoomable && event.touches.length === 2) {
+										const [a, b] = [event.touches[0], event.touches[1]];
+										if (!a || !b) return;
+										const point = localPoint(event.currentTarget, touchMidpoint(a, b));
+										if (!point) return;
+										const midpoint = Math.min(1, Math.max(0, (point.x - gutter) / plotWidth));
+										zoom.onPinchMove(touchDistance(a, b), midpoint);
+										return;
+									}
+									if (event.touches.length === 1 && zoom.isZoomed) {
+										const point = localPoint(event);
+										if (!point) return;
+										zoom.onPanMove({
+											x: (point.x - gutter) / plotWidth,
+											y: (point.y - PADDING_TOP) / plotHeight
+										});
+										return;
+									}
+									if (event.touches.length === 1) handleTooltip(event);
+								},
+								onTouchEnd: (event) => {
+									if (zoomable && event.touches.length < 2) zoom.onPinchEnd();
+									if (event.touches.length === 0) {
+										if (zoomable) zoom.onPanEnd();
+										if (zoomable) zoom.onTap();
+										hideTooltip();
+									}
+								},
+								onTouchCancel: () => {
+									zoom.onPinchEnd();
+									zoom.onPanEnd();
+								}
+							})
+						]
+					}),
+					zoom.isZoomed && zoomResetLabel && /* @__PURE__ */ jsx(ChartZoomResetButton, {
+						label: zoomResetLabel,
+						onReset: zoom.resetZoom
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: tooltipRef,
+						className: "pointer-events-none absolute z-10",
+						style: {
+							left: tooltipPos.left,
+							top: tooltipPos.top,
+							opacity: tooltipOpen && tooltipData && !zoom.isPanning && !zoom.isBrushing ? 1 : 0,
+							transition: reducedMotion ? "opacity 140ms ease-out" : "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
+						},
+						children: tooltipData && /* @__PURE__ */ jsx(ChartTooltipCard, {
+							label: fmtTooltipX(tooltipData.t),
+							rows: tooltipRows
+						})
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { PowerHistoryChart };
+
+//# sourceMappingURL=power-history-chart.js.map