@quantumwake/terminal-ux-dashboard-components 0.1.18 → 0.1.20

package/dist/index.js

@@ -1,5 +1,6 @@
-import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, Suspense } from 'react';
+import { createContext, useContext, useMemo, useId, useState, useEffect, useRef, useCallback, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { interpolateRdYlGn } from 'd3-scale-chromatic';
 import { ResponsiveBar } from '@nivo/bar';
 import { ResponsivePie } from '@nivo/pie';
 import { ResponsiveLine } from '@nivo/line';
@@ -8,7 +9,7 @@ import { ResponsiveHeatMap } from '@nivo/heatmap';
 import PivotTableUI from 'react-pivottable/PivotTableUI';
 import 'react-pivottable/pivottable.css';
 import { TerminalSlider, TerminalInput, TerminalToggle, TerminalSelect } from '@quantumwake/terminal-ux-components';
-import { Loader2, Play, ChevronDown, AlertCircle, Rows3, BarChart3, PieChart, TrendingUp, ScatterChart, LayoutGrid, Code, Sparkles, Terminal, RefreshCw, Minimize2, Maximize2, Plus, Save, FolderOpen, Trash2, X, Filter, Database, Send, GripVertical } from 'lucide-react';
+import { Loader2, Play, ChevronDown, AlertCircle, Rows3, BarChart3, PieChart, TrendingUp, ScatterChart, LayoutGrid, Grid3x3, Code, Sparkles, Terminal, RefreshCw, Minimize2, Maximize2, Plus, Save, FolderOpen, Trash2, X, Filter, Database, Send, GripVertical } from 'lucide-react';
 import CodeMirror, { EditorView, Prec, keymap } from '@uiw/react-codemirror';
 import { sql, PostgreSQL, schemaCompletionSource, keywordCompletionSource } from '@codemirror/lang-sql';
 import { snippetCompletion, completeFromList, autocompletion, acceptCompletion } from '@codemirror/autocomplete';
@@ -75,6 +76,8 @@ var aggExpr = (agg, col) => {
       return `MIN(${qNum(col)})`;
     case "max":
       return `MAX(${qNum(col)})`;
+    case "median":
+      return `MEDIAN(${qNum(col)})`;
     default:
       return "COUNT(*)";
   }
@@ -112,7 +115,10 @@ var buildChartSQL = ({
   xFields = [],
   yFields = [],
   valueField = null,
-  filters = []
+  filters = [],
+  labelStat,
+  colorStat,
+  blockField
 }) => {
   const where = compileWhere(filters);
   const x = xFields[0]?.name;
@@ -149,6 +155,14 @@ var buildChartSQL = ({
       const metric = valueField ? aggExpr(valueField.agg || "count", valueField.name) : "COUNT(*)";
       return `SELECT ${qIdent(x)} AS r, ${qIdent(y)} AS c, ${metric} AS v FROM ${TABLE}${where} GROUP BY 1, 2`;
     }
+    case "heatmap-plus": {
+      if (!x || !y) return null;
+      const col = valueField?.name;
+      const lv = col ? aggExpr(labelStat || valueField?.agg || "count", col) : "COUNT(*)";
+      const cv = col ? aggExpr(colorStat || labelStat || valueField?.agg || "count", col) : "COUNT(*)";
+      const blockSel = blockField ? `, ANY_VALUE(${qIdent(blockField)}) AS block` : "";
+      return `SELECT ${qIdent(x)} AS r, ${qIdent(y)} AS c, ${lv} AS lv, ${cv} AS cv${blockSel}, GROUPING(${qIdent(x)}) AS gr, GROUPING(${qIdent(y)}) AS gc FROM ${TABLE}${where} GROUP BY GROUPING SETS ((${qIdent(x)}, ${qIdent(y)}), (${qIdent(x)}), (${qIdent(y)}), ())`;
+    }
     default:
       return null;
   }
@@ -197,6 +211,17 @@ var shapeChartData = (chartType, rows, { yFields = [] } = {}) => {
         data: colKeys.map((ck) => ({ x: ck, y: cell[rk][ck] || 0 }))
       }));
     }
+    case "heatmap-plus": {
+      return rows.map((r) => ({
+        r: r.r == null ? null : String(r.r),
+        c: r.c == null ? null : String(r.c),
+        lv: Number(r.lv) || 0,
+        cv: Number(r.cv) || 0,
+        gr: Number(r.gr) || 0,
+        gc: Number(r.gc) || 0,
+        ...r.block != null ? { block: String(r.block) } : {}
+      }));
+    }
     default:
       return [];
   }
