drizzle-cube 0.4.42 → 0.4.43

package/dist/client/chunks/{chart-kpi-number-BUNKM7yg.js → chart-kpi-number-CsQgV_x3.js}

@@ -1,12 +1,11 @@
-import { n as e } from "./rolldown-runtime-lc2dmIiU.js";
-import { B as t, z as n } from "./chart-data-table-BZ7StNWv.js";
-import { _ as r } from "./chart-activity-grid-wR2Twpo7.js";
-import { a as i, i as a, r as o } from "./chart-area-e9ysnatQ.js";
-import { n as s } from "./chart-kpi-delta-C2tdpWki.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 { B as e, z as t } from "./chart-data-table-2iCsn0CF.js";
+import { _ as n } from "./chart-activity-grid-DLktOINm.js";
+import { a as r, i, r as a } from "./chart-area-BwYaflNk.js";
+import { n as o } from "./chart-kpi-delta-KQjUIeal.js";
+import s, { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/client/components/DataHistogram.tsx
-function g({ values: e, min: t, max: n, color: r = "#1f2937", bucketCount: i = 12, height: a = 32, formatValue: o = (e) => e.toString(), width: s, showAverageIndicator: c = !0, targetValue: l }) {
+function h({ values: e, min: t, max: n, color: r = "#1f2937", bucketCount: i = 12, height: a = 32, formatValue: o = (e) => e.toString(), width: s, showAverageIndicator: c = !0, targetValue: l }) {
 	let u = Array(i).fill(0), d = n - t;
 	e.forEach((e) => {
 		if (d === 0) u[Math.floor(i / 2)]++;
@@ -15,11 +14,11 @@ function g({ values: e, min: t, max: n, color: r = "#1f2937", bucketCount: i = 1
 			n = Math.max(0, Math.min(i - 1, n)), u[n]++;
 		}
 	});
-	let f = Math.max(...u), p = e.reduce((e, t) => e + t, 0) / e.length, g = d === 0 ? 50 : (p - t) / d * 100, _ = l !== void 0 && d > 0 ? (l - t) / d * 100 : null;
-	return /* @__PURE__ */ h("div", {
+	let f = Math.max(...u), h = e.reduce((e, t) => e + t, 0) / e.length, g = d === 0 ? 50 : (h - t) / d * 100, _ = l !== void 0 && d > 0 ? (l - t) / d * 100 : null;
+	return /* @__PURE__ */ m("div", {
 		className: "dc:flex dc:flex-col dc:items-center",
 		children: [
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ m("div", {
 				className: "dc:relative dc:flex dc:items-end dc:justify-center dc:space-x-0.5",
 				style: {
 					height: `${a}px`,
@@ -29,7 +28,7 @@ function g({ values: e, min: t, max: n, color: r = "#1f2937", bucketCount: i = 1
 				children: [
 					u.map((e, t) => {
 						let n = f > 0 ? e / f : 0, i = .1;
-						return /* @__PURE__ */ m("div", {
+						return /* @__PURE__ */ p("div", {
 							className: "dc:flex-1 dc:rounded-t-sm dc:transition-all dc:duration-300 dc:ease-out",
 							style: {
 								height: `${(e > 0 ? Math.max(i, n) : i) * a}px`,
@@ -39,7 +38,7 @@ function g({ values: e, min: t, max: n, color: r = "#1f2937", bucketCount: i = 1
 							title: `${e} values in this range`
 						}, t);
 					}),
-					c && /* @__PURE__ */ m("div", {
+					c && /* @__PURE__ */ p("div", {
 						className: "dc:absolute dc:top-0 dc:bottom-0 dc:pointer-events-none",
 						style: {
 							left: `${g}%`,
@@ -49,8 +48,8 @@ function g({ values: e, min: t, max: n, color: r = "#1f2937", bucketCount: i = 1
 							opacity: .8,
 							zIndex: 10
 						},
-						title: `Average: ${o(p)}`,
-						children: /* @__PURE__ */ m("div", {
+						title: `Average: ${o(h)}`,
+						children: /* @__PURE__ */ p("div", {
 							className: "dc:absolute dc:-top-1",
 							style: {
 								left: "50%",
@@ -63,7 +62,7 @@ function g({ values: e, min: t, max: n, color: r = "#1f2937", bucketCount: i = 1
 							}
 						})
 					}),
-					_ !== null && l !== void 0 && /* @__PURE__ */ m("div", {
+					_ !== null && l !== void 0 && /* @__PURE__ */ p("div", {
 						className: "dc:absolute dc:top-0 dc:bottom-0 dc:pointer-events-none",
 						style: {
 							left: `${Math.max(0, Math.min(100, _))}%`,
@@ -74,7 +73,7 @@ function g({ values: e, min: t, max: n, color: r = "#1f2937", bucketCount: i = 1
 							zIndex: 11
 						},
 						title: `Target: ${o(l)}`,
-						children: /* @__PURE__ */ m("div", {
+						children: /* @__PURE__ */ p("div", {
 							className: "dc:absolute dc:-top-1",
 							style: {
 								left: "50%",
@@ -89,15 +88,15 @@ function g({ values: e, min: t, max: n, color: r = "#1f2937", bucketCount: i = 1
 					})
 				]
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ m("div", {
 				className: "dc:flex dc:justify-between dc:mt-2 dc:text-xs text-dc-text-muted",
 				style: {
 					width: s ? `${s}px` : "200px",
 					minWidth: "200px"
 				},
-				children: [/* @__PURE__ */ m("span", { children: o(t) }), /* @__PURE__ */ m("span", { children: o(n) })]
+				children: [/* @__PURE__ */ p("span", { children: o(t) }), /* @__PURE__ */ p("span", { children: o(n) })]
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ m("div", {
 				className: "dc:text-center dc:mt-1 dc:text-xs text-dc-text-muted",
 				children: [
 					"Average of ",
@@ -110,30 +109,30 @@ function g({ values: e, min: t, max: n, color: r = "#1f2937", bucketCount: i = 1
 }
 //#endregion
 //#region src/client/components/charts/KpiNumber.tsx
-var _ = /* @__PURE__ */ e({ default: () => v }), v = c.memo(function({ data: e, chartConfig: c, displayConfig: _ = {}, queryObject: v, height: y = "100%", colorPalette: b }) {
-	let [x, S] = p(32), [C, w] = p(250), T = f(null), E = f(null), D = r(), O = d(() => c?.yAxis ? typeof c.yAxis == "string" ? [c.yAxis] : Array.isArray(c.yAxis) ? c.yAxis : [] : [], [c?.yAxis]), k = O[0] || "", A = v?.timeDimensions?.[0]?.dimension || void 0, j = d(() => {
-		if (!e || e.length === 0) return [];
-		let t = [...e];
-		return A && (t = t.sort((e, t) => {
+var g = s.memo(function({ data: s, chartConfig: g, displayConfig: _ = {}, queryObject: v, height: y = "100%", colorPalette: b }) {
+	let [x, S] = f(32), [C, w] = f(250), T = d(null), E = d(null), D = n(), O = u(() => g?.yAxis ? typeof g.yAxis == "string" ? [g.yAxis] : Array.isArray(g.yAxis) ? g.yAxis : [] : [], [g?.yAxis]), k = O[0] || "", A = v?.timeDimensions?.[0]?.dimension || void 0, j = u(() => {
+		if (!s || s.length === 0) return [];
+		let e = [...s];
+		return A && (e = e.sort((e, t) => {
 			let n = e[A], r = t[A];
 			return n < r ? -1 : n > r ? 1 : 0;
-		})), t;
-	}, [e, A]), { useLastCompletePeriod: M = !0, skipLastPeriod: N = !1 } = _, { filteredData: P, excludedIncompletePeriod: F, skippedLastPeriod: I, granularity: L } = d(() => j.length === 0 ? {
+		})), e;
+	}, [s, A]), { useLastCompletePeriod: M = !0, skipLastPeriod: N = !1 } = _, { filteredData: P, excludedIncompletePeriod: F, skippedLastPeriod: I, granularity: L } = u(() => j.length === 0 ? {
 		filteredData: [],
 		excludedIncompletePeriod: !1,
 		skippedLastPeriod: !1,
 		granularity: void 0
-	} : s(j, A, v, M, N), [
+	} : o(j, A, v, M, N), [
 		j,
 		A,
 		v,
 		M,
 		N
-	]), R = P, z = d(() => !k || R.length === 0 ? [] : R.map((e) => {
+	]), R = P, z = u(() => !k || R.length === 0 ? [] : R.map((e) => {
 		if (e[k] !== void 0) return e[k];
 		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)), [R, k]), { avg: B, min: V, max: H } = d(() => z.length === 0 ? {
+	}).filter((e) => e != null && !isNaN(Number(e))).map((e) => Number(e)), [R, k]), { avg: B, min: V, max: H } = u(() => z.length === 0 ? {
 		avg: 0,
 		min: 0,
 		max: 0
@@ -141,24 +140,24 @@ var _ = /* @__PURE__ */ e({ default: () => v }), v = c.memo(function({ data: e,
 		avg: z.reduce((e, t) => e + t, 0) / z.length,
 		min: Math.min(...z),
 		max: Math.max(...z)
-	}, [z]), U = l((e) => {
+	}, [z]), U = c((e) => {
 		if (_.formatValue) return _.formatValue(e);
 		if (e == null) return "—";
 		let t = _.decimals ?? 0, n = _.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;
-	}, [_]), W = z.length === 1 ? z[0] : B, G = z.length > 1, K = d(() => {
+	}, [_]), W = z.length === 1 ? z[0] : B, G = z.length > 1, K = u(() => {
 		if (_.valueColorIndex !== void 0 && b?.colors) {
 			let e = _.valueColorIndex;
 			if (e >= 0 && e < b.colors.length) return b.colors[e];
 		}
 		return b?.colors?.[0] || "#1f2937";
-	}, [_.valueColorIndex, b?.colors]), q = d(() => i(_?.target || ""), [_?.target]), J = q.length > 0 ? q[0] : null, Y = J !== null && z.length > 0 ? o(W, J) : null, X = d(() => Y === null ? "#6B7280" : Y >= 0 ? b?.colors?.[_.positiveColorIndex ?? 1] || "#10B981" : b?.colors?.[_.negativeColorIndex ?? 7] || "#EF4444", [
+	}, [_.valueColorIndex, b?.colors]), q = u(() => r(_?.target || ""), [_?.target]), J = q.length > 0 ? q[0] : null, Y = J !== null && z.length > 0 ? a(W, J) : null, X = u(() => Y === null ? "#6B7280" : Y >= 0 ? b?.colors?.[_.positiveColorIndex ?? 1] || "#10B981" : b?.colors?.[_.negativeColorIndex ?? 7] || "#EF4444", [
 		Y,
 		_.positiveColorIndex,
 		_.negativeColorIndex,
 		b?.colors
 	]);
-	return u(() => {
+	return l(() => {
 		let e = () => {
 			if (T.current) {
 				let e = T.current.getBoundingClientRect(), t = e.width, n = e.height;
@@ -178,23 +177,23 @@ var _ = /* @__PURE__ */ e({ default: () => v }), v = c.memo(function({ data: e,
 		return T.current && n.observe(T.current), () => {
 			clearTimeout(t), n.disconnect();
 		};
-	}, [e, c]), !e || e.length === 0 ? /* @__PURE__ */ m("div", {
+	}, [s, g]), !s || s.length === 0 ? /* @__PURE__ */ p("div", {
 		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
 		style: {
 			height: y === "100%" ? "100%" : y,
 			minHeight: y === "100%" ? "200px" : void 0
 		},
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ m("div", {
 			className: "dc:text-center text-dc-text-muted",
-			children: [/* @__PURE__ */ m("div", {
+			children: [/* @__PURE__ */ p("div", {
 				className: "dc:text-sm dc:font-semibold dc:mb-1",
 				children: "No data available"
-			}), /* @__PURE__ */ m("div", {
+			}), /* @__PURE__ */ p("div", {
 				className: "dc:text-xs text-dc-text-secondary",
 				children: "No data points to display"
 			})]
 		})
-	}) : O.length === 0 ? /* @__PURE__ */ m("div", {
+	}) : O.length === 0 ? /* @__PURE__ */ p("div", {
 		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
 		style: {
 			height: y === "100%" ? "100%" : y,
@@ -203,17 +202,17 @@ var _ = /* @__PURE__ */ e({ default: () => v }), v = c.memo(function({ data: e,
 			color: "var(--dc-danger)",
 			borderColor: "var(--dc-danger-border)"
 		},
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ m("div", {
 			className: "dc:text-center",
-			children: [/* @__PURE__ */ m("div", {
+			children: [/* @__PURE__ */ p("div", {
 				className: "dc:text-sm dc:font-semibold dc:mb-1",
 				children: "Configuration Error"
-			}), /* @__PURE__ */ m("div", {
+			}), /* @__PURE__ */ p("div", {
 				className: "dc:text-xs",
 				children: "No measure fields configured"
 			})]
 		})
-	}) : z.length === 0 ? /* @__PURE__ */ h("div", {
+	}) : z.length === 0 ? /* @__PURE__ */ m("div", {
 		ref: T,
 		className: "dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full dc:h-full dc:p-4",
 		style: {
@@ -221,7 +220,7 @@ var _ = /* @__PURE__ */ e({ default: () => v }), v = c.memo(function({ data: e,
 			minHeight: y === "100%" ? "200px" : void 0
 		},
 		children: [
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ p("div", {
 				className: "text-dc-text-secondary dc:font-bold dc:text-center dc:mb-3",
 				style: {
 					fontSize: "14px",
@@ -229,17 +228,17 @@ var _ = /* @__PURE__ */ e({ default: () => v }), v = c.memo(function({ data: e,
 				},
 				children: D(k)
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ p("div", {
 				className: "dc:font-bold dc:leading-none text-dc-text-muted",
 				style: { fontSize: `${x}px` },
 				children: "—"
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ p("div", {
 				className: "dc:text-xs text-dc-text-muted dc:mt-2",
 				children: "No data"
 			})
 		]
-	}) : /* @__PURE__ */ h("div", {
+	}) : /* @__PURE__ */ m("div", {
 		ref: T,
 		className: "dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full dc:h-full dc:p-4",
 		style: {
@@ -247,27 +246,27 @@ var _ = /* @__PURE__ */ e({ default: () => v }), v = c.memo(function({ data: e,
 			minHeight: y === "100%" ? "200px" : void 0
 		},
 		children: [
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ m("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__ */ p("span", { children: (() => {
 					let e = D(k);
 					return e && e.length > 1 ? e : k;
-				})() }), (F || I) && /* @__PURE__ */ m("span", {
+				})() }), (F || I) && /* @__PURE__ */ p("span", {
 					title: I ? `Excludes last ${L || "period"}` : `Excludes current incomplete ${L}`,
 					className: "dc:cursor-help",
-					children: /* @__PURE__ */ m(t, {
-						icon: n,
+					children: /* @__PURE__ */ p(e, {
+						icon: t,
 						className: "dc:w-4 dc:h-4 text-dc-text-muted dc:opacity-70"
 					})
 				})]
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ m("div", {
 				className: "dc:flex dc:items-center dc:justify-center dc:gap-4 dc:mb-3",
-				children: [/* @__PURE__ */ m("div", {
+				children: [/* @__PURE__ */ p("div", {
 					ref: E,
 					className: "dc:font-bold dc:leading-none",
 					style: {
@@ -275,17 +274,17 @@ var _ = /* @__PURE__ */ e({ default: () => v }), v = c.memo(function({ data: e,
 						color: K
 					},
 					children: U(W)
-				}), J !== null && Y !== null && /* @__PURE__ */ h("div", {
+				}), J !== null && Y !== null && /* @__PURE__ */ m("div", {
 					className: "dc:flex dc:flex-col dc:items-start",
-					children: [/* @__PURE__ */ m("div", {
+					children: [/* @__PURE__ */ p("div", {
 						className: "dc:font-semibold",
 						style: {
 							fontSize: `${Math.max(12, x * .3)}px`,
 							color: X,
 							lineHeight: "1.2"
 						},
-						children: a(Y, 1)
-					}), /* @__PURE__ */ h("div", {
+						children: i(Y, 1)
+					}), /* @__PURE__ */ m("div", {
 						className: "text-dc-text-muted dc:text-xs",
 						style: {
 							opacity: .7,
@@ -295,7 +294,7 @@ var _ = /* @__PURE__ */ e({ default: () => v }), v = c.memo(function({ data: e,
 					})]
 				})]
 			}),
-			_.suffix && !_.formatValue && /* @__PURE__ */ m("div", {
+			_.suffix && !_.formatValue && /* @__PURE__ */ p("div", {
 				className: "text-dc-text-muted dc:text-center",
 				style: {
 					fontSize: "14px",
@@ -304,9 +303,9 @@ var _ = /* @__PURE__ */ e({ default: () => v }), v = c.memo(function({ data: e,
 				},
 				children: _.suffix
 			}),
-			G && /* @__PURE__ */ m("div", {
+			G && /* @__PURE__ */ p("div", {
 				className: "dc:mt-4",
-				children: /* @__PURE__ */ m(g, {
+				children: /* @__PURE__ */ p(h, {
 					values: z,
 					min: V,
 					max: H,
@@ -321,6 +320,6 @@ var _ = /* @__PURE__ */ e({ default: () => v }), v = c.memo(function({ data: e,
 	});
 });
 //#endregion
-export { g as n, _ as t };
+export { h as n, g as t };
 
-//# sourceMappingURL=chart-kpi-number-BUNKM7yg.js.map
+//# sourceMappingURL=chart-kpi-number-CsQgV_x3.js.map

package/dist/client/chunks/{chart-kpi-number-BUNKM7yg.js.map → chart-kpi-number-CsQgV_x3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"chart-kpi-number-BUNKM7yg.js","names":[],"sources":["../../../src/client/components/DataHistogram.tsx","../../../src/client/components/charts/KpiNumber.tsx"],"sourcesContent":["\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  // 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        Average of {values.length} values\n      </div>\n    </div>\n  )\n}","import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react'\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 [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\">No data available</div>\n          <div className=\"dc:text-xs text-dc-text-secondary\">No data points to display</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\">Configuration Error</div>\n          <div className=\"dc:text-xs\">No measure fields configured</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-CsQgV_x3.js","names":[],"sources":["../../../src/client/components/DataHistogram.tsx","../../../src/client/components/charts/KpiNumber.tsx"],"sourcesContent":["\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  // 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        Average of {values.length} values\n      </div>\n    </div>\n  )\n}","import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react'\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 [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\">No data available</div>\n          <div className=\"dc:text-xs text-dc-text-secondary\">No data points to display</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\">Configuration Error</div>\n          <div className=\"dc:text-xs\">No measure fields configured</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-COF8iN0K.js → chart-kpi-text-BR0IyeUU.js}

@@ -1,12 +1,11 @@
-import { n as e } from "./rolldown-runtime-lc2dmIiU.js";
-import { _ as t } from "./chart-activity-grid-wR2Twpo7.js";
-import { n } from "./chart-kpi-number-BUNKM7yg.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 { _ as e } from "./chart-activity-grid-DLktOINm.js";
+import { n as t } from "./chart-kpi-number-CsQgV_x3.js";
+import n, { useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/client/components/charts/KpiText.tsx
-var l = /* @__PURE__ */ e({ default: () => u }), u = r.memo(function({ data: e, chartConfig: r, displayConfig: l = {}, height: u = "100%", colorPalette: d }) {
-	let [f, p] = o(28), [m, h] = o(0), g = a(null), _ = a(null), v = t();
-	if (i(() => {
+var c = n.memo(function({ data: n, chartConfig: c, displayConfig: l = {}, height: u = "100%", colorPalette: d }) {
+	let [f, p] = a(28), [m, h] = a(0), g = i(null), _ = i(null), v = e();
+	if (r(() => {
 		let e = () => {
 			if (g.current) {
 				let e = g.current.getBoundingClientRect(), t = e.width, n = e.height;
@@ -22,25 +21,25 @@ var l = /* @__PURE__ */ e({ default: () => u }), u = r.memo(function({ data: e,
 		return g.current && n.observe(g.current), () => {
 			clearTimeout(t), n.disconnect();
 		};
-	}, [e, r]), !e || e.length === 0) return /* @__PURE__ */ s("div", {
+	}, [n, c]), !n || n.length === 0) return /* @__PURE__ */ o("div", {
 		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
 		style: {
 			height: u === "100%" ? "100%" : u,
 			minHeight: u === "100%" ? "200px" : void 0
 		},
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ s("div", {
 			className: "dc:text-center text-dc-text-muted",
-			children: [/* @__PURE__ */ s("div", {
+			children: [/* @__PURE__ */ o("div", {
 				className: "dc:text-sm dc:font-semibold dc:mb-1",
 				children: "No data available"
-			}), /* @__PURE__ */ s("div", {
+			}), /* @__PURE__ */ o("div", {
 				className: "dc:text-xs text-dc-text-secondary",
 				children: "No data points to display"
 			})]
 		})
 	});
 	let y = [];
-	if (r?.yAxis && (typeof r.yAxis == "string" ? y = [r.yAxis] : Array.isArray(r.yAxis) && (y = r.yAxis)), y.length === 0) return /* @__PURE__ */ s("div", {
+	if (c?.yAxis && (typeof c.yAxis == "string" ? y = [c.yAxis] : Array.isArray(c.yAxis) && (y = c.yAxis)), y.length === 0) return /* @__PURE__ */ o("div", {
 		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
 		style: {
 			height: u === "100%" ? "100%" : u,
@@ -49,23 +48,23 @@ var l = /* @__PURE__ */ e({ default: () => u }), u = r.memo(function({ data: e,
 			color: "var(--dc-danger)",
 			borderColor: "var(--dc-danger-border)"
 		},
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ s("div", {
 			className: "dc:text-center",
-			children: [/* @__PURE__ */ s("div", {
+			children: [/* @__PURE__ */ o("div", {
 				className: "dc:text-sm dc:font-semibold dc:mb-1",
 				children: "Configuration Error"
-			}), /* @__PURE__ */ s("div", {
+			}), /* @__PURE__ */ o("div", {
 				className: "dc:text-xs",
 				children: "No measure fields configured"
 			})]
 		})
 	});
-	let b = y[0], x = e.map((e) => {
+	let b = y[0], x = n.map((e) => {
 		if (e[b] !== void 0) return e[b];
 		let t = Object.keys(e);
 		if (t.length > 0) return e[t[0]];
 	}).filter((e) => e != null);
-	if (x.length === 0) return /* @__PURE__ */ s("div", {
+	if (x.length === 0) return /* @__PURE__ */ o("div", {
 		className: "dc:flex dc:items-center dc:justify-center dc:w-full dc:h-full",
 		style: {
 			height: u === "100%" ? "100%" : u,
@@ -74,12 +73,12 @@ var l = /* @__PURE__ */ e({ default: () => u }), u = r.memo(function({ data: e,
 			color: "var(--dc-warning)",
 			borderColor: "var(--dc-warning-border)"
 		},
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ s("div", {
 			className: "dc:text-center",
-			children: [/* @__PURE__ */ s("div", {
+			children: [/* @__PURE__ */ o("div", {
 				className: "dc:text-sm dc:font-semibold dc:mb-1",
 				children: "No valid data"
-			}), /* @__PURE__ */ s("div", {
+			}), /* @__PURE__ */ o("div", {
 				className: "dc:text-xs",
 				children: "All values are null or invalid"
 			})]
@@ -114,14 +113,14 @@ var l = /* @__PURE__ */ e({ default: () => u }), u = r.memo(function({ data: e,
 		}
 		return d?.colors?.[0] || "#1f2937";
 	})();
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ s("div", {
 		ref: g,
 		className: "dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full dc:h-full dc:p-4",
 		style: {
 			height: u === "100%" ? "100%" : u,
 			minHeight: u === "100%" ? "200px" : void 0
 		},
-		children: [/* @__PURE__ */ s("div", {
+		children: [/* @__PURE__ */ o("div", {
 			ref: _,
 			className: "dc:font-bold dc:leading-tight dc:text-center",
 			style: {
@@ -129,9 +128,9 @@ var l = /* @__PURE__ */ e({ default: () => u }), u = r.memo(function({ data: e,
 				color: k
 			},
 			children: O
-		}), E && w !== null && T !== null && /* @__PURE__ */ s("div", {
+		}), E && w !== null && T !== null && /* @__PURE__ */ o("div", {
 			className: "dc:mt-4",
-			children: /* @__PURE__ */ s(n, {
+			children: /* @__PURE__ */ o(t, {
 				values: x,
 				min: w,
 				max: T,
@@ -144,6 +143,6 @@ var l = /* @__PURE__ */ e({ default: () => u }), u = r.memo(function({ data: e,
 	});
 });
 //#endregion
-export { l as t };
+export { c as t };
 
-//# sourceMappingURL=chart-kpi-text-COF8iN0K.js.map
+//# sourceMappingURL=chart-kpi-text-BR0IyeUU.js.map