drizzle-cube 0.5.8 → 0.6.0

package/dist/client/chunks/chart-heat-map-DTuUl0BR.js

@@ -0,0 +1,236 @@
+import { n as e } from "./rolldown-runtime-CWhphoD1.js";
+import { D as t, E as n, P as r, w as i } from "./chart-activity-grid-DX0SJbxs.js";
+import { x as a } from "./chart-area-of01_62R.js";
+import o, { useMemo as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ResponsiveHeatMap as d } from "@nivo/heatmap";
+function f(e) {
+	if (e.startsWith("#")) {
+		let t = e.slice(1);
+		return {
+			r: parseInt(t.substring(0, 2), 16),
+			g: parseInt(t.substring(2, 4), 16),
+			b: parseInt(t.substring(4, 6), 16)
+		};
+	}
+	let t = e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+	return t ? {
+		r: parseInt(t[1], 10),
+		g: parseInt(t[2], 10),
+		b: parseInt(t[3], 10)
+	} : null;
+}
+function p(e) {
+	let t = f(e);
+	if (!t) return .5;
+	let n = t.r / 255, r = t.g / 255, i = t.b / 255, a = n <= .03928 ? n / 12.92 : ((n + .055) / 1.055) ** 2.4, o = r <= .03928 ? r / 12.92 : ((r + .055) / 1.055) ** 2.4, s = i <= .03928 ? i / 12.92 : ((i + .055) / 1.055) ** 2.4;
+	return .2126 * a + .7152 * o + .0722 * s;
+}
+function m(e) {
+	return p(e) < .4 ? "#ffffff" : "#1f2937";
+}
+function h(e, t, r, i, a, o) {
+	if (!t || !r || !i) return {
+		data: [],
+		truncated: !1,
+		originalRows: 0,
+		originalCols: 0
+	};
+	let s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map();
+	for (let u of e) {
+		let e = u[r], d = u[t], f = n(e, o) || String(e ?? "(empty)"), p = n(d, a) || String(d ?? "(empty)"), m = Number(u[i]) || 0;
+		c.add(p), l.has(p) || l.set(p, d), s.has(f) || s.set(f, /* @__PURE__ */ new Map()), s.get(f).set(p, m);
+	}
+	let u = Array.from(c).sort((e, t) => {
+		let n = l.get(e), r = l.get(t);
+		return typeof n == "string" && typeof r == "string" && n.match(/^\d{4}-\d{2}-\d{2}/) && r.match(/^\d{4}-\d{2}-\d{2}/) ? n.localeCompare(r) : e.localeCompare(t);
+	}), d = s.size, f = u.length, p = d > 50 || f > 50, m = u.slice(0, 50), h = [], g = 0;
+	for (let [e, t] of s) {
+		if (g >= 50) break;
+		h.push({
+			id: e,
+			data: m.map((e) => ({
+				x: e,
+				y: t.get(e) ?? null
+			}))
+		}), g++;
+	}
+	return {
+		data: h,
+		truncated: p,
+		originalRows: d,
+		originalCols: f
+	};
+}
+function g(e) {
+	if (e) return Array.isArray(e) ? e[0] : e;
+}
+function _(e) {
+	let t = e;
+	return {
+		showLabels: t?.showLabels ?? !1,
+		cellShape: t?.cellShape ?? "rect",
+		showLegend: t?.showLegend ?? !0,
+		xAxisFormat: t?.xAxisFormat,
+		yAxisFormat: t?.yAxisFormat,
+		valueFormat: t?.valueFormat
+	};
+}
+function v(e) {
+	if (e) return (t) => {
+		let n = parseFloat(String(t));
+		return isNaN(n) ? String(t) : i(n, e);
+	};
+}
+function y(e) {
+	return e ? (t) => i(t, e) : ">-.2s";
+}
+function b(e) {
+	return e.length >= 2 ? {
+		type: "sequential",
+		colors: [e[0], e[e.length - 1]]
+	} : {
+		type: "sequential",
+		scheme: "greens"
+	};
+}
+var x = [
+	"#eff3ff",
+	"#c6dbef",
+	"#9ecae1",
+	"#6baed6",
+	"#3182bd",
+	"#08519c"
+], S = {
+	text: { fill: "var(--dc-text)" },
+	axis: {
+		legend: { text: { fill: "var(--dc-text)" } },
+		ticks: { text: { fill: "var(--dc-text-secondary)" } }
+	},
+	legends: {
+		text: { fill: "var(--dc-text-secondary)" },
+		title: { text: { fill: "var(--dc-text)" } }
+	},
+	tooltip: { container: {
+		background: "var(--dc-surface)",
+		color: "var(--dc-text)",
+		borderRadius: "4px",
+		boxShadow: "0 1px 2px rgba(0, 0, 0, 0.25)"
+	} }
+};
+function C({ data: e, truncated: t, colors: n, options: r, xAxisField: i, yAxisField: a, valueField: o }) {
+	let { showLabels: s, cellShape: c, showLegend: u, xAxisFormat: f, yAxisFormat: p, valueFormat: h } = r;
+	return /* @__PURE__ */ l(d, {
+		data: e,
+		margin: {
+			top: t ? 40 : 20,
+			right: 20,
+			bottom: 120,
+			left: 120
+		},
+		valueFormat: y(h),
+		axisTop: null,
+		axisRight: null,
+		axisBottom: {
+			tickSize: 5,
+			tickPadding: 5,
+			tickRotation: -45,
+			legend: f?.label || i?.split(".").pop() || "X Axis",
+			legendPosition: "middle",
+			legendOffset: 70,
+			format: v(f)
+		},
+		axisLeft: {
+			tickSize: 5,
+			tickPadding: 5,
+			tickRotation: 0,
+			legend: p?.label || a?.split(".").pop() || "Y Axis",
+			legendPosition: "middle",
+			legendOffset: -80,
+			format: v(p)
+		},
+		colors: b(n),
+		emptyColor: "var(--dc-surface-tertiary)",
+		cellComponent: c === "circle" ? "circle" : "rect",
+		enableLabels: s,
+		labelTextColor: ({ color: e }) => m(e),
+		legends: u ? [{
+			anchor: "bottom",
+			translateX: 0,
+			translateY: 95,
+			length: 400,
+			thickness: 8,
+			direction: "row",
+			tickPosition: "after",
+			tickSize: 3,
+			tickSpacing: 4,
+			tickOverlap: !1,
+			title: o?.split(".").pop() || "Value",
+			titleAlign: "start",
+			titleOffset: 4
+		}] : [],
+		annotations: [],
+		theme: S
+	});
+}
+//#endregion
+//#region src/client/components/charts/HeatMapChart.tsx
+var w = /* @__PURE__ */ e({ default: () => T }), T = o.memo(function({ data: e, height: n = "100%", chartConfig: i, colorPalette: o, displayConfig: d, queryObject: f }) {
+	let { t: p } = r(), m = _(d), v = g(i?.xAxis), y = g(i?.yAxis), b = g(i?.valueField), S = v ? t(f, v) : void 0, w = y ? t(f, y) : void 0, { data: T, truncated: E, originalRows: D, originalCols: O } = s(() => !e || e.length === 0 ? {
+		data: [],
+		truncated: !1,
+		originalRows: 0,
+		originalCols: 0
+	} : h(e, v, y, b, S, w), [
+		e,
+		v,
+		y,
+		b,
+		S,
+		w
+	]);
+	if (!e || e.length === 0) return /* @__PURE__ */ l(a, {
+		height: n,
+		hint: p("chart.runtime.noDataHint.heatmap")
+	});
+	if (!v || !y || !b) return /* @__PURE__ */ l(a, {
+		height: n,
+		titleKey: "chart.runtime.heatmapConfigRequired",
+		hint: /* @__PURE__ */ u(c, { children: [
+			!v && p("chart.runtime.heatmapXRequired"),
+			!y && p("chart.runtime.heatmapYRequired"),
+			!b && p("chart.runtime.heatmapValueRequired")
+		] })
+	});
+	if (T.length === 0) return /* @__PURE__ */ l(a, {
+		height: n,
+		titleKey: "chart.runtime.noDataToDisplay",
+		hint: p("chart.runtime.heatmapNoResults")
+	});
+	let k = o?.gradient || x;
+	return /* @__PURE__ */ u("div", {
+		className: "dc:relative dc:w-full dc:h-full",
+		style: { height: n },
+		children: [E && /* @__PURE__ */ l("div", {
+			className: "dc:absolute dc:top-0 dc:left-0 dc:right-0 dc:z-10 dc:px-3 dc:py-1.5 dc:text-xs bg-dc-warning-bg text-dc-warning dc:border-b border-dc-border",
+			children: p("chart.runtime.heatmapTruncated", {
+				maxRows: 50,
+				maxCols: 50,
+				originalRows: D,
+				originalCols: O
+			})
+		}), /* @__PURE__ */ l(C, {
+			data: T,
+			truncated: E,
+			colors: k,
+			options: m,
+			xAxisField: v,
+			yAxisField: y,
+			valueField: b
+		})]
+	});
+});
+//#endregion
+export { w as t };
+
+//# sourceMappingURL=chart-heat-map-DTuUl0BR.js.map