@@ -243,8 +268,54 @@ var DEFAULT_CHART_STYLE = {
   titleAlign: "left",
   titleBold: false,
   titleBackground: "",
-  titleColor: ""
+  titleColor: "",
+  // Chart frame + series color model.
+  height: 0,
+  margin: null,
+  maxXTicks: 0,
+  seriesColors: []
+};
+var DEFAULT_SERIES_COLORS = [
+  "#3987e5",
+  // blue
+  "#d95926",
+  // orange
+  "#199e70",
+  // aqua
+  "#c98500",
+  // yellow
+  "#d55181",
+  // magenta
+  "#008300",
+  // green
+  "#9085e9",
+  // violet
+  "#e66767"
+  // red
+];
+var SERIES_OVERFLOW_COLOR = "#707078";
+var seriesColor = (i, style) => {
+  const s = withStyleDefaults(style);
+  const palette = s.seriesColors.length ? s.seriesColors : DEFAULT_SERIES_COLORS;
+  return i < palette.length ? palette[i] : SERIES_OVERFLOW_COLOR;
+};
+var chartSizing = (style, defaultMargin) => {
+  const s = withStyleDefaults(style);
+  return {
+    frameClass: s.height > 0 ? "w-full" : "h-full w-full min-h-[160px]",
+    frameStyle: s.height > 0 ? { height: s.height } : {},
+    margin: { ...defaultMargin, ...s.margin || {} }
+  };
 };
+function thinTicks(values, max) {
+  if (max <= 0 || values.length <= max) return void 0;
+  if (max === 1) return [values[values.length - 1]];
+  const picked = [];
+  for (let i = 0; i < max; i++) {
+    picked.push(values[Math.round(i * (values.length - 1) / (max - 1))]);
+  }
+  return [...new Set(picked)];
+}
 var LEGEND_ANCHORS = ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"];
 var withStyleDefaults = (style) => ({
   ...DEFAULT_CHART_STYLE,
@@ -342,10 +413,73 @@ var aggregate = (records, column, fn) => {
       return Math.min(...values.map(Number));
     case "max":
       return Math.max(...values.map(Number));
+    case "median": {
+      const nums = values.map(Number).filter((v) => !Number.isNaN(v)).sort((a, b) => a - b);
+      if (!nums.length) return 0;
+      const mid = Math.floor(nums.length / 2);
+      return nums.length % 2 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
+    }
     default:
       return records.length;
   }
 };
+var HEAT_STATS = ["count", "sum", "avg", "min", "max", "median"];
+var cellKey = (row, col) => `${row}\0${col}`;
+var normalizePartition = (cells, method, vmin, vmax) => {
+  const out = /* @__PURE__ */ new Map();
+  const values = cells.map((c) => c.colorValue).filter((v) => Number.isFinite(v));
+  if (!values.length) return out;
+  if (method === "rank") {
+    const sorted = [...values].sort((a, b) => a - b);
+    for (const c of cells) {
+      const below = sorted.findIndex((v) => v >= c.colorValue);
+      const ties = sorted.filter((v) => v === c.colorValue).length;
+      out.set(cellKey(c.row, c.col), (below + 0.5 * ties) / sorted.length);
+    }
+    return out;
+  }
+  const lo = vmin ?? Math.min(...values);
+  const hi = vmax ?? Math.max(...values);
+  for (const c of cells) {
+    const t = hi === lo ? 0.5 : (c.colorValue - lo) / (hi - lo);
+    out.set(cellKey(c.row, c.col), Math.max(0, Math.min(1, t)));
+  }
+  return out;
+};
+var normalizeCells = (cells, { scope = "global", method = "linear", vmin, vmax } = {}) => {
+  const partitions = /* @__PURE__ */ new Map();
+  const partOf = (c) => {
+    switch (scope) {
+      case "row":
+        return `r:${c.row}`;
+      case "column":
+        return `c:${c.col}`;
+      case "block":
+        return c.block != null ? `b:${c.block}` : "global";
+      default:
+        return "global";
+    }
+  };
+  for (const c of cells) {
+    const k = partOf(c);
+    const part = partitions.get(k);
+    if (part) part.push(c);
+    else partitions.set(k, [c]);
+  }
+  const out = /* @__PURE__ */ new Map();
+  for (const part of partitions.values()) {
+    for (const [k, t] of normalizePartition(part, method, vmin, vmax)) out.set(k, t);
+  }
+  return out;
+};
+var heatColor = (t) => interpolateRdYlGn(Math.max(0, Math.min(1, t)));
+var heatLabelColor = (t) => {
+  const m = heatColor(t).match(/\d+/g);
+  if (!m) return "#0f172a";
+  const [r, g, b] = m.map(Number);
+  const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return lum > 140 ? "#0f172a" : "#f8fafc";
+};
 function MetricView({ records, config, value: presetValue }) {
   const value = useMemo(() => {
     if (presetValue != null) return presetValue;
@@ -440,15 +574,17 @@ function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: pre
     return Object.entries(groups).map(([key, recs]) => ({ group: key, value: aggregate(recs, valueColumn, aggFn) })).sort((a, b) => b.value - a.value).slice(0, 50);
   }, [records, groupColumn, valueColumn, aggFn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const s = withStyleDefaults(style);
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 20, bottom: 60, left: 60 });
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveBar,
     {
       data,
       keys: ["value"],
       indexBy: "group",
-      margin: { top: 20, right: 20, bottom: 60, left: 60 },
+      margin,
       padding: 0.3,
-      colors: ["rgba(74, 222, 128, 0.8)"],
+      colors: [s.seriesColors[0] || "rgba(74, 222, 128, 0.8)"],
       borderColor: { from: "color", modifiers: [["darker", 1.6]] },
       axisBottom: makeAxis(style, "x", groupColumn),
       axisLeft: makeAxis(style, "y", valueColumn, { numeric: true }),
@@ -472,16 +608,19 @@ function PieView({ records, groupColumn, data: presetData, style }) {
   }, [records, groupColumn, presetData]);
   const data = presetData || computed;
   const legend = legendConfig(style);
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const s = withStyleDefaults(style);
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 120, bottom: 20, left: 20 });
+  const colorById = new Map(data.map((d, i) => [d.id, seriesColor(i, s)]));
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsivePie,
     {
       data,
-      margin: { top: 20, right: 120, bottom: 20, left: 20 },
+      margin,
       innerRadius: 0.4,
       padAngle: 1,
       cornerRadius: 3,
       activeOuterRadiusOffset: 8,
-      colors: { scheme: "set2" },
+      colors: ((d) => colorById.get(d.id)),
       borderWidth: 1,
       borderColor: { from: "color", modifiers: [["darker", 0.2]] },
       arcLinkLabelsSkipAngle: 10,
@@ -508,29 +647,54 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
     }];
   }, [records, xColumn, yColumn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const s = withStyleDefaults(style);
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 20, bottom: 60, left: 60 });
+  const colorById = new Map(data.map((serie, i) => [
+    serie.id,
+    s.seriesColors.length || data.length > 1 ? seriesColor(i, s) : "rgba(96, 165, 250, 0.9)"
+  ]));
+  const tickValues = thinTicks(data[0]?.data.map((d) => d.x) ?? [], s.maxXTicks);
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveLine,
     {
       data,
-      margin: { top: 20, right: 20, bottom: 60, left: 60 },
+      margin,
       xScale: { type: "point" },
       yScale: { type: "linear", min: "auto", max: "auto" },
       curve: "monotoneX",
       enableArea: true,
       areaOpacity: 0.15,
-      colors: ["rgba(96, 165, 250, 0.9)"],
+      colors: ((serie) => colorById.get(serie.id)),
       pointSize: (data[0]?.data.length ?? 0) > 50 ? 0 : 6,
       pointColor: { theme: "background" },
       pointBorderWidth: 2,
       pointBorderColor: { from: "serieColor" },
       enableGridX: false,
-      axisBottom: makeAxis(style, "x", xColumn),
+      axisBottom: { ...makeAxis(style, "x", xColumn), ...tickValues ? { tickValues } : {} },
       axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
       useMesh: true,
       theme: buildNivoTheme(style)
     }
   ) });
 }
