drizzle-cube 0.4.29 → 0.4.31

package/dist/client/chunks/RetentionCombinedChart-D4Yf1TnQ.js

@@ -0,0 +1,270 @@
+import { i as e, n as t } from "./chart-activity-grid-wR2Twpo7.js";
+import { c as n, l as r } from "./chart-area-e9ysnatQ.js";
+import { c as i } from "./retention-UEXlSdZ-.js";
+import a, { useMemo as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { CartesianGrid as u, ComposedChart as d, Legend as f, Line as p, XAxis as m, YAxis as h } from "recharts";
+//#region src/client/components/charts/RetentionCombinedChart.tsx
+function g(e) {
+	return `rgba(34, 197, 94, ${.1 + Math.max(0, Math.min(1, e)) * .7})`;
+}
+function _(e) {
+	return `${Math.round(e * 100)}%`;
+}
+function v(e, t) {
+	let n = t === "day" ? "Day" : t === "week" ? "Week" : t === "month" ? "Month" : "P";
+	return e === 0 ? t ? `< 1 ${n}` : "P0" : t ? `${n} ${e}` : `P${e}`;
+}
+function y(e) {
+	return "Total";
+}
+function b(e) {
+	return e ? `${e} Retention` : "Retention";
+}
+function x(e, t, n, r, i) {
+	let a = b(i);
+	return !n || n.length === 0 ? {
+		chartData: t.map((t) => {
+			let n = e.find((e) => e.period === t && !e.breakdownValue);
+			return {
+				period: t,
+				periodLabel: v(t, r),
+				[a]: n ? n.retentionRate : null,
+				cohortSize: n?.cohortSize ?? 0,
+				retainedUsers: n?.retainedUsers ?? 0
+			};
+		}),
+		seriesKeys: [a],
+		defaultSeriesName: a
+	} : {
+		chartData: t.map((t) => {
+			let i = {
+				period: t,
+				periodLabel: v(t, r)
+			};
+			return n.forEach((n) => {
+				let r = e.find((e) => e.period === t && e.breakdownValue === n);
+				i[n] = r ? r.retentionRate : null, i[`${n}_cohortSize`] = r?.cohortSize ?? 0, i[`${n}_retainedUsers`] = r?.retainedUsers ?? 0;
+			}), i;
+		}),
+		seriesKeys: n,
+		defaultSeriesName: a
+	};
+}
+var S = a.memo(function({ data: a, height: b = "100%", displayConfig: S, colorPalette: C }) {
+	let [w, T] = s(null), [E, D] = s(null), O = o(() => {
+		if (!a) return null;
+		if (i(a)) return a;
+		if (Array.isArray(a) && a.length > 0) {
+			let e = a, t = [...new Set(e.map((e) => e.period))].sort((e, t) => e - t), n = [...new Set(e.filter((e) => e.breakdownValue).map((e) => e.breakdownValue))];
+			return {
+				rows: e,
+				periods: t,
+				breakdownValues: n.length > 0 ? n : void 0
+			};
+		}
+		return null;
+	}, [a]), { chartData: k, seriesKeys: A, defaultSeriesName: j } = o(() => O ? x(O.rows, O.periods, O.breakdownValues, O.granularity, O.bindingKeyLabel) : {
+		chartData: [],
+		seriesKeys: [],
+		defaultSeriesName: "Retention"
+	}, [O]), M = y(O?.bindingKeyLabel), N = S?.retentionDisplayMode || "line", P = S?.showLegend ?? !0, F = S?.showGrid ?? !0, I = S?.showTooltip ?? !0;
+	if (!a || Array.isArray(a) && a.length === 0) return /* @__PURE__ */ c("div", {
+		className: "dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted",
+		style: { height: b },
+		children: /* @__PURE__ */ l("div", {
+			className: "dc:text-center",
+			children: [/* @__PURE__ */ c("div", {
+				className: "dc:text-sm dc:font-semibold dc:mb-1",
+				children: "No data available"
+			}), /* @__PURE__ */ c("div", {
+				className: "dc:text-xs text-dc-text-secondary",
+				children: "Configure retention analysis to see results"
+			})]
+		})
+	});
+	if (!k || k.length === 0) return /* @__PURE__ */ c("div", {
+		className: "dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted",
+		style: { height: b },
+		children: /* @__PURE__ */ l("div", {
+			className: "dc:text-center",
+			children: [/* @__PURE__ */ c("div", {
+				className: "dc:text-sm dc:font-semibold dc:mb-1",
+				children: "Unable to render retention data"
+			}), /* @__PURE__ */ c("div", {
+				className: "dc:text-xs text-dc-text-secondary",
+				children: "Data format may be incorrect"
+			})]
+		})
+	});
+	let L = (i) => /* @__PURE__ */ c(r, {
+		height: i,
+		children: /* @__PURE__ */ l(d, {
+			data: k,
+			margin: {
+				...e,
+				left: 50,
+				right: 20
+			},
+			accessibilityLayer: !1,
+			children: [
+				F && /* @__PURE__ */ c(u, { strokeDasharray: "3 3" }),
+				/* @__PURE__ */ c(m, {
+					dataKey: "periodLabel",
+					tick: { fontSize: 12 },
+					axisLine: { stroke: "var(--dc-border)" },
+					tickLine: { stroke: "var(--dc-border)" }
+				}),
+				/* @__PURE__ */ c(h, {
+					domain: [0, 1],
+					tickFormatter: (e) => _(e),
+					tick: { fontSize: 12 },
+					axisLine: { stroke: "var(--dc-border)" },
+					tickLine: { stroke: "var(--dc-border)" },
+					label: {
+						value: "Retention %",
+						angle: -90,
+						position: "insideLeft",
+						style: {
+							textAnchor: "middle",
+							fontSize: "12px",
+							fill: "var(--dc-text-secondary)"
+						}
+					}
+				}),
+				I && /* @__PURE__ */ c(n, {
+					formatter: (e, t) => e == null ? ["No data", t] : [_(e), t],
+					labelFormatter: (e) => e
+				}),
+				P && /* @__PURE__ */ c(f, {
+					wrapperStyle: {
+						fontSize: "12px",
+						paddingTop: "10px"
+					},
+					iconType: "line",
+					iconSize: 8,
+					layout: "horizontal",
+					align: "center",
+					verticalAlign: "bottom",
+					onMouseEnter: (e) => T(String(e.dataKey || "")),
+					onMouseLeave: () => T(null)
+				}),
+				A.map((e, n) => /* @__PURE__ */ c(p, {
+					type: "monotone",
+					dataKey: e,
+					stroke: C?.colors && C.colors[n % C.colors.length] || t[n % t.length],
+					strokeWidth: 2,
+					dot: {
+						r: 4,
+						strokeWidth: 2
+					},
+					activeDot: { r: 6 },
+					strokeOpacity: w ? w === e ? 1 : .3 : 1,
+					connectNulls: !1
+				}, e))
+			]
+		})
+	}), R = () => /* @__PURE__ */ l("table", {
+		className: "dc:w-full dc:border-collapse dc:text-sm",
+		children: [/* @__PURE__ */ c("thead", {
+			className: "dc:sticky dc:top-0 bg-dc-bg dc:z-10",
+			children: /* @__PURE__ */ l("tr", { children: [
+				/* @__PURE__ */ c("th", {
+					className: "dc:text-left dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:min-w-[100px] dc:whitespace-nowrap",
+					children: O?.breakdownValues?.length ? "Segment" : "Cohort"
+				}),
+				/* @__PURE__ */ c("th", {
+					className: "dc:text-right dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:min-w-[60px] dc:whitespace-nowrap",
+					children: M
+				}),
+				O?.periods.map((e) => /* @__PURE__ */ c("th", {
+					className: "dc:text-center dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:min-w-[70px] dc:whitespace-nowrap",
+					children: v(e, O?.granularity)
+				}, e))
+			] })
+		}), /* @__PURE__ */ c("tbody", { children: A.map((e, t) => {
+			let n = k.find((e) => e.period === 0), r = e === j, i = r ? n?.cohortSize ?? 0 : n?.[`${e}_cohortSize`] ?? 0;
+			return /* @__PURE__ */ l("tr", {
+				className: t % 2 == 0 ? "bg-dc-bg" : "bg-dc-surface-secondary",
+				children: [
+					/* @__PURE__ */ c("td", {
+						className: "dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:whitespace-nowrap",
+						children: e
+					}),
+					/* @__PURE__ */ c("td", {
+						className: "dc:p-2 dc:text-right text-dc-text-secondary dc:border-b border-dc-border",
+						children: i.toLocaleString()
+					}),
+					O?.periods.map((t) => {
+						let n = k.find((e) => e.period === t), a = n?.[e] ?? 0;
+						return /* @__PURE__ */ c("td", {
+							className: "dc:p-2 dc:text-center dc:border-b border-dc-border dc:cursor-default dc:transition-opacity dc:hover:opacity-80",
+							style: {
+								backgroundColor: a > 0 ? g(a) : "transparent",
+								color: a > .5 ? "#ffffff" : "var(--dc-text)"
+							},
+							onMouseEnter: (o) => {
+								let s = o.currentTarget.getBoundingClientRect();
+								D({
+									period: t,
+									breakdownValue: r ? null : e,
+									cohortSize: i,
+									retainedUsers: r ? n?.retainedUsers ?? 0 : n?.[`${e}_retainedUsers`] ?? 0,
+									retentionRate: a,
+									x: s.left + s.width / 2,
+									y: s.top
+								});
+							},
+							onMouseLeave: () => D(null),
+							children: a > 0 ? _(a) : "-"
+						}, t);
+					})
+				]
+			}, e);
+		}) })]
+	}), z = () => E && /* @__PURE__ */ l("div", {
+		className: "dc:fixed dc:z-50 dc:px-3 dc:py-2 bg-dc-surface dc:border border-dc-border dc:rounded dc:shadow-lg dc:text-sm dc:pointer-events-none",
+		style: {
+			left: E.x,
+			top: E.y - 10,
+			transform: "translate(-50%, -100%)"
+		},
+		children: [/* @__PURE__ */ c("div", {
+			className: "dc:font-medium text-dc-text dc:mb-1",
+			children: E.breakdownValue ? `${E.breakdownValue} - ${v(E.period, O?.granularity)}` : v(E.period, O?.granularity)
+		}), /* @__PURE__ */ l("div", {
+			className: "text-dc-text-secondary dc:space-y-0.5",
+			children: [
+				/* @__PURE__ */ l("div", { children: ["Cohort Size: ", E.cohortSize.toLocaleString()] }),
+				/* @__PURE__ */ l("div", { children: ["Retained: ", E.retainedUsers.toLocaleString()] }),
+				/* @__PURE__ */ l("div", {
+					className: "dc:font-medium text-dc-text",
+					children: ["Rate: ", _(E.retentionRate)]
+				})
+			]
+		})]
+	});
+	return N === "heatmap" ? /* @__PURE__ */ l("div", {
+		className: "dc:relative dc:w-full dc:h-full dc:overflow-auto",
+		style: { height: b },
+		children: [R(), z()]
+	}) : N === "combined" ? /* @__PURE__ */ l("div", {
+		className: "dc:flex dc:flex-col dc:w-full dc:h-full",
+		style: { height: b },
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "dc:flex-1 dc:min-h-[200px]",
+				children: L("100%")
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "dc:flex-shrink-0 dc:max-h-[40%] dc:overflow-auto dc:border-t border-dc-border",
+				children: R()
+			}),
+			z()
+		]
+	}) : L(b);
+});
+//#endregion
+export { S as default };
+
+//# sourceMappingURL=RetentionCombinedChart-D4Yf1TnQ.js.map

