drizzle-cube 0.3.13 → 0.3.16

package/dist/client/adapters/index.d.ts

@@ -11,6 +11,8 @@ export type { QuerySliceState } from './queryModeAdapter';
 export { funnelModeAdapter } from './funnelModeAdapter';
 export type { FunnelSliceState } from './funnelModeAdapter';
 export { flowModeAdapter } from './flowModeAdapter';
+export { retentionModeAdapter } from './retentionModeAdapter';
+export type { RetentionSliceState } from '../types/retention';
 /**
  * Manually initialize and register all adapters.
  *

package/dist/client/adapters/retentionModeAdapter.d.ts

@@ -0,0 +1,3 @@
+import { ModeAdapter } from './modeAdapter';
+import { RetentionSliceState } from '../types/retention';
+export declare const retentionModeAdapter: ModeAdapter<RetentionSliceState>;

package/dist/client/charts.js

@@ -1,15 +1,15 @@
-import { L as t, g as e, c as s, b as o, i as C, p as h, a as f } from "./chunks/charts-loader-BtsnUO4Q.js";
-import { k as p, f as i, e as d, h as R, i as c, l as g, p as m, j as n, u as x } from "./chunks/charts-xNubY0vm.js";
-import { e as T, a as A, N as y, P as L } from "./chunks/charts-core-CXrhEEVF.js";
-import { default as b } from "./chunks/chart-bar-D68HFPpa.js";
-import { default as I } from "./chunks/chart-line-DqqE7ky9.js";
-import { default as v } from "./chunks/chart-area-cPrJnhLj.js";
-import { default as N } from "./chunks/chart-pie-B5WBzIRH.js";
-import { default as V } from "./chunks/chart-scatter-DjmJRlK0.js";
-import { default as D } from "./chunks/chart-radar-DL_dvhA-.js";
-import { default as H } from "./chunks/chart-radial-bar-DDRo6nz-.js";
-import { default as j } from "./chunks/chart-tree-map-DEfJtJVC.js";
-import { default as z } from "./chunks/chart-data-table-D4WDqbM0.js";
+import { L as t, g as e, c as s, b as o, i as C, p as h, a as f } from "./chunks/charts-loader-ChTUa_-G.js";
+import { k as p, f as i, e as d, h as R, i as c, l as g, p as m, j as n, u as x } from "./chunks/charts-Dk_9XrA7.js";
+import { c as T, C as A, N as y, P as L } from "./chunks/charts-core-CjQZBxmv.js";
+import { default as b } from "./chunks/chart-bar-7y0-F27Q.js";
+import { default as I } from "./chunks/chart-line-FSEpBk6Y.js";
+import { default as v } from "./chunks/chart-area-DLmXFWWy.js";
+import { default as N } from "./chunks/chart-pie-BRQEH9e-.js";
+import { default as V } from "./chunks/chart-scatter-D6XwOD2W.js";
+import { default as D } from "./chunks/chart-radar-DgsFyiIP.js";
+import { default as H } from "./chunks/chart-radial-bar-CUMoXyl9.js";
+import { default as j } from "./chunks/chart-tree-map-DQMsn47a.js";
+import { default as z } from "./chunks/chart-data-table-rUFLqysu.js";
 export {
   T as CHART_COLORS,
   A as CHART_MARGINS,

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RetentionCombinedChart-DirfDaZH.js","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=\"flex items-center justify-center w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">No data available</div>\n          <div className=\"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=\"flex items-center justify-center w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">Unable to render retention data</div>\n          <div className=\"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}>\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=\"w-full border-collapse text-sm\">\n      <thead className=\"sticky top-0 bg-dc-bg z-10\">\n        <tr>\n          <th className=\"text-left p-2 font-medium text-dc-text border-b border-dc-border min-w-[100px] whitespace-nowrap\">\n            {retentionData?.breakdownValues?.length ? 'Segment' : 'Cohort'}\n          </th>\n          <th className=\"text-right p-2 font-medium text-dc-text border-b border-dc-border min-w-[60px] whitespace-nowrap\">\n            {cohortLabel}\n          </th>\n          {retentionData?.periods.map((period) => (\n            <th\n              key={period}\n              className=\"text-center p-2 font-medium text-dc-text border-b border-dc-border min-w-[70px] 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=\"p-2 font-medium text-dc-text border-b border-dc-border whitespace-nowrap\">\n                {seriesKey}\n              </td>\n              <td className=\"p-2 text-right text-dc-text-secondary 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=\"p-2 text-center border-b border-dc-border cursor-default transition-opacity 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=\"fixed z-50 px-3 py-2 bg-dc-surface border border-dc-border rounded shadow-lg text-sm pointer-events-none\"\n        style={{\n          left: heatmapTooltip.x,\n          top: heatmapTooltip.y - 10,\n          transform: 'translate(-50%, -100%)',\n        }}\n      >\n        <div className=\"font-medium text-dc-text 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 space-y-0.5\">\n          <div>Cohort Size: {heatmapTooltip.cohortSize.toLocaleString()}</div>\n          <div>Retained: {heatmapTooltip.retainedUsers.toLocaleString()}</div>\n          <div className=\"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=\"relative w-full h-full 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=\"flex flex-col w-full h-full\" style={{ height }}>\n        {/* Line chart - takes remaining space after heatmap */}\n        <div className=\"flex-1 min-h-[200px]\">\n          {renderLineChart('100%')}\n        </div>\n        {/* Heatmap table - auto-height based on content, scrolls if needed */}\n        <div className=\"flex-shrink-0 max-h-[40%] overflow-auto 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"],"names":["getRetentionColor","rate","formatPercentage","formatPeriodLabel","period","granularity","prefix","getCohortLabel","_bindingKeyLabel","getDefaultSeriesName","bindingKeyLabel","transformRetentionData","rows","periods","breakdownValues","defaultSeriesName","row","r","dataPoint","bv","RetentionCombinedChart","React","data","height","displayConfig","colorPalette","hoveredLegend","setHoveredLegend","useState","heatmapTooltip","setHeatmapTooltip","retentionData","useMemo","isRetentionData","a","b","chartData","seriesKeys","cohortLabel","displayMode","showLegend","showGrid","showTooltip","jsx","jsxs","renderLineChart","chartHeight","chartMargins","CHART_MARGINS","ChartContainer","ComposedChart","CartesianGrid","XAxis","YAxis","value","ChartTooltip","name","label","Legend","o","seriesKey","index","Line","CHART_COLORS","renderHeatmapTable","rowIndex","period0Data","d","isDefaultSeries","cohortSize","bgColor","textColor","e","rect","retainedUsers","renderHeatmapTooltip"],"mappings":";;;;;AA2CA,SAASA,EAAkBC,GAAsB;AAG/C,SAAO,qBADO,MADM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGA,CAAI,CAAC,IACf,GACD;AACnC;AAKA,SAASC,EAAiBD,GAAsB;AAC9C,SAAO,GAAG,KAAK,MAAMA,IAAO,GAAG,CAAC;AAClC;AAOA,SAASE,EAAkBC,GAAgBC,GAA4C;AACrF,QAAMC,IAASD,MAAgB,QAAQ,QACnCA,MAAgB,SAAS,SACzBA,MAAgB,UAAU,UAC1B;AAGJ,SAAID,MAAW,IACNC,IAAc,OAAOC,CAAM,KAAK,OAGlCD,IAAc,GAAGC,CAAM,IAAIF,CAAM,KAAK,IAAIA,CAAM;AACzD;AAMA,SAASG,EAAeC,GAAmC;AACzD,SAAO;AACT;AAMA,SAASC,GAAqBC,GAAkC;AAC9D,SAAKA,IACE,GAAGA,CAAe,eADI;AAE/B;AAMA,SAASC,GACPC,GACAC,GACAC,GACAT,GACAK,GACuE;AACvE,QAAMK,IAAoBN,GAAqBC,CAAe;AAG9D,SAAI,CAACI,KAAmBA,EAAgB,WAAW,IAW1C,EAAE,WAVSD,EAAQ,IAAI,CAACT,MAAW;AACxC,UAAMY,IAAMJ,EAAK,KAAK,CAACK,MAAMA,EAAE,WAAWb,KAAU,CAACa,EAAE,cAAc;AACrE,WAAO;AAAA,MACL,QAAAb;AAAA,MACA,aAAaD,EAAkBC,GAAQC,CAAW;AAAA,MAClD,CAACU,CAAiB,GAAGC,IAAMA,EAAI,gBAAgB;AAAA,MAC/C,YAAYA,GAAK,cAAc;AAAA,MAC/B,eAAeA,GAAK,iBAAiB;AAAA,IAAA;AAAA,EAEzC,CAAC,GACmB,YAAY,CAACD,CAAiB,GAAG,mBAAAA,EAAA,IAoBhD,EAAE,WAhBSF,EAAQ,IAAI,CAACT,MAAW;AACxC,UAAMc,IAAiB;AAAA,MACrB,QAAAd;AAAA,MACA,aAAaD,EAAkBC,GAAQC,CAAW;AAAA,IAAA;AAGpD,WAAAS,EAAgB,QAAQ,CAACK,MAAO;AAC9B,YAAMH,IAAMJ,EAAK,KAAK,CAACK,MAAMA,EAAE,WAAWb,KAAUa,EAAE,mBAAmBE,CAAE;AAC3E,MAAAD,EAAUC,CAAE,IAAIH,IAAMA,EAAI,gBAAgB,MAC1CE,EAAU,GAAGC,CAAE,aAAa,IAAIH,GAAK,cAAc,GACnDE,EAAU,GAAGC,CAAE,gBAAgB,IAAIH,GAAK,iBAAiB;AAAA,IAC3D,CAAC,GAEME;AAAA,EACT,CAAC,GAEmB,YAAYJ,GAAiB,mBAAAC,EAAA;AACnD;AAeA,MAAMK,KAAyBC,EAAM,KAAK,SAAgC;AAAA,EACxE,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,eAAAC;AAAA,EACA,cAAAC;AACF,GAAe;AACb,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAwB,IAAI,GAChE,CAACC,GAAgBC,CAAiB,IAAIF,EAA6B,IAAI,GAGvEG,IAAgBC,EAAmC,MAAM;AAC7D,QAAI,CAACV,EAAM,QAAO;AAGlB,QAAIW,EAAgBX,CAAI;AACtB,aAAOA;AAIT,QAAI,MAAM,QAAQA,CAAI,KAAKA,EAAK,SAAS,GAAG;AAC1C,YAAMV,IAAOU,GACPT,IAAU,CAAC,GAAG,IAAI,IAAID,EAAK,IAAI,CAACK,MAAMA,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAACiB,GAAGC,MAAMD,IAAIC,CAAC,GACtErB,IAAkB;AAAA,QACtB,GAAG,IAAI,IAAIF,EAAK,OAAO,CAACK,MAAMA,EAAE,cAAc,EAAE,IAAI,CAACA,MAAMA,EAAE,cAAe,CAAC;AAAA,MAAA;AAG/E,aAAO;AAAA,QACL,MAAAL;AAAA,QACA,SAAAC;AAAA,QACA,iBAAiBC,EAAgB,SAAS,IAAIA,IAAkB;AAAA,MAAA;AAAA,IAEpE;AAEA,WAAO;AAAA,EACT,GAAG,CAACQ,CAAI,CAAC,GAGH,EAAE,WAAAc,GAAW,YAAAC,GAAY,mBAAAtB,EAAA,IAAsBiB,EAAQ,MACtDD,IAGEpB;AAAA,IACLoB,EAAc;AAAA,IACdA,EAAc;AAAA,IACdA,EAAc;AAAA,IACdA,EAAc;AAAA,IACdA,EAAc;AAAA,EAAA,IAPP,EAAE,WAAW,CAAA,GAAI,YAAY,CAAA,GAAI,mBAAmB,YAAA,GAS5D,CAACA,CAAa,CAAC,GAGZO,IAAc/B,EAA6C,GAG3DgC,IACHf,GAAuB,wBAAwB,QAE5CgB,IAAahB,GAAe,cAAc,IAC1CiB,IAAWjB,GAAe,YAAY,IACtCkB,IAAclB,GAAe,eAAe;AAGlD,MAAI,CAACF,KAAS,MAAM,QAAQA,CAAI,KAAKA,EAAK,WAAW;AACnD,WACE,gBAAAqB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,QAAApB,EAAA;AAAA,QAET,UAAA,gBAAAqB,EAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,qBAAiB;AAAA,UAC7D,gBAAAA,EAAC,OAAA,EAAI,WAAU,kCAAiC,UAAA,8CAAA,CAEhD;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAKN,MAAI,CAACP,KAAaA,EAAU,WAAW;AACrC,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,QAAApB,EAAA;AAAA,QAET,UAAA,gBAAAqB,EAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,mCAA+B;AAAA,UAC3E,gBAAAA,EAAC,OAAA,EAAI,WAAU,kCAAiC,UAAA,+BAAA,CAA4B;AAAA,QAAA,EAAA,CAC9E;AAAA,MAAA;AAAA,IAAA;AAMN,QAAME,IAAkB,CAACC,MAAiC;AACxD,UAAMC,IAAe;AAAA,MACnB,GAAGC;AAAA,MACH,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAGT,WACE,gBAAAL,EAACM,KAAe,QAAQH,GACtB,4BAACI,GAAA,EAAc,MAAMd,GAAW,QAAQW,GACrC,UAAA;AAAA,MAAAN,KAAY,gBAAAE,EAACQ,GAAA,EAAc,iBAAgB,MAAA,CAAM;AAAA,MAClD,gBAAAR;AAAA,QAACS;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAM,EAAE,UAAU,GAAA;AAAA,UAClB,UAAU,EAAE,QAAQ,mBAAA;AAAA,UACpB,UAAU,EAAE,QAAQ,mBAAA;AAAA,QAAmB;AAAA,MAAA;AAAA,MAEzC,gBAAAT;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,QAAQ,CAAC,GAAG,CAAC;AAAA,UACb,eAAe,CAACC,MAAUpD,EAAiBoD,CAAK;AAAA,UAChD,MAAM,EAAE,UAAU,GAAA;AAAA,UAClB,UAAU,EAAE,QAAQ,mBAAA;AAAA,UACpB,UAAU,EAAE,QAAQ,mBAAA;AAAA,UACpB,OAAO;AAAA,YACL,OAAO;AAAA,YACP,OAAO;AAAA,YACP,UAAU;AAAA,YACV,OAAO,EAAE,YAAY,UAAU,UAAU,QAAQ,MAAM,2BAAA;AAAA,UAA2B;AAAA,QACpF;AAAA,MAAA;AAAA,MAEDZ,KACC,gBAAAC;AAAA,QAACY;AAAA,QAAA;AAAA,UACC,WAAW,CAACD,GAAYE,MAClBF,KAAU,OACL,CAAC,WAAWE,CAAI,IAElB,CAACtD,EAAiBoD,CAAK,GAAGE,CAAI;AAAA,UAEvC,gBAAgB,CAACC,MAAkBA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGtCjB,KACC,gBAAAG;AAAA,QAACe;AAAA,QAAA;AAAA,UACC,cAAc,EAAE,UAAU,QAAQ,YAAY,OAAA;AAAA,UAC9C,UAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAO;AAAA,UACP,OAAM;AAAA,UACN,eAAc;AAAA,UACd,cAAc,CAACC,MAAMhC,EAAiB,OAAOgC,EAAE,WAAW,EAAE,CAAC;AAAA,UAC7D,cAAc,MAAMhC,EAAiB,IAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAK5CU,EAAW,IAAI,CAACuB,GAAWC,MAC1B,gBAAAlB;AAAA,QAACmB;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAASF;AAAA,UACT,QACGnC,GAAc,UAAUA,EAAa,OAAOoC,IAAQpC,EAAa,OAAO,MAAM,KAC/EsC,EAAaF,IAAQE,EAAa,MAAM;AAAA,UAE1C,aAAa;AAAA,UACb,KAAK,EAAE,GAAG,GAAG,aAAa,EAAA;AAAA,UAC1B,WAAW,EAAE,GAAG,EAAA;AAAA,UAChB,eAAerC,IAAiBA,MAAkBkC,IAAY,IAAI,MAAO;AAAA,UACzE,cAAc;AAAA,QAAA;AAAA,QAXTA;AAAA,MAAA,CAaR;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,EAEJ,GAGMI,IAAqB,MACzB,gBAAApB,EAAC,SAAA,EAAM,WAAU,kCACf,UAAA;AAAA,IAAA,gBAAAD,EAAC,SAAA,EAAM,WAAU,8BACf,UAAA,gBAAAC,EAAC,MAAA,EACC,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAG,WAAU,oGACX,aAAe,iBAAiB,SAAS,YAAY,SAAA,CACxD;AAAA,MACA,gBAAAA,EAAC,MAAA,EAAG,WAAU,oGACX,UAAAL,GACH;AAAA,MACCP,GAAe,QAAQ,IAAI,CAAC3B,MAC3B,gBAAAuC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAAxC,EAAkBC,GAAQ2B,GAAe,WAAW;AAAA,QAAA;AAAA,QAHhD3B;AAAA,MAAA,CAKR;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,sBACC,SAAA,EACE,UAAAiC,EAAW,IAAI,CAACuB,GAAWK,MAAa;AACvC,YAAMC,IAAc9B,EAAU,KAAK,CAAC+B,MAAMA,EAAE,WAAW,CAAC,GAClDC,IAAkBR,MAAc7C,GAChCsD,IAAaD,IACfF,GAAa,cAAc,IAC3BA,IAAc,GAAGN,CAAS,aAAa,KAAK;AAEhD,aACE,gBAAAhB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAWqB,IAAW,MAAM,IAAI,aAAa;AAAA,UAE7C,UAAA;AAAA,YAAA,gBAAAtB,EAAC,MAAA,EAAG,WAAU,4EACX,UAAAiB,GACH;AAAA,8BACC,MAAA,EAAG,WAAU,mEACX,UAAAS,EAAW,kBACd;AAAA,YACCtC,GAAe,QAAQ,IAAI,CAAC3B,MAAW;AACtC,oBAAMc,IAAYkB,EAAU,KAAK,CAAC+B,MAAMA,EAAE,WAAW/D,CAAM,GACrDH,IAAOiB,IAAY0C,CAAS,KAAK,GACjCU,IAAUrE,IAAO,IAAID,EAAkBC,CAAI,IAAI,eAC/CsE,IAAYtE,IAAO,MAAM,YAAY;AAE3C,qBACE,gBAAA0C;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO,EAAE,iBAAiB2B,GAAS,OAAOC,EAAA;AAAA,kBAC1C,cAAc,CAACC,MAAM;AACnB,0BAAMC,IAAOD,EAAE,cAAc,sBAAA,GACvBE,IAAgBN,IAClBlD,GAAW,iBAAiB,IAC5BA,IAAY,GAAG0C,CAAS,gBAAgB,KAAK;AACjD,oBAAA9B,EAAkB;AAAA,sBAChB,QAAA1B;AAAA,sBACA,gBAAgBgE,IAAkB,OAAOR;AAAA,sBACzC,YAAAS;AAAA,sBACA,eAAAK;AAAA,sBACA,eAAezE;AAAA,sBACf,GAAGwE,EAAK,OAAOA,EAAK,QAAQ;AAAA,sBAC5B,GAAGA,EAAK;AAAA,oBAAA,CACT;AAAA,kBACH;AAAA,kBACA,cAAc,MAAM3C,EAAkB,IAAI;AAAA,kBAEzC,UAAA7B,IAAO,IAAIC,EAAiBD,CAAI,IAAI;AAAA,gBAAA;AAAA,gBApBhCG;AAAA,cAAA;AAAA,YAuBX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAxCIwD;AAAA,MAAA;AAAA,IA2CX,CAAC,EAAA,CACH;AAAA,EAAA,GACF,GAIIe,IAAuB,MAC3B9C,KACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,MAAMf,EAAe;AAAA,QACrB,KAAKA,EAAe,IAAI;AAAA,QACxB,WAAW;AAAA,MAAA;AAAA,MAGb,UAAA;AAAA,QAAA,gBAAAc,EAAC,OAAA,EAAI,WAAU,iCACZ,UAAAd,EAAe,iBACZ,GAAGA,EAAe,cAAc,MAAM1B,EAAkB0B,EAAe,QAAQE,GAAe,WAAW,CAAC,KAC1G5B,EAAkB0B,EAAe,QAAQE,GAAe,WAAW,EAAA,CACzE;AAAA,QACA,gBAAAa,EAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,UAAA;AAAA,YAAA;AAAA,YAAcf,EAAe,WAAW,eAAA;AAAA,UAAe,GAAE;AAAA,4BAC7D,OAAA,EAAI,UAAA;AAAA,YAAA;AAAA,YAAWA,EAAe,cAAc,eAAA;AAAA,UAAe,GAAE;AAAA,UAC9D,gBAAAe,EAAC,OAAA,EAAI,WAAU,4BAA2B,UAAA;AAAA,YAAA;AAAA,YACjC1C,EAAiB2B,EAAe,aAAa;AAAA,UAAA,EAAA,CACtD;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKN,SAAIU,MAAgB,8BAEf,OAAA,EAAI,WAAU,wCAAuC,OAAO,EAAE,QAAAhB,KAC5D,UAAA;AAAA,IAAAyC,EAAA;AAAA,IACAW,EAAA;AAAA,EAAqB,GACxB,IAKApC,MAAgB,+BAEf,OAAA,EAAI,WAAU,+BAA8B,OAAO,EAAE,QAAAhB,KAEpD,UAAA;AAAA,IAAA,gBAAAoB,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAAE,EAAgB,MAAM,GACzB;AAAA,IAEA,gBAAAF,EAAC,OAAA,EAAI,WAAU,qEACZ,eACH;AAAA,IAECgC,EAAA;AAAA,EAAqB,GACxB,IAKG9B,EAAgBtB,CAAM;AAC/B,CAAC;"}