+function SparklineView({ data, height = 56, color = "#3987e5" }) {
+  const gradientId = useId();
+  const width = 260;
+  const pts = data && data.length ? data : [0];
+  const max = Math.max(...pts, 1);
+  const dx = pts.length > 1 ? width / (pts.length - 1) : width;
+  const xy = (v, i) => [i * dx, height - v / max * (height - 4) - 2];
+  const line = pts.map((v, i) => `${i === 0 ? "M" : "L"} ${xy(v, i)[0].toFixed(1)} ${xy(v, i)[1].toFixed(1)}`).join(" ");
+  const area = `${line} L ${width} ${height} L 0 ${height} Z`;
+  return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${width} ${height}`, height, className: "w-full", preserveAspectRatio: "none", children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.25" }),
+      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+    ] }) }),
+    /* @__PURE__ */ jsx("path", { d: area, fill: `url(#${gradientId})` }),
+    /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke: color, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })
+  ] });
+}
 function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
   const computed = useMemo(() => {
     if (presetData || !records) return [];
@@ -538,14 +702,20 @@ function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
     return [{ id: `${xColumn} vs ${yColumn}`, data: points }];
   }, [records, xColumn, yColumn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const s = withStyleDefaults(style);
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 20, bottom: 60, left: 60 });
+  const colorById = new Map(data.map((serie, i) => [
+    serie.id,
+    s.seriesColors.length || data.length > 1 ? seriesColor(i, s) : "rgba(167, 139, 250, 0.7)"
+  ]));
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveScatterPlot,
     {
       data,
-      margin: { top: 20, right: 20, bottom: 60, left: 60 },
+      margin,
       xScale: { type: "linear", min: "auto", max: "auto" },
       yScale: { type: "linear", min: "auto", max: "auto" },
-      colors: ["rgba(167, 139, 250, 0.7)"],
+      colors: ((serie) => colorById.get(serie.serieId ?? serie.id ?? "")),
       nodeSize: 6,
       axisBottom: makeAxis(style, "x", xColumn, { numeric: true }),
       axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
@@ -641,8 +811,8 @@ function HeatmapView({
   if (!data.length || !data[0].data.length) {
     return /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-midnight-text-muted", children: "Not enough distinct values for a heatmap" });
   }
-  const margin = showTotals ? { top: 60, right: 70, bottom: 60, left: 100 } : { top: 60, right: 20, bottom: 20, left: 100 };
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const { frameClass, frameStyle, margin } = chartSizing(style, showTotals ? { top: 60, right: 70, bottom: 60, left: 100 } : { top: 60, right: 20, bottom: 20, left: 100 });
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveHeatMap,
     {
       data,
@@ -661,6 +831,160 @@ function HeatmapView({
     }
   ) });
 }
+var MAX_AXIS2 = 30;
+var TOTAL_ID = "\u03A3";
+var NULL = "(null)";
+var fmtNum2 = (n) => {
+  if (typeof n !== "number" || Number.isNaN(n)) return "";
+  return Number.isInteger(n) ? n.toLocaleString() : n.toLocaleString(void 0, { maximumFractionDigits: 2 });
+};
+var orderIds2 = (ids, margin, order) => {
+  const sorted = [...ids];
+  if (order.endsWith("-desc")) sorted.sort((a, b) => (margin[b]?.lv ?? 0) - (margin[a]?.lv ?? 0));
+  else if (order.endsWith("-asc")) sorted.sort((a, b) => (margin[a]?.lv ?? 0) - (margin[b]?.lv ?? 0));
+  else sorted.sort();
+  return sorted;
+};
+function fromRecords(records, rowCol, colCol, valueCol, labelStat, colorStat, blockField) {
+  const col = valueCol || rowCol;
+  const statOf = (rs, s) => valueCol ? aggregate(rs, col, s) : rs.length;
+  const both = (rs) => ({ lv: statOf(rs, labelStat), cv: statOf(rs, colorStat) });
+  const byRow = groupBy(records, rowCol);
+  const rowIds = Object.keys(byRow);
+  const colIds = [...new Set(records.map((r) => String(r[colCol] ?? NULL)))];
+  const cells = {};
+  for (const rid of rowIds) {
+    cells[rid] = {};
+    const byCol2 = groupBy(byRow[rid], colCol);
+    for (const cid of colIds) {
+      const cellRows = byCol2[cid] || [];
+      const stat = both(cellRows);
+      if (blockField && cellRows.length) stat.block = String(cellRows[0][blockField] ?? NULL);
+      cells[rid][cid] = stat;
+    }
+  }
+  const rowMargin = {};
+  for (const rid of rowIds) rowMargin[rid] = both(byRow[rid]);
+  const colMargin = {};
+  const byCol = groupBy(records, colCol);
+  for (const cid of colIds) colMargin[cid] = both(byCol[cid] || []);
+  return { rowIds, colIds, cells, rowMargin, colMargin, grand: both(records) };
+}
+function fromData(data) {
+  const cells = {};
+  const rowMargin = {};
+  const colMargin = {};
+  let grand = { lv: 0, cv: 0 };
+  const rowIds = [];
+  const colIds = [];
+  for (const d of data) {
+    const stat = { lv: d.lv, cv: d.cv, ...d.block != null ? { block: d.block } : {} };
+    if (d.gr && d.gc) {
+      grand = stat;
+      continue;
+    }
+    if (d.gr) {
+      if (d.c != null) colMargin[d.c] = stat;
+      continue;
+    }
+    if (d.gc) {
+      if (d.r != null) rowMargin[d.r] = stat;
+      continue;
+    }
+    const r = d.r ?? NULL, c = d.c ?? NULL;
+    if (!cells[r]) {
+      cells[r] = {};
+      rowIds.push(r);
+    }
+    if (!colIds.includes(c)) colIds.push(c);
+    cells[r][c] = stat;
+  }
+  return { rowIds, colIds, cells, rowMargin, colMargin, grand };
+}
+function HeatmapPlusView({
+  records,
+  rowColumn,
+  colColumn,
+  valueColumn,
+  labelStat = "count",
+  colorStat = "count",
+  blockField,
+  data: presetData,
+  scope = "global",
+  method = "linear",
+  vmin,
+  vmax,
+  rowOrder = "alpha",
+  colOrder = "alpha",
+  showMargins = false,
+  style
+}) {
+  const s = withStyleDefaults(style);
+  const model = useMemo(() => {
+    if (presetData) return fromData(presetData);
+    if (records) return fromRecords(records, rowColumn, colColumn, valueColumn, labelStat, colorStat, blockField);
+    return null;
+  }, [presetData, records, rowColumn, colColumn, valueColumn, labelStat, colorStat, blockField]);
+  const built = useMemo(() => {
+    if (!model || !model.rowIds.length || !model.colIds.length) return null;
+    const { cells, rowMargin, colMargin, grand } = model;
+    const rows = orderIds2(model.rowIds, rowMargin, rowOrder).slice(0, MAX_AXIS2);
+    const cols = orderIds2(model.colIds, colMargin, colOrder).slice(0, MAX_AXIS2);
+    const bodyCells = [];
+    for (const rid of rows) for (const cid of cols) {
+      bodyCells.push({ row: rid, col: cid, colorValue: cells[rid]?.[cid]?.cv ?? NaN, block: cells[rid]?.[cid]?.block });
+    }
+    const t2 = new Map(normalizeCells(bodyCells, { scope, method, vmin, vmax }));
+    if (showMargins) {
+      const rowMc = rows.map((rid) => ({ row: rid, col: TOTAL_ID, colorValue: rowMargin[rid]?.cv ?? NaN }));
+      const colMc = cols.map((cid) => ({ row: TOTAL_ID, col: cid, colorValue: colMargin[cid]?.cv ?? NaN }));
+      for (const [k, v] of normalizeCells(rowMc, { scope: "global", method })) t2.set(k, v);
+      for (const [k, v] of normalizeCells(colMc, { scope: "global", method })) t2.set(k, v);
+      t2.set(cellKey(TOTAL_ID, TOTAL_ID), 0.5);
+    }
+    const colKeys = showMargins ? [...cols, TOTAL_ID] : cols;
+    const nivoData2 = rows.map((rid) => ({
+      id: rid,
+      data: colKeys.map((cid) => ({
+        x: cid,
+        y: cid === TOTAL_ID ? rowMargin[rid]?.lv ?? 0 : cells[rid]?.[cid]?.lv ?? 0
+      }))
+    }));
+    if (showMargins) {
+      nivoData2.push({
+        id: TOTAL_ID,
+        data: colKeys.map((cid) => ({
+          x: cid,
+          y: cid === TOTAL_ID ? grand.lv : colMargin[cid]?.lv ?? 0
+        }))
+      });
+    }
+    return { nivoData: nivoData2, t: t2 };
+  }, [model, rowOrder, colOrder, scope, method, vmin, vmax, showMargins]);
+  if (!built) {
+    return /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-midnight-text-muted", children: "Not enough distinct values for a heatmap" });
+  }
+  const { nivoData, t } = built;
+  const tAt = (serieId, x) => t.get(cellKey(serieId, x)) ?? 0;
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 60, right: 20, bottom: showMargins ? 60 : 20, left: 100 });
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
+    ResponsiveHeatMap,
+    {
+      data: nivoData,
+      margin,
+      valueFormat: ((v) => fmtNum2(v)),
+      axisTop: { tickSize: 5, tickPadding: 5, tickRotation: s.xTickRotation, legend: s.showXLegend ? s.xAxisLabel || colColumn : "", legendPosition: s.xLegendPosition, legendOffset: -50 },
+      axisLeft: { tickSize: 5, tickPadding: 5, legend: s.showYLegend ? s.yAxisLabel || rowColumn : "", legendPosition: s.yLegendPosition, legendOffset: -80 },
+      colors: ((cell) => heatColor(tAt(cell.serieId, cell.data.x))),
+      emptyColor: "#1e293b",
+      borderWidth: 1,
+      borderColor: "#334155",
+      labelTextColor: ((cell) => heatLabelColor(tAt(cell.serieId, cell.data.x))),
+      hoverTarget: "cell",
+      theme: buildNivoTheme(style)
+    }
+  ) });
+}
 function PivotView({ records }) {
   const [pivotState, setPivotState] = useState({});
   if (!records?.length) {
@@ -1197,6 +1521,7 @@ var CHART_TYPES = [
   { id: "line", icon: TrendingUp, label: "Line" },
   { id: "scatter", icon: ScatterChart, label: "Scatter" },
   { id: "heatmap", icon: LayoutGrid, label: "Heatmap" },
+  { id: "heatmap-plus", icon: Grid3x3, label: "Heatmap+" },
   { id: "grouped-bar", icon: BarChart3, label: "Grouped Bar" }
 ];
 var AGG_OPTIONS = ["count", "distinct", "sum", "avg", "min", "max"];
@@ -1217,6 +1542,17 @@ var ORDER_OPTIONS = [
   { id: "total-asc", label: "Total \u2191" }
 ];
 var MARGIN_AGGS = ["sum", "avg", "min", "max", "count"].map((a) => ({ id: a, label: a }));
+var HEAT_STAT_OPTIONS = HEAT_STATS.map((a) => ({ id: a, label: a }));
+var SCOPE_OPTIONS = [
+  { id: "global", label: "Global" },
+  { id: "row", label: "Per row" },
+  { id: "column", label: "Per column" },
+  { id: "block", label: "Per block" }
+];
+var METHOD_OPTIONS = [
+  { id: "linear", label: "Linear" },
+  { id: "rank", label: "Rank" }
+];
 var FILTER_OP_OPTIONS = FILTER_OPS.map((o) => ({ id: o, label: o }));
 var FieldPill = ({ name, type, onRemove, onChangeAgg, agg, showAgg }) => {
   const typeColor = {
@@ -1405,6 +1741,7 @@ var ChartPreview = ({
   sqlLoading,
   sqlError,
   heatmapOpts = {},
+  heatPlusOpts = {},
   style
 }) => {
   const xCol = xFields[0]?.name;
@@ -1443,6 +1780,8 @@ var ChartPreview = ({
         return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(ScatterView, { data: shaped, xColumn: xCol, yColumn: yCol, style }) });
       case "heatmap":
         return shaped.length ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(HeatmapView, { data: shaped, rowColumn: xCol, colColumn: yCol, ...heatmapOpts, style }) }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "No data" });
+      case "heatmap-plus":
+        return shaped.length ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(HeatmapPlusView, { data: shaped, rowColumn: xCol, colColumn: yCol, ...heatPlusOpts, style }) }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "No data" });
       default:
         return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "Select a chart type" });
     }