package/dist/client/chunks/chart-heat-map-DTuUl0BR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-heat-map-DTuUl0BR.js","names":[],"sources":["../../../src/client/components/charts/HeatMapChart.helpers.ts","../../../src/client/components/charts/HeatMapCanvas.tsx","../../../src/client/components/charts/HeatMapChart.tsx"],"sourcesContent":["/**\n * Co-located helpers for HeatMapChart.\n *\n * Pure colour math, field resolution, data transformation and nivo config\n * builders extracted from the component. No behaviour change.\n */\nimport { formatTimeValue, formatAxisValue } from '../../utils/chartUtils'\nimport type { AxisFormatConfig, ChartDisplayConfig } from '../../types'\n\n/**\n * Maximum dimensions for heatmap to prevent browser lockup. 50x50 = 2500 cells.\n */\nexport const MAX_HEATMAP_ROWS = 50\nexport const MAX_HEATMAP_COLS = 50\n\n/** Parse color string (hex or rgb) to RGB values. */\nexport function parseColor(color: string): { r: number; g: number; b: number } | null {\n  if (color.startsWith('#')) {\n    const hex = color.slice(1)\n    return {\n      r: parseInt(hex.substring(0, 2), 16),\n      g: parseInt(hex.substring(2, 4), 16),\n      b: parseInt(hex.substring(4, 6), 16),\n    }\n  }\n\n  const rgbMatch = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/)\n  if (rgbMatch) {\n    return {\n      r: parseInt(rgbMatch[1], 10),\n      g: parseInt(rgbMatch[2], 10),\n      b: parseInt(rgbMatch[3], 10),\n    }\n  }\n\n  return null\n}\n\n/** Relative luminance of a color (0 black .. 1 white) per WCAG. */\nexport function getLuminance(color: string): number {\n  const rgb = parseColor(color)\n  if (!rgb) return 0.5 // Default to mid-gray if parsing fails\n\n  const r = rgb.r / 255\n  const g = rgb.g / 255\n  const b = rgb.b / 255\n\n  const rLinear = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)\n  const gLinear = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)\n  const bLinear = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)\n\n  return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear\n}\n\n/** Contrasting text color (white or dark) based on a background color. */\nexport function getContrastingTextColor(bgColor: string): string {\n  const luminance = getLuminance(bgColor)\n  return luminance < 0.4 ? '#ffffff' : '#1f2937'\n}\n\ninterface HeatMapDatum {\n  x: string\n  y: number | null\n}\n\ninterface HeatMapSerie {\n  id: string\n  data: HeatMapDatum[]\n}\n\nexport interface HeatMapTransformResult {\n  data: HeatMapSerie[]\n  truncated: boolean\n  originalRows: number\n  originalCols: number\n}\n\n/**\n * Transform drizzle-cube flat query results to nivo heatmap format.\n *\n * Groups rows by the Y dimension, sorts X chronologically when possible, and\n * truncates to MAX_HEATMAP_ROWS x MAX_HEATMAP_COLS to prevent browser lockup.\n */\nexport function transformToHeatMapFormat(\n  data: Record<string, unknown>[],\n  xAxisField: string | undefined,\n  yAxisField: string | undefined,\n  valueField: string | undefined,\n  xGranularity?: string,\n  yGranularity?: string\n): HeatMapTransformResult {\n  if (!xAxisField || !yAxisField || !valueField) {\n    return { data: [], truncated: false, originalRows: 0, originalCols: 0 }\n  }\n\n  const groupedByY = new Map<string, Map<string, number>>()\n  const allXValues = new Set<string>()\n  const xValueOriginals = new Map<string, unknown>()\n\n  for (const row of data) {\n    const rawYValue = row[yAxisField]\n    const rawXValue = row[xAxisField]\n\n    const yValue = formatTimeValue(rawYValue, yGranularity) || String(rawYValue ?? '(empty)')\n    const xValue = formatTimeValue(rawXValue, xGranularity) || String(rawXValue ?? '(empty)')\n    const value = Number(row[valueField]) || 0\n\n    allXValues.add(xValue)\n    if (!xValueOriginals.has(xValue)) {\n      xValueOriginals.set(xValue, rawXValue)\n    }\n\n    if (!groupedByY.has(yValue)) {\n      groupedByY.set(yValue, new Map())\n    }\n    groupedByY.get(yValue)!.set(xValue, value)\n  }\n\n  const xValueArray = Array.from(allXValues).sort((a, b) => {\n    const origA = xValueOriginals.get(a)\n    const origB = xValueOriginals.get(b)\n    if (typeof origA === 'string' && typeof origB === 'string' &&\n        origA.match(/^\\d{4}-\\d{2}-\\d{2}/) && origB.match(/^\\d{4}-\\d{2}-\\d{2}/)) {\n      return origA.localeCompare(origB)\n    }\n    return a.localeCompare(b)\n  })\n\n  const originalRows = groupedByY.size\n  const originalCols = xValueArray.length\n  const truncated = originalRows > MAX_HEATMAP_ROWS || originalCols > MAX_HEATMAP_COLS\n\n  const limitedXValues = xValueArray.slice(0, MAX_HEATMAP_COLS)\n\n  const result: HeatMapSerie[] = []\n  let rowCount = 0\n  for (const [yValue, xMap] of groupedByY) {\n    if (rowCount >= MAX_HEATMAP_ROWS) break\n    result.push({\n      id: yValue,\n      data: limitedXValues.map((x) => ({ x, y: xMap.get(x) ?? null })),\n    })\n    rowCount++\n  }\n\n  return { data: result, truncated, originalRows, originalCols }\n}\n\n/** Coerce an axis config value (string | array | undefined) to a single field. */\nexport function firstField(value: string | string[] | undefined): string | undefined {\n  if (!value) return undefined\n  return Array.isArray(value) ? value[0] : value\n}\n\nexport interface HeatMapDisplayOptions {\n  showLabels: boolean\n  cellShape: 'rect' | 'circle'\n  showLegend: boolean\n  xAxisFormat?: AxisFormatConfig\n  yAxisFormat?: AxisFormatConfig\n  valueFormat?: AxisFormatConfig\n}\n\n/** Resolve heatmap display options from the (loosely-typed) display config. */\nexport function resolveHeatMapDisplayOptions(\n  displayConfig: ChartDisplayConfig | undefined\n): HeatMapDisplayOptions {\n  const cfg = displayConfig as Record<string, unknown> | undefined\n  return {\n    showLabels: (cfg?.showLabels as boolean) ?? false,\n    cellShape: (cfg?.cellShape as 'rect' | 'circle') ?? 'rect',\n    showLegend: (cfg?.showLegend as boolean) ?? true,\n    xAxisFormat: cfg?.xAxisFormat as AxisFormatConfig | undefined,\n    yAxisFormat: cfg?.yAxisFormat as AxisFormatConfig | undefined,\n    valueFormat: cfg?.valueFormat as AxisFormatConfig | undefined,\n  }\n}\n\n/** Build an axis `format` fn that applies the given axis format config (or none). */\nexport function makeAxisFormatter(\n  format: AxisFormatConfig | undefined\n): ((v: string | number) => string) | undefined {\n  if (!format) return undefined\n  return (v) => {\n    const num = parseFloat(String(v))\n    return isNaN(num) ? String(v) : formatAxisValue(num, format)\n  }\n}\n\n/** Resolve the heatmap value formatter (custom format or nivo default). */\nexport function makeValueFormatter(\n  valueFormat: AxisFormatConfig | undefined\n): ((v: number) => string) | string {\n  return valueFormat ? (v: number) => formatAxisValue(v, valueFormat) : '>-.2s'\n}\n\n/** Sequential colours config for nivo; falls back to a built-in scheme. */\nexport function resolveHeatMapColors(colors: string[]):\n  | { type: 'sequential'; colors: [string, string] }\n  | { type: 'sequential'; scheme: 'greens' } {\n  return colors.length >= 2\n    ? { type: 'sequential', colors: [colors[0], colors[colors.length - 1]] as [string, string] }\n    : { type: 'sequential', scheme: 'greens' }\n}\n\n/** Default sequential blue gradient when no palette gradient is supplied. */\nexport const DEFAULT_HEATMAP_COLORS = [\n  '#eff3ff', // lightest blue\n  '#c6dbef',\n  '#9ecae1',\n  '#6baed6',\n  '#3182bd',\n  '#08519c', // darkest blue\n]\n","import { ResponsiveHeatMap } from '@nivo/heatmap'\nimport {\n  getContrastingTextColor,\n  makeAxisFormatter,\n  makeValueFormatter,\n  resolveHeatMapColors,\n  type HeatMapDisplayOptions\n} from './HeatMapChart.helpers'\n\ninterface HeatMapDatum {\n  x: string\n  y: number | null\n}\ninterface HeatMapSerie {\n  id: string\n  data: HeatMapDatum[]\n}\n\ninterface HeatMapCanvasProps {\n  data: HeatMapSerie[]\n  truncated: boolean\n  colors: string[]\n  options: HeatMapDisplayOptions\n  xAxisField: string\n  yAxisField: string\n  valueField: string\n}\n\nconst NIVO_THEME = {\n  text: { fill: 'var(--dc-text)' },\n  axis: {\n    legend: { text: { fill: 'var(--dc-text)' } },\n    ticks: { text: { fill: 'var(--dc-text-secondary)' } },\n  },\n  legends: {\n    text: { fill: 'var(--dc-text-secondary)' },\n    title: { text: { fill: 'var(--dc-text)' } },\n  },\n  tooltip: {\n    container: {\n      background: 'var(--dc-surface)',\n      color: 'var(--dc-text)',\n      borderRadius: '4px',\n      boxShadow: '0 1px 2px rgba(0, 0, 0, 0.25)',\n    },\n  },\n}\n\n/**\n * The nivo `<ResponsiveHeatMap>` for HeatMapChart, with all axis/legend/colour\n * config resolved from helpers. Extracted so the chart component stays a thin\n * orchestrator. Behaviour matches the original inline JSX.\n */\nexport function HeatMapCanvas({\n  data,\n  truncated,\n  colors,\n  options,\n  xAxisField,\n  yAxisField,\n  valueField,\n}: HeatMapCanvasProps) {\n  const { showLabels, cellShape, showLegend, xAxisFormat, yAxisFormat, valueFormat } = options\n\n  return (\n    <ResponsiveHeatMap\n      data={data}\n      margin={{ top: truncated ? 40 : 20, right: 20, bottom: 120, left: 120 }}\n      valueFormat={makeValueFormatter(valueFormat)}\n      axisTop={null}\n      axisRight={null}\n      axisBottom={{\n        tickSize: 5,\n        tickPadding: 5,\n        tickRotation: -45,\n        legend: xAxisFormat?.label || xAxisField?.split('.').pop() || 'X Axis',\n        legendPosition: 'middle',\n        legendOffset: 70,\n        format: makeAxisFormatter(xAxisFormat),\n      }}\n      axisLeft={{\n        tickSize: 5,\n        tickPadding: 5,\n        tickRotation: 0,\n        legend: yAxisFormat?.label || yAxisField?.split('.').pop() || 'Y Axis',\n        legendPosition: 'middle',\n        legendOffset: -80,\n        format: makeAxisFormatter(yAxisFormat),\n      }}\n      colors={resolveHeatMapColors(colors)}\n      emptyColor=\"var(--dc-surface-tertiary)\"\n      cellComponent={cellShape === 'circle' ? 'circle' : 'rect'}\n      enableLabels={showLabels}\n      labelTextColor={({ color }) => getContrastingTextColor(color)}\n      legends={\n        showLegend\n          ? [\n              {\n                anchor: 'bottom',\n                translateX: 0,\n                translateY: 95,\n                length: 400,\n                thickness: 8,\n                direction: 'row',\n                tickPosition: 'after',\n                tickSize: 3,\n                tickSpacing: 4,\n                tickOverlap: false,\n                title: valueField?.split('.').pop() || 'Value',\n                titleAlign: 'start',\n                titleOffset: 4,\n              },\n            ]\n          : []\n      }\n      annotations={[]}\n      theme={NIVO_THEME}\n    />\n  )\n}\n","/**\n * HeatMapChart Component\n *\n * Visualizes intensity across two categorical dimensions using a color matrix.\n * Uses @nivo/heatmap for rendering.\n *\n * The chart displays:\n * - Rows: Y-axis dimension values\n * - Columns: X-axis dimension values\n * - Cell color: Intensity based on measure value\n */\n\nimport React, { useMemo } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { getFieldGranularity } from '../../utils/chartUtils'\nimport { ChartEmptyState } from './ChartStates'\nimport { HeatMapCanvas } from './HeatMapCanvas'\nimport {\n  MAX_HEATMAP_ROWS,\n  MAX_HEATMAP_COLS,\n  transformToHeatMapFormat,\n  firstField,\n  resolveHeatMapDisplayOptions,\n  DEFAULT_HEATMAP_COLORS,\n} from './HeatMapChart.helpers'\nimport type { ChartProps } from '../../types'\n\n/**\n * HeatMapChart Component\n *\n * Renders a heatmap visualization from query results.\n * Shows intensity patterns across two categorical dimensions.\n */\nconst HeatMapChart = React.memo(function HeatMapChart({\n  data,\n  height = '100%',\n  chartConfig,\n  colorPalette,\n  displayConfig,\n  queryObject,\n}: ChartProps) {\n  const { t } = useTranslation()\n  const options = resolveHeatMapDisplayOptions(displayConfig)\n\n  // Extract field names from chartConfig (handle both array and string formats)\n  const xAxisField = firstField(chartConfig?.xAxis)\n  const yAxisField = firstField(chartConfig?.yAxis)\n  const valueField = firstField(chartConfig?.valueField)\n\n  // Get granularity for time dimensions (only if field is defined)\n  const xGranularity = xAxisField ? getFieldGranularity(queryObject, xAxisField) : undefined\n  const yGranularity = yAxisField ? getFieldGranularity(queryObject, yAxisField) : undefined\n\n  // Transform data to nivo format\n  const { data: heatmapData, truncated, originalRows, originalCols } = useMemo(() => {\n    if (!data || data.length === 0) {\n      return { data: [], truncated: false, originalRows: 0, originalCols: 0 }\n    }\n    return transformToHeatMapFormat(\n      data as Record<string, unknown>[],\n      xAxisField,\n      yAxisField,\n      valueField,\n      xGranularity,\n      yGranularity\n    )\n  }, [data, xAxisField, yAxisField, valueField, xGranularity, yGranularity])\n\n  // Handle no data or missing config\n  if (!data || data.length === 0) {\n    return <ChartEmptyState height={height} hint={t('chart.runtime.noDataHint.heatmap')} />\n  }\n\n  if (!xAxisField || !yAxisField || !valueField) {\n    return (\n      <ChartEmptyState\n        height={height}\n        titleKey=\"chart.runtime.heatmapConfigRequired\"\n        hint={\n          <>\n            {!xAxisField && t('chart.runtime.heatmapXRequired')}\n            {!yAxisField && t('chart.runtime.heatmapYRequired')}\n            {!valueField && t('chart.runtime.heatmapValueRequired')}\n          </>\n        }\n      />\n    )\n  }\n\n  if (heatmapData.length === 0) {\n    return (\n      <ChartEmptyState\n        height={height}\n        titleKey=\"chart.runtime.noDataToDisplay\"\n        hint={t('chart.runtime.heatmapNoResults')}\n      />\n    )\n  }\n\n  // Use gradient colors from palette, or default sequential blue gradient.\n  // Sequential single-hue gradients are ideal for heatmaps showing magnitude.\n  const colors = colorPalette?.gradient || DEFAULT_HEATMAP_COLORS\n\n  return (\n    <div className=\"dc:relative dc:w-full dc:h-full\" style={{ height }}>\n      {truncated && (\n        <div className=\"dc:absolute dc:top-0 dc:left-0 dc:right-0 dc:z-10 dc:px-3 dc:py-1.5 dc:text-xs bg-dc-warning-bg text-dc-warning dc:border-b border-dc-border\">\n          {t('chart.runtime.heatmapTruncated', {\n            maxRows: MAX_HEATMAP_ROWS,\n            maxCols: MAX_HEATMAP_COLS,\n            originalRows,\n            originalCols\n          })}\n        </div>\n      )}\n      <HeatMapCanvas\n        data={heatmapData}\n        truncated={truncated}\n        colors={colors}\n        options={options}\n        xAxisField={xAxisField}\n        yAxisField={yAxisField}\n        valueField={valueField}\n      />\n    </div>\n  )\n})\n\nexport default HeatMapChart\n"],"mappings":"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"}

package/dist/client/chunks/chart-kpi-delta-Dn-jjO-2.js

@@ -0,0 +1,408 @@
+import { n as e } from "./rolldown-runtime-CWhphoD1.js";
+import { D as t, O as n } from "./chart-data-table-CKauQXme.js";
+import { P as r, S as i } from "./chart-activity-grid-DX0SJbxs.js";
+import a, { useEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/client/utils/periodUtils.ts
+function d(e, t) {
+	let n = new Date(e);
+	switch (t.toLowerCase()) {
+		case "day":
+			n.setHours(23, 59, 59, 999);
+			break;
+		case "week": {
+			let e = 6 - n.getDay();
+			n.setDate(n.getDate() + e), n.setHours(23, 59, 59, 999);
+			break;
+		}
+		case "month":
+			n.setMonth(n.getMonth() + 1, 0), n.setHours(23, 59, 59, 999);
+			break;
+		case "quarter": {
+			let e = n.getMonth(), t = Math.floor(e / 3) * 3 + 2;
+			n.setMonth(t + 1, 0), n.setHours(23, 59, 59, 999);
+			break;
+		}
+		case "year":
+			n.setMonth(11, 31), n.setHours(23, 59, 59, 999);
+			break;
+		default: n.setHours(23, 59, 59, 999);
+	}
+	return n;
+}
+function f(e, t, n) {
+	if (!e || !t || !n) return !0;
+	let r = e[t];
+	if (!r) return !0;
+	let i = new Date(r);
+	return isNaN(i.getTime()) ? !0 : d(i, n) <= /* @__PURE__ */ new Date();
+}
+function p(e, t) {
+	if (!e?.timeDimensions || e.timeDimensions.length === 0) return null;
+	if (t) {
+		let n = e.timeDimensions.find((e) => e.dimension === t || e.dimension?.includes(t) || t?.includes(e.dimension));
+		if (n?.granularity) return n.granularity;
+	}
+	return e.timeDimensions[0]?.granularity || null;
+}
+function m(e, t, n, r, i = !1) {
+	let a = {
+		filteredData: e,
+		excludedIncompletePeriod: !1,
+		skippedLastPeriod: !1,
+		granularity: null
+	};
+	if (e.length < 2) return a;
+	let o = p(n, t);
+	if (i) return {
+		filteredData: e.slice(0, -1),
+		excludedIncompletePeriod: !1,
+		skippedLastPeriod: !0,
+		granularity: o
+	};
+	if (!r || !t || !n?.timeDimensions || n.timeDimensions.length === 0) return {
+		...a,
+		granularity: o
+	};
+	if (!o) return a;
+	let s = e[e.length - 1];
+	return f(s, t, o) ? {
+		...a,
+		granularity: o
+	} : {
+		filteredData: e.slice(0, -1),
+		excludedIncompletePeriod: !0,
+		skippedLastPeriod: !1,
+		granularity: o
+	};
+}
+//#endregion
+//#region src/client/components/charts/KpiNumber.helpers.ts
+function h(e) {
+	return e ? typeof e == "string" ? [e] : Array.isArray(e) ? e : [] : [];
+}
+function g(e, t) {
+	if (!e || e.length === 0) return [];
+	let n = [...e];
+	return t ? n.sort((e, n) => {
+		let r = e[t], i = n[t];
+		return r < i ? -1 : +(r > i);
+	}) : n;
+}
+function _(e, t) {
+	return !t || e.length === 0 ? [] : e.map((e) => {
+		if (e[t] !== void 0) return e[t];
+		let n = Object.keys(e).filter((t) => typeof e[t] == "number" && !isNaN(e[t]));
+		if (n.length > 0) return e[n[0]];
+	}).filter((e) => e != null && !isNaN(Number(e))).map((e) => Number(e));
+}
+function v(e) {
+	return e.length === 0 ? {
+		avg: 0,
+		min: 0,
+		max: 0
+	} : {
+		avg: e.reduce((e, t) => e + t, 0) / e.length,
+		min: Math.min(...e),
+		max: Math.max(...e)
+	};
+}
+function y(e, t) {
+	if (t.formatValue) return t.formatValue(e);
+	if (e == null) return "—";
+	let n = t.decimals ?? 0, r = t.prefix ?? "", i;
+	return i = Math.abs(e) >= 1e9 ? (e / 1e9).toFixed(n) + "B" : Math.abs(e) >= 1e6 ? (e / 1e6).toFixed(n) + "M" : Math.abs(e) >= 1e3 ? (e / 1e3).toFixed(n) + "K" : e.toFixed(n), r + i;
+}
+function b(e, t) {
+	return e && e.length > 1 ? e : t;
+}
+function x(e, t) {
+	return e !== void 0 && t && e >= 0 && e < t.length ? t[e] : t?.[0] || "#1f2937";
+}
+function S(e, t, n, r) {
+	return e === null ? "#6B7280" : e >= 0 ? r?.[t ?? 1] || "#10B981" : r?.[n ?? 7] || "#EF4444";
+}
+//#endregion
+//#region src/client/components/charts/useKpiDimensions.ts
+function C({ widthDivisor: e, heightDivisor: t, minFontSize: n, maxFontSize: r, measureWidth: i, deps: a }) {
+	let [l, u] = c(32), [d, f] = c(250), p = s(null), m = s(null);
+	return o(() => {
+		let a = () => {
+			if (!p.current) return;
+			let a = p.current.getBoundingClientRect(), o = a.width, s = a.height;
+			if (o <= 0 || s <= 0) return;
+			let c = o / e, l = s / t;
+			u(Math.max(n, Math.min(Math.min(c, l), r))), setTimeout(() => {
+				if (m.current) {
+					let e = m.current.getBoundingClientRect().width;
+					f(i(e, o));
+				}
+			}, 10);
+		}, o = setTimeout(a, 50), s = new ResizeObserver(() => {
+			setTimeout(a, 10);
+		});
+		return p.current && s.observe(p.current), () => {
+			clearTimeout(o), s.disconnect();
+		};
+	}, a), {
+		containerRef: p,
+		valueRef: m,
+		fontSize: l,
+		textWidth: d
+	};
+}
+//#endregion
+//#region src/client/components/charts/KpiStates.tsx
+var w = {
+	muted: {},
+	danger: {
+		backgroundColor: "var(--dc-danger-bg)",
+		color: "var(--dc-danger)",
+		borderColor: "var(--dc-danger-border)"
+	},
+	warning: {
+		backgroundColor: "var(--dc-warning-bg)",
+		color: "var(--dc-warning)",
+		borderColor: "var(--dc-warning-border)"
+	}
+};
+function T(e) {
+	return {
+		height: e === "100%" ? "100%" : e,
+		minHeight: e === "100%" ? "200px" : void 0
+	};
+}
+function E({ height: e, title: t, hint: n, variant: r = "muted", children: i }) {
+	return /* @__PURE__ */ l("div", {
+		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
+		style: {
+			...T(e),
+			...w[r]
+		},
+		children: /* @__PURE__ */ u("div", {
+			className: `dc:text-center${r === "muted" ? " text-dc-text-muted" : ""}`,
+			children: [
+				/* @__PURE__ */ l("div", {
+					className: "dc:text-sm dc:font-semibold dc:mb-1",
+					children: t
+				}),
+				n != null && /* @__PURE__ */ l("div", {
+					className: `dc:text-xs${r === "muted" ? " text-dc-text-secondary" : ""}`,
+					children: n
+				}),
+				i
+			]
+		})
+	});
+}
+//#endregion
+//#region src/client/components/charts/KpiDelta.helpers.ts
+function D(e) {
+	return e ? Array.isArray(e) ? e : [e] : [];
+}
+function O(e, t) {
+	let n = [...e];
+	return t ? n.sort((e, n) => {
+		let r = e[t], i = n[t];
+		return r < i ? -1 : +(r > i);
+	}) : n;
+}
+function k(e, t) {
+	return e.map((e) => e[t]).filter((e) => e != null && !isNaN(Number(e))).map((e) => Number(e));
+}
+function A(e) {
+	let t = e[e.length - 1], n = e[e.length - 2], r = t - n;
+	return {
+		lastValue: t,
+		absoluteChange: r,
+		percentageChange: n === 0 ? 0 : r / Math.abs(n) * 100,
+		isPositiveChange: r >= 0
+	};
+}
+function j(e, t, n) {
+	return e !== void 0 && t && e >= 0 && e < t.length ? t[e] : n;
+}
+//#endregion
+//#region src/client/components/charts/KpiDelta.tsx
+var M = /* @__PURE__ */ e({ default: () => P });
+function N({ values: e, lastValue: t, positiveColor: n, negativeColor: r, formatValue: i, width: a, height: o }) {
+	let s = Math.max(10, Math.floor(a / 10)), c = e.length > s ? e.slice(-s) : e, d = c.map((e) => e - t), f = Math.min(...d, 0), p = Math.max(...d, 0);
+	if (Math.max(Math.abs(f), Math.abs(p)) === 0 || d.length === 0) return /* @__PURE__ */ l("div", {
+		className: "dc:flex dc:items-center dc:justify-center bg-dc-bg-secondary dc:rounded-sm dc:border border-dc-border",
+		style: {
+			width: `${a}px`,
+			height: `${o}px`
+		},
+		children: /* @__PURE__ */ l("span", {
+			className: "dc:text-xs text-dc-text-muted",
+			children: "No variance data"
+		})
+	});
+	let m = a - (c.length - 1) * 2, h = Math.max(4, m / c.length), g = p - f, _ = g > 0 ? p / g * 100 : 50;
+	return /* @__PURE__ */ u("div", {
+		className: "dc:flex dc:items-center dc:space-x-2",
+		children: [/* @__PURE__ */ u("div", {
+			className: "dc:relative",
+			style: {
+				width: `${a}px`,
+				height: `${o}px`
+			},
+			children: [/* @__PURE__ */ l("div", {
+				className: "dc:absolute dc:left-0 dc:right-0",
+				style: {
+					height: "1px",
+					top: `${_}%`,
+					backgroundColor: "var(--dc-border)",
+					zIndex: 1
+				}
+			}), d.map((e, t) => {
+				let a = Math.abs(e) / g, s = Math.max(2, a * (o - 4)), u = e >= 0, d = t === c.length - 1, f = u ? n : r;
+				return /* @__PURE__ */ l("div", {
+					className: "dc:absolute rounded-xs",
+					style: {
+						left: `${t * (h + 2)}px`,
+						width: `${h}px`,
+						height: `${s}px`,
+						backgroundColor: f,
+						opacity: d ? 1 : .6,
+						...u ? { bottom: `${100 - _}%` } : { top: `${_}%` },
+						zIndex: 2
+					},
+					title: `${i(c[t])}: ${e >= 0 ? "+" : ""}${i(e)} vs current`
+				}, t);
+			})]
+		}), /* @__PURE__ */ u("div", {
+			className: "dc:flex dc:flex-col dc:justify-between dc:text-xs text-dc-text-muted",
+			style: { height: `${o}px` },
+			children: [/* @__PURE__ */ u("span", { children: ["+", i(p)] }), /* @__PURE__ */ u("span", { children: ["", i(f)] })]
+		})]
+	});
+}
+var P = a.memo(function({ data: e, chartConfig: a, displayConfig: o = {}, queryObject: s, height: c = "100%", colorPalette: d }) {
+	let { t: f } = r(), p = i(), { containerRef: h, valueRef: g, fontSize: _, textWidth: v } = C({
+		widthDivisor: 4,
+		heightDivisor: 4,
+		minFontSize: 28,
+		maxFontSize: 140,
+		measureWidth: (e, t) => {
+			let n = t - 100, r = Math.max(e, Math.min(n, t * .7));
+			return Math.max(100, r);
+		},
+		deps: [e, a]
+	});
+	if (!e || e.length === 0) return /* @__PURE__ */ l(E, {
+		height: c,
+		title: f("chart.runtime.noData"),
+		hint: "No data points to display"
+	});
+	let x = D(a?.yAxis), S = D(a?.xAxis);
+	if (x.length === 0) return /* @__PURE__ */ l(E, {
+		height: c,
+		variant: "danger",
+		title: f("chart.runtime.configError"),
+		hint: f("chart.runtime.configErrorHint.noMeasure")
+	});
+	let w = x[0], M = S[0], P = O(e, M), { useLastCompletePeriod: F = !0, skipLastPeriod: I = !1 } = o, { filteredData: L, excludedIncompletePeriod: R, skippedLastPeriod: z, granularity: B } = m(P, M, s, F, I), V = k(L, w);
+	if (V.length < 2) return /* @__PURE__ */ l(E, {
+		height: c,
+		variant: "warning",
+		title: f("chart.runtime.kpiDelta.insufficientData"),
+		hint: f("chart.runtime.kpiDelta.requiresTwoPoints"),
+		children: /* @__PURE__ */ l("div", {
+			className: "dc:text-xs",
+			children: f("chart.runtime.kpiDelta.currentPoints", { count: V.length })
+		})
+	});
+	let { lastValue: H, absoluteChange: U, percentageChange: W, isPositiveChange: G } = A(V), K = (e) => y(e, o), q = j(o.positiveColorIndex, d?.colors, "#10b981"), J = j(o.negativeColorIndex, d?.colors, "#ef4444"), Y = G ? q : J;
+	return /* @__PURE__ */ u("div", {
+		ref: h,
+		className: "dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full dc:h-full dc:p-4",
+		style: T(c),
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "text-dc-text-secondary dc:font-bold dc:text-center dc:mb-2 dc:flex dc:items-center dc:justify-center dc:gap-1",
+				style: {
+					fontSize: "14px",
+					lineHeight: "1.2"
+				},
+				children: [/* @__PURE__ */ l("span", { children: b(p(w), w) }), (R || z) && /* @__PURE__ */ l("span", {
+					title: z ? `Excludes last ${B || "period"}` : `Excludes current incomplete ${B}`,
+					className: "dc:cursor-help",
+					children: /* @__PURE__ */ l(n, {
+						icon: t,
+						className: "dc:w-4 dc:h-4 text-dc-text-muted dc:opacity-70"
+					})
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "dc:flex dc:items-center dc:justify-center dc:space-x-4 dc:mb-2",
+				children: [/* @__PURE__ */ l("div", {
+					ref: g,
+					className: "dc:font-bold dc:leading-none",
+					style: {
+						fontSize: `${_}px`,
+						color: "var(--dc-text)"
+					},
+					children: K(H)
+				}), /* @__PURE__ */ u("div", {
+					className: "dc:flex dc:items-center dc:space-x-1",
+					children: [/* @__PURE__ */ l("div", {
+						className: "dc:font-bold",
+						style: {
+							color: Y,
+							fontSize: `${_ * .35}px`
+						},
+						children: G ? "▲" : "▼"
+					}), /* @__PURE__ */ u("div", {
+						className: "dc:text-left",
+						children: [/* @__PURE__ */ u("div", {
+							className: "dc:font-bold dc:leading-tight",
+							style: {
+								fontSize: `${_ * .35}px`,
+								color: Y
+							},
+							children: [G ? "+" : "", K(U)]
+						}), /* @__PURE__ */ u("div", {
+							className: "dc:font-semibold dc:leading-tight",
+							style: {
+								fontSize: `${_ * .28}px`,
+								color: Y,
+								opacity: .8
+							},
+							children: [
+								G ? "+" : "",
+								W.toFixed(1),
+								"%"
+							]
+						})]
+					})]
+				})]
+			}),
+			o.suffix && !o.formatValue && /* @__PURE__ */ l("div", {
+				className: "text-dc-text-muted dc:text-center dc:mb-3",
+				style: {
+					fontSize: "14px",
+					lineHeight: "1.2",
+					opacity: .8
+				},
+				children: o.suffix
+			}),
+			o.showHistogram !== !1 && V.length > 2 && /* @__PURE__ */ l("div", {
+				className: "dc:mt-2 dc:w-full dc:flex dc:justify-center dc:overflow-hidden",
+				children: /* @__PURE__ */ l(N, {
+					values: V,
+					lastValue: H,
+					positiveColor: q,
+					negativeColor: J,
+					formatValue: K,
+					width: v,
+					height: 64
+				})
+			})
+		]
+	});
+});
+//#endregion
+export { v as a, h as c, S as d, g as f, f as g, p as h, C as i, b as l, d as m, E as n, _ as o, m as p, T as r, y as s, M as t, x as u };
+
+//# sourceMappingURL=chart-kpi-delta-Dn-jjO-2.js.map