drizzle-cube 0.5.4 → 0.5.6

package/dist/client/chunks/{chart-kpi-number-BrXw7m-S.js → chart-kpi-number-CuNEYbRx.js}

@@ -1,12 +1,13 @@
-import { B as e, z as t } from "./chart-data-table-zZtwLf55.js";
-import { _ as n, k as r } from "./chart-activity-grid-VFFm85hC.js";
-import { a as i, i as a, r as o } from "./chart-area-CwwIHTmK.js";
-import { n as s } from "./chart-kpi-delta-DHkNqufb.js";
-import c, { useCallback as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { n as e } from "./rolldown-runtime-CKnJJeip.js";
+import { B as t, z as n } from "./chart-data-table-DT4uBZaq.js";
+import { _ as r, k as i } from "./chart-activity-grid-Bdb8U_NC.js";
+import { a, i as o, r as s } from "./chart-area-BZEnT-tf.js";
+import { n as c } from "./chart-kpi-delta-DJKL02Ut.js";
+import l, { useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/client/components/DataHistogram.tsx
-function g({ values: e, min: t, max: n, color: i = "#1f2937", bucketCount: a = 12, height: o = 32, formatValue: s = (e) => e.toString(), width: c, showAverageIndicator: l = !0, targetValue: u }) {
-	let { t: d } = r(), f = Array(a).fill(0), p = n - t;
+function _({ values: e, min: t, max: n, color: r = "#1f2937", bucketCount: a = 12, height: o = 32, formatValue: s = (e) => e.toString(), width: c, showAverageIndicator: l = !0, targetValue: u }) {
+	let { t: d } = i(), f = Array(a).fill(0), p = n - t;
 	e.forEach((e) => {
 		if (p === 0) f[Math.floor(a / 2)]++;
 		else {
@@ -14,11 +15,11 @@ function g({ values: e, min: t, max: n, color: i = "#1f2937", bucketCount: a = 1
 			n = Math.max(0, Math.min(a - 1, n)), f[n]++;
 		}
 	});
-	let g = Math.max(...f), _ = e.reduce((e, t) => e + t, 0) / e.length, v = p === 0 ? 50 : (_ - t) / p * 100, y = u !== void 0 && p > 0 ? (u - t) / p * 100 : null;
-	return /* @__PURE__ */ h("div", {
+	let m = Math.max(...f), _ = e.reduce((e, t) => e + t, 0) / e.length, v = p === 0 ? 50 : (_ - t) / p * 100, y = u !== void 0 && p > 0 ? (u - t) / p * 100 : null;
+	return /* @__PURE__ */ g("div", {
 		className: "dc:flex dc:flex-col dc:items-center",
 		children: [
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ g("div", {
 				className: "dc:relative dc:flex dc:items-end dc:justify-center dc:space-x-0.5",
 				style: {
 					height: `${o}px`,
@@ -27,18 +28,18 @@ function g({ values: e, min: t, max: n, color: i = "#1f2937", bucketCount: a = 1
 				},
 				children: [
 					f.map((e, t) => {
-						let n = g > 0 ? e / g : 0, r = .1;
-						return /* @__PURE__ */ m("div", {
+						let n = m > 0 ? e / m : 0, i = .1;
+						return /* @__PURE__ */ h("div", {
 							className: "dc:flex-1 dc:rounded-t-sm dc:transition-all dc:duration-300 dc:ease-out",
 							style: {
-								height: `${(e > 0 ? Math.max(r, n) : r) * o}px`,
-								backgroundColor: i,
+								height: `${(e > 0 ? Math.max(i, n) : i) * o}px`,
+								backgroundColor: r,
 								opacity: e > 0 ? .7 + n * .3 : .2
 							},
 							title: `${e} values in this range`
 						}, t);
 					}),
-					l && /* @__PURE__ */ m("div", {
+					l && /* @__PURE__ */ h("div", {
 						className: "dc:absolute dc:top-0 dc:bottom-0 dc:pointer-events-none",
 						style: {
 							left: `${v}%`,
@@ -49,7 +50,7 @@ function g({ values: e, min: t, max: n, color: i = "#1f2937", bucketCount: a = 1
 							zIndex: 10
 						},
 						title: `Average: ${s(_)}`,
-						children: /* @__PURE__ */ m("div", {
+						children: /* @__PURE__ */ h("div", {
 							className: "dc:absolute dc:-top-1",
 							style: {
 								left: "50%",
@@ -62,7 +63,7 @@ function g({ values: e, min: t, max: n, color: i = "#1f2937", bucketCount: a = 1
 							}
 						})
 					}),
-					y !== null && u !== void 0 && /* @__PURE__ */ m("div", {
+					y !== null && u !== void 0 && /* @__PURE__ */ h("div", {
 						className: "dc:absolute dc:top-0 dc:bottom-0 dc:pointer-events-none",
 						style: {
 							left: `${Math.max(0, Math.min(100, y))}%`,
@@ -73,7 +74,7 @@ function g({ values: e, min: t, max: n, color: i = "#1f2937", bucketCount: a = 1
 							zIndex: 11
 						},
 						title: `Target: ${s(u)}`,
-						children: /* @__PURE__ */ m("div", {
+						children: /* @__PURE__ */ h("div", {
 							className: "dc:absolute dc:-top-1",
 							style: {
 								left: "50%",
@@ -88,15 +89,15 @@ function g({ values: e, min: t, max: n, color: i = "#1f2937", bucketCount: a = 1
 					})
 				]
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ g("div", {
 				className: "dc:flex dc:justify-between dc:mt-2 dc:text-xs text-dc-text-muted",
 				style: {
 					width: c ? `${c}px` : "200px",
 					minWidth: "200px"
 				},
-				children: [/* @__PURE__ */ m("span", { children: s(t) }), /* @__PURE__ */ m("span", { children: s(n) })]
+				children: [/* @__PURE__ */ h("span", { children: s(t) }), /* @__PURE__ */ h("span", { children: s(n) })]
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "dc:text-center dc:mt-1 dc:text-xs text-dc-text-muted",
 				children: d("dataHistogram.average", { count: e.length })
 			})
@@ -105,30 +106,30 @@ function g({ values: e, min: t, max: n, color: i = "#1f2937", bucketCount: a = 1
 }
 //#endregion
 //#region src/client/components/charts/KpiNumber.tsx
-var _ = c.memo(function({ data: c, chartConfig: _, displayConfig: v = {}, queryObject: y, height: b = "100%", colorPalette: x }) {
-	let { t: S } = r(), [C, w] = p(32), [T, E] = p(250), D = f(null), O = f(null), k = n(), A = d(() => _?.yAxis ? typeof _.yAxis == "string" ? [_.yAxis] : Array.isArray(_.yAxis) ? _.yAxis : [] : [], [_?.yAxis]), j = A[0] || "", M = y?.timeDimensions?.[0]?.dimension || void 0, N = d(() => {
-		if (!c || c.length === 0) return [];
-		let e = [...c];
-		return M && (e = e.sort((e, t) => {
+var v = /* @__PURE__ */ e({ default: () => y }), y = l.memo(function({ data: e, chartConfig: l, displayConfig: v = {}, queryObject: y, height: b = "100%", colorPalette: x }) {
+	let { t: S } = i(), [C, w] = m(32), [T, E] = m(250), D = p(null), O = p(null), k = r(), A = f(() => l?.yAxis ? typeof l.yAxis == "string" ? [l.yAxis] : Array.isArray(l.yAxis) ? l.yAxis : [] : [], [l?.yAxis]), j = A[0] || "", M = y?.timeDimensions?.[0]?.dimension || void 0, N = f(() => {
+		if (!e || e.length === 0) return [];
+		let t = [...e];
+		return M && (t = t.sort((e, t) => {
 			let n = e[M], r = t[M];
 			return n < r ? -1 : +(n > r);
-		})), e;
-	}, [c, M]), { useLastCompletePeriod: P = !0, skipLastPeriod: F = !1 } = v, { filteredData: I, excludedIncompletePeriod: L, skippedLastPeriod: R, granularity: z } = d(() => N.length === 0 ? {
+		})), t;
+	}, [e, M]), { useLastCompletePeriod: P = !0, skipLastPeriod: F = !1 } = v, { filteredData: I, excludedIncompletePeriod: L, skippedLastPeriod: R, granularity: z } = f(() => N.length === 0 ? {
 		filteredData: [],
 		excludedIncompletePeriod: !1,
 		skippedLastPeriod: !1,
 		granularity: void 0
-	} : s(N, M, y, P, F), [
+	} : c(N, M, y, P, F), [
 		N,
 		M,
 		y,
 		P,
 		F
-	]), B = I, V = d(() => !j || B.length === 0 ? [] : B.map((e) => {
+	]), B = I, V = f(() => !j || B.length === 0 ? [] : B.map((e) => {
 		if (e[j] !== void 0) return e[j];
 		let t = Object.keys(e).filter((t) => typeof e[t] == "number" && !isNaN(e[t]));
 		if (t.length > 0) return e[t[0]];
-	}).filter((e) => e != null && !isNaN(Number(e))).map((e) => Number(e)), [B, j]), { avg: H, min: U, max: W } = d(() => V.length === 0 ? {
+	}).filter((e) => e != null && !isNaN(Number(e))).map((e) => Number(e)), [B, j]), { avg: H, min: U, max: W } = f(() => V.length === 0 ? {
 		avg: 0,
 		min: 0,
 		max: 0
@@ -136,24 +137,24 @@ var _ = c.memo(function({ data: c, chartConfig: _, displayConfig: v = {}, queryO
 		avg: V.reduce((e, t) => e + t, 0) / V.length,
 		min: Math.min(...V),
 		max: Math.max(...V)
-	}, [V]), G = l((e) => {
+	}, [V]), G = u((e) => {
 		if (v.formatValue) return v.formatValue(e);
 		if (e == null) return "—";
 		let t = v.decimals ?? 0, n = v.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]), K = V.length === 1 ? V[0] : H, q = V.length > 1, J = d(() => {
+	}, [v]), K = V.length === 1 ? V[0] : H, q = V.length > 1, J = f(() => {
 		if (v.valueColorIndex !== void 0 && x?.colors) {
 			let e = v.valueColorIndex;
 			if (e >= 0 && e < x.colors.length) return x.colors[e];
 		}
 		return x?.colors?.[0] || "#1f2937";
-	}, [v.valueColorIndex, x?.colors]), Y = d(() => i(v?.target || ""), [v?.target]), X = Y.length > 0 ? Y[0] : null, Z = X !== null && V.length > 0 ? o(K, X) : null, Q = d(() => Z === null ? "#6B7280" : Z >= 0 ? x?.colors?.[v.positiveColorIndex ?? 1] || "#10B981" : x?.colors?.[v.negativeColorIndex ?? 7] || "#EF4444", [
+	}, [v.valueColorIndex, x?.colors]), Y = f(() => a(v?.target || ""), [v?.target]), X = Y.length > 0 ? Y[0] : null, Z = X !== null && V.length > 0 ? s(K, X) : null, Q = f(() => Z === null ? "#6B7280" : Z >= 0 ? x?.colors?.[v.positiveColorIndex ?? 1] || "#10B981" : x?.colors?.[v.negativeColorIndex ?? 7] || "#EF4444", [
 		Z,
 		v.positiveColorIndex,
 		v.negativeColorIndex,
 		x?.colors
 	]);
-	return u(() => {
+	return d(() => {
 		let e = () => {
 			if (D.current) {
 				let e = D.current.getBoundingClientRect(), t = e.width, n = e.height;
@@ -173,23 +174,23 @@ var _ = c.memo(function({ data: c, chartConfig: _, displayConfig: v = {}, queryO
 		return D.current && n.observe(D.current), () => {
 			clearTimeout(t), n.disconnect();
 		};
-	}, [c, _]), !c || c.length === 0 ? /* @__PURE__ */ m("div", {
+	}, [e, l]), !e || e.length === 0 ? /* @__PURE__ */ h("div", {
 		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
 		style: {
 			height: b === "100%" ? "100%" : b,
 			minHeight: b === "100%" ? "200px" : void 0
 		},
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ g("div", {
 			className: "dc:text-center text-dc-text-muted",
-			children: [/* @__PURE__ */ m("div", {
+			children: [/* @__PURE__ */ h("div", {
 				className: "dc:text-sm dc:font-semibold dc:mb-1",
 				children: S("chart.runtime.noData")
-			}), /* @__PURE__ */ m("div", {
+			}), /* @__PURE__ */ h("div", {
 				className: "dc:text-xs text-dc-text-secondary",
 				children: S("chart.runtime.noDataHint.kpi")
 			})]
 		})
-	}) : A.length === 0 ? /* @__PURE__ */ m("div", {
+	}) : A.length === 0 ? /* @__PURE__ */ h("div", {
 		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
 		style: {
 			height: b === "100%" ? "100%" : b,
@@ -198,17 +199,17 @@ var _ = c.memo(function({ data: c, chartConfig: _, displayConfig: v = {}, queryO
 			color: "var(--dc-danger)",
 			borderColor: "var(--dc-danger-border)"
 		},
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ g("div", {
 			className: "dc:text-center",
-			children: [/* @__PURE__ */ m("div", {
+			children: [/* @__PURE__ */ h("div", {
 				className: "dc:text-sm dc:font-semibold dc:mb-1",
 				children: S("chart.runtime.configError")
-			}), /* @__PURE__ */ m("div", {
+			}), /* @__PURE__ */ h("div", {
 				className: "dc:text-xs",
 				children: S("chart.runtime.configErrorHint.noMeasures")
 			})]
 		})
-	}) : V.length === 0 ? /* @__PURE__ */ h("div", {
+	}) : V.length === 0 ? /* @__PURE__ */ g("div", {
 		ref: D,
 		className: "dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full dc:h-full dc:p-4",
 		style: {
@@ -216,7 +217,7 @@ var _ = c.memo(function({ data: c, chartConfig: _, displayConfig: v = {}, queryO
 			minHeight: b === "100%" ? "200px" : void 0
 		},
 		children: [
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "text-dc-text-secondary dc:font-bold dc:text-center dc:mb-3",
 				style: {
 					fontSize: "14px",
@@ -224,17 +225,17 @@ var _ = c.memo(function({ data: c, chartConfig: _, displayConfig: v = {}, queryO
 				},
 				children: k(j)
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "dc:font-bold dc:leading-none text-dc-text-muted",
 				style: { fontSize: `${C}px` },
 				children: "—"
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "dc:text-xs text-dc-text-muted dc:mt-2",
 				children: "No data"
 			})
 		]
-	}) : /* @__PURE__ */ h("div", {
+	}) : /* @__PURE__ */ g("div", {
 		ref: D,
 		className: "dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full dc:h-full dc:p-4",
 		style: {
@@ -242,27 +243,27 @@ var _ = c.memo(function({ data: c, chartConfig: _, displayConfig: v = {}, queryO
 			minHeight: b === "100%" ? "200px" : void 0
 		},
 		children: [
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ g("div", {
 				className: "text-dc-text-secondary dc:font-bold dc:text-center dc:mb-3 dc:flex dc:items-center dc:justify-center dc:gap-1",
 				style: {
 					fontSize: "14px",
 					lineHeight: "1.2"
 				},
-				children: [/* @__PURE__ */ m("span", { children: (() => {
+				children: [/* @__PURE__ */ h("span", { children: (() => {
 					let e = k(j);
 					return e && e.length > 1 ? e : j;
-				})() }), (L || R) && /* @__PURE__ */ m("span", {
+				})() }), (L || R) && /* @__PURE__ */ h("span", {
 					title: R ? `Excludes last ${z || "period"}` : `Excludes current incomplete ${z}`,
 					className: "dc:cursor-help",
-					children: /* @__PURE__ */ m(e, {
-						icon: t,
+					children: /* @__PURE__ */ h(t, {
+						icon: n,
 						className: "dc:w-4 dc:h-4 text-dc-text-muted dc:opacity-70"
 					})
 				})]
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ g("div", {
 				className: "dc:flex dc:items-center dc:justify-center dc:gap-4 dc:mb-3",
-				children: [/* @__PURE__ */ m("div", {
+				children: [/* @__PURE__ */ h("div", {
 					ref: O,
 					className: "dc:font-bold dc:leading-none",
 					style: {
@@ -270,17 +271,17 @@ var _ = c.memo(function({ data: c, chartConfig: _, displayConfig: v = {}, queryO
 						color: J
 					},
 					children: G(K)
-				}), X !== null && Z !== null && /* @__PURE__ */ h("div", {
+				}), X !== null && Z !== null && /* @__PURE__ */ g("div", {
 					className: "dc:flex dc:flex-col dc:items-start",
-					children: [/* @__PURE__ */ m("div", {
+					children: [/* @__PURE__ */ h("div", {
 						className: "dc:font-semibold",
 						style: {
 							fontSize: `${Math.max(12, C * .3)}px`,
 							color: Q,
 							lineHeight: "1.2"
 						},
-						children: a(Z, 1)
-					}), /* @__PURE__ */ h("div", {
+						children: o(Z, 1)
+					}), /* @__PURE__ */ g("div", {
 						className: "text-dc-text-muted dc:text-xs",
 						style: {
 							opacity: .7,
@@ -290,7 +291,7 @@ var _ = c.memo(function({ data: c, chartConfig: _, displayConfig: v = {}, queryO
 					})]
 				})]
 			}),
-			v.suffix && !v.formatValue && /* @__PURE__ */ m("div", {
+			v.suffix && !v.formatValue && /* @__PURE__ */ h("div", {
 				className: "text-dc-text-muted dc:text-center",
 				style: {
 					fontSize: "14px",
@@ -299,9 +300,9 @@ var _ = c.memo(function({ data: c, chartConfig: _, displayConfig: v = {}, queryO
 				},
 				children: v.suffix
 			}),
-			q && /* @__PURE__ */ m("div", {
+			q && /* @__PURE__ */ h("div", {
 				className: "dc:mt-4",
-				children: /* @__PURE__ */ m(g, {
+				children: /* @__PURE__ */ h(_, {
 					values: V,
 					min: U,
 					max: W,
@@ -316,6 +317,6 @@ var _ = c.memo(function({ data: c, chartConfig: _, displayConfig: v = {}, queryO
 	});
 });
 //#endregion
-export { g as n, _ as t };
+export { _ as n, v as t };
 
-//# sourceMappingURL=chart-kpi-number-BrXw7m-S.js.map
+//# sourceMappingURL=chart-kpi-number-CuNEYbRx.js.map

package/dist/client/chunks/{chart-kpi-number-BrXw7m-S.js.map → chart-kpi-number-CuNEYbRx.js.map}

@@ -1 +1 @@
-{"version":3,"file":"chart-kpi-number-BrXw7m-S.js","names":[],"sources":["../../../src/client/components/DataHistogram.tsx","../../../src/client/components/charts/KpiNumber.tsx"],"sourcesContent":["\nimport { useTranslation } from '../hooks/useTranslation'\n\ninterface DataHistogramProps {\n  /** Array of numeric values to create histogram from */\n  values: number[]\n  /** Minimum value in the dataset */\n  min: number\n  /** Maximum value in the dataset */\n  max: number\n  /** Color for the histogram bars */\n  color?: string\n  /** Number of buckets/bars to create (default: 12) */\n  bucketCount?: number\n  /** Height of the histogram in pixels (default: 32) */\n  height?: number\n  /** Format function for min/max labels */\n  formatValue?: (value: number) => string\n  /** Width of the histogram to match text above */\n  width?: number\n  /** Whether to show average indicator line (default: true) */\n  showAverageIndicator?: boolean\n  /** Target value to show as green line */\n  targetValue?: number\n}\n\n/**\n * Reusable histogram component that shows the distribution of actual data values\n */\nexport default function DataHistogram({\n  values,\n  min,\n  max,\n  color = '#1f2937',\n  bucketCount = 12,\n  height = 32,\n  formatValue = (val) => val.toString(),\n  width,\n  showAverageIndicator = true,\n  targetValue\n}: DataHistogramProps) {\n  const { t } = useTranslation()\n  // Create histogram buckets from actual data\n  const buckets = new Array(bucketCount).fill(0)\n  const range = max - min\n  \n  // Distribute actual values into buckets\n  values.forEach(value => {\n    if (range === 0) {\n      // All values are the same, put everything in middle bucket\n      buckets[Math.floor(bucketCount / 2)]++\n    } else {\n      // Calculate which bucket this value belongs to\n      let bucketIndex = Math.floor(((value - min) / range) * (bucketCount - 1))\n      // Clamp to valid bucket range\n      bucketIndex = Math.max(0, Math.min(bucketCount - 1, bucketIndex))\n      buckets[bucketIndex]++\n    }\n  })\n  \n  // Find max bucket count for normalization\n  const maxBucketCount = Math.max(...buckets)\n  \n  // Calculate average for indicator positioning\n  const average = values.reduce((sum, val) => sum + val, 0) / values.length\n  \n  // Calculate average position as percentage of histogram width\n  const averagePosition = range === 0 ? 50 : ((average - min) / range) * 100\n  \n  // Calculate target position if target value is provided\n  const targetPosition = targetValue !== undefined && range > 0 \n    ? ((targetValue - min) / range) * 100 \n    : null\n\n  return (\n    <div className=\"dc:flex dc:flex-col dc:items-center\">\n      {/* Horizontal bars representing actual data distribution */}\n      <div \n        className=\"dc:relative dc:flex dc:items-end dc:justify-center dc:space-x-0.5\" \n        style={{ \n          height: `${height}px`,\n          width: width ? `${width}px` : '200px',\n          minWidth: '200px'\n        }}\n      >\n        {buckets.map((count, i) => {\n          // Normalize height based on actual data frequency\n          const normalizedHeight = maxBucketCount > 0 ? count / maxBucketCount : 0\n          const minHeight = 0.1 // minimum height for empty buckets\n          const displayHeight = count > 0 ? Math.max(minHeight, normalizedHeight) : minHeight\n          \n          return (\n            <div\n              key={i}\n              className=\"dc:flex-1 dc:rounded-t-sm dc:transition-all dc:duration-300 dc:ease-out\"\n              style={{\n                height: `${displayHeight * height}px`,\n                backgroundColor: color,\n                opacity: count > 0 ? 0.7 + (normalizedHeight * 0.3) : 0.2 // higher opacity for buckets with data\n              }}\n              title={`${count} values in this range`} // tooltip showing actual count\n            />\n          )\n        })}\n        \n        {/* Average indicator line */}\n        {showAverageIndicator && (\n          <div\n            className=\"dc:absolute dc:top-0 dc:bottom-0 dc:pointer-events-none\"\n            style={{\n              left: `${averagePosition}%`,\n              transform: 'translateX(-50%)',\n              width: '2px',\n              backgroundColor: '#ef4444',\n              opacity: 0.8,\n              zIndex: 10\n            }}\n            title={`Average: ${formatValue(average)}`}\n          >\n            {/* Small triangle at top to indicate average */}\n            <div\n              className=\"dc:absolute dc:-top-1\"\n              style={{\n                left: '50%',\n                transform: 'translateX(-50%)',\n                width: '0',\n                height: '0',\n                borderLeft: '4px solid transparent',\n                borderRight: '4px solid transparent',\n                borderTop: '6px solid #ef4444'\n              }}\n            />\n          </div>\n        )}\n        \n        {/* Target indicator line */}\n        {targetPosition !== null && targetValue !== undefined && (\n          <div\n            className=\"dc:absolute dc:top-0 dc:bottom-0 dc:pointer-events-none\"\n            style={{\n              left: `${Math.max(0, Math.min(100, targetPosition))}%`,\n              transform: 'translateX(-50%)',\n              width: '2px',\n              backgroundColor: '#10b981',\n              opacity: 0.8,\n              zIndex: 11\n            }}\n            title={`Target: ${formatValue(targetValue)}`}\n          >\n            {/* Small triangle at top to indicate target */}\n            <div\n              className=\"dc:absolute dc:-top-1\"\n              style={{\n                left: '50%',\n                transform: 'translateX(-50%)',\n                width: '0',\n                height: '0',\n                borderLeft: '4px solid transparent',\n                borderRight: '4px solid transparent',\n                borderTop: '6px solid #10b981'\n              }}\n            />\n          </div>\n        )}\n      </div>\n      \n      {/* Min/Max values aligned with histogram width */}\n      <div\n        className=\"dc:flex dc:justify-between dc:mt-2 dc:text-xs text-dc-text-muted\"\n        style={{\n          width: width ? `${width}px` : '200px',\n          minWidth: '200px'\n        }}\n      >\n        <span>{formatValue(min)}</span>\n        <span>{formatValue(max)}</span>\n      </div>\n\n      {/* Average indicator */}\n      <div className=\"dc:text-center dc:mt-1 dc:text-xs text-dc-text-muted\">\n        {t('dataHistogram.average', { count: values.length })}\n      </div>\n    </div>\n  )\n}\n","import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { Icon } from '@iconify/react'\nimport infoCircleIcon from '@iconify-icons/tabler/info-circle'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel'\nimport DataHistogram from '../DataHistogram'\nimport { parseTargetValues, calculateVariance, formatVariance } from '../../utils/targetUtils'\nimport { filterIncompletePeriod } from '../../utils/periodUtils'\nimport type { ChartProps } from '../../types'\n\nconst KpiNumber = React.memo(function KpiNumber({\n  data,\n  chartConfig,\n  displayConfig = {},\n  queryObject,\n  height = \"100%\",\n  colorPalette\n}: ChartProps) {\n  const { t } = useTranslation()\n  const [fontSize, setFontSize] = useState(32)\n  const [textWidth, setTextWidth] = useState(250)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const valueRef = useRef<HTMLDivElement>(null)\n\n  // Use specialized hook to avoid re-renders from unrelated context changes\n  const getFieldLabel = useCubeFieldLabel()\n\n  // Extract value field from chart config - handle both string and array formats\n  const valueFields = useMemo(() => {\n    if (!chartConfig?.yAxis) return []\n    if (typeof chartConfig.yAxis === 'string') return [chartConfig.yAxis]\n    if (Array.isArray(chartConfig.yAxis)) return chartConfig.yAxis\n    return []\n  }, [chartConfig?.yAxis])\n\n  const valueField = valueFields[0] || '' // Use first measure field\n\n  // Get time dimension field if present (for incomplete period filtering)\n  const timeDimensionField = queryObject?.timeDimensions?.[0]?.dimension || undefined\n\n  // Memoize sorted data to prevent recalculation on every render\n  const sortedData = useMemo(() => {\n    if (!data || data.length === 0) return []\n    let sorted = [...data]\n    if (timeDimensionField) {\n      sorted = sorted.sort((a, b) => {\n        const aVal = a[timeDimensionField]\n        const bVal = b[timeDimensionField]\n        if (aVal < bVal) return -1\n        if (aVal > bVal) return 1\n        return 0\n      })\n    }\n    return sorted\n  }, [data, timeDimensionField])\n\n  // Filter out incomplete or last period if enabled\n  const { useLastCompletePeriod = true, skipLastPeriod = false } = displayConfig\n\n  // Memoize filtered data\n  const {\n    filteredData,\n    excludedIncompletePeriod,\n    skippedLastPeriod,\n    granularity\n  } = useMemo(() => {\n    if (sortedData.length === 0) {\n      return { filteredData: [], excludedIncompletePeriod: false, skippedLastPeriod: false, granularity: undefined }\n    }\n    return filterIncompletePeriod(sortedData, timeDimensionField, queryObject, useLastCompletePeriod, skipLastPeriod)\n  }, [sortedData, timeDimensionField, queryObject, useLastCompletePeriod, skipLastPeriod])\n\n  // Use filtered data for calculations\n  const dataToUse = filteredData\n\n  // Memoize value extraction to prevent recalculation\n  const values = useMemo(() => {\n    if (!valueField || dataToUse.length === 0) return []\n\n    const rawValues = dataToUse.map(row => {\n      // Try direct field access first\n      if (row[valueField] !== undefined) {\n        return row[valueField]\n      }\n\n      // If not found, try finding the first numeric field as fallback\n      const numericFields = Object.keys(row).filter(key =>\n        typeof row[key] === 'number' && !isNaN(row[key])\n      )\n\n      if (numericFields.length > 0) {\n        return row[numericFields[0]]\n      }\n\n      return undefined\n    })\n\n    return rawValues\n      .filter(val => val !== null && val !== undefined && !isNaN(Number(val)))\n      .map(val => Number(val))\n  }, [dataToUse, valueField])\n\n  // Memoize statistics calculations\n  const { avg, min, max } = useMemo(() => {\n    if (values.length === 0) return { avg: 0, min: 0, max: 0 }\n    const sum = values.reduce((acc, val) => acc + val, 0)\n    const avg = sum / values.length\n    const min = Math.min(...values)\n    const max = Math.max(...values)\n    return { avg, min, max }\n  }, [values])\n\n  // Memoize format function to prevent re-creating on every render\n  const formatNumber = useCallback((value: number | null | undefined): string => {\n    // If custom formatValue is provided, use it exclusively\n    if (displayConfig.formatValue) {\n      return displayConfig.formatValue(value)\n    }\n\n    // Null handling: Show placeholder for missing data\n    if (value === null || value === undefined) {\n      return '—'\n    }\n\n    const decimals = displayConfig.decimals ?? 0\n    const prefix = displayConfig.prefix ?? ''\n\n    let formattedValue: string\n\n    if (Math.abs(value) >= 1e9) {\n      formattedValue = (value / 1e9).toFixed(decimals) + 'B'\n    } else if (Math.abs(value) >= 1e6) {\n      formattedValue = (value / 1e6).toFixed(decimals) + 'M'\n    } else if (Math.abs(value) >= 1e3) {\n      formattedValue = (value / 1e3).toFixed(decimals) + 'K'\n    } else {\n      formattedValue = value.toFixed(decimals)\n    }\n\n    return prefix + formattedValue\n  }, [displayConfig])\n\n  const mainValue = values.length === 1 ? values[0] : avg\n  const showStats = values.length > 1\n\n  // Memoize color calculation to prevent re-creating function on every render\n  const valueColor = useMemo((): string => {\n    if (displayConfig.valueColorIndex !== undefined && colorPalette?.colors) {\n      const colorIndex = displayConfig.valueColorIndex\n      if (colorIndex >= 0 && colorIndex < colorPalette.colors.length) {\n        return colorPalette.colors[colorIndex]\n      }\n    }\n    // Default to first color in palette if available, otherwise fallback to dark gray\n    return colorPalette?.colors?.[0] || '#1f2937'\n  }, [displayConfig.valueColorIndex, colorPalette?.colors])\n\n  // Process target values for variance calculation\n  const targetValues = useMemo(() => parseTargetValues(displayConfig?.target || ''), [displayConfig?.target])\n  const targetValue = targetValues.length > 0 ? targetValues[0] : null // Use first target value\n  const variance = targetValue !== null && values.length > 0 ? calculateVariance(mainValue, targetValue) : null\n\n  // Memoize variance color calculation\n  const varianceColor = useMemo((): string => {\n    if (variance === null) return '#6B7280' // Gray for no target\n\n    if (variance >= 0) {\n      // Positive variance - use positive color from palette\n      const positiveIndex = displayConfig.positiveColorIndex ?? 1\n      return colorPalette?.colors?.[positiveIndex] || '#10B981' // Green fallback\n    } else {\n      // Negative variance - use negative color from palette\n      const negativeIndex = displayConfig.negativeColorIndex ?? 7\n      return colorPalette?.colors?.[negativeIndex] || '#EF4444' // Red fallback\n    }\n  }, [variance, displayConfig.positiveColorIndex, displayConfig.negativeColorIndex, colorPalette?.colors])\n\n  // Calculate font size and text width based on container dimensions\n  useEffect(() => {\n    const updateDimensions = () => {\n      if (containerRef.current) {\n        const container = containerRef.current\n        const rect = container.getBoundingClientRect()\n        const containerWidth = rect.width\n        const containerHeight = rect.height\n\n        if (containerWidth > 0 && containerHeight > 0) {\n          // Calculate font size based on container dimensions\n          // For KPI displays, we want the text to be large and prominent\n          // Reserve space for the label by using more conservative sizing\n          const widthBasedSize = containerWidth / 5\n          const heightBasedSize = containerHeight / 4  // More conservative to leave room for label\n          const baseFontSize = Math.min(widthBasedSize, heightBasedSize)\n          const clampedFontSize = Math.max(24, Math.min(baseFontSize, 120)) // Lower max to ensure label fits\n          setFontSize(clampedFontSize)\n\n          // Use a timeout to measure text width after font size is applied\n          setTimeout(() => {\n            if (valueRef.current) {\n              const textRect = valueRef.current.getBoundingClientRect()\n              const measuredWidth = textRect.width\n              // Ensure we have a minimum width and use container width as fallback\n              const effectiveWidth = Math.max(measuredWidth, Math.min(containerWidth * 0.6, 300))\n              setTextWidth(effectiveWidth)\n            }\n          }, 10)\n        }\n      }\n    }\n\n    // Initial calculation - reduce delay for faster initial render\n    const timer = setTimeout(updateDimensions, 50)\n\n    const resizeObserver = new ResizeObserver(() => {\n      // Debounce the resize updates\n      setTimeout(updateDimensions, 10)\n    })\n\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current)\n    }\n\n    return () => {\n      clearTimeout(timer)\n      resizeObserver.disconnect()\n    }\n  }, [data, chartConfig])\n\n  // Early returns AFTER all hooks\n  if (!data || data.length === 0) {\n    return (\n      <div\n        className=\"dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full\"\n        style={{\n          height: height === \"100%\" ? \"100%\" : height,\n          minHeight: height === \"100%\" ? '200px' : undefined\n        }}\n      >\n        <div className=\"dc:text-center text-dc-text-muted\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">{t('chart.runtime.noData')}</div>\n          <div className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.noDataHint.kpi')}</div>\n        </div>\n      </div>\n    )\n  }\n\n  if (valueFields.length === 0) {\n    return (\n      <div\n        className=\"dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full\"\n        style={{\n          height: height === \"100%\" ? \"100%\" : height,\n          minHeight: height === \"100%\" ? '200px' : undefined,\n          backgroundColor: 'var(--dc-danger-bg)',\n          color: 'var(--dc-danger)',\n          borderColor: 'var(--dc-danger-border)'\n        }}\n      >\n        <div className=\"dc:text-center\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">{t('chart.runtime.configError')}</div>\n          <div className=\"dc:text-xs\">{t('chart.runtime.configErrorHint.noMeasures')}</div>\n        </div>\n      </div>\n    )\n  }\n\n  // Null handling: If all values are null, show placeholder instead of error\n  if (values.length === 0) {\n    return (\n      <div\n        ref={containerRef}\n        className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full dc:h-full dc:p-4\"\n        style={{\n          height: height === \"100%\" ? \"100%\" : height,\n          minHeight: height === \"100%\" ? '200px' : undefined\n        }}\n      >\n        {/* Field Label */}\n        <div\n          className=\"text-dc-text-secondary dc:font-bold dc:text-center dc:mb-3\"\n          style={{\n            fontSize: '14px',\n            lineHeight: '1.2'\n          }}\n        >\n          {getFieldLabel(valueField)}\n        </div>\n\n        {/* No Data Placeholder */}\n        <div\n          className=\"dc:font-bold dc:leading-none text-dc-text-muted\"\n          style={{\n            fontSize: `${fontSize}px`\n          }}\n        >\n          —\n        </div>\n\n        <div className=\"dc:text-xs text-dc-text-muted dc:mt-2\">No data</div>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full dc:h-full dc:p-4\"\n      style={{\n        height: height === \"100%\" ? \"100%\" : height,\n        minHeight: height === \"100%\" ? '200px' : undefined\n      }}\n    >\n        {/* Field Label - Bolder and bigger */}\n        <div\n          className=\"text-dc-text-secondary dc:font-bold dc:text-center dc:mb-3 dc:flex dc:items-center dc:justify-center dc:gap-1\"\n          style={{\n            fontSize: '14px',\n            lineHeight: '1.2'\n          }}\n        >\n          <span>\n            {(() => {\n              const label = getFieldLabel(valueField)\n              // Temporary fix: if label seems wrong, use the field name directly\n              const displayLabel = (label && label.length > 1) ? label : valueField\n              return displayLabel\n            })()}\n          </span>\n          {(excludedIncompletePeriod || skippedLastPeriod) && (\n            <span\n              title={skippedLastPeriod\n                ? `Excludes last ${granularity || 'period'}`\n                : `Excludes current incomplete ${granularity}`}\n              className=\"dc:cursor-help\"\n            >\n              <Icon icon={infoCircleIcon} className=\"dc:w-4 dc:h-4 text-dc-text-muted dc:opacity-70\" />\n            </span>\n          )}\n        </div>\n\n        {/* Main KPI Value and Variance - Horizontal layout */}\n        <div className=\"dc:flex dc:items-center dc:justify-center dc:gap-4 dc:mb-3\">\n          <div\n            ref={valueRef}\n            className=\"dc:font-bold dc:leading-none\"\n            style={{\n              fontSize: `${fontSize}px`,\n              color: valueColor\n            }}\n          >\n            {formatNumber(mainValue)}\n          </div>\n\n          {/* Target Variance Display - To the right of main value */}\n          {targetValue !== null && variance !== null && (\n            <div className=\"dc:flex dc:flex-col dc:items-start\">\n              <div\n                className=\"dc:font-semibold\"\n                style={{\n                  fontSize: `${Math.max(12, fontSize * 0.3)}px`,\n                  color: varianceColor,\n                  lineHeight: '1.2'\n                }}\n              >\n                {formatVariance(variance, 1)}\n              </div>\n              <div\n                className=\"text-dc-text-muted dc:text-xs\"\n                style={{\n                  opacity: 0.7,\n                  fontSize: `${Math.max(10, fontSize * 0.2)}px`\n                }}\n              >\n                vs {formatNumber(targetValue)}\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Unit/Suffix - Larger, not bold (hidden when formatValue is provided) */}\n        {displayConfig.suffix && !displayConfig.formatValue && (\n          <div\n            className=\"text-dc-text-muted dc:text-center\"\n            style={{\n              fontSize: '14px',\n              lineHeight: '1.2',\n              opacity: 0.8\n            }}\n          >\n            {displayConfig.suffix}\n          </div>\n        )}\n\n        {/* Data Histogram for multiple values */}\n        {showStats && (\n          <div className=\"dc:mt-4\">\n            <DataHistogram\n              values={values}\n              min={min}\n              max={max}\n              color={valueColor}\n              formatValue={formatNumber}\n              height={24}\n              width={textWidth}\n              targetValue={targetValue || undefined}\n            />\n          </div>\n        )}\n    </div>\n  )\n})\n\nexport default KpiNumber\n"],"mappings":"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"}
+{"version":3,"file":"chart-kpi-number-CuNEYbRx.js","names":[],"sources":["../../../src/client/components/DataHistogram.tsx","../../../src/client/components/charts/KpiNumber.tsx"],"sourcesContent":["\nimport { useTranslation } from '../hooks/useTranslation'\n\ninterface DataHistogramProps {\n  /** Array of numeric values to create histogram from */\n  values: number[]\n  /** Minimum value in the dataset */\n  min: number\n  /** Maximum value in the dataset */\n  max: number\n  /** Color for the histogram bars */\n  color?: string\n  /** Number of buckets/bars to create (default: 12) */\n  bucketCount?: number\n  /** Height of the histogram in pixels (default: 32) */\n  height?: number\n  /** Format function for min/max labels */\n  formatValue?: (value: number) => string\n  /** Width of the histogram to match text above */\n  width?: number\n  /** Whether to show average indicator line (default: true) */\n  showAverageIndicator?: boolean\n  /** Target value to show as green line */\n  targetValue?: number\n}\n\n/**\n * Reusable histogram component that shows the distribution of actual data values\n */\nexport default function DataHistogram({\n  values,\n  min,\n  max,\n  color = '#1f2937',\n  bucketCount = 12,\n  height = 32,\n  formatValue = (val) => val.toString(),\n  width,\n  showAverageIndicator = true,\n  targetValue\n}: DataHistogramProps) {\n  const { t } = useTranslation()\n  // Create histogram buckets from actual data\n  const buckets = new Array(bucketCount).fill(0)\n  const range = max - min\n  \n  // Distribute actual values into buckets\n  values.forEach(value => {\n    if (range === 0) {\n      // All values are the same, put everything in middle bucket\n      buckets[Math.floor(bucketCount / 2)]++\n    } else {\n      // Calculate which bucket this value belongs to\n      let bucketIndex = Math.floor(((value - min) / range) * (bucketCount - 1))\n      // Clamp to valid bucket range\n      bucketIndex = Math.max(0, Math.min(bucketCount - 1, bucketIndex))\n      buckets[bucketIndex]++\n    }\n  })\n  \n  // Find max bucket count for normalization\n  const maxBucketCount = Math.max(...buckets)\n  \n  // Calculate average for indicator positioning\n  const average = values.reduce((sum, val) => sum + val, 0) / values.length\n  \n  // Calculate average position as percentage of histogram width\n  const averagePosition = range === 0 ? 50 : ((average - min) / range) * 100\n  \n  // Calculate target position if target value is provided\n  const targetPosition = targetValue !== undefined && range > 0 \n    ? ((targetValue - min) / range) * 100 \n    : null\n\n  return (\n    <div className=\"dc:flex dc:flex-col dc:items-center\">\n      {/* Horizontal bars representing actual data distribution */}\n      <div \n        className=\"dc:relative dc:flex dc:items-end dc:justify-center dc:space-x-0.5\" \n        style={{ \n          height: `${height}px`,\n          width: width ? `${width}px` : '200px',\n          minWidth: '200px'\n        }}\n      >\n        {buckets.map((count, i) => {\n          // Normalize height based on actual data frequency\n          const normalizedHeight = maxBucketCount > 0 ? count / maxBucketCount : 0\n          const minHeight = 0.1 // minimum height for empty buckets\n          const displayHeight = count > 0 ? Math.max(minHeight, normalizedHeight) : minHeight\n          \n          return (\n            <div\n              key={i}\n              className=\"dc:flex-1 dc:rounded-t-sm dc:transition-all dc:duration-300 dc:ease-out\"\n              style={{\n                height: `${displayHeight * height}px`,\n                backgroundColor: color,\n                opacity: count > 0 ? 0.7 + (normalizedHeight * 0.3) : 0.2 // higher opacity for buckets with data\n              }}\n              title={`${count} values in this range`} // tooltip showing actual count\n            />\n          )\n        })}\n        \n        {/* Average indicator line */}\n        {showAverageIndicator && (\n          <div\n            className=\"dc:absolute dc:top-0 dc:bottom-0 dc:pointer-events-none\"\n            style={{\n              left: `${averagePosition}%`,\n              transform: 'translateX(-50%)',\n              width: '2px',\n              backgroundColor: '#ef4444',\n              opacity: 0.8,\n              zIndex: 10\n            }}\n            title={`Average: ${formatValue(average)}`}\n          >\n            {/* Small triangle at top to indicate average */}\n            <div\n              className=\"dc:absolute dc:-top-1\"\n              style={{\n                left: '50%',\n                transform: 'translateX(-50%)',\n                width: '0',\n                height: '0',\n                borderLeft: '4px solid transparent',\n                borderRight: '4px solid transparent',\n                borderTop: '6px solid #ef4444'\n              }}\n            />\n          </div>\n        )}\n        \n        {/* Target indicator line */}\n        {targetPosition !== null && targetValue !== undefined && (\n          <div\n            className=\"dc:absolute dc:top-0 dc:bottom-0 dc:pointer-events-none\"\n            style={{\n              left: `${Math.max(0, Math.min(100, targetPosition))}%`,\n              transform: 'translateX(-50%)',\n              width: '2px',\n              backgroundColor: '#10b981',\n              opacity: 0.8,\n              zIndex: 11\n            }}\n            title={`Target: ${formatValue(targetValue)}`}\n          >\n            {/* Small triangle at top to indicate target */}\n            <div\n              className=\"dc:absolute dc:-top-1\"\n              style={{\n                left: '50%',\n                transform: 'translateX(-50%)',\n                width: '0',\n                height: '0',\n                borderLeft: '4px solid transparent',\n                borderRight: '4px solid transparent',\n                borderTop: '6px solid #10b981'\n              }}\n            />\n          </div>\n        )}\n      </div>\n      \n      {/* Min/Max values aligned with histogram width */}\n      <div\n        className=\"dc:flex dc:justify-between dc:mt-2 dc:text-xs text-dc-text-muted\"\n        style={{\n          width: width ? `${width}px` : '200px',\n          minWidth: '200px'\n        }}\n      >\n        <span>{formatValue(min)}</span>\n        <span>{formatValue(max)}</span>\n      </div>\n\n      {/* Average indicator */}\n      <div className=\"dc:text-center dc:mt-1 dc:text-xs text-dc-text-muted\">\n        {t('dataHistogram.average', { count: values.length })}\n      </div>\n    </div>\n  )\n}\n","import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { Icon } from '@iconify/react'\nimport infoCircleIcon from '@iconify-icons/tabler/info-circle'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel'\nimport DataHistogram from '../DataHistogram'\nimport { parseTargetValues, calculateVariance, formatVariance } from '../../utils/targetUtils'\nimport { filterIncompletePeriod } from '../../utils/periodUtils'\nimport type { ChartProps } from '../../types'\n\nconst KpiNumber = React.memo(function KpiNumber({\n  data,\n  chartConfig,\n  displayConfig = {},\n  queryObject,\n  height = \"100%\",\n  colorPalette\n}: ChartProps) {\n  const { t } = useTranslation()\n  const [fontSize, setFontSize] = useState(32)\n  const [textWidth, setTextWidth] = useState(250)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const valueRef = useRef<HTMLDivElement>(null)\n\n  // Use specialized hook to avoid re-renders from unrelated context changes\n  const getFieldLabel = useCubeFieldLabel()\n\n  // Extract value field from chart config - handle both string and array formats\n  const valueFields = useMemo(() => {\n    if (!chartConfig?.yAxis) return []\n    if (typeof chartConfig.yAxis === 'string') return [chartConfig.yAxis]\n    if (Array.isArray(chartConfig.yAxis)) return chartConfig.yAxis\n    return []\n  }, [chartConfig?.yAxis])\n\n  const valueField = valueFields[0] || '' // Use first measure field\n\n  // Get time dimension field if present (for incomplete period filtering)\n  const timeDimensionField = queryObject?.timeDimensions?.[0]?.dimension || undefined\n\n  // Memoize sorted data to prevent recalculation on every render\n  const sortedData = useMemo(() => {\n    if (!data || data.length === 0) return []\n    let sorted = [...data]\n    if (timeDimensionField) {\n      sorted = sorted.sort((a, b) => {\n        const aVal = a[timeDimensionField]\n        const bVal = b[timeDimensionField]\n        if (aVal < bVal) return -1\n        if (aVal > bVal) return 1\n        return 0\n      })\n    }\n    return sorted\n  }, [data, timeDimensionField])\n\n  // Filter out incomplete or last period if enabled\n  const { useLastCompletePeriod = true, skipLastPeriod = false } = displayConfig\n\n  // Memoize filtered data\n  const {\n    filteredData,\n    excludedIncompletePeriod,\n    skippedLastPeriod,\n    granularity\n  } = useMemo(() => {\n    if (sortedData.length === 0) {\n      return { filteredData: [], excludedIncompletePeriod: false, skippedLastPeriod: false, granularity: undefined }\n    }\n    return filterIncompletePeriod(sortedData, timeDimensionField, queryObject, useLastCompletePeriod, skipLastPeriod)\n  }, [sortedData, timeDimensionField, queryObject, useLastCompletePeriod, skipLastPeriod])\n\n  // Use filtered data for calculations\n  const dataToUse = filteredData\n\n  // Memoize value extraction to prevent recalculation\n  const values = useMemo(() => {\n    if (!valueField || dataToUse.length === 0) return []\n\n    const rawValues = dataToUse.map(row => {\n      // Try direct field access first\n      if (row[valueField] !== undefined) {\n        return row[valueField]\n      }\n\n      // If not found, try finding the first numeric field as fallback\n      const numericFields = Object.keys(row).filter(key =>\n        typeof row[key] === 'number' && !isNaN(row[key])\n      )\n\n      if (numericFields.length > 0) {\n        return row[numericFields[0]]\n      }\n\n      return undefined\n    })\n\n    return rawValues\n      .filter(val => val !== null && val !== undefined && !isNaN(Number(val)))\n      .map(val => Number(val))\n  }, [dataToUse, valueField])\n\n  // Memoize statistics calculations\n  const { avg, min, max } = useMemo(() => {\n    if (values.length === 0) return { avg: 0, min: 0, max: 0 }\n    const sum = values.reduce((acc, val) => acc + val, 0)\n    const avg = sum / values.length\n    const min = Math.min(...values)\n    const max = Math.max(...values)\n    return { avg, min, max }\n  }, [values])\n\n  // Memoize format function to prevent re-creating on every render\n  const formatNumber = useCallback((value: number | null | undefined): string => {\n    // If custom formatValue is provided, use it exclusively\n    if (displayConfig.formatValue) {\n      return displayConfig.formatValue(value)\n    }\n\n    // Null handling: Show placeholder for missing data\n    if (value === null || value === undefined) {\n      return '—'\n    }\n\n    const decimals = displayConfig.decimals ?? 0\n    const prefix = displayConfig.prefix ?? ''\n\n    let formattedValue: string\n\n    if (Math.abs(value) >= 1e9) {\n      formattedValue = (value / 1e9).toFixed(decimals) + 'B'\n    } else if (Math.abs(value) >= 1e6) {\n      formattedValue = (value / 1e6).toFixed(decimals) + 'M'\n    } else if (Math.abs(value) >= 1e3) {\n      formattedValue = (value / 1e3).toFixed(decimals) + 'K'\n    } else {\n      formattedValue = value.toFixed(decimals)\n    }\n\n    return prefix + formattedValue\n  }, [displayConfig])\n\n  const mainValue = values.length === 1 ? values[0] : avg\n  const showStats = values.length > 1\n\n  // Memoize color calculation to prevent re-creating function on every render\n  const valueColor = useMemo((): string => {\n    if (displayConfig.valueColorIndex !== undefined && colorPalette?.colors) {\n      const colorIndex = displayConfig.valueColorIndex\n      if (colorIndex >= 0 && colorIndex < colorPalette.colors.length) {\n        return colorPalette.colors[colorIndex]\n      }\n    }\n    // Default to first color in palette if available, otherwise fallback to dark gray\n    return colorPalette?.colors?.[0] || '#1f2937'\n  }, [displayConfig.valueColorIndex, colorPalette?.colors])\n\n  // Process target values for variance calculation\n  const targetValues = useMemo(() => parseTargetValues(displayConfig?.target || ''), [displayConfig?.target])\n  const targetValue = targetValues.length > 0 ? targetValues[0] : null // Use first target value\n  const variance = targetValue !== null && values.length > 0 ? calculateVariance(mainValue, targetValue) : null\n\n  // Memoize variance color calculation\n  const varianceColor = useMemo((): string => {\n    if (variance === null) return '#6B7280' // Gray for no target\n\n    if (variance >= 0) {\n      // Positive variance - use positive color from palette\n      const positiveIndex = displayConfig.positiveColorIndex ?? 1\n      return colorPalette?.colors?.[positiveIndex] || '#10B981' // Green fallback\n    } else {\n      // Negative variance - use negative color from palette\n      const negativeIndex = displayConfig.negativeColorIndex ?? 7\n      return colorPalette?.colors?.[negativeIndex] || '#EF4444' // Red fallback\n    }\n  }, [variance, displayConfig.positiveColorIndex, displayConfig.negativeColorIndex, colorPalette?.colors])\n\n  // Calculate font size and text width based on container dimensions\n  useEffect(() => {\n    const updateDimensions = () => {\n      if (containerRef.current) {\n        const container = containerRef.current\n        const rect = container.getBoundingClientRect()\n        const containerWidth = rect.width\n        const containerHeight = rect.height\n\n        if (containerWidth > 0 && containerHeight > 0) {\n          // Calculate font size based on container dimensions\n          // For KPI displays, we want the text to be large and prominent\n          // Reserve space for the label by using more conservative sizing\n          const widthBasedSize = containerWidth / 5\n          const heightBasedSize = containerHeight / 4  // More conservative to leave room for label\n          const baseFontSize = Math.min(widthBasedSize, heightBasedSize)\n          const clampedFontSize = Math.max(24, Math.min(baseFontSize, 120)) // Lower max to ensure label fits\n          setFontSize(clampedFontSize)\n\n          // Use a timeout to measure text width after font size is applied\n          setTimeout(() => {\n            if (valueRef.current) {\n              const textRect = valueRef.current.getBoundingClientRect()\n              const measuredWidth = textRect.width\n              // Ensure we have a minimum width and use container width as fallback\n              const effectiveWidth = Math.max(measuredWidth, Math.min(containerWidth * 0.6, 300))\n              setTextWidth(effectiveWidth)\n            }\n          }, 10)\n        }\n      }\n    }\n\n    // Initial calculation - reduce delay for faster initial render\n    const timer = setTimeout(updateDimensions, 50)\n\n    const resizeObserver = new ResizeObserver(() => {\n      // Debounce the resize updates\n      setTimeout(updateDimensions, 10)\n    })\n\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current)\n    }\n\n    return () => {\n      clearTimeout(timer)\n      resizeObserver.disconnect()\n    }\n  }, [data, chartConfig])\n\n  // Early returns AFTER all hooks\n  if (!data || data.length === 0) {\n    return (\n      <div\n        className=\"dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full\"\n        style={{\n          height: height === \"100%\" ? \"100%\" : height,\n          minHeight: height === \"100%\" ? '200px' : undefined\n        }}\n      >\n        <div className=\"dc:text-center text-dc-text-muted\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">{t('chart.runtime.noData')}</div>\n          <div className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.noDataHint.kpi')}</div>\n        </div>\n      </div>\n    )\n  }\n\n  if (valueFields.length === 0) {\n    return (\n      <div\n        className=\"dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full\"\n        style={{\n          height: height === \"100%\" ? \"100%\" : height,\n          minHeight: height === \"100%\" ? '200px' : undefined,\n          backgroundColor: 'var(--dc-danger-bg)',\n          color: 'var(--dc-danger)',\n          borderColor: 'var(--dc-danger-border)'\n        }}\n      >\n        <div className=\"dc:text-center\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">{t('chart.runtime.configError')}</div>\n          <div className=\"dc:text-xs\">{t('chart.runtime.configErrorHint.noMeasures')}</div>\n        </div>\n      </div>\n    )\n  }\n\n  // Null handling: If all values are null, show placeholder instead of error\n  if (values.length === 0) {\n    return (\n      <div\n        ref={containerRef}\n        className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full dc:h-full dc:p-4\"\n        style={{\n          height: height === \"100%\" ? \"100%\" : height,\n          minHeight: height === \"100%\" ? '200px' : undefined\n        }}\n      >\n        {/* Field Label */}\n        <div\n          className=\"text-dc-text-secondary dc:font-bold dc:text-center dc:mb-3\"\n          style={{\n            fontSize: '14px',\n            lineHeight: '1.2'\n          }}\n        >\n          {getFieldLabel(valueField)}\n        </div>\n\n        {/* No Data Placeholder */}\n        <div\n          className=\"dc:font-bold dc:leading-none text-dc-text-muted\"\n          style={{\n            fontSize: `${fontSize}px`\n          }}\n        >\n          —\n        </div>\n\n        <div className=\"dc:text-xs text-dc-text-muted dc:mt-2\">No data</div>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full dc:h-full dc:p-4\"\n      style={{\n        height: height === \"100%\" ? \"100%\" : height,\n        minHeight: height === \"100%\" ? '200px' : undefined\n      }}\n    >\n        {/* Field Label - Bolder and bigger */}\n        <div\n          className=\"text-dc-text-secondary dc:font-bold dc:text-center dc:mb-3 dc:flex dc:items-center dc:justify-center dc:gap-1\"\n          style={{\n            fontSize: '14px',\n            lineHeight: '1.2'\n          }}\n        >\n          <span>\n            {(() => {\n              const label = getFieldLabel(valueField)\n              // Temporary fix: if label seems wrong, use the field name directly\n              const displayLabel = (label && label.length > 1) ? label : valueField\n              return displayLabel\n            })()}\n          </span>\n          {(excludedIncompletePeriod || skippedLastPeriod) && (\n            <span\n              title={skippedLastPeriod\n                ? `Excludes last ${granularity || 'period'}`\n                : `Excludes current incomplete ${granularity}`}\n              className=\"dc:cursor-help\"\n            >\n              <Icon icon={infoCircleIcon} className=\"dc:w-4 dc:h-4 text-dc-text-muted dc:opacity-70\" />\n            </span>\n          )}\n        </div>\n\n        {/* Main KPI Value and Variance - Horizontal layout */}\n        <div className=\"dc:flex dc:items-center dc:justify-center dc:gap-4 dc:mb-3\">\n          <div\n            ref={valueRef}\n            className=\"dc:font-bold dc:leading-none\"\n            style={{\n              fontSize: `${fontSize}px`,\n              color: valueColor\n            }}\n          >\n            {formatNumber(mainValue)}\n          </div>\n\n          {/* Target Variance Display - To the right of main value */}\n          {targetValue !== null && variance !== null && (\n            <div className=\"dc:flex dc:flex-col dc:items-start\">\n              <div\n                className=\"dc:font-semibold\"\n                style={{\n                  fontSize: `${Math.max(12, fontSize * 0.3)}px`,\n                  color: varianceColor,\n                  lineHeight: '1.2'\n                }}\n              >\n                {formatVariance(variance, 1)}\n              </div>\n              <div\n                className=\"text-dc-text-muted dc:text-xs\"\n                style={{\n                  opacity: 0.7,\n                  fontSize: `${Math.max(10, fontSize * 0.2)}px`\n                }}\n              >\n                vs {formatNumber(targetValue)}\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Unit/Suffix - Larger, not bold (hidden when formatValue is provided) */}\n        {displayConfig.suffix && !displayConfig.formatValue && (\n          <div\n            className=\"text-dc-text-muted dc:text-center\"\n            style={{\n              fontSize: '14px',\n              lineHeight: '1.2',\n              opacity: 0.8\n            }}\n          >\n            {displayConfig.suffix}\n          </div>\n        )}\n\n        {/* Data Histogram for multiple values */}\n        {showStats && (\n          <div className=\"dc:mt-4\">\n            <DataHistogram\n              values={values}\n              min={min}\n              max={max}\n              color={valueColor}\n              formatValue={formatNumber}\n              height={24}\n              width={textWidth}\n              targetValue={targetValue || undefined}\n            />\n          </div>\n        )}\n    </div>\n  )\n})\n\nexport default KpiNumber\n"],"mappings":"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"}

package/dist/client/chunks/{chart-kpi-text-D0plngLV.js → chart-kpi-text-u8FJaZDQ.js}

@@ -1,11 +1,12 @@
-import { _ as e, k as t } from "./chart-activity-grid-VFFm85hC.js";
-import { n } from "./chart-kpi-number-BrXw7m-S.js";
-import r, { useEffect as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { n as e } from "./rolldown-runtime-CKnJJeip.js";
+import { _ as t, k as n } from "./chart-activity-grid-Bdb8U_NC.js";
+import { n as r } from "./chart-kpi-number-CuNEYbRx.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/components/charts/KpiText.tsx
-var l = r.memo(function({ data: r, chartConfig: l, displayConfig: u = {}, height: d = "100%", colorPalette: f }) {
-	let { t: p } = t(), [m, h] = o(28), [g, _] = o(0), v = a(null), y = a(null), b = e();
-	if (i(() => {
+var u = /* @__PURE__ */ e({ default: () => d }), d = i.memo(function({ data: e, chartConfig: i, displayConfig: u = {}, height: d = "100%", colorPalette: f }) {
+	let { t: p } = n(), [m, h] = s(28), [g, _] = s(0), v = o(null), y = o(null), b = t();
+	if (a(() => {
 		let e = () => {
 			if (v.current) {
 				let e = v.current.getBoundingClientRect(), t = e.width, n = e.height;
@@ -21,25 +22,25 @@ var l = r.memo(function({ data: r, chartConfig: l, displayConfig: u = {}, height
 		return v.current && n.observe(v.current), () => {
 			clearTimeout(t), n.disconnect();
 		};
-	}, [r, l]), !r || r.length === 0) return /* @__PURE__ */ s("div", {
+	}, [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: d === "100%" ? "100%" : d,
 			minHeight: d === "100%" ? "200px" : void 0
 		},
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ l("div", {
 			className: "dc:text-center text-dc-text-muted",
-			children: [/* @__PURE__ */ s("div", {
+			children: [/* @__PURE__ */ c("div", {
 				className: "dc:text-sm dc:font-semibold dc:mb-1",
 				children: p("chart.runtime.noData")
-			}), /* @__PURE__ */ s("div", {
+			}), /* @__PURE__ */ c("div", {
 				className: "dc:text-xs text-dc-text-secondary",
 				children: p("chart.runtime.noDataHint.kpi")
 			})]
 		})
 	});
 	let x = [];
-	if (l?.yAxis && (typeof l.yAxis == "string" ? x = [l.yAxis] : Array.isArray(l.yAxis) && (x = l.yAxis)), x.length === 0) return /* @__PURE__ */ s("div", {
+	if (i?.yAxis && (typeof i.yAxis == "string" ? x = [i.yAxis] : Array.isArray(i.yAxis) && (x = i.yAxis)), x.length === 0) return /* @__PURE__ */ c("div", {
 		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
 		style: {
 			height: d === "100%" ? "100%" : d,
@@ -48,23 +49,23 @@ var l = r.memo(function({ data: r, chartConfig: l, displayConfig: u = {}, height
 			color: "var(--dc-danger)",
 			borderColor: "var(--dc-danger-border)"
 		},
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ l("div", {
 			className: "dc:text-center",
-			children: [/* @__PURE__ */ s("div", {
+			children: [/* @__PURE__ */ c("div", {
 				className: "dc:text-sm dc:font-semibold dc:mb-1",
 				children: p("chart.runtime.configError")
-			}), /* @__PURE__ */ s("div", {
+			}), /* @__PURE__ */ c("div", {
 				className: "dc:text-xs",
 				children: p("chart.runtime.configErrorHint.noMeasures")
 			})]
 		})
 	});
-	let S = x[0], C = r.map((e) => {
+	let S = x[0], C = e.map((e) => {
 		if (e[S] !== void 0) return e[S];
 		let t = Object.keys(e);
 		if (t.length > 0) return e[t[0]];
 	}).filter((e) => e != null);
-	if (C.length === 0) return /* @__PURE__ */ s("div", {
+	if (C.length === 0) return /* @__PURE__ */ c("div", {
 		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
 		style: {
 			height: d === "100%" ? "100%" : d,
@@ -73,12 +74,12 @@ var l = r.memo(function({ data: r, chartConfig: l, displayConfig: u = {}, height
 			color: "var(--dc-warning)",
 			borderColor: "var(--dc-warning-border)"
 		},
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ l("div", {
 			className: "dc:text-center",
-			children: [/* @__PURE__ */ s("div", {
+			children: [/* @__PURE__ */ c("div", {
 				className: "dc:text-sm dc:font-semibold dc:mb-1",
 				children: p("chart.runtime.noValidData")
-			}), /* @__PURE__ */ s("div", {
+			}), /* @__PURE__ */ c("div", {
 				className: "dc:text-xs",
 				children: p("chart.runtime.noValidDataHint.kpiText")
 			})]
@@ -113,14 +114,14 @@ var l = r.memo(function({ data: r, chartConfig: l, displayConfig: u = {}, height
 		}
 		return f?.colors?.[0] || "#1f2937";
 	})();
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ l("div", {
 		ref: v,
 		className: "dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full dc:h-full dc:p-4",
 		style: {
 			height: d === "100%" ? "100%" : d,
 			minHeight: d === "100%" ? "200px" : void 0
 		},
-		children: [/* @__PURE__ */ s("div", {
+		children: [/* @__PURE__ */ c("div", {
 			ref: y,
 			className: "dc:font-bold dc:leading-tight dc:text-center",
 			style: {
@@ -128,9 +129,9 @@ var l = r.memo(function({ data: r, chartConfig: l, displayConfig: u = {}, height
 				color: j
 			},
 			children: A
-		}), O && E !== null && D !== null && /* @__PURE__ */ s("div", {
+		}), O && E !== null && D !== null && /* @__PURE__ */ c("div", {
 			className: "dc:mt-4",
-			children: /* @__PURE__ */ s(n, {
+			children: /* @__PURE__ */ c(r, {
 				values: C,
 				min: E,
 				max: D,
@@ -143,6 +144,6 @@ var l = r.memo(function({ data: r, chartConfig: l, displayConfig: u = {}, height
 	});
 });
 //#endregion
-export { l as t };
+export { u as t };
 
-//# sourceMappingURL=chart-kpi-text-D0plngLV.js.map
+//# sourceMappingURL=chart-kpi-text-u8FJaZDQ.js.map