@@ -1464,6 +1803,8 @@ var ChartPreview = ({
       return xCol && yCol ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(ScatterView, { records, xColumn: xCol, yColumn: yCol, style }) }) : null;
     case "heatmap":
       return xCol && yCol ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(HeatmapView, { records, rowColumn: xCol, colColumn: yCol, valueColumn: valueField?.name, aggFn: valueField?.agg || "count", ...heatmapOpts, style }) }) : null;
+    case "heatmap-plus":
+      return xCol && yCol ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(HeatmapPlusView, { records, rowColumn: xCol, colColumn: yCol, valueColumn: valueField?.name, ...heatPlusOpts, style }) }) : null;
     default:
       return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-sm text-midnight-text-muted", children: "Select a chart type" });
   }
@@ -1487,6 +1828,13 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
   const [colOrder, setColOrder] = useState("alpha");
   const [marginAgg, setMarginAgg] = useState("sum");
   const [showTotals, setShowTotals] = useState(false);
+  const [labelStat, setLabelStat] = useState("count");
+  const [colorStat, setColorStat] = useState("count");
+  const [scope, setScope] = useState("global");
+  const [method, setMethod] = useState("linear");
+  const [vmin, setVmin] = useState("");
+  const [vmax, setVmax] = useState("");
+  const [showMargins, setShowMargins] = useState(false);
   const [style, setStyle] = useState(DEFAULT_CHART_STYLE);
   const [showStyle, setShowStyle] = useState(false);
   const [showFields, setShowFields] = useState(false);
