drizzle-cube 0.4.29 → 0.4.31

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

@@ -0,0 +1,236 @@
+import { n as e } from "./rolldown-runtime-lc2dmIiU.js";
+import { S as t, x as n, y as r } from "./chart-activity-grid-wR2Twpo7.js";
+import i, { useMemo as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { ResponsiveHeatMap as c } from "@nivo/heatmap";
+//#region src/client/components/charts/HeatMapChart.tsx
+var l = /* @__PURE__ */ e({ default: () => g });
+function u(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 d(e) {
+	let t = u(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 f(e) {
+	return d(e) < .4 ? "#ffffff" : "#1f2937";
+}
+var p = 50, m = 50;
+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, h = d > p || f > m, g = u.slice(0, m), _ = [], v = 0;
+	for (let [e, t] of s) {
+		if (v >= p) break;
+		_.push({
+			id: e,
+			data: g.map((e) => ({
+				x: e,
+				y: t.get(e) ?? null
+			}))
+		}), v++;
+	}
+	return {
+		data: _,
+		truncated: h,
+		originalRows: d,
+		originalCols: f
+	};
+}
+var g = i.memo(function({ data: e, height: n = "100%", chartConfig: i, colorPalette: l, displayConfig: u, queryObject: d }) {
+	let g = u, _ = g?.showLabels ?? !1, v = g?.cellShape ?? "rect", y = g?.showLegend ?? !0, b = g?.xAxisFormat, x = g?.yAxisFormat, S = g?.valueFormat, C = i?.xAxis ? Array.isArray(i.xAxis) ? i.xAxis[0] : i.xAxis : void 0, w = i?.yAxis ? Array.isArray(i.yAxis) ? i.yAxis[0] : i.yAxis : void 0, T = i?.valueField ? Array.isArray(i.valueField) ? i.valueField[0] : i.valueField : void 0, E = C ? t(d, C) : void 0, D = w ? t(d, w) : void 0, { data: O, truncated: k, originalRows: A, originalCols: j } = a(() => !e || e.length === 0 ? {
+		data: [],
+		truncated: !1,
+		originalRows: 0,
+		originalCols: 0
+	} : h(e, C, w, T, E, D), [
+		e,
+		C,
+		w,
+		T,
+		E,
+		D
+	]);
+	if (!e || e.length === 0) return /* @__PURE__ */ o("div", {
+		className: "dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted",
+		style: { height: n },
+		children: /* @__PURE__ */ s("div", {
+			className: "dc:text-center",
+			children: [/* @__PURE__ */ o("div", {
+				className: "dc:text-sm dc:font-semibold dc:mb-1",
+				children: "No data available"
+			}), /* @__PURE__ */ o("div", {
+				className: "dc:text-xs text-dc-text-secondary",
+				children: "Run a query to see heatmap visualization"
+			})]
+		})
+	});
+	if (!C || !w || !T) return /* @__PURE__ */ o("div", {
+		className: "dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted",
+		style: { height: n },
+		children: /* @__PURE__ */ s("div", {
+			className: "dc:text-center",
+			children: [/* @__PURE__ */ o("div", {
+				className: "dc:text-sm dc:font-semibold dc:mb-1",
+				children: "Configuration required"
+			}), /* @__PURE__ */ s("div", {
+				className: "dc:text-xs text-dc-text-secondary",
+				children: [
+					!C && "X-axis dimension required. ",
+					!w && "Y-axis dimension required. ",
+					!T && "Value measure required."
+				]
+			})]
+		})
+	});
+	if (O.length === 0) return /* @__PURE__ */ o("div", {
+		className: "dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted",
+		style: { height: n },
+		children: /* @__PURE__ */ s("div", {
+			className: "dc:text-center",
+			children: [/* @__PURE__ */ o("div", {
+				className: "dc:text-sm dc:font-semibold dc:mb-1",
+				children: "No data to display"
+			}), /* @__PURE__ */ o("div", {
+				className: "dc:text-xs text-dc-text-secondary",
+				children: "The query returned no results for the heatmap"
+			})]
+		})
+	});
+	let M = l?.gradient || [
+		"#eff3ff",
+		"#c6dbef",
+		"#9ecae1",
+		"#6baed6",
+		"#3182bd",
+		"#08519c"
+	];
+	return /* @__PURE__ */ s("div", {
+		className: "dc:relative dc:w-full dc:h-full",
+		style: { height: n },
+		children: [k && /* @__PURE__ */ s("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: [
+				"Data truncated to ",
+				p,
+				"x",
+				m,
+				" cells (original: ",
+				A,
+				"x",
+				j,
+				"). Add filters to reduce dimensions."
+			]
+		}), /* @__PURE__ */ o(c, {
+			data: O,
+			margin: {
+				top: k ? 40 : 20,
+				right: 20,
+				bottom: 120,
+				left: 120
+			},
+			valueFormat: S ? (e) => r(e, S) : ">-.2s",
+			axisTop: null,
+			axisRight: null,
+			axisBottom: {
+				tickSize: 5,
+				tickPadding: 5,
+				tickRotation: -45,
+				legend: b?.label || C?.split(".").pop() || "X Axis",
+				legendPosition: "middle",
+				legendOffset: 70,
+				format: b ? (e) => {
+					let t = parseFloat(String(e));
+					return isNaN(t) ? String(e) : r(t, b);
+				} : void 0
+			},
+			axisLeft: {
+				tickSize: 5,
+				tickPadding: 5,
+				tickRotation: 0,
+				legend: x?.label || w?.split(".").pop() || "Y Axis",
+				legendPosition: "middle",
+				legendOffset: -80,
+				format: x ? (e) => {
+					let t = parseFloat(String(e));
+					return isNaN(t) ? String(e) : r(t, x);
+				} : void 0
+			},
+			colors: M.length >= 2 ? {
+				type: "sequential",
+				colors: [M[0], M[M.length - 1]]
+			} : {
+				type: "sequential",
+				scheme: "greens"
+			},
+			emptyColor: "var(--dc-surface-tertiary)",
+			cellComponent: v === "circle" ? "circle" : "rect",
+			enableLabels: _,
+			labelTextColor: ({ color: e }) => f(e),
+			legends: y ? [{
+				anchor: "bottom",
+				translateX: 0,
+				translateY: 95,
+				length: 400,
+				thickness: 8,
+				direction: "row",
+				tickPosition: "after",
+				tickSize: 3,
+				tickSpacing: 4,
+				tickOverlap: !1,
+				title: T?.split(".").pop() || "Value",
+				titleAlign: "start",
+				titleOffset: 4
+			}] : [],
+			annotations: [],
+			theme: {
+				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)"
+				} }
+			}
+		})]
+	});
+});
+//#endregion
+export { l as t };
+
+//# sourceMappingURL=chart-heat-map-f2fM2mDC.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-heat-map-f2fM2mDC.js","names":[],"sources":["../../../src/client/components/charts/HeatMapChart.tsx"],"sourcesContent":["/**\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 { ResponsiveHeatMap } from '@nivo/heatmap'\nimport { formatTimeValue, getFieldGranularity, formatAxisValue } from '../../utils/chartUtils'\nimport type { AxisFormatConfig } from '../../types'\nimport type { ChartProps } from '../../types'\n\n/**\n * Parse color string (hex or rgb) to RGB values\n */\nfunction parseColor(color: string): { r: number; g: number; b: number } | null {\n  // Handle hex colors\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  // Handle rgb/rgba colors\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/**\n * Calculate relative luminance of a color\n * Returns value between 0 (black) and 1 (white)\n */\nfunction 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  // Apply gamma correction\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  // Calculate luminance using WCAG formula\n  return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear\n}\n\n/**\n * Get contrasting text color (white or dark) based on background color\n */\nfunction getContrastingTextColor(bgColor: string): string {\n  const luminance = getLuminance(bgColor)\n  // Use white text on dark backgrounds, dark text on light backgrounds\n  return luminance < 0.4 ? '#ffffff' : '#1f2937'\n}\n\n/**\n * Maximum dimensions for heatmap to prevent browser lockup\n * 50x50 = 2500 cells max\n */\nconst MAX_HEATMAP_ROWS = 50\nconst MAX_HEATMAP_COLS = 50\n\n/**\n * Nivo heatmap data format\n */\ninterface HeatMapDatum {\n  x: string\n  y: number | null\n}\n\ninterface HeatMapSerie {\n  id: string\n  data: HeatMapDatum[]\n}\n\n/**\n * Result of heatmap transformation including truncation info\n */\ninterface 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 * Input (drizzle-cube):\n * [\n *   { \"Region.name\": \"East\", \"Product.category\": \"Electronics\", \"Sales.total\": 1500 },\n *   { \"Region.name\": \"East\", \"Product.category\": \"Clothing\", \"Sales.total\": 800 },\n * ]\n *\n * Output (nivo format):\n * [\n *   { id: \"East\", data: [{ x: \"Electronics\", y: 1500 }, { x: \"Clothing\", y: 800 }] }\n * ]\n *\n * Data is truncated to MAX_HEATMAP_ROWS x MAX_HEATMAP_COLS to prevent browser lockup\n */\nfunction 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  // Group data by Y-axis dimension\n  const groupedByY = new Map<string, Map<string, number>>()\n  const allXValues = new Set<string>()\n  // Keep original values for sorting timestamps correctly\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    // Format time values based on granularity\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    // Store original for sorting\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  // Sort X values - try to sort by original timestamp if available\n  const xValueArray = Array.from(allXValues).sort((a, b) => {\n    const origA = xValueOriginals.get(a)\n    const origB = xValueOriginals.get(b)\n    // If both are date strings, sort chronologically\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    // Otherwise sort alphabetically by formatted value\n    return a.localeCompare(b)\n  })\n\n  // Track original dimensions for truncation warning\n  const originalRows = groupedByY.size\n  const originalCols = xValueArray.length\n  const truncated = originalRows > MAX_HEATMAP_ROWS || originalCols > MAX_HEATMAP_COLS\n\n  // Truncate X values if needed\n  const limitedXValues = xValueArray.slice(0, MAX_HEATMAP_COLS)\n\n  // Build result with truncation\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) => ({\n        x,\n        y: xMap.get(x) ?? null,\n      })),\n    })\n    rowCount++\n  }\n\n  return { data: result, truncated, originalRows, originalCols }\n}\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  // Get display config options\n  const displayConfigAny = displayConfig as Record<string, unknown> | undefined\n  const showLabels = (displayConfigAny?.showLabels as boolean) ?? false\n  const cellShape = (displayConfigAny?.cellShape as 'rect' | 'circle') ?? 'rect'\n  const showLegend = (displayConfigAny?.showLegend as boolean) ?? true\n  const xAxisFormat = displayConfigAny?.xAxisFormat as AxisFormatConfig | undefined\n  const yAxisFormat = displayConfigAny?.yAxisFormat as AxisFormatConfig | undefined\n  const valueFormat = displayConfigAny?.valueFormat as AxisFormatConfig | undefined\n\n  // Extract field names from chartConfig (handle both array and string formats)\n  const xAxisField = chartConfig?.xAxis\n    ? (Array.isArray(chartConfig.xAxis) ? chartConfig.xAxis[0] : chartConfig.xAxis)\n    : undefined\n  const yAxisField = chartConfig?.yAxis\n    ? (Array.isArray(chartConfig.yAxis) ? chartConfig.yAxis[0] : chartConfig.yAxis)\n    : undefined\n  const valueField = chartConfig?.valueField\n    ? (Array.isArray(chartConfig.valueField) ? chartConfig.valueField[0] : chartConfig.valueField)\n    : undefined\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 (\n      <div\n        className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"dc:text-center\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data available</div>\n          <div className=\"dc:text-xs text-dc-text-secondary\">\n            Run a query to see heatmap visualization\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  if (!xAxisField || !yAxisField || !valueField) {\n    return (\n      <div\n        className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"dc:text-center\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">Configuration required</div>\n          <div className=\"dc:text-xs text-dc-text-secondary\">\n            {!xAxisField && 'X-axis dimension required. '}\n            {!yAxisField && 'Y-axis dimension required. '}\n            {!valueField && 'Value measure required.'}\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  if (heatmapData.length === 0) {\n    return (\n      <div\n        className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\"\n        style={{ height }}\n      >\n        <div className=\"dc:text-center\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">No data to display</div>\n          <div className=\"dc:text-xs text-dc-text-secondary\">\n            The query returned no results for the heatmap\n          </div>\n        </div>\n      </div>\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/intensity\n  const colors = colorPalette?.gradient || [\n    '#eff3ff', // lightest blue\n    '#c6dbef',\n    '#9ecae1',\n    '#6baed6',\n    '#3182bd',\n    '#08519c', // darkest blue\n  ]\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          Data truncated to {MAX_HEATMAP_ROWS}x{MAX_HEATMAP_COLS} cells (original: {originalRows}x{originalCols}). Add filters to reduce dimensions.\n        </div>\n      )}\n      <ResponsiveHeatMap\n        data={heatmapData}\n        margin={{ top: truncated ? 40 : 20, right: 20, bottom: 120, left: 120 }}\n        valueFormat={valueFormat ? (v) => formatAxisValue(v, valueFormat) : '>-.2s'}\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: xAxisFormat\n            ? (v) => {\n                const num = parseFloat(String(v))\n                return isNaN(num) ? String(v) : formatAxisValue(num, xAxisFormat)\n              }\n            : undefined,\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: yAxisFormat\n            ? (v) => {\n                const num = parseFloat(String(v))\n                return isNaN(num) ? String(v) : formatAxisValue(num, yAxisFormat)\n              }\n            : undefined,\n        }}\n        colors={\n          colors.length >= 2\n            // Sequential scale needs [minColor, maxColor] tuple\n            // Use first color for low values, last color for high values\n            ? { type: 'sequential', colors: [colors[0], colors[colors.length - 1]] as [string, string] }\n            : { type: 'sequential', scheme: 'greens' }  // Fallback to built-in scheme\n        }\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={{\n          text: {\n            fill: 'var(--dc-text)',\n          },\n          axis: {\n            legend: {\n              text: {\n                fill: 'var(--dc-text)',\n              },\n            },\n            ticks: {\n              text: {\n                fill: 'var(--dc-text-secondary)',\n              },\n            },\n          },\n          legends: {\n            text: {\n              fill: 'var(--dc-text-secondary)',\n            },\n            title: {\n              text: {\n                fill: 'var(--dc-text)',\n              },\n            },\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    </div>\n  )\n})\n\nexport default HeatMapChart\n"],"mappings":"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"}