package/dist/client/chunks/RetentionCombinedChart-D4Yf1TnQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RetentionCombinedChart-D4Yf1TnQ.js","names":[],"sources":["../../../src/client/components/charts/RetentionCombinedChart.tsx"],"sourcesContent":["/**\n * RetentionCombinedChart Component\n *\n * Combined visualization for retention analysis data.\n * Supports multiple display modes: heatmap, line chart, or combined view.\n *\n * Features:\n * - X-axis: Period numbers (P0, P1, P2...)\n * - Y-axis: Retention % (0-100%)\n * - Lines: One per breakdown value (or single if no breakdown)\n * - Display modes: 'heatmap' | 'line' | 'combined'\n * - Heatmap shows color-coded retention matrix\n * - Line chart shows retention curves over periods\n */\n\nimport React, { useMemo, useState } from 'react'\nimport {\n  ComposedChart,\n  Line,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Legend,\n} from 'recharts'\nimport ChartContainer from './ChartContainer'\nimport ChartTooltip from './ChartTooltip'\nimport { CHART_COLORS, CHART_MARGINS } from '../../utils/chartConstants'\nimport type { ChartProps } from '../../types'\nimport type { RetentionChartData, RetentionResultRow, RetentionGranularity } from '../../types/retention'\nimport { isRetentionData } from '../../types/retention'\n\n/**\n * Retention display mode\n * - 'heatmap': Show retention as color-coded bars\n * - 'line': Show retention as line curves\n * - 'combined': Show both heatmap background and line overlay\n */\nexport type RetentionDisplayMode = 'heatmap' | 'line' | 'combined'\n\n/**\n * Get color with opacity based on retention rate for heatmap cells\n * Uses a green gradient: higher retention = more saturated green\n */\nfunction getRetentionColor(rate: number): string {\n  const clampedRate = Math.max(0, Math.min(1, rate))\n  const alpha = 0.1 + clampedRate * 0.7\n  return `rgba(34, 197, 94, ${alpha})`\n}\n\n/**\n * Format percentage for display\n */\nfunction formatPercentage(rate: number): string {\n  return `${Math.round(rate * 100)}%`\n}\n\n/**\n * Format period label based on granularity\n * Period 0 shows \"< 1 Day\" / \"< 1 Week\" etc. to indicate the initial cohort\n * e.g., Period 0 with 'week' granularity → \"< 1 Week\", Period 1 → \"Week 1\"\n */\nfunction formatPeriodLabel(period: number, granularity?: RetentionGranularity): string {\n  const prefix = granularity === 'day' ? 'Day'\n    : granularity === 'week' ? 'Week'\n    : granularity === 'month' ? 'Month'\n    : 'P' // Fallback to P0, P1, etc.\n\n  // Period 0 is special - shows \"< 1 Day\" / \"< 1 Week\" etc.\n  if (period === 0) {\n    return granularity ? `< 1 ${prefix}` : 'P0'\n  }\n\n  return granularity ? `${prefix} ${period}` : `P${period}`\n}\n\n/**\n * Get display label for the cohort total column\n * Shows \"Total\" regardless of binding key - it's the cohort size count\n */\nfunction getCohortLabel(_bindingKeyLabel?: string): string {\n  return 'Total'\n}\n\n/**\n * Get default series name based on binding key\n * e.g., \"userId\" → \"userId Retention\", null → \"Retention\"\n */\nfunction getDefaultSeriesName(bindingKeyLabel?: string): string {\n  if (!bindingKeyLabel) return 'Retention'\n  return `${bindingKeyLabel} Retention`\n}\n\n/**\n * Transform retention data for chart display\n * Groups data by period with breakdown values as series\n */\nfunction transformRetentionData(\n  rows: RetentionResultRow[],\n  periods: number[],\n  breakdownValues?: string[],\n  granularity?: RetentionGranularity,\n  bindingKeyLabel?: string\n): { chartData: any[]; seriesKeys: string[]; defaultSeriesName: string } {\n  const defaultSeriesName = getDefaultSeriesName(bindingKeyLabel)\n\n  // If no breakdown, single series\n  if (!breakdownValues || breakdownValues.length === 0) {\n    const chartData = periods.map((period) => {\n      const row = rows.find((r) => r.period === period && !r.breakdownValue)\n      return {\n        period,\n        periodLabel: formatPeriodLabel(period, granularity),\n        [defaultSeriesName]: row ? row.retentionRate : null,\n        cohortSize: row?.cohortSize ?? 0,\n        retainedUsers: row?.retainedUsers ?? 0,\n      }\n    })\n    return { chartData, seriesKeys: [defaultSeriesName], defaultSeriesName }\n  }\n\n  // With breakdown, create series per breakdown value\n  const chartData = periods.map((period) => {\n    const dataPoint: any = {\n      period,\n      periodLabel: formatPeriodLabel(period, granularity),\n    }\n\n    breakdownValues.forEach((bv) => {\n      const row = rows.find((r) => r.period === period && r.breakdownValue === bv)\n      dataPoint[bv] = row ? row.retentionRate : null\n      dataPoint[`${bv}_cohortSize`] = row?.cohortSize ?? 0\n      dataPoint[`${bv}_retainedUsers`] = row?.retainedUsers ?? 0\n    })\n\n    return dataPoint\n  })\n\n  return { chartData, seriesKeys: breakdownValues, defaultSeriesName }\n}\n\ninterface TooltipData {\n  period: number\n  breakdownValue?: string | null\n  cohortSize: number\n  retainedUsers: number\n  retentionRate: number\n  x: number\n  y: number\n}\n\n/**\n * RetentionCombinedChart Component\n */\nconst RetentionCombinedChart = React.memo(function RetentionCombinedChart({\n  data,\n  height = '100%',\n  displayConfig,\n  colorPalette,\n}: ChartProps) {\n  const [hoveredLegend, setHoveredLegend] = useState<string | null>(null)\n  const [heatmapTooltip, setHeatmapTooltip] = useState<TooltipData | null>(null)\n\n  // Parse retention data\n  const retentionData = useMemo<RetentionChartData | null>(() => {\n    if (!data) return null\n\n    // Check if data is already in RetentionChartData format\n    if (isRetentionData(data)) {\n      return data\n    }\n\n    // If data is an array of RetentionResultRow, convert it\n    if (Array.isArray(data) && data.length > 0) {\n      const rows = data as RetentionResultRow[]\n      const periods = [...new Set(rows.map((r) => r.period))].sort((a, b) => a - b)\n      const breakdownValues = [\n        ...new Set(rows.filter((r) => r.breakdownValue).map((r) => r.breakdownValue!)),\n      ]\n\n      return {\n        rows,\n        periods,\n        breakdownValues: breakdownValues.length > 0 ? breakdownValues : undefined,\n      }\n    }\n\n    return null\n  }, [data])\n\n  // Transform data for chart\n  const { chartData, seriesKeys, defaultSeriesName } = useMemo(() => {\n    if (!retentionData) {\n      return { chartData: [], seriesKeys: [], defaultSeriesName: 'Retention' }\n    }\n    return transformRetentionData(\n      retentionData.rows,\n      retentionData.periods,\n      retentionData.breakdownValues,\n      retentionData.granularity,\n      retentionData.bindingKeyLabel\n    )\n  }, [retentionData])\n\n  // Get cohort label for heatmap column header\n  const cohortLabel = getCohortLabel(retentionData?.bindingKeyLabel)\n\n  // Display mode from config\n  const displayMode: RetentionDisplayMode =\n    (displayConfig as any)?.retentionDisplayMode || 'line'\n\n  const showLegend = displayConfig?.showLegend ?? true\n  const showGrid = displayConfig?.showGrid ?? true\n  const showTooltip = displayConfig?.showTooltip ?? true\n\n  // Handle empty/loading states\n  if (!data || (Array.isArray(data) && data.length === 0)) {\n    return (\n      <div\n        className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"dc:text-center\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n          <div className=\"dc:text-xs text-dc-text-secondary\">\n            Configure retention analysis to see results\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  if (!chartData || chartData.length === 0) {\n    return (\n      <div\n        className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"dc:text-center\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Unable to render retention data</div>\n          <div className=\"dc:text-xs text-dc-text-secondary\">Data format may be incorrect</div>\n        </div>\n      </div>\n    )\n  }\n\n  // Render line chart component (reused in line and combined modes)\n  const renderLineChart = (chartHeight: string | number) => {\n    const chartMargins = {\n      ...CHART_MARGINS,\n      left: 50,\n      right: 20,\n    }\n\n    return (\n      <ChartContainer height={chartHeight}>\n        <ComposedChart data={chartData} margin={chartMargins} accessibilityLayer={false}>\n          {showGrid && <CartesianGrid strokeDasharray=\"3 3\" />}\n          <XAxis\n            dataKey=\"periodLabel\"\n            tick={{ fontSize: 12 }}\n            axisLine={{ stroke: 'var(--dc-border)' }}\n            tickLine={{ stroke: 'var(--dc-border)' }}\n          />\n          <YAxis\n            domain={[0, 1]}\n            tickFormatter={(value) => formatPercentage(value)}\n            tick={{ fontSize: 12 }}\n            axisLine={{ stroke: 'var(--dc-border)' }}\n            tickLine={{ stroke: 'var(--dc-border)' }}\n            label={{\n              value: 'Retention %',\n              angle: -90,\n              position: 'insideLeft',\n              style: { textAnchor: 'middle', fontSize: '12px', fill: 'var(--dc-text-secondary)' },\n            }}\n          />\n          {showTooltip && (\n            <ChartTooltip\n              formatter={(value: any, name: string) => {\n                if (value === null || value === undefined) {\n                  return ['No data', name]\n                }\n                return [formatPercentage(value), name]\n              }}\n              labelFormatter={(label: string) => label}\n            />\n          )}\n          {showLegend && (\n            <Legend\n              wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }}\n              iconType=\"line\"\n              iconSize={8}\n              layout=\"horizontal\"\n              align=\"center\"\n              verticalAlign=\"bottom\"\n              onMouseEnter={(o) => setHoveredLegend(String(o.dataKey || ''))}\n              onMouseLeave={() => setHoveredLegend(null)}\n            />\n          )}\n\n          {/* Render lines */}\n          {seriesKeys.map((seriesKey, index) => (\n            <Line\n              key={seriesKey}\n              type=\"monotone\"\n              dataKey={seriesKey}\n              stroke={\n                (colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) ||\n                CHART_COLORS[index % CHART_COLORS.length]\n              }\n              strokeWidth={2}\n              dot={{ r: 4, strokeWidth: 2 }}\n              activeDot={{ r: 6 }}\n              strokeOpacity={hoveredLegend ? (hoveredLegend === seriesKey ? 1 : 0.3) : 1}\n              connectNulls={false}\n            />\n          ))}\n        </ComposedChart>\n      </ChartContainer>\n    )\n  }\n\n  // Render heatmap table component (reused in heatmap and combined modes)\n  const renderHeatmapTable = () => (\n    <table className=\"dc:w-full dc:border-collapse dc:text-sm\">\n      <thead className=\"dc:sticky dc:top-0 bg-dc-bg dc:z-10\">\n        <tr>\n          <th className=\"dc:text-left dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:min-w-[100px] dc:whitespace-nowrap\">\n            {retentionData?.breakdownValues?.length ? 'Segment' : 'Cohort'}\n          </th>\n          <th className=\"dc:text-right dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:min-w-[60px] dc:whitespace-nowrap\">\n            {cohortLabel}\n          </th>\n          {retentionData?.periods.map((period) => (\n            <th\n              key={period}\n              className=\"dc:text-center dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:min-w-[70px] dc:whitespace-nowrap\"\n            >\n              {formatPeriodLabel(period, retentionData?.granularity)}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {seriesKeys.map((seriesKey, rowIndex) => {\n          const period0Data = chartData.find((d) => d.period === 0)\n          const isDefaultSeries = seriesKey === defaultSeriesName\n          const cohortSize = isDefaultSeries\n            ? period0Data?.cohortSize ?? 0\n            : period0Data?.[`${seriesKey}_cohortSize`] ?? 0\n\n          return (\n            <tr\n              key={seriesKey}\n              className={rowIndex % 2 === 0 ? 'bg-dc-bg' : 'bg-dc-surface-secondary'}\n            >\n              <td className=\"dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:whitespace-nowrap\">\n                {seriesKey}\n              </td>\n              <td className=\"dc:p-2 dc:text-right text-dc-text-secondary dc:border-b border-dc-border\">\n                {cohortSize.toLocaleString()}\n              </td>\n              {retentionData?.periods.map((period) => {\n                const dataPoint = chartData.find((d) => d.period === period)\n                const rate = dataPoint?.[seriesKey] ?? 0\n                const bgColor = rate > 0 ? getRetentionColor(rate) : 'transparent'\n                const textColor = rate > 0.5 ? '#ffffff' : 'var(--dc-text)'\n\n                return (\n                  <td\n                    key={period}\n                    className=\"dc:p-2 dc:text-center dc:border-b border-dc-border dc:cursor-default dc:transition-opacity dc:hover:opacity-80\"\n                    style={{ backgroundColor: bgColor, color: textColor }}\n                    onMouseEnter={(e) => {\n                      const rect = e.currentTarget.getBoundingClientRect()\n                      const retainedUsers = isDefaultSeries\n                        ? dataPoint?.retainedUsers ?? 0\n                        : dataPoint?.[`${seriesKey}_retainedUsers`] ?? 0\n                      setHeatmapTooltip({\n                        period,\n                        breakdownValue: isDefaultSeries ? null : seriesKey,\n                        cohortSize,\n                        retainedUsers,\n                        retentionRate: rate,\n                        x: rect.left + rect.width / 2,\n                        y: rect.top,\n                      })\n                    }}\n                    onMouseLeave={() => setHeatmapTooltip(null)}\n                  >\n                    {rate > 0 ? formatPercentage(rate) : '-'}\n                  </td>\n                )\n              })}\n            </tr>\n          )\n        })}\n      </tbody>\n    </table>\n  )\n\n  // Render heatmap tooltip (shared between heatmap and combined modes)\n  const renderHeatmapTooltip = () =>\n    heatmapTooltip && (\n      <div\n        className=\"dc:fixed dc:z-50 dc:px-3 dc:py-2 bg-dc-surface dc:border border-dc-border dc:rounded dc:shadow-lg dc:text-sm dc:pointer-events-none\"\n        style={{\n          left: heatmapTooltip.x,\n          top: heatmapTooltip.y - 10,\n          transform: 'translate(-50%, -100%)',\n        }}\n      >\n        <div className=\"dc:font-medium text-dc-text dc:mb-1\">\n          {heatmapTooltip.breakdownValue\n            ? `${heatmapTooltip.breakdownValue} - ${formatPeriodLabel(heatmapTooltip.period, retentionData?.granularity)}`\n            : formatPeriodLabel(heatmapTooltip.period, retentionData?.granularity)}\n        </div>\n        <div className=\"text-dc-text-secondary dc:space-y-0.5\">\n          <div>Cohort Size: {heatmapTooltip.cohortSize.toLocaleString()}</div>\n          <div>Retained: {heatmapTooltip.retainedUsers.toLocaleString()}</div>\n          <div className=\"dc:font-medium text-dc-text\">\n            Rate: {formatPercentage(heatmapTooltip.retentionRate)}\n          </div>\n        </div>\n      </div>\n    )\n\n  // Render heatmap mode (table-based only)\n  if (displayMode === 'heatmap') {\n    return (\n      <div className=\"dc:relative dc:w-full dc:h-full dc:overflow-auto\" style={{ height }}>\n        {renderHeatmapTable()}\n        {renderHeatmapTooltip()}\n      </div>\n    )\n  }\n\n  // Combined mode: line chart on top, heatmap table below\n  if (displayMode === 'combined') {\n    return (\n      <div className=\"dc:flex dc:flex-col dc:w-full dc:h-full\" style={{ height }}>\n        {/* Line chart - takes remaining space after heatmap */}\n        <div className=\"dc:flex-1 dc:min-h-[200px]\">\n          {renderLineChart('100%')}\n        </div>\n        {/* Heatmap table - auto-height based on content, scrolls if needed */}\n        <div className=\"dc:flex-shrink-0 dc:max-h-[40%] dc:overflow-auto dc:border-t border-dc-border\">\n          {renderHeatmapTable()}\n        </div>\n        {/* Shared heatmap tooltip */}\n        {renderHeatmapTooltip()}\n      </div>\n    )\n  }\n\n  // Line mode: just the line chart\n  return renderLineChart(height)\n})\n\nexport default RetentionCombinedChart\n"],"mappings":"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"}

package/dist/client/chunks/RetentionCombinedChart.config-DprbXd1N.js

@@ -0,0 +1,56 @@
+import { n as e } from "./rolldown-runtime-lc2dmIiU.js";
+//#region src/client/components/charts/RetentionCombinedChart.config.ts
+var t = /* @__PURE__ */ e({ retentionCombinedConfig: () => n }), n = {
+	label: "Retention Chart",
+	dropZones: [],
+	displayOptionsConfig: [
+		{
+			key: "retentionDisplayMode",
+			label: "Display Mode",
+			type: "select",
+			defaultValue: "line",
+			options: [
+				{
+					value: "line",
+					label: "Line Chart"
+				},
+				{
+					value: "heatmap",
+					label: "Heatmap Table"
+				},
+				{
+					value: "combined",
+					label: "Combined"
+				}
+			],
+			description: "Choose how to visualize retention data"
+		},
+		{
+			key: "showLegend",
+			label: "Show Legend",
+			type: "boolean",
+			defaultValue: !0,
+			description: "Show the legend for breakdown segments"
+		},
+		{
+			key: "showGrid",
+			label: "Show Grid",
+			type: "boolean",
+			defaultValue: !0,
+			description: "Show grid lines on the chart"
+		},
+		{
+			key: "showTooltip",
+			label: "Show Tooltip",
+			type: "boolean",
+			defaultValue: !0,
+			description: "Show tooltip on hover with detailed stats"
+		}
+	],
+	description: "Combined retention visualization with line chart and heatmap modes",
+	useCase: "Visualize user retention over time with optional breakdown segmentation"
+};
+//#endregion
+export { n, t };
+
+//# sourceMappingURL=RetentionCombinedChart.config-DprbXd1N.js.map

package/dist/client/chunks/RetentionCombinedChart.config-DprbXd1N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RetentionCombinedChart.config-DprbXd1N.js","names":[],"sources":["../../../src/client/components/charts/RetentionCombinedChart.config.ts"],"sourcesContent":["/**\n * RetentionCombinedChart Configuration\n *\n * The RetentionCombinedChart visualizes retention analysis data with multiple display modes.\n * It auto-configures from retention data and provides display mode selection.\n */\n\nimport type { ChartTypeConfig } from '../../charts/chartConfigs'\n\nexport const retentionCombinedConfig: ChartTypeConfig = {\n  label: 'Retention Chart',\n  // RetentionCombinedChart auto-configures from the retention data structure\n  // No drop zones needed as the chart maps directly to retention result data\n  dropZones: [],\n\n  // Display options\n  displayOptionsConfig: [\n    {\n      key: 'retentionDisplayMode',\n      label: 'Display Mode',\n      type: 'select',\n      defaultValue: 'line',\n      options: [\n        { value: 'line', label: 'Line Chart' },\n        { value: 'heatmap', label: 'Heatmap Table' },\n        { value: 'combined', label: 'Combined' },\n      ],\n      description: 'Choose how to visualize retention data',\n    },\n    {\n      key: 'showLegend',\n      label: 'Show Legend',\n      type: 'boolean',\n      defaultValue: true,\n      description: 'Show the legend for breakdown segments',\n    },\n    {\n      key: 'showGrid',\n      label: 'Show Grid',\n      type: 'boolean',\n      defaultValue: true,\n      description: 'Show grid lines on the chart',\n    },\n    {\n      key: 'showTooltip',\n      label: 'Show Tooltip',\n      type: 'boolean',\n      defaultValue: true,\n      description: 'Show tooltip on hover with detailed stats',\n    },\n  ],\n\n  description: 'Combined retention visualization with line chart and heatmap modes',\n  useCase: 'Visualize user retention over time with optional breakdown segmentation',\n}\n"],"mappings":";;iEASa,IAA2C;CACtD,OAAO;CAGP,WAAW,EAAE;CAGb,sBAAsB;EACpB;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,cAAc;GACd,SAAS;IACP;KAAE,OAAO;KAAQ,OAAO;KAAc;IACtC;KAAE,OAAO;KAAW,OAAO;KAAiB;IAC5C;KAAE,OAAO;KAAY,OAAO;KAAY;IACzC;GACD,aAAa;GACd;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,cAAc;GACd,aAAa;GACd;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,cAAc;GACd,aAAa;GACd;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,cAAc;GACd,aAAa;GACd;EACF;CAED,aAAa;CACb,SAAS;CACV"}

package/dist/client/chunks/RetentionHeatmap-BoGY6mlZ.js

@@ -0,0 +1,193 @@
+import { c as e } from "./retention-UEXlSdZ-.js";
+import t, { useMemo as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/client/components/charts/RetentionHeatmap.tsx
+function o(e) {
+	return `rgba(34, 197, 94, ${.1 + Math.max(0, Math.min(1, e)) * .7})`;
+}
+function s(e) {
+	return e > .5 ? "#ffffff" : "var(--dc-text)";
+}
+function c(e) {
+	if (/^\d{4}-\d{2}$/.test(e)) return e;
+	let t = new Date(e);
+	return isNaN(t.getTime()) ? e : t.toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "short"
+	});
+}
+function l(e) {
+	return `${Math.round(e * 100)}%`;
+}
+var u = t.memo(function({ data: t, height: u = "100%", displayConfig: d }) {
+	let [f, p] = r(null), m = n(() => {
+		if (!t) return null;
+		if (e(t)) return t;
+		if (Array.isArray(t) && t.length > 0) {
+			let e = t, n = [...new Set(e.map((e) => e.breakdownValue || "All Users"))].sort(), r = [...new Set(e.map((e) => e.period))].sort((e, t) => e - t);
+			return {
+				rows: e,
+				breakdownValues: n.length > 1 || n[0] !== "All Users" ? n : void 0,
+				periods: r
+			};
+		}
+		return null;
+	}, [t]), h = n(() => {
+		if (!m) return null;
+		let { rows: e, breakdownValues: t, periods: n } = m, r = t || ["All Users"], i = /* @__PURE__ */ new Map();
+		for (let t of e) i.set(`${t.breakdownValue || "All Users"}:${t.period}`, t);
+		return r.map((e) => {
+			let t = n.map((t) => i.get(`${e}:${t}`) || null);
+			return {
+				cohort: e,
+				cohortSize: t[0]?.cohortSize ?? 0,
+				periods: t
+			};
+		});
+	}, [m]), g = (e, t, n, r) => {
+		if (!r) return;
+		let i = e.currentTarget.getBoundingClientRect();
+		p({
+			cohort: t,
+			period: n,
+			cohortSize: r.cohortSize,
+			retainedUsers: r.retainedUsers,
+			retentionRate: r.retentionRate,
+			x: i.left + i.width / 2,
+			y: i.top
+		});
+	}, _ = () => {
+		p(null);
+	};
+	if (!t || Array.isArray(t) && t.length === 0) return /* @__PURE__ */ i("div", {
+		className: "dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted",
+		style: { height: u },
+		children: /* @__PURE__ */ a("div", {
+			className: "dc:text-center",
+			children: [/* @__PURE__ */ i("div", {
+				className: "dc:text-sm dc:font-semibold dc:mb-1",
+				children: "No data available"
+			}), /* @__PURE__ */ i("div", {
+				className: "dc:text-xs text-dc-text-secondary",
+				children: "Configure retention analysis to see results"
+			})]
+		})
+	});
+	if (!h || h.length === 0) return /* @__PURE__ */ i("div", {
+		className: "dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted",
+		style: { height: u },
+		children: /* @__PURE__ */ a("div", {
+			className: "dc:text-center",
+			children: [/* @__PURE__ */ i("div", {
+				className: "dc:text-sm dc:font-semibold dc:mb-1",
+				children: "Unable to render retention data"
+			}), /* @__PURE__ */ i("div", {
+				className: "dc:text-xs text-dc-text-secondary",
+				children: "Data format may be incorrect"
+			})]
+		})
+	});
+	let v = m?.periods ?? [], y = d?.showLegend ?? !0;
+	return /* @__PURE__ */ a("div", {
+		className: "dc:relative dc:w-full dc:h-full dc:overflow-auto",
+		style: { height: u },
+		children: [
+			/* @__PURE__ */ a("table", {
+				className: "dc:w-full dc:border-collapse dc:text-sm",
+				children: [/* @__PURE__ */ i("thead", {
+					className: "dc:sticky dc:top-0 bg-dc-bg dc:z-10",
+					children: /* @__PURE__ */ a("tr", { children: [
+						/* @__PURE__ */ i("th", {
+							className: "dc:text-left dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:min-w-[100px]",
+							children: "Cohort"
+						}),
+						/* @__PURE__ */ i("th", {
+							className: "dc:text-right dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:min-w-[80px]",
+							children: "Users"
+						}),
+						v.map((e) => /* @__PURE__ */ a("th", {
+							className: "dc:text-center dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:min-w-[60px]",
+							children: ["P", e]
+						}, e))
+					] })
+				}), /* @__PURE__ */ i("tbody", { children: h.map((e, t) => /* @__PURE__ */ a("tr", {
+					className: t % 2 == 0 ? "bg-dc-bg" : "bg-dc-surface-secondary",
+					children: [
+						/* @__PURE__ */ i("td", {
+							className: "dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:whitespace-nowrap",
+							children: c(e.cohort)
+						}),
+						/* @__PURE__ */ i("td", {
+							className: "dc:p-2 dc:text-right text-dc-text-secondary dc:border-b border-dc-border",
+							children: e.cohortSize.toLocaleString()
+						}),
+						e.periods.map((t, n) => {
+							let r = v[n], a = t?.retentionRate ?? 0;
+							return /* @__PURE__ */ i("td", {
+								className: "dc:p-2 dc:text-center dc:border-b border-dc-border dc:cursor-default dc:transition-opacity dc:hover:opacity-80",
+								style: {
+									backgroundColor: t ? o(a) : "transparent",
+									color: t ? s(a) : "var(--dc-text-muted)"
+								},
+								onMouseEnter: (n) => g(n, e.cohort, r, t),
+								onMouseLeave: _,
+								children: t ? l(a) : "-"
+							}, r);
+						})
+					]
+				}, e.cohort)) })]
+			}),
+			y && /* @__PURE__ */ a("div", {
+				className: "dc:flex dc:items-center dc:justify-center dc:mt-4 dc:gap-2 dc:text-xs text-dc-text-secondary",
+				children: [
+					/* @__PURE__ */ i("span", { children: "0%" }),
+					/* @__PURE__ */ i("div", {
+						className: "dc:flex dc:h-4",
+						children: [
+							0,
+							.2,
+							.4,
+							.6,
+							.8,
+							1
+						].map((e) => /* @__PURE__ */ i("div", {
+							className: "dc:w-6 dc:h-4",
+							style: { backgroundColor: o(e) }
+						}, e))
+					}),
+					/* @__PURE__ */ i("span", { children: "100%" })
+				]
+			}),
+			f && /* @__PURE__ */ a("div", {
+				className: "dc:fixed dc:z-50 dc:px-3 dc:py-2 bg-dc-surface dc:border border-dc-border dc:rounded dc:shadow-lg dc:text-sm dc:pointer-events-none",
+				style: {
+					left: f.x,
+					top: f.y - 10,
+					transform: "translate(-50%, -100%)"
+				},
+				children: [/* @__PURE__ */ a("div", {
+					className: "dc:font-medium text-dc-text dc:mb-1",
+					children: [
+						c(f.cohort),
+						" - Period ",
+						f.period
+					]
+				}), /* @__PURE__ */ a("div", {
+					className: "text-dc-text-secondary dc:space-y-0.5",
+					children: [
+						/* @__PURE__ */ a("div", { children: ["Cohort Size: ", f.cohortSize.toLocaleString()] }),
+						/* @__PURE__ */ a("div", { children: ["Retained: ", f.retainedUsers.toLocaleString()] }),
+						/* @__PURE__ */ a("div", {
+							className: "dc:font-medium text-dc-text",
+							children: ["Rate: ", l(f.retentionRate)]
+						})
+					]
+				})]
+			})
+		]
+	});
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=RetentionHeatmap-BoGY6mlZ.js.map

package/dist/client/chunks/RetentionHeatmap-BoGY6mlZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RetentionHeatmap-BoGY6mlZ.js","names":[],"sources":["../../../src/client/components/charts/RetentionHeatmap.tsx"],"sourcesContent":["/**\n * RetentionHeatmap Component\n *\n * Visualizes retention analysis data as a cohort × period matrix.\n * Displays retention rates with color intensity based on percentage.\n *\n * Features:\n * - Cohort labels in first column (e.g., \"2024-01\", \"2024-02\")\n * - Cohort size in second column\n * - Period columns (P0, P1, P2, ... PN)\n * - Cell background color intensity based on retention rate\n * - Hover tooltip with detailed stats\n */\n\nimport React, { useMemo, useState } from 'react'\nimport type { ChartProps } from '../../types'\nimport type { RetentionChartData, RetentionResultRow } from '../../types/retention'\nimport { isRetentionData } from '../../types/retention'\n\n/**\n * Get color with opacity based on retention rate\n * Uses a green gradient: higher retention = more saturated green\n */\nfunction getRetentionColor(rate: number): string {\n  // Clamp rate between 0 and 1\n  const clampedRate = Math.max(0, Math.min(1, rate))\n\n  // Use CSS variable for theming support\n  // Fallback to a green color if CSS var not available\n  const alpha = 0.1 + clampedRate * 0.7 // Range from 0.1 to 0.8 opacity\n\n  // Green color (success color)\n  return `rgba(34, 197, 94, ${alpha})`\n}\n\n/**\n * Get text color that contrasts with background\n */\nfunction getTextColor(rate: number): string {\n  // Use dark text for lower rates, light text for higher rates\n  return rate > 0.5 ? '#ffffff' : 'var(--dc-text)'\n}\n\n/**\n * Format cohort period for display\n * Converts date strings to readable format\n */\nfunction formatCohortPeriod(cohort: string): string {\n  // If it's already in YYYY-MM format, return as-is\n  if (/^\\d{4}-\\d{2}$/.test(cohort)) {\n    return cohort\n  }\n\n  // Try to parse as date\n  const date = new Date(cohort)\n  if (!isNaN(date.getTime())) {\n    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })\n  }\n\n  return cohort\n}\n\n/**\n * Format percentage for display\n */\nfunction formatPercentage(rate: number): string {\n  return `${Math.round(rate * 100)}%`\n}\n\ninterface TooltipData {\n  cohort: string\n  period: number\n  cohortSize: number\n  retainedUsers: number\n  retentionRate: number\n  x: number\n  y: number\n}\n\n/**\n * RetentionHeatmap Component\n */\nconst RetentionHeatmap = React.memo(function RetentionHeatmap({\n  data,\n  height = '100%',\n  displayConfig,\n}: ChartProps) {\n  const [tooltip, setTooltip] = useState<TooltipData | null>(null)\n\n  // Parse retention data\n  const retentionData = useMemo<RetentionChartData | null>(() => {\n    if (!data) return null\n\n    // Check if data is already in RetentionChartData format\n    if (isRetentionData(data)) {\n      return data\n    }\n\n    // If data is an array of RetentionResultRow, convert it\n    if (Array.isArray(data) && data.length > 0) {\n      const rows = data as RetentionResultRow[]\n      const breakdownValues = [...new Set(rows.map(r => r.breakdownValue || 'All Users'))].sort()\n      const periods = [...new Set(rows.map(r => r.period))].sort((a, b) => a - b)\n\n      return {\n        rows,\n        breakdownValues: breakdownValues.length > 1 || breakdownValues[0] !== 'All Users' ? breakdownValues : undefined,\n        periods,\n      }\n    }\n\n    return null\n  }, [data])\n\n  // Build matrix for display\n  // In the new simplified format, rows are grouped by breakdownValue (or 'All Users' if no breakdown)\n  const matrix = useMemo(() => {\n    if (!retentionData) return null\n\n    const { rows, breakdownValues, periods } = retentionData\n\n    // Determine segments: use breakdownValues if available, otherwise single 'All Users' segment\n    const segments = breakdownValues || ['All Users']\n\n    // Create a lookup map for quick access: segment:period -> row\n    const lookup = new Map<string, RetentionResultRow>()\n    for (const row of rows) {\n      const segment = row.breakdownValue || 'All Users'\n      lookup.set(`${segment}:${row.period}`, row)\n    }\n\n    // Build matrix structure - one row per segment\n    return segments.map((segment: string) => {\n      const segmentRows = periods.map(period => {\n        const row = lookup.get(`${segment}:${period}`)\n        return row || null\n      })\n\n      // Get cohort size from period 0\n      const period0 = segmentRows[0]\n      const cohortSize = period0?.cohortSize ?? 0\n\n      return {\n        cohort: segment, // Keep 'cohort' key for compatibility with rendering\n        cohortSize,\n        periods: segmentRows,\n      }\n    })\n  }, [retentionData])\n\n  // Handle mouse enter on cell\n  const handleMouseEnter = (\n    event: React.MouseEvent,\n    cohort: string,\n    period: number,\n    row: RetentionResultRow | null\n  ) => {\n    if (!row) return\n\n    const rect = event.currentTarget.getBoundingClientRect()\n    setTooltip({\n      cohort,\n      period,\n      cohortSize: row.cohortSize,\n      retainedUsers: row.retainedUsers,\n      retentionRate: row.retentionRate,\n      x: rect.left + rect.width / 2,\n      y: rect.top,\n    })\n  }\n\n  const handleMouseLeave = () => {\n    setTooltip(null)\n  }\n\n  // Handle empty/loading states\n  if (!data || (Array.isArray(data) && data.length === 0)) {\n    return (\n      <div\n        className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"dc:text-center\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n          <div className=\"dc:text-xs text-dc-text-secondary\">\n            Configure retention analysis to see results\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  if (!matrix || matrix.length === 0) {\n    return (\n      <div\n        className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"dc:text-center\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Unable to render retention data</div>\n          <div className=\"dc:text-xs text-dc-text-secondary\">\n            Data format may be incorrect\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  const periods = retentionData?.periods ?? []\n  const showLegend = displayConfig?.showLegend ?? true\n\n  return (\n    <div className=\"dc:relative dc:w-full dc:h-full dc:overflow-auto\" style={{ height }}>\n      {/* Retention Matrix Table */}\n      <table className=\"dc:w-full dc:border-collapse dc:text-sm\">\n        <thead className=\"dc:sticky dc:top-0 bg-dc-bg dc:z-10\">\n          <tr>\n            <th className=\"dc:text-left dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:min-w-[100px]\">\n              Cohort\n            </th>\n            <th className=\"dc:text-right dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:min-w-[80px]\">\n              Users\n            </th>\n            {periods.map(period => (\n              <th\n                key={period}\n                className=\"dc:text-center dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:min-w-[60px]\"\n              >\n                P{period}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {matrix.map((row, rowIndex) => (\n            <tr key={row.cohort} className={rowIndex % 2 === 0 ? 'bg-dc-bg' : 'bg-dc-surface-secondary'}>\n              <td className=\"dc:p-2 dc:font-medium text-dc-text dc:border-b border-dc-border dc:whitespace-nowrap\">\n                {formatCohortPeriod(row.cohort)}\n              </td>\n              <td className=\"dc:p-2 dc:text-right text-dc-text-secondary dc:border-b border-dc-border\">\n                {row.cohortSize.toLocaleString()}\n              </td>\n              {row.periods.map((cell, periodIndex) => {\n                const period = periods[periodIndex]\n                const rate = cell?.retentionRate ?? 0\n                const bgColor = cell ? getRetentionColor(rate) : 'transparent'\n                const textColor = cell ? getTextColor(rate) : 'var(--dc-text-muted)'\n\n                return (\n                  <td\n                    key={period}\n                    className=\"dc:p-2 dc:text-center dc:border-b border-dc-border dc:cursor-default dc:transition-opacity dc:hover:opacity-80\"\n                    style={{ backgroundColor: bgColor, color: textColor }}\n                    onMouseEnter={(e) => handleMouseEnter(e, row.cohort, period, cell)}\n                    onMouseLeave={handleMouseLeave}\n                  >\n                    {cell ? formatPercentage(rate) : '-'}\n                  </td>\n                )\n              })}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n\n      {/* Legend */}\n      {showLegend && (\n        <div className=\"dc:flex dc:items-center dc:justify-center dc:mt-4 dc:gap-2 dc:text-xs text-dc-text-secondary\">\n          <span>0%</span>\n          <div className=\"dc:flex dc:h-4\">\n            {[0, 0.2, 0.4, 0.6, 0.8, 1].map(rate => (\n              <div\n                key={rate}\n                className=\"dc:w-6 dc:h-4\"\n                style={{ backgroundColor: getRetentionColor(rate) }}\n              />\n            ))}\n          </div>\n          <span>100%</span>\n        </div>\n      )}\n\n      {/* Tooltip */}\n      {tooltip && (\n        <div\n          className=\"dc:fixed dc:z-50 dc:px-3 dc:py-2 bg-dc-surface dc:border border-dc-border dc:rounded dc:shadow-lg dc:text-sm dc:pointer-events-none\"\n          style={{\n            left: tooltip.x,\n            top: tooltip.y - 10,\n            transform: 'translate(-50%, -100%)',\n          }}\n        >\n          <div className=\"dc:font-medium text-dc-text dc:mb-1\">\n            {formatCohortPeriod(tooltip.cohort)} - Period {tooltip.period}\n          </div>\n          <div className=\"text-dc-text-secondary dc:space-y-0.5\">\n            <div>Cohort Size: {tooltip.cohortSize.toLocaleString()}</div>\n            <div>Retained: {tooltip.retainedUsers.toLocaleString()}</div>\n            <div className=\"dc:font-medium text-dc-text\">\n              Rate: {formatPercentage(tooltip.retentionRate)}\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nexport default RetentionHeatmap\n"],"mappings":";;;;AAuBA,SAAS,EAAkB,GAAsB;AAS/C,QAAO,qBAHO,KAJM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,EAAK,CAAC,GAIhB,GAGA;;AAMpC,SAAS,EAAa,GAAsB;AAE1C,QAAO,IAAO,KAAM,YAAY;;AAOlC,SAAS,EAAmB,GAAwB;AAElD,KAAI,gBAAgB,KAAK,EAAO,CAC9B,QAAO;CAIT,IAAM,IAAO,IAAI,KAAK,EAAO;AAK7B,QAJK,MAAM,EAAK,SAAS,CAAC,GAInB,IAHE,EAAK,mBAAmB,SAAS;EAAE,MAAM;EAAW,OAAO;EAAS,CAAC;;AAShF,SAAS,EAAiB,GAAsB;AAC9C,QAAO,GAAG,KAAK,MAAM,IAAO,IAAI,CAAC;;AAgBnC,IAAM,IAAmB,EAAM,KAAK,SAA0B,EAC5D,SACA,YAAS,QACT,oBACa;CACb,IAAM,CAAC,GAAS,KAAc,EAA6B,KAAK,EAG1D,IAAgB,QAAyC;AAC7D,MAAI,CAAC,EAAM,QAAO;AAGlB,MAAI,EAAgB,EAAK,CACvB,QAAO;AAIT,MAAI,MAAM,QAAQ,EAAK,IAAI,EAAK,SAAS,GAAG;GAC1C,IAAM,IAAO,GACP,IAAkB,CAAC,GAAG,IAAI,IAAI,EAAK,KAAI,MAAK,EAAE,kBAAkB,YAAY,CAAC,CAAC,CAAC,MAAM,EACrF,IAAU,CAAC,GAAG,IAAI,IAAI,EAAK,KAAI,MAAK,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,EAAE;AAE3E,UAAO;IACL;IACA,iBAAiB,EAAgB,SAAS,KAAK,EAAgB,OAAO,cAAc,IAAkB,KAAA;IACtG;IACD;;AAGH,SAAO;IACN,CAAC,EAAK,CAAC,EAIJ,IAAS,QAAc;AAC3B,MAAI,CAAC,EAAe,QAAO;EAE3B,IAAM,EAAE,SAAM,oBAAiB,eAAY,GAGrC,IAAW,KAAmB,CAAC,YAAY,EAG3C,oBAAS,IAAI,KAAiC;AACpD,OAAK,IAAM,KAAO,EAEhB,GAAO,IAAI,GADK,EAAI,kBAAkB,YAChB,GAAG,EAAI,UAAU,EAAI;AAI7C,SAAO,EAAS,KAAK,MAAoB;GACvC,IAAM,IAAc,EAAQ,KAAI,MAClB,EAAO,IAAI,GAAG,EAAQ,GAAG,IAAS,IAChC,KACd;AAMF,UAAO;IACL,QAAQ;IACR,YALc,EAAY,IACA,cAAc;IAKxC,SAAS;IACV;IACD;IACD,CAAC,EAAc,CAAC,EAGb,KACJ,GACA,GACA,GACA,MACG;AACH,MAAI,CAAC,EAAK;EAEV,IAAM,IAAO,EAAM,cAAc,uBAAuB;AACxD,IAAW;GACT;GACA;GACA,YAAY,EAAI;GAChB,eAAe,EAAI;GACnB,eAAe,EAAI;GACnB,GAAG,EAAK,OAAO,EAAK,QAAQ;GAC5B,GAAG,EAAK;GACT,CAAC;IAGE,UAAyB;AAC7B,IAAW,KAAK;;AAIlB,KAAI,CAAC,KAAS,MAAM,QAAQ,EAAK,IAAI,EAAK,WAAW,EACnD,QACE,kBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,WAAQ;YAEjB,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAsC;IAAuB,CAAA,EAC5E,kBAAC,OAAD;IAAK,WAAU;cAAoC;IAE7C,CAAA,CACF;;EACF,CAAA;AAIV,KAAI,CAAC,KAAU,EAAO,WAAW,EAC/B,QACE,kBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,WAAQ;YAEjB,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAsC;IAAqC,CAAA,EAC1F,kBAAC,OAAD;IAAK,WAAU;cAAoC;IAE7C,CAAA,CACF;;EACF,CAAA;CAIV,IAAM,IAAU,GAAe,WAAW,EAAE,EACtC,IAAa,GAAe,cAAc;AAEhD,QACE,kBAAC,OAAD;EAAK,WAAU;EAAmD,OAAO,EAAE,WAAQ;YAAnF;GAEE,kBAAC,SAAD;IAAO,WAAU;cAAjB,CACE,kBAAC,SAAD;KAAO,WAAU;eACf,kBAAC,MAAD,EAAA,UAAA;MACE,kBAAC,MAAD;OAAI,WAAU;iBAAgG;OAEzG,CAAA;MACL,kBAAC,MAAD;OAAI,WAAU;iBAAgG;OAEzG,CAAA;MACJ,EAAQ,KAAI,MACX,kBAAC,MAAD;OAEE,WAAU;iBAFZ,CAGC,KACG,EACC;SAJE,EAIF,CACL;MACC,EAAA,CAAA;KACC,CAAA,EACR,kBAAC,SAAD,EAAA,UACG,EAAO,KAAK,GAAK,MAChB,kBAAC,MAAD;KAAqB,WAAW,IAAW,KAAM,IAAI,aAAa;eAAlE;MACE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAmB,EAAI,OAAO;OAC5B,CAAA;MACL,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAI,WAAW,gBAAgB;OAC7B,CAAA;MACJ,EAAI,QAAQ,KAAK,GAAM,MAAgB;OACtC,IAAM,IAAS,EAAQ,IACjB,IAAO,GAAM,iBAAiB;AAIpC,cACE,kBAAC,MAAD;QAEE,WAAU;QACV,OAAO;SAAE,iBAPG,IAAO,EAAkB,EAAK,GAAG;SAOV,OANrB,IAAO,EAAa,EAAK,GAAG;SAMW;QACrD,eAAe,MAAM,EAAiB,GAAG,EAAI,QAAQ,GAAQ,EAAK;QAClE,cAAc;kBAEb,IAAO,EAAiB,EAAK,GAAG;QAC9B,EAPE,EAOF;QAEP;MACC;OAzBI,EAAI,OAyBR,CACL,EACI,CAAA,CACF;;GAGP,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,QAAD,EAAA,UAAM,MAAS,CAAA;KACf,kBAAC,OAAD;MAAK,WAAU;gBACZ;OAAC;OAAG;OAAK;OAAK;OAAK;OAAK;OAAE,CAAC,KAAI,MAC9B,kBAAC,OAAD;OAEE,WAAU;OACV,OAAO,EAAE,iBAAiB,EAAkB,EAAK,EAAE;OACnD,EAHK,EAGL,CACF;MACE,CAAA;KACN,kBAAC,QAAD,EAAA,UAAM,QAAW,CAAA;KACb;;GAIP,KACC,kBAAC,OAAD;IACE,WAAU;IACV,OAAO;KACL,MAAM,EAAQ;KACd,KAAK,EAAQ,IAAI;KACjB,WAAW;KACZ;cANH,CAQE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,EAAmB,EAAQ,OAAO;MAAC;MAAW,EAAQ;MACnD;QACN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD,EAAA,UAAA,CAAK,iBAAc,EAAQ,WAAW,gBAAgB,CAAO,EAAA,CAAA;MAC7D,kBAAC,OAAD,EAAA,UAAA,CAAK,cAAW,EAAQ,cAAc,gBAAgB,CAAO,EAAA,CAAA;MAC7D,kBAAC,OAAD;OAAK,WAAU;iBAAf,CAA6C,UACpC,EAAiB,EAAQ,cAAc,CAC1C;;MACF;OACF;;GAEJ;;EAER"}

package/dist/client/chunks/RetentionHeatmap.config-cbaNExVy.js

@@ -0,0 +1,25 @@
+import { n as e } from "./rolldown-runtime-lc2dmIiU.js";
+//#region src/client/components/charts/RetentionHeatmap.config.ts
+var t = /* @__PURE__ */ e({ retentionHeatmapConfig: () => n }), n = {
+	label: "Retention Matrix",
+	dropZones: [],
+	displayOptionsConfig: [{
+		key: "showLegend",
+		label: "Show Legend",
+		type: "boolean",
+		defaultValue: !0,
+		description: "Show the color intensity legend"
+	}, {
+		key: "showTooltip",
+		label: "Show Tooltip",
+		type: "boolean",
+		defaultValue: !0,
+		description: "Show tooltip on hover with detailed stats"
+	}],
+	description: "Cohort retention matrix visualization",
+	useCase: "Visualize user retention over time by cohort"
+};
+//#endregion
+export { n, t };
+
+//# sourceMappingURL=RetentionHeatmap.config-cbaNExVy.js.map

package/dist/client/chunks/RetentionHeatmap.config-cbaNExVy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RetentionHeatmap.config-cbaNExVy.js","names":[],"sources":["../../../src/client/components/charts/RetentionHeatmap.config.ts"],"sourcesContent":["/**\n * RetentionHeatmap Chart Configuration\n *\n * The RetentionHeatmap is a specialized chart for retention analysis.\n * It auto-configures from retention data and doesn't need typical axis configuration.\n */\n\nimport type { ChartTypeConfig } from '../../charts/chartConfigs'\n\nexport const retentionHeatmapConfig: ChartTypeConfig = {\n  label: 'Retention Matrix',\n  // RetentionHeatmap auto-configures from the retention data structure\n  // No drop zones needed as the chart maps directly to cohort × period matrix\n  dropZones: [],\n\n  // Display options\n  displayOptionsConfig: [\n    {\n      key: 'showLegend',\n      label: 'Show Legend',\n      type: 'boolean',\n      defaultValue: true,\n      description: 'Show the color intensity legend',\n    },\n    {\n      key: 'showTooltip',\n      label: 'Show Tooltip',\n      type: 'boolean',\n      defaultValue: true,\n      description: 'Show tooltip on hover with detailed stats',\n    },\n  ],\n\n  description: 'Cohort retention matrix visualization',\n  useCase: 'Visualize user retention over time by cohort',\n}\n"],"mappings":";;gEASa,IAA0C;CACrD,OAAO;CAGP,WAAW,EAAE;CAGb,sBAAsB,CACpB;EACE,KAAK;EACL,OAAO;EACP,MAAM;EACN,cAAc;EACd,aAAa;EACd,EACD;EACE,KAAK;EACL,OAAO;EACP,MAAM;EACN,cAAc;EACd,aAAa;EACd,CACF;CAED,aAAa;CACb,SAAS;CACV"}