@@ -1495,8 +1843,17 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
   const [sqlLoading, setSqlLoading] = useState(false);
   const [sqlError, setSqlError] = useState(null);
   const generatedSql = useMemo(
-    () => buildChartSQL({ chartType, xFields, yFields, valueField, filters }),
-    [chartType, xFields, yFields, valueField, filters]
+    () => buildChartSQL({
+      chartType,
+      xFields,
+      yFields,
+      valueField,
+      filters,
+      labelStat,
+      colorStat,
+      blockField: colorField?.name
+    }),
+    [chartType, xFields, yFields, valueField, filters, labelStat, colorStat, colorField]
   );
   useEffect(() => {
     if (engineMode !== "sql") return void 0;
@@ -1594,6 +1951,26 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
       config.marginAgg = marginAgg;
       config.showTotals = showTotals;
     }
+    if (chartType === "heatmap-plus") {
+      config.row = xFields[0]?.name;
+      config.col = yFields[0]?.name;
+      if (valueField) config.value = valueField.name;
+      else delete config.value;
+      config.labelStat = labelStat;
+      config.colorStat = colorStat;
+      if (colorField) config.blockField = colorField.name;
+      else delete config.blockField;
+      config.scope = scope;
+      config.method = method;
+      const nMin = parseFloat(vmin), nMax = parseFloat(vmax);
+      if (Number.isFinite(nMin)) config.vmin = nMin;
+      else delete config.vmin;
+      if (Number.isFinite(nMax)) config.vmax = nMax;
+      else delete config.vmax;
+      config.rowOrder = rowOrder;
+      config.colOrder = colOrder;
+      config.showMargins = showMargins;
+    }
     if (engineMode === "sql" && generatedSql) {
       config.sql = generatedSql;
       config.chartType = chartType;
@@ -1614,6 +1991,7 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
       height: fillContainer ? 8 : 2
     });
   };
