@stackframe/dashboard-ui-components 2.8.84 → 2.8.85

package/dist/esm/components/analytics-chart/analytics-chart.js

@@ -0,0 +1,1019 @@
+"use client";
+
+import { FlagIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, XIcon } from "@phosphor-icons/react";
+import { cn } from "@stackframe/stack-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CartesianGrid, ComposedChart, ReferenceArea, ReferenceLine, XAxis, YAxis } from "recharts";
+import { DesignChartContainer } from "../chart-container.js";
+import { DefaultAnalyticsChartTooltip } from "./default-analytics-chart-tooltip.js";
+import { formatDelta, formatValue } from "./format.js";
+import { cssIdent, pointValue } from "./types.js";
+import { DesignButton } from "../button.js";
+import { AnalyticsChartPie } from "./analytics-chart-pie.js";
+import { buildRampColors, resolveAnalyticsChartPalette } from "./palette.js";
+import { renderDataSeries } from "./render-data-series.js";
+import { EMPTY_MATRIX, EMPTY_SERIES, STROKE_DASHARRAY, computeLocalInProgressIdx, findAnnotationsLayer, findCompareLayer, findPrimaryLayer, isAnalyticsChartDataLayer, isTimeseriesState, resolveDataLayerStyle } from "./state.js";
+import { resolveAnalyticsChartStrings } from "./strings.js";
+
+//#region src/components/analytics-chart/analytics-chart.tsx
+const FALLBACK_PRIMARY_STYLE = {
+	color: "#2563eb",
+	type: "area",
+	strokeStyle: "solid",
+	fillOpacity: 0
+};
+const FALLBACK_COMPARE_STYLE = {
+	color: "#f59e0b",
+	type: "line",
+	strokeStyle: "dashed",
+	fillOpacity: 0
+};
+const FALLBACK_ANNOTATION_COLOR = "#f59e0b";
+function buildTooltipLayerView(args) {
+	const { show, layer, color, segmented, segmentSeries, segmentRows, segmentTotals, segmentColorsLight, segmentColorsDark, activeIndex, activePoint, fallbackLabel } = args;
+	if (!show || !layer) return null;
+	const segments = segmented ? segmentSeries.map((s, sIdx) => ({
+		key: s.key,
+		label: s.label,
+		value: segmentRows[activeIndex]?.[sIdx] ?? 0,
+		color: segmentColorsLight[sIdx],
+		colorDark: segmentColorsDark[sIdx]
+	})) : [];
+	return {
+		id: layer.id,
+		label: layer.label || fallbackLabel || "",
+		color,
+		colorDark: color,
+		total: segmented ? segmentTotals[activeIndex] ?? 0 : pointValue(activePoint, layer.id),
+		segmented,
+		segments
+	};
+}
+/**
+* Preferred chart for all time-series: area, line, bar, compare layers,
+* segmented stacks, tooltips, zoom, and annotations. Wrap in
+* `DesignChartCard` for the title/description chrome. Only fall back to
+* raw Recharts for non-time-series visuals (static rankings etc.).
+*
+* ## Data shape
+*
+* `data` is `Point[]`, where `Point = { ts: number, values: Record<string, number> }`.
+* `ts` is a Unix milliseconds timestamp. `values` maps layer id → numeric value
+* at that bucket. Example:
+*
+* ```ts
+* { ts: 1743465600000, values: { primary: 420 } }
+* { ts: 1743465600000, values: { primary: 420, compare: 380 } }  // with compare layer
+* ```
+*
+* ## State is fully controlled — start from ANALYTICS_CHART_DEFAULT_STATE
+*
+* The default state ships with three pre-configured layers: `"primary"`,
+* `"compare"`, and `"annotations"`. ALWAYS spread from
+* `ANALYTICS_CHART_DEFAULT_STATE` and map over `layers` to override. Do NOT
+* hand-build the layer array from scratch — you will miss fields and crash.
+*
+* ```ts
+* // Default state shape (for reference — spread from the constant, don't copy):
+* {
+*   view: "timeseries",
+*   layers: [
+*     { id: "primary", kind: "primary", label: "Current", visible: true, color: "#2563eb",
+*       segmented: false, type: "area", strokeStyle: "solid", fillOpacity: 0.22, inProgressFromIndex: null },
+*     { id: "compare", kind: "compare", label: "Previous period", visible: true, color: "#f59e0b",
+*       segmented: false, type: "line", strokeStyle: "dashed", inProgressFromIndex: null },
+*     { id: "annotations", kind: "annotations", label: "Annotations", visible: true, color: "#f59e0b" },
+*   ],
+*   xFormatKind: { type: "datetime", style: "short" },
+*   yFormatKind: { type: "short" },
+*   showGrid: true, showXAxis: true, showYAxis: true,
+*   zoomRange: null, pinnedIndex: null,
+* }
+* ```
+*
+* ## onChange — CRITICAL, get this right
+*
+* `onChange` fires with an `AnalyticsChartState` object — NOT your custom
+* wrapper. If you store chart data and state together, `onChange` MUST only
+* update the state part. Keep data and state in SEPARATE hooks:
+*
+* ```tsx
+* // WRONG — overwrites your data with a bare state object, crashes on next render:
+* const [combined, setCombined] = React.useState({ data: [], state: ANALYTICS_CHART_DEFAULT_STATE });
+* <AnalyticsChart data={combined.data} state={combined.state} onChange={setCombined} />
+*
+* // RIGHT — two hooks:
+* const [data, setData] = React.useState([]);
+* const [chartState, setChartState] = React.useState({ ...ANALYTICS_CHART_DEFAULT_STATE });
+* <AnalyticsChart data={data} state={chartState} onChange={setChartState} />
+* ```
+*
+* NEVER pass a setter that manages a combined `{ data, state }` object directly to `onChange`.
+*
+* ## Common patterns
+*
+* ### 1. Simplest — one area layer, no compare
+*
+* ```tsx
+* const data = rows.map(r => ({ ts: r.bucketTs, values: { primary: r.count } }));
+* const [state, setState] = React.useState({
+*   ...ANALYTICS_CHART_DEFAULT_STATE,
+*   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l =>
+*     l.kind === "compare" ? { ...l, visible: false } : l
+*   ),
+* });
+* <DesignChartCard title="Signups" description="Last 30 days">
+*   <AnalyticsChart data={data} state={state} onChange={setState} />
+* </DesignChartCard>
+* ```
+*
+* ### 2. Current vs previous period (compare)
+*
+* ```tsx
+* const data = rows.map(r => ({
+*   ts: r.bucketTs,
+*   values: { primary: r.thisPeriod, compare: r.lastPeriod },
+* }));
+* const [state, setState] = React.useState(ANALYTICS_CHART_DEFAULT_STATE);
+* <AnalyticsChart data={data} state={state} onChange={setState} />
+* ```
+*
+* ### 3. Stacked bar with breakdown (segmented)
+*
+* ```tsx
+* const regions = [{ key: "us", label: "US" }, { key: "eu", label: "EU" }];
+* const segments = rows.map(r => [r.signupsUs, r.signupsEu]); // MUST sum to primary value per row
+* const [state, setState] = React.useState({
+*   ...ANALYTICS_CHART_DEFAULT_STATE,
+*   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l => {
+*     if (l.kind === "primary") return { ...l, type: "bar", segmented: true, segments, segmentSeries: regions };
+*     if (l.kind === "compare") return { ...l, visible: false };
+*     return l;
+*   }),
+* });
+* <AnalyticsChart data={data} state={state} onChange={setState} />
+* ```
+*
+* ### 4. Two metrics on one chart (revenue bars + signups area)
+*
+* ```tsx
+* // IMPORTANT: metrics share one y-axis, so normalize into the same range.
+* const data = rows.map(r => ({
+*   ts: r.bucketTs,
+*   values: { revenue: r.revenueCents / 100, signups: r.signups },
+* }));
+* const [state, setState] = React.useState({
+*   ...ANALYTICS_CHART_DEFAULT_STATE,
+*   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l => {
+*     if (l.kind === "primary") return { ...l, id: "revenue", label: "Revenue", type: "bar" };
+*     if (l.kind === "compare") return { ...l, id: "signups", label: "Sign-ups", type: "area", visible: true };
+*     return l;
+*   }),
+* });
+* <AnalyticsChart data={data} state={state} onChange={setState} />
+* ```
+*
+* ### 5. Pie view (distribution / breakdown, non-time-series)
+*
+* Pie needs one data point, `segments` with one row, and `segmentSeries` with labels:
+*
+* ```tsx
+* const categories = [{ key: "verified", label: "Verified" }, { key: "unverified", label: "Unverified" }, { key: "anonymous", label: "Anonymous" }];
+* const total = verified + unverified + anonymous;
+* const data = [{ ts: 0, values: { primary: total } }];
+* const segments = [[verified, unverified, anonymous]]; // one row; values sum to total
+* const [state, setState] = React.useState({
+*   ...ANALYTICS_CHART_DEFAULT_STATE,
+*   view: "pie",
+*   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l => {
+*     if (l.kind === "primary") return { ...l, segmented: true, segments, segmentSeries: categories };
+*     if (l.kind === "compare") return { ...l, visible: false };
+*     return l;
+*   }),
+* });
+* <AnalyticsChart data={data} state={state} onChange={setState} />
+* ```
+*
+* ## Segment data contract (MUST follow when segmented: true)
+*
+* `segments` is a 2D array: `segments[dayIndex][categoryIndex] = number`.
+*
+* - Outer length MUST equal `data.length` (one row per Point).
+* - Inner length MUST equal `segmentSeries.length` (one value per category).
+* - Each row MUST sum to `data[dayIndex].values[layerId]` (the layer's total for that day).
+* - `segmentSeries` defines the category labels, in the SAME order as segment columns.
+*
+* Example: if `segmentSeries = [{ key: "us", label: "US" }, { key: "eu", label: "EU" }]`
+* and `data[0].values.primary = 420`, then `segments[0]` must be `[usValue, euValue]`
+* where `usValue + euValue === 420`. If rows don't sum to the layer total, stacked bars
+* will render incorrectly (gaps or overflow).
+*
+* ## Palette
+*
+* AnalyticsChart auto-generates segment colors (blue shades for primary, amber for
+* compare). You do NOT need to pass a palette prop — it just works. Segment keys
+* can be any string; the component sanitizes them for CSS purposes internally.
+*
+* ## Layer quick reference
+*
+* - Layer `type` options: `"area" | "line" | "bar"`
+* - Layer `kind` values: `"primary" | "compare" | "annotations"`
+* - To hide a layer: `{ ...l, visible: false }`
+* - To switch chart type: `{ ...l, type: "bar" }` (or `"line"`, `"area"`)
+* - To rename a layer: `{ ...l, id: "myMetric", label: "My Metric" }`
+*
+* ## Formatting (xFormatKind / yFormatKind on state)
+*
+* - `{ type: "numeric" }` — plain number
+* - `{ type: "short" }` — abbreviated (1.2K, 3.4M) — good default for y-axis
+* - `{ type: "currency", currency: "USD", divisor: 100 }` — for cents → dollars
+* - `{ type: "percent", source: "fraction" }` — for 0..1 → "45.2%"
+* - `{ type: "datetime", style: "short" }` — good default for x-axis timestamps
+*
+* Set these on state:
+* `{ ...ANALYTICS_CHART_DEFAULT_STATE, yFormatKind: { type: "currency", currency: "USD" } }`
+*
+* ## Scale warning
+*
+* All visible layers share ONE y-axis. If magnitudes differ wildly (e.g. revenue
+* cents vs signup count), normalize the data BEFORE building Points. If
+* normalization is impossible, use two separate `AnalyticsChart` instances stacked
+* vertically.
+*/
+function AnalyticsChart({ data: fullData, annotations: fullAnnotations = [], state, onChange, onAnnotationCreate, strings: stringsOverride, palette: paletteOverride, renderTooltip, plotMargin, yAxisWidth = 48, yDomainPadding = .1, pie, valueFormatter }) {
+	const resolvedPlotMargin = useMemo(() => ({
+		top: plotMargin?.top ?? 16,
+		right: plotMargin?.right ?? 24,
+		bottom: plotMargin?.bottom ?? 8,
+		left: plotMargin?.left ?? 12
+	}), [plotMargin]);
+	const fmtValue = valueFormatter ?? formatValue;
+	const strings = useMemo(() => resolveAnalyticsChartStrings(stringsOverride), [stringsOverride]);
+	const palette = useMemo(() => resolveAnalyticsChartPalette(paletteOverride), [paletteOverride]);
+	const renderTooltipFn = useMemo(() => renderTooltip ?? ((ctx) => /* @__PURE__ */ jsx(DefaultAnalyticsChartTooltip, { ctx })), [renderTooltip]);
+	const { xFormatKind, yFormatKind, layers } = state;
+	const timeseries = isTimeseriesState(state) ? state : null;
+	const showGrid = timeseries?.showGrid ?? false;
+	const showXAxis = timeseries?.showXAxis ?? false;
+	const showYAxis = timeseries?.showYAxis ?? false;
+	const zoomRange = timeseries?.zoomRange ?? null;
+	const pinnedIndex = timeseries?.pinnedIndex ?? null;
+	const primaryLayer = findPrimaryLayer(layers);
+	const compareLayer = findCompareLayer(layers);
+	const annotationsLayer = findAnnotationsLayer(layers);
+	const showPrimary = primaryLayer?.visible ?? false;
+	const showCompare = compareLayer?.visible ?? false;
+	const showAnnotationsLayer = annotationsLayer?.visible ?? false;
+	const primaryStyle = primaryLayer ? resolveDataLayerStyle(primaryLayer) : FALLBACK_PRIMARY_STYLE;
+	const compareStyle = compareLayer ? resolveDataLayerStyle(compareLayer) : FALLBACK_COMPARE_STYLE;
+	const primaryColor = primaryStyle.color;
+	const compareColor = compareStyle.color;
+	const annotationColor = annotationsLayer?.color ?? FALLBACK_ANNOTATION_COLOR;
+	const primaryStroke = STROKE_DASHARRAY[primaryStyle.strokeStyle];
+	const compareStroke = STROKE_DASHARRAY[compareStyle.strokeStyle];
+	const primaryFillOpacity = primaryStyle.fillOpacity;
+	const compareFillOpacity = compareStyle.fillOpacity;
+	const setTimeseriesField = useCallback((key, value) => {
+		onChange((prev) => {
+			if (prev.view !== "timeseries") return prev;
+			return {
+				...prev,
+				[key]: value
+			};
+		});
+	}, [onChange]);
+	const wrapperRef = useRef(null);
+	const [hoverIndex, setHoverIndex] = useState(null);
+	const [committedRange, setCommittedRange] = useState(null);
+	const [annotationDraft, setAnnotationDraft] = useState(null);
+	const [dragAnchor, setDragAnchor] = useState(null);
+	const [brushStart, setBrushStart] = useState(null);
+	const [brushEnd, setBrushEnd] = useState(null);
+	const [pieHoverKey, setPieHoverKey] = useState(null);
+	const activeIndex = pinnedIndex ?? hoverIndex;
+	const primarySegmentSeries = useMemo(() => primaryLayer?.segmentSeries ?? EMPTY_SERIES, [primaryLayer?.segmentSeries]);
+	const compareSegmentSeries = useMemo(() => compareLayer?.segmentSeries ?? EMPTY_SERIES, [compareLayer?.segmentSeries]);
+	const primaryFullSegments = useMemo(() => primaryLayer?.segments ?? EMPTY_MATRIX, [primaryLayer?.segments]);
+	const compareFullSegments = useMemo(() => compareLayer?.segments ?? EMPTY_MATRIX, [compareLayer?.segments]);
+	const primarySegmented = (primaryLayer?.segmented ?? false) && showPrimary && primarySegmentSeries.length > 0 && primaryFullSegments.length > 0;
+	const compareSegmented = (compareLayer?.segmented ?? false) && showCompare && compareSegmentSeries.length > 0 && compareFullSegments.length > 0;
+	const visibleStart = zoomRange ? zoomRange[0] : 0;
+	const visibleEnd = zoomRange ? zoomRange[1] : fullData.length - 1;
+	const data = useMemo(() => fullData.slice(visibleStart, visibleEnd + 1), [
+		fullData,
+		visibleStart,
+		visibleEnd
+	]);
+	const primarySegments = useMemo(() => primaryFullSegments.slice(visibleStart, visibleEnd + 1), [
+		primaryFullSegments,
+		visibleStart,
+		visibleEnd
+	]);
+	const compareSegments = useMemo(() => compareFullSegments.slice(visibleStart, visibleEnd + 1), [
+		compareFullSegments,
+		visibleStart,
+		visibleEnd
+	]);
+	const primarySegmentTotals = useMemo(() => primarySegments.map((row) => row.reduce((a, b) => a + b, 0)), [primarySegments]);
+	const compareSegmentTotals = useMemo(() => compareSegments.map((row) => row.reduce((a, b) => a + b, 0)), [compareSegments]);
+	const yDomainMax = useMemo(() => {
+		const layerMaxes = layers.filter(isAnalyticsChartDataLayer).map((l) => l.id).map((id) => data.reduce((m, p) => Math.max(m, pointValue(p, id)), 0));
+		const primaryStackMax = primarySegmentTotals.reduce((m, v) => Math.max(m, v), 0);
+		const compareStackMax = compareSegmentTotals.reduce((m, v) => Math.max(m, v), 0);
+		const rawMax = Math.max(0, ...layerMaxes, primaryStackMax, compareStackMax);
+		return Math.ceil(rawMax * (1 + yDomainPadding));
+	}, [
+		data,
+		layers,
+		primarySegmentTotals,
+		compareSegmentTotals,
+		yDomainPadding
+	]);
+	const segmentColors = useMemo(() => {
+		return {
+			primary: {
+				light: buildRampColors(palette.primary, primarySegmentSeries.length, "light"),
+				dark: buildRampColors(palette.primary, primarySegmentSeries.length, "dark")
+			},
+			compare: {
+				light: buildRampColors(palette.compare, compareSegmentSeries.length, "light"),
+				dark: buildRampColors(palette.compare, compareSegmentSeries.length, "dark")
+			}
+		};
+	}, [
+		primarySegmentSeries.length,
+		compareSegmentSeries.length,
+		palette
+	]);
+	const aggregatedPrimarySegments = useMemo(() => primarySegmentSeries.map((_, sIdx) => primarySegments.reduce((acc, row) => acc + (row[sIdx] ?? 0), 0)), [primarySegmentSeries, primarySegments]);
+	const aggregatedCompareSegments = useMemo(() => compareSegmentSeries.map((_, sIdx) => compareSegments.reduce((acc, row) => acc + (row[sIdx] ?? 0), 0)), [compareSegmentSeries, compareSegments]);
+	const aggregatedPrimaryTotal = useMemo(() => aggregatedPrimarySegments.reduce((a, b) => a + b, 0), [aggregatedPrimarySegments]);
+	const aggregatedCompareTotal = useMemo(() => aggregatedCompareSegments.reduce((a, b) => a + b, 0), [aggregatedCompareSegments]);
+	const annotations = useMemo(() => {
+		return fullAnnotations.filter((a) => a.index >= visibleStart && a.index <= visibleEnd).map((a) => ({
+			...a,
+			index: a.index - visibleStart
+		}));
+	}, [
+		fullAnnotations,
+		visibleStart,
+		visibleEnd
+	]);
+	const brushing = brushStart != null;
+	const N = data.length;
+	const primaryKey = primaryLayer?.id ?? "__analytics_primary";
+	const compareKey = compareLayer?.id ?? "__analytics_compare";
+	const primarySolidKey = `${primaryKey}_solid`;
+	const primaryDashedKey = `${primaryKey}_dashed`;
+	const compareSolidKey = `${compareKey}_solid`;
+	const compareDashedKey = `${compareKey}_dashed`;
+	const primarySegKey = useCallback((segKey) => `${primaryKey}_seg_${cssIdent(segKey)}`, [primaryKey]);
+	const compareSegKey = useCallback((segKey) => `${compareKey}_seg_${cssIdent(segKey)}`, [compareKey]);
+	const primaryInProgressLocalIdx = computeLocalInProgressIdx(primaryLayer?.inProgressFromIndex, visibleStart, visibleEnd);
+	const compareInProgressLocalIdx = computeLocalInProgressIdx(compareLayer?.inProgressFromIndex, visibleStart, visibleEnd);
+	const primaryHasInProgress = primaryInProgressLocalIdx != null && !primarySegmented && (primaryStyle.type === "line" || primaryStyle.type === "area");
+	const compareHasInProgress = compareInProgressLocalIdx != null && !compareSegmented && (compareStyle.type === "line" || compareStyle.type === "area");
+	const chartData = useMemo(() => {
+		return data.map((point, i) => {
+			const row = {
+				index: i,
+				ts: point.ts
+			};
+			for (const [k, v] of Object.entries(point.values)) row[k] = v;
+			if (primaryLayer && primaryHasInProgress) {
+				const k = primaryInProgressLocalIdx;
+				const v = pointValue(point, primaryLayer.id);
+				row[primarySolidKey] = i < k ? v : null;
+				row[primaryDashedKey] = i >= k - 1 ? v : null;
+			}
+			if (compareLayer && compareHasInProgress) {
+				const k = compareInProgressLocalIdx;
+				const v = pointValue(point, compareLayer.id);
+				row[compareSolidKey] = i < k ? v : null;
+				row[compareDashedKey] = i >= k - 1 ? v : null;
+			}
+			if (primarySegmented) primarySegmentSeries.forEach((s, sIdx) => {
+				row[primarySegKey(s.key)] = primarySegments[i]?.[sIdx] ?? 0;
+			});
+			if (compareSegmented) compareSegmentSeries.forEach((s, sIdx) => {
+				row[compareSegKey(s.key)] = compareSegments[i]?.[sIdx] ?? 0;
+			});
+			return row;
+		});
+	}, [
+		data,
+		primaryLayer,
+		compareLayer,
+		primarySolidKey,
+		primaryDashedKey,
+		compareSolidKey,
+		compareDashedKey,
+		primarySegKey,
+		compareSegKey,
+		primarySegments,
+		compareSegments,
+		primarySegmentSeries,
+		compareSegmentSeries,
+		primarySegmented,
+		compareSegmented,
+		primaryHasInProgress,
+		compareHasInProgress,
+		primaryInProgressLocalIdx,
+		compareInProgressLocalIdx
+	]);
+	const chartConfig = useMemo(() => {
+		const primaryLabel = primaryLayer?.label ?? "";
+		const compareLabel = compareLayer?.label ?? "";
+		const config = {};
+		if (primaryLayer) {
+			config[primaryLayer.id] = {
+				label: primaryLabel,
+				color: primaryColor
+			};
+			if (primaryHasInProgress) {
+				config[primarySolidKey] = {
+					label: primaryLabel,
+					color: primaryColor
+				};
+				config[primaryDashedKey] = {
+					label: primaryLabel,
+					color: primaryColor
+				};
+			}
+		}
+		if (compareLayer) {
+			config[compareLayer.id] = {
+				label: compareLabel,
+				color: compareColor
+			};
+			if (compareHasInProgress) {
+				config[compareSolidKey] = {
+					label: compareLabel,
+					color: compareColor
+				};
+				config[compareDashedKey] = {
+					label: compareLabel,
+					color: compareColor
+				};
+			}
+		}
+		if (primarySegmented) primarySegmentSeries.forEach((s, i) => {
+			config[primarySegKey(s.key)] = {
+				label: s.label,
+				theme: {
+					light: segmentColors.primary.light[i],
+					dark: segmentColors.primary.dark[i]
+				}
+			};
+		});
+		if (compareSegmented) compareSegmentSeries.forEach((s, i) => {
+			config[compareSegKey(s.key)] = {
+				label: s.label,
+				theme: {
+					light: segmentColors.compare.light[i],
+					dark: segmentColors.compare.dark[i]
+				}
+			};
+		});
+		return config;
+	}, [
+		primaryLayer,
+		compareLayer,
+		primarySolidKey,
+		primaryDashedKey,
+		compareSolidKey,
+		compareDashedKey,
+		primarySegKey,
+		compareSegKey,
+		primaryColor,
+		compareColor,
+		primaryHasInProgress,
+		compareHasInProgress,
+		primarySegmented,
+		compareSegmented,
+		primarySegmentSeries,
+		compareSegmentSeries,
+		segmentColors
+	]);
+	const handleChartMouseMove = useCallback((rechartsState) => {
+		const i = rechartsState.activeTooltipIndex;
+		if (typeof i !== "number") return;
+		setHoverIndex(i);
+		if (dragAnchor != null && (brushStart != null || i !== dragAnchor)) {
+			if (brushStart == null) setBrushStart(dragAnchor);
+			setBrushEnd(i);
+		}
+	}, [dragAnchor, brushStart]);
+	const handleChartMouseDown = useCallback((rechartsState, e) => {
+		if (e.button !== 0) return;
+		const i = rechartsState.activeTooltipIndex;
+		if (typeof i !== "number") return;
+		e.preventDefault();
+		setDragAnchor(i);
+		setAnnotationDraft(null);
+	}, []);
+	const handleChartMouseUp = useCallback((_, e) => {
+		e.stopPropagation();
+		if (brushStart != null && brushEnd != null) {
+			const lo = Math.min(brushStart, brushEnd);
+			const hi = Math.max(brushStart, brushEnd);
+			setBrushStart(null);
+			setBrushEnd(null);
+			setDragAnchor(null);
+			if (hi - lo >= 1) setCommittedRange([lo, hi]);
+			return;
+		}
+		setDragAnchor(null);
+		if (pinnedIndex != null) setTimeseriesField("pinnedIndex", null);
+		else if (hoverIndex != null) setTimeseriesField("pinnedIndex", hoverIndex);
+	}, [
+		brushStart,
+		brushEnd,
+		hoverIndex,
+		pinnedIndex,
+		setTimeseriesField
+	]);
+	const handleChartMouseLeave = useCallback(() => {
+		if (!brushing) setHoverIndex(null);
+	}, [brushing]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+			e.preventDefault();
+			setHoverIndex((cur) => {
+				const base = cur ?? pinnedIndex ?? 0;
+				return e.key === "ArrowRight" ? Math.min(N - 1, base + 1) : Math.max(0, base - 1);
+			});
+			return;
+		}
+		if (e.key === "Home") {
+			e.preventDefault();
+			setHoverIndex(0);
+			return;
+		}
+		if (e.key === "End") {
+			e.preventDefault();
+			setHoverIndex(N - 1);
+			return;
+		}
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			if (pinnedIndex != null) setTimeseriesField("pinnedIndex", null);
+			else if (hoverIndex != null) setTimeseriesField("pinnedIndex", hoverIndex);
+		}
+	}, [
+		N,
+		hoverIndex,
+		pinnedIndex,
+		setTimeseriesField
+	]);
+	useEffect(() => {
+		if (pinnedIndex == null) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") setTimeseriesField("pinnedIndex", null);
+		};
+		const onDown = (e) => {
+			if (!wrapperRef.current) return;
+			if (!wrapperRef.current.contains(e.target)) setTimeseriesField("pinnedIndex", null);
+		};
+		window.addEventListener("keydown", onKey);
+		window.addEventListener("mousedown", onDown);
+		return () => {
+			window.removeEventListener("keydown", onKey);
+			window.removeEventListener("mousedown", onDown);
+		};
+	}, [pinnedIndex, setTimeseriesField]);
+	const plotInset = resolvedPlotMargin.left + resolvedPlotMargin.right;
+	const indexToCss = useCallback((i) => {
+		if (N <= 1) return `calc(${resolvedPlotMargin.left}px + (100% - ${plotInset}px) * 0.5)`;
+		const t = Math.max(0, Math.min(1, i / (N - 1)));
+		return `calc(${resolvedPlotMargin.left}px + (100% - ${plotInset}px) * ${t})`;
+	}, [
+		N,
+		resolvedPlotMargin.left,
+		plotInset
+	]);
+	const shouldFlip = (activeIndex != null ? N <= 1 ? 50 : activeIndex / (N - 1) * 100 : 0) > 68;
+	const activePoint = activeIndex != null ? data[activeIndex] : null;
+	const chartAriaLabel = primaryLayer?.label || "Chart";
+	if (state.view === "pie") return /* @__PURE__ */ jsx(AnalyticsChartPie, {
+		wrapperRef,
+		primarySegmentSeries,
+		compareSegmentSeries,
+		aggregatedPrimarySegments,
+		aggregatedCompareSegments,
+		aggregatedPrimaryTotal,
+		aggregatedCompareTotal,
+		segmentColors,
+		showPrimary,
+		showCompare,
+		xFormatKind,
+		yFormatKind,
+		hoverKey: pieHoverKey,
+		setHoverKey: setPieHoverKey,
+		zoomRange,
+		onResetZoom: () => {
+			onChange((prev) => ({
+				...prev,
+				zoomRange: null,
+				pinnedIndex: null
+			}));
+			setCommittedRange(null);
+			setAnnotationDraft(null);
+			setHoverIndex(null);
+		},
+		visibleStart,
+		visibleEnd,
+		fullData,
+		strings,
+		fmtValue,
+		pie
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapperRef,
+		className: cn("relative w-full select-none rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:focus-visible:ring-blue-400/40", brushing && "[&_.recharts-wrapper]:cursor-ew-resize", !brushing && "[&_.recharts-wrapper]:cursor-crosshair"),
+		onClick: (e) => {
+			e.stopPropagation();
+		},
+		onKeyDown: handleKeyDown,
+		onFocus: () => {
+			if (hoverIndex == null) setHoverIndex(pinnedIndex ?? Math.floor(N / 2));
+		},
+		tabIndex: 0,
+		role: "img",
+		"aria-label": `${chartAriaLabel} over the visible ${data.length}-day range. Use arrow keys to move the cursor, Enter to pin, Escape to release. Click and drag to select a range.`,
+		children: [
+			/* @__PURE__ */ jsx(DesignChartContainer, {
+				config: chartConfig,
+				className: "aspect-auto h-[260px] w-full sm:h-[320px]",
+				children: /* @__PURE__ */ jsxs(ComposedChart, {
+					data: chartData,
+					margin: resolvedPlotMargin,
+					onMouseMove: handleChartMouseMove,
+					onMouseDown: handleChartMouseDown,
+					onMouseUp: handleChartMouseUp,
+					onMouseLeave: handleChartMouseLeave,
+					children: [
+						showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+							vertical: false,
+							strokeDasharray: "3 3"
+						}),
+						showXAxis && /* @__PURE__ */ jsx(XAxis, {
+							dataKey: "index",
+							tickLine: false,
+							axisLine: false,
+							tickMargin: 10,
+							minTickGap: 32,
+							tickFormatter: (value) => {
+								const idx = Number(value);
+								if (idx < 0 || idx >= data.length) return "";
+								return fmtValue(data[idx].ts, xFormatKind);
+							}
+						}),
+						showYAxis && /* @__PURE__ */ jsx(YAxis, {
+							tickLine: false,
+							axisLine: false,
+							tickMargin: 8,
+							width: yAxisWidth,
+							domain: [0, yDomainMax],
+							allowDataOverflow: false,
+							tickFormatter: (value) => fmtValue(Math.round(Number(value)), yFormatKind)
+						}),
+						showAnnotationsLayer && annotations.map((a) => /* @__PURE__ */ jsx(ReferenceLine, {
+							x: a.index,
+							stroke: annotationColor,
+							strokeDasharray: "3 4",
+							strokeOpacity: .55,
+							ifOverflow: "visible"
+						}, a.index)),
+						committedRange && /* @__PURE__ */ jsx(ReferenceArea, {
+							x1: committedRange[0],
+							x2: committedRange[1],
+							fill: primaryColor,
+							fillOpacity: .07,
+							stroke: primaryColor,
+							strokeOpacity: .45,
+							strokeDasharray: "3 3",
+							ifOverflow: "visible"
+						}),
+						brushStart != null && brushEnd != null && /* @__PURE__ */ jsx(ReferenceArea, {
+							x1: Math.min(brushStart, brushEnd),
+							x2: Math.max(brushStart, brushEnd),
+							fill: primaryColor,
+							fillOpacity: .15,
+							stroke: primaryColor,
+							strokeOpacity: .55,
+							ifOverflow: "visible"
+						}),
+						showPrimary && primaryLayer && renderDataSeries({
+							layer: primaryLayer,
+							segmented: primarySegmented,
+							segmentSeries: primarySegmentSeries,
+							segKey: primarySegKey,
+							stackId: "primary-segments",
+							strokeDasharray: primaryStroke,
+							segmentedStrokeDasharray: void 0,
+							fillOpacity: primaryFillOpacity,
+							segmentedFillOpacity: .78,
+							strokeWidth: 2,
+							segmentedStrokeWidth: .75,
+							inProgressKeys: primaryHasInProgress ? {
+								solid: primarySolidKey,
+								dashed: primaryDashedKey
+							} : null
+						}),
+						showCompare && compareLayer && renderDataSeries({
+							layer: compareLayer,
+							segmented: compareSegmented,
+							segmentSeries: compareSegmentSeries,
+							segKey: compareSegKey,
+							stackId: "compare-segments",
+							strokeDasharray: compareStroke,
+							segmentedStrokeDasharray: compareStroke,
+							fillOpacity: compareFillOpacity,
+							segmentedFillOpacity: .6,
+							baseOpacity: compareSegmented ? .9 : 1,
+							strokeWidth: 1.5,
+							segmentedStrokeWidth: .75,
+							inProgressKeys: compareHasInProgress ? {
+								solid: compareSolidKey,
+								dashed: compareDashedKey
+							} : null
+						})
+					]
+				})
+			}),
+			activeIndex != null && activePoint && !brushing && /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-y-4 z-10 w-px border-l border-dashed border-foreground/30",
+				style: { left: indexToCss(activeIndex) }
+			}),
+			brushStart != null && brushEnd != null && (() => {
+				const lo = Math.min(brushStart, brushEnd);
+				const hi = Math.max(brushStart, brushEnd);
+				const days = hi - lo + 1;
+				return /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute -top-1 z-30 -translate-x-1/2 -translate-y-full rounded-lg border border-blue-500/30 bg-background/95 px-3 py-1.5 text-[11px] shadow-lg backdrop-blur-xl dark:border-blue-400/30",
+					style: { left: indexToCss((lo + hi) / 2) },
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "font-mono text-[10px] uppercase tracking-wider text-muted-foreground",
+								children: strings.rangeLabel
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "font-mono tabular-nums text-foreground",
+								children: [
+									fmtValue(data[lo].ts, xFormatKind),
+									" – ",
+									fmtValue(data[hi].ts, xFormatKind)
+								]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "font-mono text-[10px] tabular-nums text-muted-foreground",
+								children: ["· ", strings.daysShort(days)]
+							})
+						]
+					})
+				});
+			})(),
+			zoomRange && /* @__PURE__ */ jsx("div", {
+				className: "absolute right-2 top-2 z-20",
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => {
+						onChange((prev) => ({
+							...prev,
+							zoomRange: null,
+							pinnedIndex: null
+						}));
+						setCommittedRange(null);
+						setAnnotationDraft(null);
+						setHoverIndex(null);
+					},
+					className: "inline-flex items-center gap-1.5 rounded-full bg-blue-500/10 px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-wider text-blue-600 ring-1 ring-blue-500/30 transition-colors duration-150 hover:bg-blue-500/15 hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 dark:text-blue-300 dark:ring-blue-400/30",
+					children: [/* @__PURE__ */ jsx(MagnifyingGlassMinusIcon, {
+						weight: "bold",
+						className: "size-3",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", { children: strings.resetZoom })]
+				})
+			}),
+			committedRange && !brushing && (() => {
+				const [lo, hi] = committedRange;
+				const center = (lo + hi) / 2;
+				const centerPct = N <= 1 ? 50 : center / (N - 1) * 100;
+				const anchorStyle = centerPct < 22 ? { left: "8px" } : centerPct > 78 ? { right: "8px" } : {
+					left: indexToCss(center),
+					transform: "translateX(-50%)"
+				};
+				const days = hi - lo + 1;
+				const draft = annotationDraft;
+				return /* @__PURE__ */ jsx("div", {
+					className: "absolute top-2 z-30",
+					style: anchorStyle,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex items-center gap-1 rounded-full border border-foreground/10 bg-background/95 py-1 pl-2 pr-1 shadow-[0_10px_28px_rgba(15,23,42,0.18)] backdrop-blur-xl dark:shadow-[0_10px_28px_rgba(0,0,0,0.55)]",
+						children: draft == null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-1.5 whitespace-nowrap px-1 font-mono text-[10px] tabular-nums text-muted-foreground",
+								children: [
+									/* @__PURE__ */ jsxs("span", {
+										className: "text-foreground",
+										children: [
+											fmtValue(data[lo].ts, xFormatKind),
+											" – ",
+											fmtValue(data[hi].ts, xFormatKind)
+										]
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-foreground/30",
+										children: "·"
+									}),
+									/* @__PURE__ */ jsx("span", { children: strings.daysShort(days) })
+								]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "h-4 w-px bg-foreground/10",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ jsxs(DesignButton, {
+								size: "sm",
+								variant: "ghost",
+								className: "h-7 gap-1.5 px-2 text-[11px]",
+								onClick: () => {
+									onChange((prev) => ({
+										...prev,
+										zoomRange: [visibleStart + lo, visibleStart + hi],
+										pinnedIndex: null
+									}));
+									setCommittedRange(null);
+									setAnnotationDraft(null);
+									setHoverIndex(null);
+								},
+								children: [/* @__PURE__ */ jsx(MagnifyingGlassPlusIcon, {
+									weight: "bold",
+									className: "size-3.5",
+									"aria-hidden": "true"
+								}), strings.zoomIn]
+							}),
+							/* @__PURE__ */ jsxs(DesignButton, {
+								size: "sm",
+								variant: "ghost",
+								className: "h-7 gap-1.5 px-2 text-[11px]",
+								onClick: () => setAnnotationDraft(""),
+								children: [/* @__PURE__ */ jsx(FlagIcon, {
+									weight: "bold",
+									className: "size-3.5",
+									"aria-hidden": "true"
+								}), strings.annotate]
+							}),
+							/* @__PURE__ */ jsx(DesignButton, {
+								size: "sm",
+								variant: "ghost",
+								className: "h-7 w-7 p-0",
+								"aria-label": strings.clearSelection,
+								onClick: () => setCommittedRange(null),
+								children: /* @__PURE__ */ jsx(XIcon, {
+									weight: "bold",
+									className: "size-3.5",
+									"aria-hidden": "true"
+								})
+							})
+						] }) : /* @__PURE__ */ jsxs("form", {
+							className: "flex items-center gap-1 px-1",
+							onSubmit: (e) => {
+								e.preventDefault();
+								const label = draft.trim();
+								if (label.length === 0) return;
+								const mid = Math.round((lo + hi) / 2);
+								onAnnotationCreate?.({
+									index: visibleStart + mid,
+									label,
+									description: label
+								});
+								setCommittedRange(null);
+								setAnnotationDraft(null);
+							},
+							children: [
+								/* @__PURE__ */ jsx(FlagIcon, {
+									weight: "bold",
+									className: "size-3.5 text-amber-500 dark:text-amber-400",
+									"aria-hidden": "true"
+								}),
+								/* @__PURE__ */ jsx("input", {
+									autoFocus: true,
+									type: "text",
+									value: draft,
+									onChange: (e) => setAnnotationDraft(e.target.value),
+									onKeyDown: (e) => {
+										if (e.key === "Escape") {
+											e.preventDefault();
+											setAnnotationDraft(null);
+										}
+									},
+									maxLength: 40,
+									placeholder: strings.annotationPlaceholder,
+									"aria-label": strings.annotationLabelAria,
+									className: "w-44 bg-transparent px-1 py-0.5 font-mono text-[11px] text-foreground placeholder:text-muted-foreground/60 focus-visible:outline-none"
+								}),
+								/* @__PURE__ */ jsx(DesignButton, {
+									type: "submit",
+									size: "sm",
+									variant: "default",
+									className: "h-7 px-2.5 text-[11px]",
+									disabled: draft.trim().length === 0,
+									children: strings.save
+								}),
+								/* @__PURE__ */ jsx(DesignButton, {
+									type: "button",
+									size: "sm",
+									variant: "ghost",
+									className: "h-7 px-2 text-[11px]",
+									onClick: () => setAnnotationDraft(null),
+									children: strings.cancel
+								})
+							]
+						})
+					})
+				});
+			})(),
+			showAnnotationsLayer && /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-x-0 top-1 h-0",
+				children: annotations.map((a) => {
+					return /* @__PURE__ */ jsxs("div", {
+						className: "absolute -translate-x-1/2",
+						style: { left: indexToCss(a.index) },
+						children: [/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-label": a.description,
+							className: "peer pointer-events-auto inline-flex items-center gap-1 rounded-full bg-amber-500/15 px-1.5 py-[1px] font-mono text-[9px] font-semibold uppercase tracking-wider text-amber-700 ring-1 ring-amber-500/30 dark:text-amber-300 dark:bg-amber-500/20 dark:ring-amber-500/40 transition-colors duration-150 hover:bg-amber-500/25 hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/50",
+							children: [/* @__PURE__ */ jsx(FlagIcon, {
+								weight: "fill",
+								className: "size-2.5",
+								"aria-hidden": "true"
+							}), a.label]
+						}), /* @__PURE__ */ jsx("span", {
+							role: "tooltip",
+							className: "pointer-events-none absolute left-1/2 top-full z-30 mt-1 hidden -translate-x-1/2 whitespace-nowrap rounded-md bg-foreground px-2 py-1 text-[10px] font-normal text-background shadow-md peer-hover:block peer-focus-visible:block",
+							children: a.description
+						})]
+					}, a.index);
+				})
+			}),
+			activeIndex != null && activePoint && (() => {
+				const primaryView = buildTooltipLayerView({
+					show: showPrimary,
+					layer: primaryLayer,
+					color: primaryColor,
+					segmented: primarySegmented,
+					segmentSeries: primarySegmentSeries,
+					segmentRows: primarySegments,
+					segmentTotals: primarySegmentTotals,
+					segmentColorsLight: segmentColors.primary.light,
+					segmentColorsDark: segmentColors.primary.dark,
+					activeIndex,
+					activePoint,
+					fallbackLabel: "Chart"
+				});
+				const compareView = buildTooltipLayerView({
+					show: showCompare,
+					layer: compareLayer,
+					color: compareColor,
+					segmented: compareSegmented,
+					segmentSeries: compareSegmentSeries,
+					segmentRows: compareSegments,
+					segmentTotals: compareSegmentTotals,
+					segmentColorsLight: segmentColors.compare.light,
+					segmentColorsDark: segmentColors.compare.dark,
+					activeIndex,
+					activePoint
+				});
+				const delta = primaryView && compareView ? formatDelta(primaryView.total, compareView.total) : null;
+				const ctx = {
+					activeIndex,
+					point: activePoint,
+					isPinned: pinnedIndex != null,
+					primary: primaryView,
+					compare: compareView,
+					delta,
+					formatValue: (v) => fmtValue(v, yFormatKind),
+					formatDate: (ts) => fmtValue(ts, xFormatKind),
+					strings
+				};
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("pointer-events-none absolute top-10 z-20", "transition-[transform,opacity] duration-150"),
+					style: {
+						left: indexToCss(activeIndex),
+						transform: shouldFlip ? "translateX(calc(-100% - 16px))" : "translateX(16px)"
+					},
+					children: renderTooltipFn(ctx)
+				});
+			})()
+		]
+	});
+}
+
+//#endregion
+export { AnalyticsChart };
+//# sourceMappingURL=analytics-chart.js.map