package/dist/client/chunks/RetentionCombinedChart.config-C-ILIaEb.js

@@ -0,0 +1,47 @@
+const e = {
+  // RetentionCombinedChart auto-configures from the retention data structure
+  // No drop zones needed as the chart maps directly to retention result data
+  dropZones: [],
+  // Display options
+  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"
+};
+export {
+  e as retentionCombinedConfig
+};
+//# sourceMappingURL=RetentionCombinedChart.config-C-ILIaEb.js.map

package/dist/client/chunks/RetentionCombinedChart.config-C-ILIaEb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RetentionCombinedChart.config-C-ILIaEb.js","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  // 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"],"names":["retentionCombinedConfig"],"mappings":"AASO,MAAMA,IAA2C;AAAA;AAAA;AAAA,EAGtD,WAAW,CAAA;AAAA;AAAA,EAGX,sBAAsB;AAAA,IACpB;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,SAAS;AAAA,QACP,EAAE,OAAO,QAAQ,OAAO,aAAA;AAAA,QACxB,EAAE,OAAO,WAAW,OAAO,gBAAA;AAAA,QAC3B,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,MAAW;AAAA,MAEzC,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,IAAA;AAAA,IAEf;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAGF,aAAa;AAAA,EACb,SAAS;AACX;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RetentionHeatmap-Bofadstm.js","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=\"flex items-center justify-center w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">No data available</div>\n          <div className=\"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=\"flex items-center justify-center w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">Unable to render retention data</div>\n          <div className=\"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=\"relative w-full h-full overflow-auto\" style={{ height }}>\n      {/* Retention Matrix Table */}\n      <table className=\"w-full border-collapse text-sm\">\n        <thead className=\"sticky top-0 bg-dc-bg z-10\">\n          <tr>\n            <th className=\"text-left p-2 font-medium text-dc-text border-b border-dc-border min-w-[100px]\">\n              Cohort\n            </th>\n            <th className=\"text-right p-2 font-medium text-dc-text border-b border-dc-border min-w-[80px]\">\n              Users\n            </th>\n            {periods.map(period => (\n              <th\n                key={period}\n                className=\"text-center p-2 font-medium text-dc-text border-b border-dc-border 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=\"p-2 font-medium text-dc-text border-b border-dc-border whitespace-nowrap\">\n                {formatCohortPeriod(row.cohort)}\n              </td>\n              <td className=\"p-2 text-right text-dc-text-secondary 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=\"p-2 text-center border-b border-dc-border cursor-default transition-opacity 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=\"flex items-center justify-center mt-4 gap-2 text-xs text-dc-text-secondary\">\n          <span>0%</span>\n          <div className=\"flex h-4\">\n            {[0, 0.2, 0.4, 0.6, 0.8, 1].map(rate => (\n              <div\n                key={rate}\n                className=\"w-6 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=\"fixed z-50 px-3 py-2 bg-dc-surface border border-dc-border rounded shadow-lg text-sm pointer-events-none\"\n          style={{\n            left: tooltip.x,\n            top: tooltip.y - 10,\n            transform: 'translate(-50%, -100%)',\n          }}\n        >\n          <div className=\"font-medium text-dc-text mb-1\">\n            {formatCohortPeriod(tooltip.cohort)} - Period {tooltip.period}\n          </div>\n          <div className=\"text-dc-text-secondary space-y-0.5\">\n            <div>Cohort Size: {tooltip.cohortSize.toLocaleString()}</div>\n            <div>Retained: {tooltip.retainedUsers.toLocaleString()}</div>\n            <div className=\"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"],"names":["getRetentionColor","rate","getTextColor","formatCohortPeriod","cohort","date","formatPercentage","RetentionHeatmap","React","data","height","displayConfig","tooltip","setTooltip","useState","retentionData","useMemo","isRetentionData","rows","breakdownValues","r","periods","a","b","matrix","segments","lookup","row","segment","segmentRows","period","cohortSize","handleMouseEnter","event","rect","handleMouseLeave","jsx","jsxs","showLegend","rowIndex","cell","periodIndex","bgColor","textColor","e"],"mappings":"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"}