+  const isHeat = chartType === "heatmap" || chartType === "heatmap-plus";
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
     /* @__PURE__ */ jsxs("div", { className: `w-[280px] shrink-0 border-r ${theme.border} bg-midnight-elevated overflow-y-auto p-3 space-y-4`, children: [
       /* @__PURE__ */ jsxs("div", { children: [
@@ -1649,30 +2027,30 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
       /* @__PURE__ */ jsx(
         DropZone,
         {
-          label: chartType === "heatmap" ? "Rows" : "X Axis / Group By",
+          label: isHeat ? "Rows" : "X Axis / Group By",
           fields: xFields,
           columns,
           onAdd: (f) => addField("x", f),
           onRemove: (i) => removeField("x", i),
           onChangeAgg: () => {
           },
-          maxFields: chartType === "pie" || chartType === "heatmap" ? 1 : 3
+          maxFields: chartType === "pie" || isHeat ? 1 : 3
         }
       ),
       /* @__PURE__ */ jsx(
         DropZone,
         {
-          label: chartType === "heatmap" ? "Columns" : "Y Axis / Values",
+          label: isHeat ? "Columns" : "Y Axis / Values",
           fields: yFields,
           columns,
           onAdd: (f) => addField("y", f),
           onRemove: (i) => removeField("y", i),
           onChangeAgg: (i, agg) => changeAgg("y", i, agg),
-          showAgg: chartType !== "heatmap",
-          maxFields: chartType === "heatmap" ? 1 : 5
+          showAgg: !isHeat,
+          maxFields: isHeat ? 1 : 5
         }
       ),
-      chartType === "heatmap" && /* @__PURE__ */ jsx(
+      isHeat && /* @__PURE__ */ jsx(
         DropZone,
         {
           label: "Cell Value (optional \u2014 defaults to count)",
@@ -1681,10 +2059,93 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
           onAdd: (f) => addField("value", f),
           onRemove: () => removeField("value"),
           onChangeAgg: (i, agg) => changeAgg("value", i, agg),
-          showAgg: true,
+          showAgg: chartType === "heatmap",
           maxFields: 1
         }
       ),
+      chartType === "heatmap-plus" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          DropZone,
+          {
+            label: "Block (optional \u2014 color-scope grouping)",
+            fields: colorField ? [colorField] : [],
+            columns,
+            onAdd: (f) => addField("color", f),
+            onRemove: () => removeField("color"),
+            onChangeAgg: () => {
+            },
+            maxFields: 1
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Cell Stats" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Label stat" }),
+              /* @__PURE__ */ jsx(SelectControl, { value: labelStat, options: HEAT_STAT_OPTIONS, onChange: (v) => setLabelStat(v) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Color stat" }),
+              /* @__PURE__ */ jsx(SelectControl, { value: colorStat, options: HEAT_STAT_OPTIONS, onChange: (v) => setColorStat(v) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Color Engine" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Scale scope" }),
+              /* @__PURE__ */ jsx(SelectControl, { value: scope, options: SCOPE_OPTIONS, onChange: (v) => setScope(v) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Scale method" }),
+              /* @__PURE__ */ jsx(SelectControl, { value: method, options: METHOD_OPTIONS, onChange: (v) => setMethod(v) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Fixed min / max" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    value: vmin,
+                    onChange: (e) => setVmin(e.target.value),
+                    placeholder: "auto",
+                    inputMode: "decimal",
+                    className: "w-14 px-2 py-1 text-xs font-mono bg-midnight-surface border border-midnight-border text-midnight-text-body outline-none focus:border-midnight-accent"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    value: vmax,
+                    onChange: (e) => setVmax(e.target.value),
+                    placeholder: "auto",
+                    inputMode: "decimal",
+                    className: "w-14 px-2 py-1 text-xs font-mono bg-midnight-surface border border-midnight-border text-midnight-text-body outline-none focus:border-midnight-accent"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Order & Margins" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Order rows" }),
+              /* @__PURE__ */ jsx(SelectControl, { value: rowOrder, options: ORDER_OPTIONS, onChange: (v) => setRowOrder(v) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 min-h-[28px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Order columns" }),
+              /* @__PURE__ */ jsx(SelectControl, { value: colOrder, options: ORDER_OPTIONS, onChange: (v) => setColOrder(v) })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+              /* @__PURE__ */ jsx("input", { type: "checkbox", checked: showMargins, onChange: (e) => setShowMargins(e.target.checked), className: "accent-midnight-accent" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-midnight-text-muted", children: "Show margins (row / col / grand)" })
+            ] })
+          ] })
+        ] })
+      ] }),
       chartType === "heatmap" && /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("div", { className: "text-xs uppercase text-midnight-text-muted mb-2 font-mono", children: "Order & Totals" }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
@@ -1818,6 +2279,18 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
         sqlLoading,
         sqlError,
         heatmapOpts: { rowOrder, colOrder, marginAgg, showTotals },
+        heatPlusOpts: {
+          labelStat,
+          colorStat,
+          blockField: colorField?.name,
+          scope,
+          method,
+          vmin: Number.isFinite(parseFloat(vmin)) ? parseFloat(vmin) : void 0,
+          vmax: Number.isFinite(parseFloat(vmax)) ? parseFloat(vmax) : void 0,
+          rowOrder,
+          colOrder,
+          showMargins
+        },
         style
       }
     ) })