package/dist/client/chunks/chart-kpi-delta-S6qDEoJO.js

@@ -0,0 +1,343 @@
+import { n as e } from "./rolldown-runtime-lc2dmIiU.js";
+import { b as t, x as n } from "./chart-data-table-B2m_6EZe.js";
+import { _ as r } from "./chart-activity-grid-wR2Twpo7.js";
+import i, { useEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/client/utils/periodUtils.ts
+function u(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 d(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 : u(i, n) <= /* @__PURE__ */ new Date();
+}
+function f(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 p(e, t, n, r, i = !1) {
+	let a = {
+		filteredData: e,
+		excludedIncompletePeriod: !1,
+		skippedLastPeriod: !1,
+		granularity: null
+	};
+	if (e.length < 2) return a;
+	let o = f(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 d(s, t, o) ? {
+		...a,
+		granularity: o
+	} : {
+		filteredData: e.slice(0, -1),
+		excludedIncompletePeriod: !0,
+		skippedLastPeriod: !1,
+		granularity: o
+	};
+}
+//#endregion
+//#region src/client/components/charts/KpiDelta.tsx
+var m = /* @__PURE__ */ e({ default: () => g });
+function h({ values: e, lastValue: t, positiveColor: n, negativeColor: r, formatValue: i, width: a, height: o }) {
+	let s = Math.max(10, Math.floor(a / 10)), u = e.length > s ? e.slice(-s) : e, d = u.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__ */ c("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__ */ c("span", {
+			className: "dc:text-xs text-dc-text-muted",
+			children: "No variance data"
+		})
+	});
+	let m = a - (u.length - 1) * 2, h = Math.max(4, m / u.length), g = p - f, _ = g > 0 ? p / g * 100 : 50;
+	return /* @__PURE__ */ l("div", {
+		className: "dc:flex dc:items-center dc:space-x-2",
+		children: [/* @__PURE__ */ l("div", {
+			className: "dc:relative",
+			style: {
+				width: `${a}px`,
+				height: `${o}px`
+			},
+			children: [/* @__PURE__ */ c("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)), l = e >= 0, d = t === u.length - 1, f = l ? n : r;
+				return /* @__PURE__ */ c("div", {
+					className: "dc:absolute rounded-xs",
+					style: {
+						left: `${t * (h + 2)}px`,
+						width: `${h}px`,
+						height: `${s}px`,
+						backgroundColor: f,
+						opacity: d ? 1 : .6,
+						...l ? { bottom: `${100 - _}%` } : { top: `${_}%` },
+						zIndex: 2
+					},
+					title: `${i(u[t])}: ${e >= 0 ? "+" : ""}${i(e)} vs current`
+				}, t);
+			})]
+		}), /* @__PURE__ */ l("div", {
+			className: "dc:flex dc:flex-col dc:justify-between dc:text-xs text-dc-text-muted",
+			style: { height: `${o}px` },
+			children: [/* @__PURE__ */ l("span", { children: ["+", i(p)] }), /* @__PURE__ */ l("span", { children: ["", i(f)] })]
+		})]
+	});
+}
+var g = i.memo(function({ data: e, chartConfig: i, displayConfig: u = {}, queryObject: d, height: f = "100%", colorPalette: m }) {
+	let [g, _] = s(32), [v, y] = s(250), b = o(null), x = o(null), S = r();
+	if (a(() => {
+		let e = () => {
+			if (b.current) {
+				let e = b.current.getBoundingClientRect(), t = e.width, n = e.height;
+				if (t > 0 && n > 0) {
+					let e = t / 4, r = n / 4;
+					_(Math.max(28, Math.min(Math.min(e, r), 140))), setTimeout(() => {
+						if (x.current) {
+							let e = x.current.getBoundingClientRect().width, n = t - 100, r = Math.max(e, Math.min(n, t * .7));
+							y(Math.max(100, r));
+						}
+					}, 10);
+				}
+			}
+		}, t = setTimeout(e, 50), n = new ResizeObserver(() => {
+			setTimeout(e, 10);
+		});
+		return b.current && n.observe(b.current), () => {
+			clearTimeout(t), n.disconnect();
+		};
+	}, [e, i]), !e || e.length === 0) return /* @__PURE__ */ c("div", {
+		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
+		style: {
+			height: f === "100%" ? "100%" : f,
+			minHeight: f === "100%" ? "200px" : void 0
+		},
+		children: /* @__PURE__ */ l("div", {
+			className: "dc:text-center text-dc-text-muted",
+			children: [/* @__PURE__ */ c("div", {
+				className: "dc:text-sm dc:font-semibold dc:mb-1",
+				children: "No data available"
+			}), /* @__PURE__ */ c("div", {
+				className: "dc:text-xs text-dc-text-secondary",
+				children: "No data points to display"
+			})]
+		})
+	});
+	let C = [], w = [];
+	if (i?.yAxis && (C = Array.isArray(i.yAxis) ? i.yAxis : [i.yAxis]), i?.xAxis && (w = Array.isArray(i.xAxis) ? i.xAxis : [i.xAxis]), C.length === 0) return /* @__PURE__ */ c("div", {
+		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
+		style: {
+			height: f === "100%" ? "100%" : f,
+			minHeight: f === "100%" ? "200px" : void 0,
+			backgroundColor: "var(--dc-danger-bg)",
+			color: "var(--dc-danger)",
+			borderColor: "var(--dc-danger-border)"
+		},
+		children: /* @__PURE__ */ l("div", {
+			className: "dc:text-center",
+			children: [/* @__PURE__ */ c("div", {
+				className: "dc:text-sm dc:font-semibold dc:mb-1",
+				children: "Configuration Error"
+			}), /* @__PURE__ */ c("div", {
+				className: "dc:text-xs",
+				children: "No measure field configured"
+			})]
+		})
+	});
+	let T = C[0], E = w[0], D = [...e];
+	E && (D = D.sort((e, t) => {
+		let n = e[E], r = t[E];
+		return n < r ? -1 : n > r ? 1 : 0;
+	}));
+	let { useLastCompletePeriod: O = !0, skipLastPeriod: k = !1 } = u, { filteredData: A, excludedIncompletePeriod: j, skippedLastPeriod: M, granularity: N } = p(D, E, d, O, k), P = A.map((e) => e[T]).filter((e) => e != null && !isNaN(Number(e))).map((e) => Number(e));
+	if (P.length < 2) return /* @__PURE__ */ c("div", {
+		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
+		style: {
+			height: f === "100%" ? "100%" : f,
+			minHeight: f === "100%" ? "200px" : void 0,
+			backgroundColor: "var(--dc-warning-bg)",
+			color: "var(--dc-warning)",
+			borderColor: "var(--dc-warning-border)"
+		},
+		children: /* @__PURE__ */ l("div", {
+			className: "dc:text-center",
+			children: [
+				/* @__PURE__ */ c("div", {
+					className: "dc:text-sm dc:font-semibold dc:mb-1",
+					children: "Insufficient Data"
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "dc:text-xs",
+					children: "Delta calculation requires at least 2 data points"
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "dc:text-xs",
+					children: ["Current data points: ", P.length]
+				})
+			]
+		})
+	});
+	let F = P[P.length - 1], I = P[P.length - 2], L = F - I, R = I === 0 ? 0 : L / Math.abs(I) * 100, z = L >= 0, B = (e) => {
+		if (u.formatValue) return u.formatValue(e);
+		if (e == null) return "—";
+		let t = u.decimals ?? 0, n = u.prefix ?? "", r;
+		return r = Math.abs(e) >= 1e9 ? (e / 1e9).toFixed(t) + "B" : Math.abs(e) >= 1e6 ? (e / 1e6).toFixed(t) + "M" : Math.abs(e) >= 1e3 ? (e / 1e3).toFixed(t) + "K" : e.toFixed(t), n + r;
+	}, V = () => {
+		if (u.positiveColorIndex !== void 0 && m?.colors) {
+			let e = u.positiveColorIndex;
+			if (e >= 0 && e < m.colors.length) return m.colors[e];
+		}
+		return "#10b981";
+	}, H = () => {
+		if (u.negativeColorIndex !== void 0 && m?.colors) {
+			let e = u.negativeColorIndex;
+			if (e >= 0 && e < m.colors.length) return m.colors[e];
+		}
+		return "#ef4444";
+	}, U = V(), W = H(), G = z ? U : W;
+	return /* @__PURE__ */ l("div", {
+		ref: b,
+		className: "dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full dc:h-full dc:p-4",
+		style: {
+			height: f === "100%" ? "100%" : f,
+			minHeight: f === "100%" ? "200px" : void 0
+		},
+		children: [
+			/* @__PURE__ */ l("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__ */ c("span", { children: (() => {
+					let e = S(T);
+					return e && e.length > 1 ? e : T;
+				})() }), (j || M) && /* @__PURE__ */ c("span", {
+					title: M ? `Excludes last ${N || "period"}` : `Excludes current incomplete ${N}`,
+					className: "dc:cursor-help",
+					children: /* @__PURE__ */ c(n, {
+						icon: t,
+						className: "dc:w-4 dc:h-4 text-dc-text-muted dc:opacity-70"
+					})
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "dc:flex dc:items-center dc:justify-center dc:space-x-4 dc:mb-2",
+				children: [/* @__PURE__ */ c("div", {
+					ref: x,
+					className: "dc:font-bold dc:leading-none",
+					style: {
+						fontSize: `${g}px`,
+						color: "var(--dc-text)"
+					},
+					children: B(F)
+				}), /* @__PURE__ */ l("div", {
+					className: "dc:flex dc:items-center dc:space-x-1",
+					children: [/* @__PURE__ */ c("div", {
+						className: "dc:font-bold",
+						style: {
+							color: G,
+							fontSize: `${g * .35}px`
+						},
+						children: z ? "▲" : "▼"
+					}), /* @__PURE__ */ l("div", {
+						className: "dc:text-left",
+						children: [/* @__PURE__ */ l("div", {
+							className: "dc:font-bold dc:leading-tight",
+							style: {
+								fontSize: `${g * .35}px`,
+								color: G
+							},
+							children: [z ? "+" : "", B(L)]
+						}), /* @__PURE__ */ l("div", {
+							className: "dc:font-semibold dc:leading-tight",
+							style: {
+								fontSize: `${g * .28}px`,
+								color: G,
+								opacity: .8
+							},
+							children: [
+								z ? "+" : "",
+								R.toFixed(1),
+								"%"
+							]
+						})]
+					})]
+				})]
+			}),
+			u.suffix && !u.formatValue && /* @__PURE__ */ c("div", {
+				className: "text-dc-text-muted dc:text-center dc:mb-3",
+				style: {
+					fontSize: "14px",
+					lineHeight: "1.2",
+					opacity: .8
+				},
+				children: u.suffix
+			}),
+			u.showHistogram !== !1 && P.length > 2 && /* @__PURE__ */ c("div", {
+				className: "dc:mt-2 dc:w-full dc:flex dc:justify-center dc:overflow-hidden",
+				children: /* @__PURE__ */ c(h, {
+					values: P,
+					lastValue: F,
+					positiveColor: U,
+					negativeColor: W,
+					formatValue: B,
+					width: v,
+					height: 64
+				})
+			})
+		]
+	});
+});
+//#endregion
+export { d as a, f as i, p as n, u as r, m as t };
+
+//# sourceMappingURL=chart-kpi-delta-S6qDEoJO.js.map