@@ -1826,7 +2299,7 @@ function ChartBuilder({ records, columns, stateId, onSave }) {
 function ViewLoading() {
   return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "Loading..." });
 }
-var SQL_CHART_TYPES = /* @__PURE__ */ new Set(["bar", "grouped-bar", "pie", "line", "scatter", "heatmap"]);
+var SQL_CHART_TYPES = /* @__PURE__ */ new Set(["bar", "grouped-bar", "pie", "line", "scatter", "heatmap", "heatmap-plus"]);
 var SQL_DATA_TYPES = /* @__PURE__ */ new Set(["table", "metric"]);
 var TABLE_PREVIEW_ROWS = 200;
 function tableSql(config) {
@@ -1857,6 +2330,14 @@ function panelToChartConfig(chartType, config) {
       if (config.col) cfg.yFields = [{ name: config.col }];
       if (config.value) cfg.valueField = { name: config.value, agg: config.agg };
       break;
+    case "heatmap-plus":
+      if (config.row) cfg.xFields = [{ name: config.row }];
+      if (config.col) cfg.yFields = [{ name: config.col }];
+      if (config.value) cfg.valueField = { name: config.value, agg: config.labelStat };
+      cfg.labelStat = config.labelStat;
+      cfg.colorStat = config.colorStat;
+      cfg.blockField = config.blockField;
+      break;
   }
   return cfg;
 }
@@ -2005,6 +2486,9 @@ function SqlPanel({ panel }) {
       case "heatmap":
         chart = shaped.length ? /* @__PURE__ */ jsx(HeatmapView, { data: shaped, rowColumn: config.row || "", colColumn: config.col || "", rowOrder: config.rowOrder, colOrder: config.colOrder, marginAgg: config.marginAgg, showTotals: config.showTotals, style: config.style }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "No data" });
         break;
+      case "heatmap-plus":
+        chart = shaped.length ? /* @__PURE__ */ jsx(HeatmapPlusView, { data: shaped, rowColumn: config.row || "", colColumn: config.col || "", scope: config.scope, method: config.method, vmin: config.vmin, vmax: config.vmax, rowOrder: config.rowOrder, colOrder: config.colOrder, showMargins: config.showMargins, style: config.style }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-xs text-midnight-text-muted", children: "No data" });
+        break;
       default:
         chart = /* @__PURE__ */ jsxs("div", { className: "p-4 text-xs text-midnight-text-muted", children: [
           "Unsupported SQL chart: ",
@@ -2038,6 +2522,8 @@ function PanelContent({ panel, records, columns }) {
       return config.x && config.y ? /* @__PURE__ */ jsx(ScatterView, { records, xColumn: config.x, yColumn: config.y, style: config.style }) : null;
     case "heatmap":
       return config.row && config.col ? /* @__PURE__ */ jsx(HeatmapView, { records, rowColumn: config.row, colColumn: config.col, valueColumn: config.value, aggFn: config.agg || "count", rowOrder: config.rowOrder, colOrder: config.colOrder, marginAgg: config.marginAgg, showTotals: config.showTotals, style: config.style }) : null;
+    case "heatmap-plus":
+      return config.row && config.col ? /* @__PURE__ */ jsx(HeatmapPlusView, { records, rowColumn: config.row, colColumn: config.col, valueColumn: config.value, labelStat: config.labelStat, colorStat: config.colorStat, blockField: config.blockField, scope: config.scope, method: config.method, vmin: config.vmin, vmax: config.vmax, rowOrder: config.rowOrder, colOrder: config.colOrder, showMargins: config.showMargins, style: config.style }) : null;
     case "pivot":
       return /* @__PURE__ */ jsx(PivotView, { records });
     case "metric":
@@ -2497,6 +2983,6 @@ function DataExplorer({
   ] });
 }
 
-export { BarView, ChartBuilder, ChartStyleControls, DEFAULT_CHART_STYLE, DashboardProvider, DashboardRenderer, DataExplorer, HeatmapView, InsightView, LEGEND_ANCHORS, LineView, MetricView, PanelChart, PieView, PivotView, ScatterView, SqlConsole, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, legendConfig, qIdent, qLit, shapeChartData, useCapabilities, useDashboard, withStyleDefaults };
+export { BarView, ChartBuilder, ChartStyleControls, DEFAULT_CHART_STYLE, DEFAULT_SERIES_COLORS, DashboardProvider, DashboardRenderer, DataExplorer, HEAT_STATS, HeatmapPlusView, HeatmapView, InsightView, LEGEND_ANCHORS, LineView, MetricView, PanelChart, PieView, PivotView, SERIES_OVERFLOW_COLOR, ScatterView, SparklineView, SqlConsole, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, chartSizing, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map