drizzle-cube 0.2.11 → 0.2.13

package/dist/client/chunks/{chart-kpidelta-D-FR2o4V.js → chart-kpidelta-7-KOmb3w.js}

@@ -1,24 +1,26 @@
-import { jsx as a, jsxs as c } from "react/jsx-runtime";
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
 import { useState as K, useRef as _, useEffect as te } from "react";
 import { ac as ne, k as se } from "./icons-B2XSxpVK.js";
-import { u as re } from "./chart-activitygridchart-D17Fxiuf.js";
+import { u as re } from "./chart-activitygridchart-CUGN9Xq9.js";
 function ie(s, r) {
   const e = new Date(s);
   switch (r.toLowerCase()) {
     case "day":
       e.setHours(23, 59, 59, 999);
       break;
-    case "week":
+    case "week": {
       const n = 6 - e.getDay();
       e.setDate(e.getDate() + n), e.setHours(23, 59, 59, 999);
       break;
+    }
     case "month":
       e.setMonth(e.getMonth() + 1, 0), e.setHours(23, 59, 59, 999);
       break;
-    case "quarter":
-      const i = e.getMonth(), o = Math.floor(i / 3) * 3 + 2;
-      e.setMonth(o + 1, 0), e.setHours(23, 59, 59, 999);
+    case "quarter": {
+      const l = e.getMonth(), n = Math.floor(l / 3) * 3 + 2;
+      e.setMonth(n + 1, 0), e.setHours(23, 59, 59, 999);
       break;
+    }
     case "year":
       e.setMonth(11, 31), e.setHours(23, 59, 59, 999);
       break;
@@ -49,36 +51,36 @@ function ae(s, r) {
   return s.timeDimensions[0]?.granularity || null;
 }
 function ce(s, r, e, l, n = !1) {
-  const i = {
+  const o = {
     filteredData: s,
     excludedIncompletePeriod: !1,
     skippedLastPeriod: !1,
     granularity: null
   };
   if (s.length < 2)
-    return i;
-  const o = ae(e, r);
+    return o;
+  const a = ae(e, r);
   if (n)
     return {
       filteredData: s.slice(0, -1),
       excludedIncompletePeriod: !1,
       skippedLastPeriod: !0,
-      granularity: o
+      granularity: a
     };
   if (!l)
-    return { ...i, granularity: o };
+    return { ...o, granularity: a };
   if (!r)
-    return { ...i, granularity: o };
+    return { ...o, granularity: a };
   if (!e?.timeDimensions || e.timeDimensions.length === 0)
-    return { ...i, granularity: o };
-  if (!o)
-    return i;
+    return { ...o, granularity: a };
+  if (!a)
+    return o;
   const N = s[s.length - 1];
-  return oe(N, r, o) ? { ...i, granularity: o } : {
+  return oe(N, r, a) ? { ...o, granularity: a } : {
     filteredData: s.slice(0, -1),
     excludedIncompletePeriod: !0,
     skippedLastPeriod: !1,
-    granularity: o
+    granularity: a
   };
 }
 function le({
@@ -87,31 +89,31 @@ function le({
   positiveColor: e,
   negativeColor: l,
   formatValue: n,
-  width: i,
-  height: o
+  width: o,
+  height: a
 }) {
-  const N = Math.max(10, Math.floor(i / 10)), g = s.length > N ? s.slice(-N) : s, y = g.map((h) => h - r), d = Math.min(...y, 0), f = Math.max(...y, 0);
+  const N = Math.max(10, Math.floor(o / 10)), g = s.length > N ? s.slice(-N) : s, y = g.map((h) => h - r), d = Math.min(...y, 0), f = Math.max(...y, 0);
   if (Math.max(Math.abs(d), Math.abs(f)) === 0 || y.length === 0)
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ i(
       "div",
       {
-        className: "flex items-center justify-center bg-gray-50 rounded-sm border",
-        style: { width: `${i}px`, height: `${o}px` },
-        children: /* @__PURE__ */ a("span", { className: "text-xs text-gray-500", children: "No variance data" })
+        className: "flex items-center justify-center bg-dc-bg-secondary rounded-sm border border-dc-border",
+        style: { width: `${o}px`, height: `${a}px` },
+        children: /* @__PURE__ */ i("span", { className: "text-xs text-dc-text-muted", children: "No variance data" })
       }
     );
-  const M = 2, k = i - (g.length - 1) * M, w = Math.max(4, k / g.length), x = f - d, b = x > 0 ? f / x * 100 : 50;
+  const M = 2, k = o - (g.length - 1) * M, w = Math.max(4, k / g.length), x = f - d, b = x > 0 ? f / x * 100 : 50;
   return /* @__PURE__ */ c("div", { className: "flex items-center space-x-2", children: [
     /* @__PURE__ */ c(
       "div",
       {
         className: "relative",
         style: {
-          width: `${i}px`,
-          height: `${o}px`
+          width: `${o}px`,
+          height: `${a}px`
         },
         children: [
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ i(
             "div",
             {
               className: "absolute left-0 right-0",
@@ -124,8 +126,8 @@ function le({
             }
           ),
           y.map((h, D) => {
-            const I = Math.abs(h) / x, P = Math.max(2, I * (o - 4)), z = h >= 0, H = D === g.length - 1, j = z ? e : l, u = D * (w + M);
-            return /* @__PURE__ */ a(
+            const I = Math.abs(h) / x, P = Math.max(2, I * (a - 4)), z = h >= 0, H = D === g.length - 1, j = z ? e : l, u = D * (w + M);
+            return /* @__PURE__ */ i(
               "div",
               {
                 className: "absolute rounded-xs",
@@ -151,7 +153,7 @@ function le({
       "div",
       {
         className: "flex flex-col justify-between text-xs text-dc-text-muted",
-        style: { height: `${o}px` },
+        style: { height: `${a}px` },
         children: [
           /* @__PURE__ */ c("span", { children: [
             "+",
@@ -172,9 +174,9 @@ function de({
   displayConfig: e = {},
   queryObject: l,
   height: n = "100%",
-  colorPalette: i
+  colorPalette: o
 }) {
-  const [o, N] = K(32), [g, y] = K(250), d = _(null), f = _(null), { getFieldLabel: W } = re();
+  const [a, N] = K(32), [g, y] = K(250), d = _(null), f = _(null), { getFieldLabel: W } = re();
   if (te(() => {
     const t = () => {
       if (d.current) {
@@ -199,7 +201,7 @@ function de({
       clearTimeout(p), v.disconnect();
     };
   }, [s, r]), !s || s.length === 0)
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ i(
       "div",
       {
         className: "flex items-center justify-center w-full h-full",
@@ -208,14 +210,14 @@ function de({
           minHeight: n === "100%" ? "200px" : void 0
         },
         children: /* @__PURE__ */ c("div", { className: "text-center text-dc-text-muted", children: [
-          /* @__PURE__ */ a("div", { className: "text-sm font-semibold mb-1", children: "No data available" }),
-          /* @__PURE__ */ a("div", { className: "text-xs text-dc-text-secondary", children: "No data points to display" })
+          /* @__PURE__ */ i("div", { className: "text-sm font-semibold mb-1", children: "No data available" }),
+          /* @__PURE__ */ i("div", { className: "text-xs text-dc-text-secondary", children: "No data points to display" })
         ] })
       }
     );
   let M = [], k = [];
   if (r?.yAxis && (M = Array.isArray(r.yAxis) ? r.yAxis : [r.yAxis]), r?.xAxis && (k = Array.isArray(r.xAxis) ? r.xAxis : [r.xAxis]), M.length === 0)
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ i(
       "div",
       {
         className: "flex items-center justify-center w-full h-full",
@@ -227,8 +229,8 @@ function de({
           borderColor: "var(--dc-danger-border)"
         },
         children: /* @__PURE__ */ c("div", { className: "text-center", children: [
-          /* @__PURE__ */ a("div", { className: "text-sm font-semibold mb-1", children: "Configuration Error" }),
-          /* @__PURE__ */ a("div", { className: "text-xs", children: "No measure field configured" })
+          /* @__PURE__ */ i("div", { className: "text-sm font-semibold mb-1", children: "Configuration Error" }),
+          /* @__PURE__ */ i("div", { className: "text-xs", children: "No measure field configured" })
         ] })
       }
     );
@@ -251,7 +253,7 @@ function de({
     D
   ), u = I.map((t) => t[w]).filter((t) => t != null && !isNaN(Number(t))).map((t) => Number(t));
   if (u.length < 2)
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ i(
       "div",
       {
         className: "flex items-center justify-center w-full h-full",
@@ -263,8 +265,8 @@ function de({
           borderColor: "var(--dc-warning-border)"
         },
         children: /* @__PURE__ */ c("div", { className: "text-center", children: [
-          /* @__PURE__ */ a("div", { className: "text-sm font-semibold mb-1", children: "Insufficient Data" }),
-          /* @__PURE__ */ a("div", { className: "text-xs", children: "Delta calculation requires at least 2 data points" }),
+          /* @__PURE__ */ i("div", { className: "text-sm font-semibold mb-1", children: "Insufficient Data" }),
+          /* @__PURE__ */ i("div", { className: "text-xs", children: "Delta calculation requires at least 2 data points" }),
           /* @__PURE__ */ c("div", { className: "text-xs", children: [
             "Current data points: ",
             u.length
@@ -281,17 +283,17 @@ function de({
     let m;
     return Math.abs(t) >= 1e9 ? m = (t / 1e9).toFixed(p) + "B" : Math.abs(t) >= 1e6 ? m = (t / 1e6).toFixed(p) + "M" : Math.abs(t) >= 1e3 ? m = (t / 1e3).toFixed(p) + "K" : m = t.toFixed(p), v + m;
   }, G = () => {
-    if (e.positiveColorIndex !== void 0 && i?.colors) {
+    if (e.positiveColorIndex !== void 0 && o?.colors) {
       const t = e.positiveColorIndex;
-      if (t >= 0 && t < i.colors.length)
-        return i.colors[t];
+      if (t >= 0 && t < o.colors.length)
+        return o.colors[t];
     }
     return "#10b981";
   }, O = () => {
-    if (e.negativeColorIndex !== void 0 && i?.colors) {
+    if (e.negativeColorIndex !== void 0 && o?.colors) {
       const t = e.negativeColorIndex;
-      if (t >= 0 && t < i.colors.length)
-        return i.colors[t];
+      if (t >= 0 && t < o.colors.length)
+        return o.colors[t];
     }
     return "#ef4444";
   }, E = G(), F = O(), R = $ ? E : F;
@@ -314,16 +316,16 @@ function de({
               lineHeight: "1.2"
             },
             children: [
-              /* @__PURE__ */ a("span", { children: (() => {
+              /* @__PURE__ */ i("span", { children: (() => {
                 const t = W(w);
                 return t && t.length > 1 ? t : w;
               })() }),
-              (P || z) && /* @__PURE__ */ a(
+              (P || z) && /* @__PURE__ */ i(
                 "span",
                 {
                   title: z ? `Excludes last ${H || "period"}` : `Excludes current incomplete ${H}`,
                   className: "cursor-help",
-                  children: /* @__PURE__ */ a(
+                  children: /* @__PURE__ */ i(
                     ne,
                     {
                       icon: se,
@@ -336,13 +338,13 @@ function de({
           }
         ),
         /* @__PURE__ */ c("div", { className: "flex items-center justify-center space-x-4 mb-2", children: [
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ i(
             "div",
             {
               ref: f,
               className: "font-bold leading-none",
               style: {
-                fontSize: `${o}px`,
+                fontSize: `${a}px`,
                 color: "var(--dc-text)"
                 // Keep main value neutral
               },
@@ -350,13 +352,13 @@ function de({
             }
           ),
           /* @__PURE__ */ c("div", { className: "flex items-center space-x-1", children: [
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ i(
               "div",
               {
                 className: "font-bold",
                 style: {
                   color: R,
-                  fontSize: `${o * 0.35}px`
+                  fontSize: `${a * 0.35}px`
                 },
                 children: $ ? "▲" : "▼"
               }
@@ -367,7 +369,7 @@ function de({
                 {
                   className: "font-bold leading-tight",
                   style: {
-                    fontSize: `${o * 0.35}px`,
+                    fontSize: `${a * 0.35}px`,
                     color: R
                   },
                   children: [
@@ -381,7 +383,7 @@ function de({
                 {
                   className: "font-semibold leading-tight",
                   style: {
-                    fontSize: `${o * 0.28}px`,
+                    fontSize: `${a * 0.28}px`,
                     color: R,
                     opacity: 0.8
                   },
@@ -395,7 +397,7 @@ function de({
             ] })
           ] })
         ] }),
-        e.suffix && !e.formatValue && /* @__PURE__ */ a(
+        e.suffix && !e.formatValue && /* @__PURE__ */ i(
           "div",
           {
             className: "text-dc-text-muted text-center mb-3",
@@ -407,7 +409,7 @@ function de({
             children: e.suffix
           }
         ),
-        e.showHistogram !== !1 && u.length > 2 && /* @__PURE__ */ a("div", { className: "mt-2 w-full flex justify-center overflow-hidden", children: /* @__PURE__ */ a(
+        e.showHistogram !== !1 && u.length > 2 && /* @__PURE__ */ i("div", { className: "mt-2 w-full flex justify-center overflow-hidden", children: /* @__PURE__ */ i(
           le,
           {
             values: u,
@@ -431,4 +433,4 @@ export {
   pe as K,
   ce as f
 };
-//# sourceMappingURL=chart-kpidelta-D-FR2o4V.js.map
+//# sourceMappingURL=chart-kpidelta-7-KOmb3w.js.map

package/dist/client/chunks/chart-kpidelta-7-KOmb3w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-kpidelta-7-KOmb3w.js","sources":["../../../src/client/utils/periodUtils.ts","../../../src/client/components/charts/KpiDelta.tsx"],"sourcesContent":["/**\n * Utility functions for detecting incomplete time periods in KPI charts\n */\n\n/**\n * Get the end date of a period based on granularity\n * @param date - The date within the period\n * @param granularity - The time granularity (day, week, month, quarter, year)\n * @returns The end date of the period (end of day)\n */\nexport function getPeriodEndDate(date: Date, granularity: string): Date {\n  const endDate = new Date(date)\n\n  switch (granularity.toLowerCase()) {\n    case 'day':\n      // End of the same day\n      endDate.setHours(23, 59, 59, 999)\n      break\n\n    case 'week': {\n      // End of the week (Saturday, assuming week starts Sunday)\n      const dayOfWeek = endDate.getDay()\n      const daysUntilSaturday = 6 - dayOfWeek\n      endDate.setDate(endDate.getDate() + daysUntilSaturday)\n      endDate.setHours(23, 59, 59, 999)\n      break\n    }\n\n    case 'month':\n      // Last day of the month\n      endDate.setMonth(endDate.getMonth() + 1, 0) // Set to day 0 of next month = last day of current month\n      endDate.setHours(23, 59, 59, 999)\n      break\n\n    case 'quarter': {\n      // Last day of the quarter\n      const currentMonth = endDate.getMonth()\n      const quarterEndMonth = Math.floor(currentMonth / 3) * 3 + 2 // 0->2, 3->5, 6->8, 9->11\n      endDate.setMonth(quarterEndMonth + 1, 0) // Last day of quarter end month\n      endDate.setHours(23, 59, 59, 999)\n      break\n    }\n\n    case 'year':\n      // December 31st\n      endDate.setMonth(11, 31) // December 31\n      endDate.setHours(23, 59, 59, 999)\n      break\n\n    default:\n      // Unknown granularity - treat as complete\n      endDate.setHours(23, 59, 59, 999)\n  }\n\n  return endDate\n}\n\n/**\n * Check if the last period in the data is complete based on granularity\n * @param lastDataPoint - The last data point in the sorted dataset\n * @param timeDimensionField - The field name containing the time value\n * @param granularity - The time granularity\n * @returns true if the period is complete, false if it's incomplete\n */\nexport function isLastPeriodComplete(\n  lastDataPoint: any,\n  timeDimensionField: string,\n  granularity: string\n): boolean {\n  if (!lastDataPoint || !timeDimensionField || !granularity) {\n    return true // Assume complete if we can't determine\n  }\n\n  const timeValue = lastDataPoint[timeDimensionField]\n  if (!timeValue) {\n    return true // Assume complete if no time value\n  }\n\n  // Parse the time value\n  const date = new Date(timeValue)\n  if (isNaN(date.getTime())) {\n    return true // Assume complete if invalid date\n  }\n\n  // Get the end of this period\n  const periodEnd = getPeriodEndDate(date, granularity)\n\n  // Compare with current time\n  const now = new Date()\n\n  // If the period end is in the future, the period is incomplete\n  return periodEnd <= now\n}\n\n/**\n * Extract granularity from a query object\n * @param queryObject - The CubeQuery object\n * @param dimensionField - Optional specific dimension field to match\n * @returns The granularity string or null if not found\n */\nexport function getQueryGranularity(\n  queryObject: any,\n  dimensionField?: string\n): string | null {\n  if (!queryObject?.timeDimensions || queryObject.timeDimensions.length === 0) {\n    return null\n  }\n\n  // If a specific dimension field is provided, try to find its granularity\n  if (dimensionField) {\n    const matchingDim = queryObject.timeDimensions.find((td: any) =>\n      td.dimension === dimensionField ||\n      td.dimension?.includes(dimensionField) ||\n      dimensionField?.includes(td.dimension)\n    )\n    if (matchingDim?.granularity) {\n      return matchingDim.granularity\n    }\n  }\n\n  // Fallback to first time dimension's granularity\n  const firstTimeDim = queryObject.timeDimensions[0]\n  return firstTimeDim?.granularity || null\n}\n\n/**\n * Filter data to exclude incomplete or last period\n * @param data - The data array sorted by time\n * @param timeDimensionField - The field containing time values\n * @param queryObject - The query object containing timeDimensions\n * @param useLastCompletePeriod - Whether to check for incomplete periods\n * @param skipLastPeriod - Whether to always skip the last period (overrides useLastCompletePeriod)\n * @returns Object with filtered data and whether filtering was applied\n */\nexport function filterIncompletePeriod(\n  data: any[],\n  timeDimensionField: string | undefined,\n  queryObject: any,\n  useLastCompletePeriod: boolean,\n  skipLastPeriod: boolean = false\n): { filteredData: any[]; excludedIncompletePeriod: boolean; skippedLastPeriod: boolean; granularity: string | null } {\n  // Default return - no filtering\n  const noFilter = {\n    filteredData: data,\n    excludedIncompletePeriod: false,\n    skippedLastPeriod: false,\n    granularity: null\n  }\n\n  // Need at least 2 data points to filter\n  if (data.length < 2) {\n    return noFilter\n  }\n\n  const granularity = getQueryGranularity(queryObject, timeDimensionField)\n\n  // If skipLastPeriod is enabled, always skip the last period\n  if (skipLastPeriod) {\n    return {\n      filteredData: data.slice(0, -1),\n      excludedIncompletePeriod: false,\n      skippedLastPeriod: true,\n      granularity\n    }\n  }\n\n  // Skip incomplete period check if feature is disabled\n  if (!useLastCompletePeriod) {\n    return { ...noFilter, granularity }\n  }\n\n  // Skip if no time dimension field\n  if (!timeDimensionField) {\n    return { ...noFilter, granularity }\n  }\n\n  // Skip if no time dimensions in query\n  if (!queryObject?.timeDimensions || queryObject.timeDimensions.length === 0) {\n    return { ...noFilter, granularity }\n  }\n\n  if (!granularity) {\n    return noFilter\n  }\n\n  // Check if last period is incomplete\n  const lastRow = data[data.length - 1]\n  if (!isLastPeriodComplete(lastRow, timeDimensionField, granularity)) {\n    return {\n      filteredData: data.slice(0, -1),\n      excludedIncompletePeriod: true,\n      skippedLastPeriod: false,\n      granularity\n    }\n  }\n\n  return { ...noFilter, granularity }\n}\n","import { useState, useRef, useEffect } from \"react\";\nimport { Icon } from \"@iconify/react\";\nimport infoCircleIcon from \"@iconify-icons/tabler/info-circle\";\nimport { useCubeContext } from \"../../providers/CubeProvider\";\nimport { filterIncompletePeriod } from \"../../utils/periodUtils\";\nimport type { ChartProps } from \"../../types\";\n\ninterface VarianceHistogramProps {\n  values: number[];\n  lastValue: number;\n  positiveColor: string;\n  negativeColor: string;\n  formatValue: (value: number) => string;\n  width: number;\n  height: number;\n}\n\nfunction VarianceHistogram({\n  values,\n  lastValue,\n  positiveColor,\n  negativeColor,\n  formatValue,\n  width,\n  height,\n}: VarianceHistogramProps) {\n  // Limit to most recent N values to fit in the histogram\n  // Calculate max bars based on width (minimum 8px per bar including gap)\n  const maxBars = Math.max(10, Math.floor(width / 10));\n  const limitedValues =\n    values.length > maxBars\n      ? values.slice(-maxBars) // Take the most recent values\n      : values;\n\n  // Calculate variance (difference) from current/last value for each point\n  const variances = limitedValues.map((value) => value - lastValue);\n\n  // Find min/max variance for scaling (include 0 as baseline)\n  const minVariance = Math.min(...variances, 0);\n  const maxVariance = Math.max(...variances, 0);\n  const range = Math.max(Math.abs(minVariance), Math.abs(maxVariance));\n\n  if (range === 0 || variances.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center bg-dc-bg-secondary rounded-sm border border-dc-border\"\n        style={{ width: `${width}px`, height: `${height}px` }}\n      >\n        <span className=\"text-xs text-dc-text-muted\">No variance data</span>\n      </div>\n    );\n  }\n\n  // Calculate bar dimensions\n  const barGap = 2;\n  const availableWidth = width - (limitedValues.length - 1) * barGap;\n  const barWidth = Math.max(4, availableWidth / limitedValues.length);\n\n  // Calculate where zero line should be positioned (as percentage from top)\n  // If maxVariance = 67 and minVariance = -24, total range = 91\n  // Zero should be at 67/91 = 73.6% from top\n  const totalRange = maxVariance - minVariance;\n  const zeroLinePercent =\n    totalRange > 0 ? (maxVariance / totalRange) * 100 : 50;\n\n  return (\n    <div className=\"flex items-center space-x-2\">\n      {/* Histogram bars */}\n      <div\n        className=\"relative\"\n        style={{\n          width: `${width}px`,\n          height: `${height}px`,\n        }}\n      >\n        {/* Zero line (represents current value) */}\n        <div\n          className=\"absolute left-0 right-0\"\n          style={{\n            height: \"1px\",\n            top: `${zeroLinePercent}%`,\n            backgroundColor: \"var(--dc-border)\",\n            zIndex: 1,\n          }}\n        />\n\n        {/* Variance bars - oldest to newest (left to right) */}\n        {variances.map((variance, index) => {\n          // Calculate bar height as proportion of total range\n          const normalizedHeight = Math.abs(variance) / totalRange;\n          const barHeight = Math.max(2, normalizedHeight * (height - 4));\n          const isPositive = variance >= 0;\n          const isLastValue = index === limitedValues.length - 1;\n          const color = isPositive ? positiveColor : negativeColor;\n          const xPosition = index * (barWidth + barGap);\n\n          return (\n            <div\n              key={index}\n              className=\"absolute rounded-xs\"\n              style={{\n                left: `${xPosition}px`,\n                width: `${barWidth}px`,\n                height: `${barHeight}px`,\n                backgroundColor: color,\n                opacity: isLastValue ? 1 : 0.6,\n                // Position bar relative to zero line\n                ...(isPositive\n                  ? { bottom: `${100 - zeroLinePercent}%` }\n                  : { top: `${zeroLinePercent}%` }),\n                zIndex: 2,\n              }}\n              title={`${formatValue(limitedValues[index])}: ${variance >= 0 ? \"+\" : \"\"}${formatValue(variance)} vs current`}\n            />\n          );\n        })}\n      </div>\n\n      {/* Variance labels on the right - show actual value difference */}\n      <div\n        className=\"flex flex-col justify-between text-xs text-dc-text-muted\"\n        style={{ height: `${height}px` }}\n      >\n        <span>+{formatValue(maxVariance)}</span>\n        <span>\n          {minVariance < 0 ? \"\" : \"\"}\n          {formatValue(minVariance)}\n        </span>\n      </div>\n    </div>\n  );\n}\n\nexport default function KpiDelta({\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  const { getFieldLabel } = useCubeContext();\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          const widthBasedSize = containerWidth / 4;\n          const heightBasedSize = containerHeight / 4;\n          const baseFontSize = Math.min(widthBasedSize, heightBasedSize);\n          const clampedFontSize = Math.max(28, Math.min(baseFontSize, 140));\n          setFontSize(clampedFontSize);\n\n          setTimeout(() => {\n            if (valueRef.current) {\n              const textRect = valueRef.current.getBoundingClientRect();\n              const measuredWidth = textRect.width;\n              // Scale histogram width with container, accounting for labels on the right (~60px)\n              const maxHistogramWidth = containerWidth - 100; // Leave room for padding and labels\n              const effectiveWidth = Math.max(\n                measuredWidth,\n                Math.min(maxHistogramWidth, containerWidth * 0.7),\n              );\n              setTextWidth(Math.max(100, effectiveWidth)); // Minimum 100px\n            }\n          }, 10);\n        }\n      }\n    };\n\n    const timer = setTimeout(updateDimensions, 50);\n\n    const resizeObserver = new ResizeObserver(() => {\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  if (!data || data.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full h-full\"\n        style={{\n          height: height === \"100%\" ? \"100%\" : height,\n          minHeight: height === \"100%\" ? \"200px\" : undefined,\n        }}\n      >\n        <div className=\"text-center text-dc-text-muted\">\n          <div className=\"text-sm font-semibold mb-1\">No data available</div>\n          <div className=\"text-xs text-dc-text-secondary\">\n            No data points to display\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Extract value and dimension fields from chart config\n  let valueFields: string[] = [];\n  let dimensionFields: string[] = [];\n\n  if (chartConfig?.yAxis) {\n    valueFields = Array.isArray(chartConfig.yAxis)\n      ? chartConfig.yAxis\n      : [chartConfig.yAxis];\n  }\n\n  if (chartConfig?.xAxis) {\n    dimensionFields = Array.isArray(chartConfig.xAxis)\n      ? chartConfig.xAxis\n      : [chartConfig.xAxis];\n  }\n\n  if (valueFields.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full 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=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">Configuration Error</div>\n          <div className=\"text-xs\">No measure field configured</div>\n        </div>\n      </div>\n    );\n  }\n\n  const valueField = valueFields[0];\n  const dimensionField = dimensionFields[0]; // Optional\n\n  // Sort data by dimension if available (for time series)\n  let sortedData = [...data];\n  if (dimensionField) {\n    sortedData = sortedData.sort((a, b) => {\n      const aVal = a[dimensionField];\n      const bVal = b[dimensionField];\n      if (aVal < bVal) return -1;\n      if (aVal > bVal) return 1;\n      return 0;\n    });\n  }\n\n  // Filter out incomplete or last period if enabled\n  const { useLastCompletePeriod = true, skipLastPeriod = false } =\n    displayConfig;\n  const {\n    filteredData,\n    excludedIncompletePeriod,\n    skippedLastPeriod,\n    granularity,\n  } = filterIncompletePeriod(\n    sortedData,\n    dimensionField,\n    queryObject,\n    useLastCompletePeriod,\n    skipLastPeriod,\n  );\n\n  // Use filtered data for calculations\n  const dataToUse = filteredData;\n\n  // Extract values from filtered data\n  const values = dataToUse\n    .map((row) => row[valueField])\n    .filter((val) => val !== null && val !== undefined && !isNaN(Number(val)))\n    .map((val) => Number(val));\n\n  if (values.length < 2) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full h-full\"\n        style={{\n          height: height === \"100%\" ? \"100%\" : height,\n          minHeight: height === \"100%\" ? \"200px\" : undefined,\n          backgroundColor: \"var(--dc-warning-bg)\",\n          color: \"var(--dc-warning)\",\n          borderColor: \"var(--dc-warning-border)\",\n        }}\n      >\n        <div className=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">Insufficient Data</div>\n          <div className=\"text-xs\">\n            Delta calculation requires at least 2 data points\n          </div>\n          <div className=\"text-xs\">Current data points: {values.length}</div>\n        </div>\n      </div>\n    );\n  }\n\n  // Calculate delta between last and second-last values\n  const lastValue = values[values.length - 1];\n  const secondLastValue = values[values.length - 2];\n  const absoluteChange = lastValue - secondLastValue;\n  const percentageChange =\n    secondLastValue !== 0\n      ? (absoluteChange / Math.abs(secondLastValue)) * 100\n      : 0;\n\n  const isPositiveChange = absoluteChange >= 0;\n\n  // Format number with appropriate units and decimals\n  const formatNumber = (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  };\n\n  // Get colors from palette\n  const getPositiveColor = (): string => {\n    if (\n      displayConfig.positiveColorIndex !== undefined &&\n      colorPalette?.colors\n    ) {\n      const colorIndex = displayConfig.positiveColorIndex;\n      if (colorIndex >= 0 && colorIndex < colorPalette.colors.length) {\n        return colorPalette.colors[colorIndex];\n      }\n    }\n    return \"#10b981\"; // Default green\n  };\n\n  const getNegativeColor = (): string => {\n    if (\n      displayConfig.negativeColorIndex !== undefined &&\n      colorPalette?.colors\n    ) {\n      const colorIndex = displayConfig.negativeColorIndex;\n      if (colorIndex >= 0 && colorIndex < colorPalette.colors.length) {\n        return colorPalette.colors[colorIndex];\n      }\n    }\n    return \"#ef4444\"; // Default red\n  };\n\n  const positiveColor = getPositiveColor();\n  const negativeColor = getNegativeColor();\n  const currentColor = isPositiveChange ? positiveColor : negativeColor;\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"flex flex-col items-center justify-center w-full h-full 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 font-bold text-center mb-2 flex items-center justify-center gap-1\"\n        style={{\n          fontSize: \"14px\",\n          lineHeight: \"1.2\",\n        }}\n      >\n        <span>\n          {(() => {\n            const label = getFieldLabel(valueField);\n            return label && label.length > 1 ? label : valueField;\n          })()}\n        </span>\n        {(excludedIncompletePeriod || skippedLastPeriod) && (\n          <span\n            title={\n              skippedLastPeriod\n                ? `Excludes last ${granularity || \"period\"}`\n                : `Excludes current incomplete ${granularity}`\n            }\n            className=\"cursor-help\"\n          >\n            <Icon\n              icon={infoCircleIcon}\n              className=\"w-4 h-4 text-dc-text-muted opacity-70\"\n            />\n          </span>\n        )}\n      </div>\n\n      {/* Main KPI Value and Delta */}\n      <div className=\"flex items-center justify-center space-x-4 mb-2\">\n        {/* Main KPI Value */}\n        <div\n          ref={valueRef}\n          className=\"font-bold leading-none\"\n          style={{\n            fontSize: `${fontSize}px`,\n            color: \"var(--dc-text)\", // Keep main value neutral\n          }}\n        >\n          {formatNumber(lastValue)}\n        </div>\n\n        {/* Delta Information */}\n        <div className=\"flex items-center space-x-1\">\n          {/* Arrow */}\n          <div\n            className=\"font-bold\"\n            style={{\n              color: currentColor,\n              fontSize: `${fontSize * 0.35}px`,\n            }}\n          >\n            {isPositiveChange ? \"▲\" : \"▼\"}\n          </div>\n\n          {/* Delta Values */}\n          <div className=\"text-left\">\n            <div\n              className=\"font-bold leading-tight\"\n              style={{\n                fontSize: `${fontSize * 0.35}px`,\n                color: currentColor,\n              }}\n            >\n              {isPositiveChange ? \"+\" : \"\"}\n              {formatNumber(absoluteChange)}\n            </div>\n            <div\n              className=\"font-semibold leading-tight\"\n              style={{\n                fontSize: `${fontSize * 0.28}px`,\n                color: currentColor,\n                opacity: 0.8,\n              }}\n            >\n              {isPositiveChange ? \"+\" : \"\"}\n              {percentageChange.toFixed(1)}%\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Unit/Suffix (hidden when formatValue is provided) */}\n      {displayConfig.suffix && !displayConfig.formatValue && (\n        <div\n          className=\"text-dc-text-muted text-center mb-3\"\n          style={{\n            fontSize: \"14px\",\n            lineHeight: \"1.2\",\n            opacity: 0.8,\n          }}\n        >\n          {displayConfig.suffix}\n        </div>\n      )}\n\n      {/* Variance Histogram */}\n      {displayConfig.showHistogram !== false && values.length > 2 && (\n        <div className=\"mt-2 w-full flex justify-center overflow-hidden\">\n          <VarianceHistogram\n            values={values}\n            lastValue={lastValue}\n            positiveColor={positiveColor}\n            negativeColor={negativeColor}\n            formatValue={formatNumber}\n            width={textWidth}\n            height={64}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["getPeriodEndDate","date","granularity","endDate","daysUntilSaturday","currentMonth","quarterEndMonth","isLastPeriodComplete","lastDataPoint","timeDimensionField","timeValue","getQueryGranularity","queryObject","dimensionField","matchingDim","td","filterIncompletePeriod","data","useLastCompletePeriod","skipLastPeriod","noFilter","lastRow","VarianceHistogram","values","lastValue","positiveColor","negativeColor","formatValue","width","height","maxBars","limitedValues","variances","value","minVariance","maxVariance","jsx","barGap","availableWidth","barWidth","totalRange","zeroLinePercent","jsxs","variance","index","normalizedHeight","barHeight","isPositive","isLastValue","color","xPosition","KpiDelta","chartConfig","displayConfig","colorPalette","fontSize","setFontSize","useState","textWidth","setTextWidth","containerRef","useRef","valueRef","getFieldLabel","useCubeContext","useEffect","updateDimensions","rect","containerWidth","containerHeight","widthBasedSize","heightBasedSize","baseFontSize","clampedFontSize","measuredWidth","maxHistogramWidth","effectiveWidth","timer","resizeObserver","valueFields","dimensionFields","valueField","sortedData","a","b","aVal","bVal","filteredData","excludedIncompletePeriod","skippedLastPeriod","row","val","secondLastValue","absoluteChange","percentageChange","isPositiveChange","formatNumber","decimals","prefix","formattedValue","getPositiveColor","colorIndex","getNegativeColor","currentColor","label","Icon","infoCircleIcon"],"mappings":";;;;AAUO,SAASA,GAAiBC,GAAYC,GAA2B;AACtE,QAAMC,IAAU,IAAI,KAAKF,CAAI;AAE7B,UAAQC,EAAY,eAAY;AAAA,IAC9B,KAAK;AAEH,MAAAC,EAAQ,SAAS,IAAI,IAAI,IAAI,GAAG;AAChC;AAAA,IAEF,KAAK,QAAQ;AAGX,YAAMC,IAAoB,IADRD,EAAQ,OAAA;AAE1B,MAAAA,EAAQ,QAAQA,EAAQ,QAAA,IAAYC,CAAiB,GACrDD,EAAQ,SAAS,IAAI,IAAI,IAAI,GAAG;AAChC;AAAA,IACF;AAAA,IAEA,KAAK;AAEH,MAAAA,EAAQ,SAASA,EAAQ,SAAA,IAAa,GAAG,CAAC,GAC1CA,EAAQ,SAAS,IAAI,IAAI,IAAI,GAAG;AAChC;AAAA,IAEF,KAAK,WAAW;AAEd,YAAME,IAAeF,EAAQ,SAAA,GACvBG,IAAkB,KAAK,MAAMD,IAAe,CAAC,IAAI,IAAI;AAC3D,MAAAF,EAAQ,SAASG,IAAkB,GAAG,CAAC,GACvCH,EAAQ,SAAS,IAAI,IAAI,IAAI,GAAG;AAChC;AAAA,IACF;AAAA,IAEA,KAAK;AAEH,MAAAA,EAAQ,SAAS,IAAI,EAAE,GACvBA,EAAQ,SAAS,IAAI,IAAI,IAAI,GAAG;AAChC;AAAA,IAEF;AAEE,MAAAA,EAAQ,SAAS,IAAI,IAAI,IAAI,GAAG;AAAA,EAAA;AAGpC,SAAOA;AACT;AASO,SAASI,GACdC,GACAC,GACAP,GACS;AACT,MAAI,CAACM,KAAiB,CAACC,KAAsB,CAACP;AAC5C,WAAO;AAGT,QAAMQ,IAAYF,EAAcC,CAAkB;AAClD,MAAI,CAACC;AACH,WAAO;AAIT,QAAMT,IAAO,IAAI,KAAKS,CAAS;AAC/B,SAAI,MAAMT,EAAK,QAAA,CAAS,IACf,KAISD,GAAiBC,GAAMC,CAAW,yBAGpC,KAAA;AAIlB;AAQO,SAASS,GACdC,GACAC,GACe;AACf,MAAI,CAACD,GAAa,kBAAkBA,EAAY,eAAe,WAAW;AACxE,WAAO;AAIT,MAAIC,GAAgB;AAClB,UAAMC,IAAcF,EAAY,eAAe;AAAA,MAAK,CAACG,MACnDA,EAAG,cAAcF,KACjBE,EAAG,WAAW,SAASF,CAAc,KACrCA,GAAgB,SAASE,EAAG,SAAS;AAAA,IAAA;AAEvC,QAAID,GAAa;AACf,aAAOA,EAAY;AAAA,EAEvB;AAIA,SADqBF,EAAY,eAAe,CAAC,GAC5B,eAAe;AACtC;AAWO,SAASI,GACdC,GACAR,GACAG,GACAM,GACAC,IAA0B,IAC0F;AAEpH,QAAMC,IAAW;AAAA,IACf,cAAcH;AAAA,IACd,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,aAAa;AAAA,EAAA;AAIf,MAAIA,EAAK,SAAS;AAChB,WAAOG;AAGT,QAAMlB,IAAcS,GAAoBC,GAAaH,CAAkB;AAGvE,MAAIU;AACF,WAAO;AAAA,MACL,cAAcF,EAAK,MAAM,GAAG,EAAE;AAAA,MAC9B,0BAA0B;AAAA,MAC1B,mBAAmB;AAAA,MACnB,aAAAf;AAAA,IAAA;AAKJ,MAAI,CAACgB;AACH,WAAO,EAAE,GAAGE,GAAU,aAAAlB,EAAA;AAIxB,MAAI,CAACO;AACH,WAAO,EAAE,GAAGW,GAAU,aAAAlB,EAAA;AAIxB,MAAI,CAACU,GAAa,kBAAkBA,EAAY,eAAe,WAAW;AACxE,WAAO,EAAE,GAAGQ,GAAU,aAAAlB,EAAA;AAGxB,MAAI,CAACA;AACH,WAAOkB;AAIT,QAAMC,IAAUJ,EAAKA,EAAK,SAAS,CAAC;AACpC,SAAKV,GAAqBc,GAASZ,GAAoBP,CAAW,IAS3D,EAAE,GAAGkB,GAAU,aAAAlB,EAAA,IARb;AAAA,IACL,cAAce,EAAK,MAAM,GAAG,EAAE;AAAA,IAC9B,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,IACnB,aAAAf;AAAA,EAAA;AAKN;ACpLA,SAASoB,GAAkB;AAAA,EACzB,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AACF,GAA2B;AAGzB,QAAMC,IAAU,KAAK,IAAI,IAAI,KAAK,MAAMF,IAAQ,EAAE,CAAC,GAC7CG,IACJR,EAAO,SAASO,IACZP,EAAO,MAAM,CAACO,CAAO,IACrBP,GAGAS,IAAYD,EAAc,IAAI,CAACE,MAAUA,IAAQT,CAAS,GAG1DU,IAAc,KAAK,IAAI,GAAGF,GAAW,CAAC,GACtCG,IAAc,KAAK,IAAI,GAAGH,GAAW,CAAC;AAG5C,MAFc,KAAK,IAAI,KAAK,IAAIE,CAAW,GAAG,KAAK,IAAIC,CAAW,CAAC,MAErD,KAAKH,EAAU,WAAW;AACtC,WACE,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,OAAO,GAAGR,CAAK,MAAM,QAAQ,GAAGC,CAAM,KAAA;AAAA,QAE/C,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,8BAA6B,UAAA,mBAAA,CAAgB;AAAA,MAAA;AAAA,IAAA;AAMnE,QAAMC,IAAS,GACTC,IAAiBV,KAASG,EAAc,SAAS,KAAKM,GACtDE,IAAW,KAAK,IAAI,GAAGD,IAAiBP,EAAc,MAAM,GAK5DS,IAAaL,IAAcD,GAC3BO,IACJD,IAAa,IAAKL,IAAcK,IAAc,MAAM;AAEtD,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,+BAEb,UAAA;AAAA,IAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,OAAO,GAAGd,CAAK;AAAA,UACf,QAAQ,GAAGC,CAAM;AAAA,QAAA;AAAA,QAInB,UAAA;AAAA,UAAA,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,KAAK,GAAGK,CAAe;AAAA,gBACvB,iBAAiB;AAAA,gBACjB,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UAAA;AAAA,UAIDT,EAAU,IAAI,CAACW,GAAUC,MAAU;AAElC,kBAAMC,IAAmB,KAAK,IAAIF,CAAQ,IAAIH,GACxCM,IAAY,KAAK,IAAI,GAAGD,KAAoBhB,IAAS,EAAE,GACvDkB,IAAaJ,KAAY,GACzBK,IAAcJ,MAAUb,EAAc,SAAS,GAC/CkB,IAAQF,IAAatB,IAAgBC,GACrCwB,IAAYN,KAASL,IAAWF;AAEtC,mBACE,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,MAAM,GAAGc,CAAS;AAAA,kBAClB,OAAO,GAAGX,CAAQ;AAAA,kBAClB,QAAQ,GAAGO,CAAS;AAAA,kBACpB,iBAAiBG;AAAA,kBACjB,SAASD,IAAc,IAAI;AAAA;AAAA,kBAE3B,GAAID,IACA,EAAE,QAAQ,GAAG,MAAMN,CAAe,IAAA,IAClC,EAAE,KAAK,GAAGA,CAAe,IAAA;AAAA,kBAC7B,QAAQ;AAAA,gBAAA;AAAA,gBAEV,OAAO,GAAGd,EAAYI,EAAca,CAAK,CAAC,CAAC,KAAKD,KAAY,IAAI,MAAM,EAAE,GAAGhB,EAAYgB,CAAQ,CAAC;AAAA,cAAA;AAAA,cAd3FC;AAAA,YAAA;AAAA,UAiBX,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAIH,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,QAAQ,GAAGb,CAAM,KAAA;AAAA,QAE1B,UAAA;AAAA,UAAA,gBAAAa,EAAC,QAAA,EAAK,UAAA;AAAA,YAAA;AAAA,YAAEf,EAAYQ,CAAW;AAAA,UAAA,GAAE;AAAA,4BAChC,QAAA,EACE,UAAA;AAAA,aAAAD,IAAc,GAAI;AAAA,YAClBP,EAAYO,CAAW;AAAA,UAAA,EAAA,CAC1B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEA,SAAwBiB,GAAS;AAAA,EAAA,MAC/BlC;AAAAA,EACA,aAAAmC;AAAA,EACA,eAAAC,IAAgB,CAAA;AAAA,EAChB,aAAAzC;AAAA,EACA,QAAAiB,IAAS;AAAA,EACT,cAAAyB;AACF,GAAe;AACb,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAE,GACrC,CAACC,GAAWC,CAAY,IAAIF,EAAS,GAAG,GACxCG,IAAeC,EAAuB,IAAI,GAC1CC,IAAWD,EAAuB,IAAI,GACtC,EAAE,eAAAE,EAAA,IAAkBC,GAAA;AAmD1B,MAhDAC,GAAU,MAAM;AACd,UAAMC,IAAmB,MAAM;AAC7B,UAAIN,EAAa,SAAS;AAExB,cAAMO,IADYP,EAAa,QACR,sBAAA,GACjBQ,IAAiBD,EAAK,OACtBE,IAAkBF,EAAK;AAE7B,YAAIC,IAAiB,KAAKC,IAAkB,GAAG;AAC7C,gBAAMC,IAAiBF,IAAiB,GAClCG,IAAkBF,IAAkB,GACpCG,IAAe,KAAK,IAAIF,GAAgBC,CAAe,GACvDE,IAAkB,KAAK,IAAI,IAAI,KAAK,IAAID,GAAc,GAAG,CAAC;AAChE,UAAAhB,EAAYiB,CAAe,GAE3B,WAAW,MAAM;AACf,gBAAIX,EAAS,SAAS;AAEpB,oBAAMY,IADWZ,EAAS,QAAQ,sBAAA,EACH,OAEzBa,IAAoBP,IAAiB,KACrCQ,KAAiB,KAAK;AAAA,gBAC1BF;AAAA,gBACA,KAAK,IAAIC,GAAmBP,IAAiB,GAAG;AAAA,cAAA;AAElD,cAAAT,EAAa,KAAK,IAAI,KAAKiB,EAAc,CAAC;AAAA,YAC5C;AAAA,UACF,GAAG,EAAE;AAAA,QACP;AAAA,MACF;AAAA,IACF,GAEMC,IAAQ,WAAWX,GAAkB,EAAE,GAEvCY,IAAiB,IAAI,eAAe,MAAM;AAC9C,iBAAWZ,GAAkB,EAAE;AAAA,IACjC,CAAC;AAED,WAAIN,EAAa,WACfkB,EAAe,QAAQlB,EAAa,OAAO,GAGtC,MAAM;AACX,mBAAaiB,CAAK,GAClBC,EAAe,WAAA;AAAA,IACjB;AAAA,EACF,GAAG,CAAC7D,GAAMmC,CAAW,CAAC,GAElB,CAACnC,KAAQA,EAAK,WAAW;AAC3B,WACE,gBAAAmB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,QAAQP,MAAW,SAAS,SAASA;AAAA,UACrC,WAAWA,MAAW,SAAS,UAAU;AAAA,QAAA;AAAA,QAG3C,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,UAAA,gBAAAN,EAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,qBAAiB;AAAA,UAC7D,gBAAAA,EAAC,OAAA,EAAI,WAAU,kCAAiC,UAAA,4BAAA,CAEhD;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAMN,MAAI2C,IAAwB,CAAA,GACxBC,IAA4B,CAAA;AAchC,MAZI5B,GAAa,UACf2B,IAAc,MAAM,QAAQ3B,EAAY,KAAK,IACzCA,EAAY,QACZ,CAACA,EAAY,KAAK,IAGpBA,GAAa,UACf4B,IAAkB,MAAM,QAAQ5B,EAAY,KAAK,IAC7CA,EAAY,QACZ,CAACA,EAAY,KAAK,IAGpB2B,EAAY,WAAW;AACzB,WACE,gBAAA3C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,QAAQP,MAAW,SAAS,SAASA;AAAA,UACrC,WAAWA,MAAW,SAAS,UAAU;AAAA,UACzC,iBAAiB;AAAA,UACjB,OAAO;AAAA,UACP,aAAa;AAAA,QAAA;AAAA,QAGf,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,UAAA,gBAAAN,EAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,uBAAmB;AAAA,UAC/D,gBAAAA,EAAC,OAAA,EAAI,WAAU,WAAU,UAAA,8BAAA,CAA2B;AAAA,QAAA,EAAA,CACtD;AAAA,MAAA;AAAA,IAAA;AAKN,QAAM6C,IAAaF,EAAY,CAAC,GAC1BlE,IAAiBmE,EAAgB,CAAC;AAGxC,MAAIE,IAAa,CAAC,GAAGjE,CAAI;AACzB,EAAIJ,MACFqE,IAAaA,EAAW,KAAK,CAACC,GAAGC,MAAM;AACrC,UAAMC,IAAOF,EAAEtE,CAAc,GACvByE,IAAOF,EAAEvE,CAAc;AAC7B,WAAIwE,IAAOC,IAAa,KACpBD,IAAOC,IAAa,IACjB;AAAA,EACT,CAAC;AAIH,QAAM,EAAE,uBAAApE,IAAwB,IAAM,gBAAAC,IAAiB,OACrDkC,GACI;AAAA,IACJ,cAAAkC;AAAA,IACA,0BAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAvF;AAAA,EAAA,IACEc;AAAA,IACFkE;AAAA,IACArE;AAAA,IACAD;AAAA,IACAM;AAAA,IACAC;AAAA,EAAA,GAOII,IAHYgE,EAIf,IAAI,CAACG,MAAQA,EAAIT,CAAU,CAAC,EAC5B,OAAO,CAACU,MAAQA,KAAQ,QAA6B,CAAC,MAAM,OAAOA,CAAG,CAAC,CAAC,EACxE,IAAI,CAACA,MAAQ,OAAOA,CAAG,CAAC;AAE3B,MAAIpE,EAAO,SAAS;AAClB,WACE,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,QAAQP,MAAW,SAAS,SAASA;AAAA,UACrC,WAAWA,MAAW,SAAS,UAAU;AAAA,UACzC,iBAAiB;AAAA,UACjB,OAAO;AAAA,UACP,aAAa;AAAA,QAAA;AAAA,QAGf,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,UAAA,gBAAAN,EAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,qBAAiB;AAAA,UAC7D,gBAAAA,EAAC,OAAA,EAAI,WAAU,WAAU,UAAA,qDAEzB;AAAA,UACA,gBAAAM,EAAC,OAAA,EAAI,WAAU,WAAU,UAAA;AAAA,YAAA;AAAA,YAAsBnB,EAAO;AAAA,UAAA,EAAA,CAAO;AAAA,QAAA,EAAA,CAC/D;AAAA,MAAA;AAAA,IAAA;AAMN,QAAMC,IAAYD,EAAOA,EAAO,SAAS,CAAC,GACpCqE,IAAkBrE,EAAOA,EAAO,SAAS,CAAC,GAC1CsE,IAAiBrE,IAAYoE,GAC7BE,IACJF,MAAoB,IACfC,IAAiB,KAAK,IAAID,CAAe,IAAK,MAC/C,GAEAG,IAAmBF,KAAkB,GAGrCG,IAAe,CAAC/D,MAA6C;AAEjE,QAAIoB,EAAc;AAChB,aAAOA,EAAc,YAAYpB,CAAK;AAIxC,QAAIA,KAAU;AACZ,aAAO;AAGT,UAAMgE,IAAW5C,EAAc,YAAY,GACrC6C,IAAS7C,EAAc,UAAU;AAEvC,QAAI8C;AAEJ,WAAI,KAAK,IAAIlE,CAAK,KAAK,MACrBkE,KAAkBlE,IAAQ,KAAK,QAAQgE,CAAQ,IAAI,MAC1C,KAAK,IAAIhE,CAAK,KAAK,MAC5BkE,KAAkBlE,IAAQ,KAAK,QAAQgE,CAAQ,IAAI,MAC1C,KAAK,IAAIhE,CAAK,KAAK,MAC5BkE,KAAkBlE,IAAQ,KAAK,QAAQgE,CAAQ,IAAI,MAEnDE,IAAiBlE,EAAM,QAAQgE,CAAQ,GAGlCC,IAASC;AAAA,EAClB,GAGMC,IAAmB,MAAc;AACrC,QACE/C,EAAc,uBAAuB,UACrCC,GAAc,QACd;AACA,YAAM+C,IAAahD,EAAc;AACjC,UAAIgD,KAAc,KAAKA,IAAa/C,EAAa,OAAO;AACtD,eAAOA,EAAa,OAAO+C,CAAU;AAAA,IAEzC;AACA,WAAO;AAAA,EACT,GAEMC,IAAmB,MAAc;AACrC,QACEjD,EAAc,uBAAuB,UACrCC,GAAc,QACd;AACA,YAAM+C,IAAahD,EAAc;AACjC,UAAIgD,KAAc,KAAKA,IAAa/C,EAAa,OAAO;AACtD,eAAOA,EAAa,OAAO+C,CAAU;AAAA,IAEzC;AACA,WAAO;AAAA,EACT,GAEM5E,IAAgB2E,EAAA,GAChB1E,IAAgB4E,EAAA,GAChBC,IAAeR,IAAmBtE,IAAgBC;AAExD,SACE,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKkB;AAAA,MACL,WAAU;AAAA,MACV,OAAO;AAAA,QACL,QAAQ/B,MAAW,SAAS,SAASA;AAAA,QACrC,WAAWA,MAAW,SAAS,UAAU;AAAA,MAAA;AAAA,MAI3C,UAAA;AAAA,QAAA,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UAAU;AAAA,cACV,YAAY;AAAA,YAAA;AAAA,YAGd,UAAA;AAAA,cAAA,gBAAAN,EAAC,UACG,WAAA,MAAM;AACN,sBAAMoE,IAAQzC,EAAckB,CAAU;AACtC,uBAAOuB,KAASA,EAAM,SAAS,IAAIA,IAAQvB;AAAA,cAC7C,KAAG,CACL;AAAA,eACEO,KAA4BC,MAC5B,gBAAArD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OACEqD,IACI,iBAAiBvF,KAAe,QAAQ,KACxC,+BAA+BA,CAAW;AAAA,kBAEhD,WAAU;AAAA,kBAEV,UAAA,gBAAAkC;AAAA,oBAACqE;AAAA,oBAAA;AAAA,sBACC,MAAMC;AAAAA,sBACN,WAAU;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACZ;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,QAKJ,gBAAAhE,EAAC,OAAA,EAAI,WAAU,mDAEb,UAAA;AAAA,UAAA,gBAAAN;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK0B;AAAA,cACL,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,UAAU,GAAGP,CAAQ;AAAA,gBACrB,OAAO;AAAA;AAAA,cAAA;AAAA,cAGR,YAAa/B,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAIzB,gBAAAkB,EAAC,OAAA,EAAI,WAAU,+BAEb,UAAA;AAAA,YAAA,gBAAAN;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,OAAOmE;AAAA,kBACP,UAAU,GAAGhD,IAAW,IAAI;AAAA,gBAAA;AAAA,gBAG7B,cAAmB,MAAM;AAAA,cAAA;AAAA,YAAA;AAAA,YAI5B,gBAAAb,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,cAAA,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,UAAU,GAAGa,IAAW,IAAI;AAAA,oBAC5B,OAAOgD;AAAA,kBAAA;AAAA,kBAGR,UAAA;AAAA,oBAAAR,IAAmB,MAAM;AAAA,oBACzBC,EAAaH,CAAc;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAE9B,gBAAAnD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,UAAU,GAAGa,IAAW,IAAI;AAAA,oBAC5B,OAAOgD;AAAA,oBACP,SAAS;AAAA,kBAAA;AAAA,kBAGV,UAAA;AAAA,oBAAAR,IAAmB,MAAM;AAAA,oBACzBD,EAAiB,QAAQ,CAAC;AAAA,oBAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC/B,EAAA,CACF;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAGCzC,EAAc,UAAU,CAACA,EAAc,eACtC,gBAAAjB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,SAAS;AAAA,YAAA;AAAA,YAGV,UAAAiB,EAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAKlBA,EAAc,kBAAkB,MAAS9B,EAAO,SAAS,KACxD,gBAAAa,EAAC,OAAA,EAAI,WAAU,mDACb,UAAA,gBAAAA;AAAA,UAACd;AAAA,UAAA;AAAA,YACC,QAAAC;AAAA,YACA,WAAAC;AAAA,YACA,eAAAC;AAAA,YACA,eAAAC;AAAA,YACA,aAAasE;AAAA,YACb,OAAOtC;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QAAA,EACV,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;;;;"}

package/dist/client/chunks/{chart-kpinumber-DSH8RJxb.js → chart-kpinumber-HOPfcK2N.js}

@@ -1,9 +1,9 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { useState as W, useRef as E, useEffect as Z } from "react";
 import { ac as q, k as ee } from "./icons-B2XSxpVK.js";
-import { u as te } from "./chart-activitygridchart-D17Fxiuf.js";
-import { p as se, f as ne, c as ie } from "./chart-areachart-udSbAzl1.js";
-import { f as re } from "./chart-kpidelta-D-FR2o4V.js";
+import { u as te } from "./chart-activitygridchart-CUGN9Xq9.js";
+import { p as se, f as ne, c as ie } from "./chart-areachart-B4tknnsY.js";
+import { f as re } from "./chart-kpidelta-7-KOmb3w.js";
 function oe({
   values: m,
   min: o,
@@ -395,4 +395,4 @@ export {
   oe as D,
   ge as K
 };
-//# sourceMappingURL=chart-kpinumber-DSH8RJxb.js.map
+//# sourceMappingURL=chart-kpinumber-HOPfcK2N.js.map

package/dist/client/chunks/{chart-kpinumber-DSH8RJxb.js.map → chart-kpinumber-HOPfcK2N.js.map}

@@ -1 +1 @@
-{"version":3,"file":"chart-kpinumber-DSH8RJxb.js","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=\"flex flex-col items-center\">\n      {/* Horizontal bars representing actual data distribution */}\n      <div \n        className=\"relative flex items-end justify-center 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=\"flex-1 rounded-t-sm transition-all duration-300 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=\"absolute top-0 bottom-0 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=\"absolute -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=\"absolute top-0 bottom-0 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=\"absolute -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=\"flex justify-between mt-2 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=\"text-center mt-1 text-xs text-dc-text-muted\">\n        Average of {values.length} values\n      </div>\n    </div>\n  )\n}","import { useState, useRef, useEffect } from 'react'\nimport { Icon } from '@iconify/react'\nimport infoCircleIcon from '@iconify-icons/tabler/info-circle'\nimport { useCubeContext } from '../../providers/CubeProvider'\nimport DataHistogram from '../DataHistogram'\nimport { parseTargetValues, calculateVariance, formatVariance } from '../../utils/targetUtils'\nimport { filterIncompletePeriod } from '../../utils/periodUtils'\nimport type { ChartProps } from '../../types'\n\nexport default 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  const { getFieldLabel } = useCubeContext()\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  if (!data || data.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full h-full\"\n        style={{\n          height: height === \"100%\" ? \"100%\" : height,\n          minHeight: height === \"100%\" ? '200px' : undefined\n        }}\n      >\n        <div className=\"text-center text-dc-text-muted\">\n          <div className=\"text-sm font-semibold mb-1\">No data available</div>\n          <div className=\"text-xs text-dc-text-secondary\">No data points to display</div>\n        </div>\n      </div>\n    )\n  }\n\n  // Extract value field from chart config - handle both string and array formats\n  let valueFields: string[] = []\n  if (chartConfig?.yAxis) {\n    // Handle both string and array formats\n    if (typeof chartConfig.yAxis === 'string') {\n      valueFields = [chartConfig.yAxis]\n    } else if (Array.isArray(chartConfig.yAxis)) {\n      valueFields = chartConfig.yAxis\n    }\n  }\n  \n  \n  if (valueFields.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full 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=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">Configuration Error</div>\n          <div className=\"text-xs\">No measure fields configured</div>\n        </div>\n      </div>\n    )\n  }\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  // Sort data by time dimension if available (for proper filtering)\n  let sortedData = [...data]\n  if (timeDimensionField) {\n    sortedData = sortedData.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\n  // Filter out incomplete or last period if enabled\n  const { useLastCompletePeriod = true, skipLastPeriod = false } = displayConfig\n  const {\n    filteredData,\n    excludedIncompletePeriod,\n    skippedLastPeriod,\n    granularity\n  } = filterIncompletePeriod(sortedData, timeDimensionField, queryObject, useLastCompletePeriod, skipLastPeriod)\n\n  // Use filtered data for calculations\n  const dataToUse = filteredData\n\n  // Extract values for the selected field\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  const values = rawValues\n    .filter(val => val !== null && val !== undefined && !isNaN(Number(val)))\n    .map(val => Number(val))\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=\"flex flex-col items-center justify-center w-full h-full 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 font-bold text-center 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=\"font-bold leading-none text-dc-text-muted\"\n          style={{\n            fontSize: `${fontSize}px`\n          }}\n        >\n          —\n        </div>\n\n        <div className=\"text-xs text-dc-text-muted mt-2\">No data</div>\n      </div>\n    )\n  }\n\n  // Calculate statistics\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\n  // Format number with appropriate units and decimals (no prefix/suffix here, handled separately)\n  const formatNumber = (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  }\n\n  const mainValue = values.length === 1 ? values[0] : avg\n  const showStats = values.length > 1\n\n  // Get color from palette by index, default to first color in palette\n  const getValueColor = (): 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  }\n\n  const valueColor = getValueColor()\n  \n  // Process target values for variance calculation\n  const targetValues = parseTargetValues(displayConfig?.target || '')\n  const targetValue = targetValues.length > 0 ? targetValues[0] : null // Use first target value\n  const variance = targetValue !== null ? calculateVariance(mainValue, targetValue) : null\n  \n  // Get colors for variance display (similar to KpiDelta)\n  const getVarianceColor = (): 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  }\n\n  return (\n    <div \n      ref={containerRef}\n      className=\"flex flex-col items-center justify-center w-full h-full 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 font-bold text-center mb-3 flex items-center justify-center 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=\"cursor-help\"\n            >\n              <Icon icon={infoCircleIcon} className=\"w-4 h-4 text-dc-text-muted opacity-70\" />\n            </span>\n          )}\n        </div>\n\n        {/* Main KPI Value and Variance - Horizontal layout */}\n        <div className=\"flex items-center justify-center gap-4 mb-3\">\n          <div \n            ref={valueRef}\n            className=\"font-bold 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=\"flex flex-col items-start\">\n              <div \n                className=\"font-semibold\"\n                style={{ \n                  fontSize: `${Math.max(12, fontSize * 0.3)}px`,\n                  color: getVarianceColor(),\n                  lineHeight: '1.2'\n                }}\n              >\n                {formatVariance(variance, 1)}\n              </div>\n              <div\n                className=\"text-dc-text-muted 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 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=\"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}"],"names":["DataHistogram","values","min","max","color","bucketCount","height","formatValue","val","width","showAverageIndicator","targetValue","buckets","range","value","bucketIndex","maxBucketCount","average","sum","averagePosition","targetPosition","jsxs","count","i","normalizedHeight","minHeight","displayHeight","jsx","KpiNumber","data","chartConfig","displayConfig","queryObject","colorPalette","fontSize","setFontSize","useState","textWidth","setTextWidth","containerRef","useRef","valueRef","getFieldLabel","useCubeContext","useEffect","updateDimensions","rect","containerWidth","containerHeight","widthBasedSize","heightBasedSize","baseFontSize","clampedFontSize","measuredWidth","effectiveWidth","timer","resizeObserver","valueFields","valueField","timeDimensionField","sortedData","a","b","aVal","bVal","useLastCompletePeriod","skipLastPeriod","filteredData","excludedIncompletePeriod","skippedLastPeriod","granularity","filterIncompletePeriod","row","numericFields","key","avg","acc","formatNumber","decimals","prefix","formattedValue","mainValue","showStats","valueColor","colorIndex","targetValues","parseTargetValues","variance","calculateVariance","getVarianceColor","positiveIndex","negativeIndex","label","Icon","infoCircleIcon","formatVariance"],"mappings":"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"}
+{"version":3,"file":"chart-kpinumber-HOPfcK2N.js","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=\"flex flex-col items-center\">\n      {/* Horizontal bars representing actual data distribution */}\n      <div \n        className=\"relative flex items-end justify-center 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=\"flex-1 rounded-t-sm transition-all duration-300 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=\"absolute top-0 bottom-0 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=\"absolute -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=\"absolute top-0 bottom-0 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=\"absolute -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=\"flex justify-between mt-2 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=\"text-center mt-1 text-xs text-dc-text-muted\">\n        Average of {values.length} values\n      </div>\n    </div>\n  )\n}","import { useState, useRef, useEffect } from 'react'\nimport { Icon } from '@iconify/react'\nimport infoCircleIcon from '@iconify-icons/tabler/info-circle'\nimport { useCubeContext } from '../../providers/CubeProvider'\nimport DataHistogram from '../DataHistogram'\nimport { parseTargetValues, calculateVariance, formatVariance } from '../../utils/targetUtils'\nimport { filterIncompletePeriod } from '../../utils/periodUtils'\nimport type { ChartProps } from '../../types'\n\nexport default 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  const { getFieldLabel } = useCubeContext()\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  if (!data || data.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full h-full\"\n        style={{\n          height: height === \"100%\" ? \"100%\" : height,\n          minHeight: height === \"100%\" ? '200px' : undefined\n        }}\n      >\n        <div className=\"text-center text-dc-text-muted\">\n          <div className=\"text-sm font-semibold mb-1\">No data available</div>\n          <div className=\"text-xs text-dc-text-secondary\">No data points to display</div>\n        </div>\n      </div>\n    )\n  }\n\n  // Extract value field from chart config - handle both string and array formats\n  let valueFields: string[] = []\n  if (chartConfig?.yAxis) {\n    // Handle both string and array formats\n    if (typeof chartConfig.yAxis === 'string') {\n      valueFields = [chartConfig.yAxis]\n    } else if (Array.isArray(chartConfig.yAxis)) {\n      valueFields = chartConfig.yAxis\n    }\n  }\n  \n  \n  if (valueFields.length === 0) {\n    return (\n      <div\n        className=\"flex items-center justify-center w-full 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=\"text-center\">\n          <div className=\"text-sm font-semibold mb-1\">Configuration Error</div>\n          <div className=\"text-xs\">No measure fields configured</div>\n        </div>\n      </div>\n    )\n  }\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  // Sort data by time dimension if available (for proper filtering)\n  let sortedData = [...data]\n  if (timeDimensionField) {\n    sortedData = sortedData.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\n  // Filter out incomplete or last period if enabled\n  const { useLastCompletePeriod = true, skipLastPeriod = false } = displayConfig\n  const {\n    filteredData,\n    excludedIncompletePeriod,\n    skippedLastPeriod,\n    granularity\n  } = filterIncompletePeriod(sortedData, timeDimensionField, queryObject, useLastCompletePeriod, skipLastPeriod)\n\n  // Use filtered data for calculations\n  const dataToUse = filteredData\n\n  // Extract values for the selected field\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  const values = rawValues\n    .filter(val => val !== null && val !== undefined && !isNaN(Number(val)))\n    .map(val => Number(val))\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=\"flex flex-col items-center justify-center w-full h-full 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 font-bold text-center 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=\"font-bold leading-none text-dc-text-muted\"\n          style={{\n            fontSize: `${fontSize}px`\n          }}\n        >\n          —\n        </div>\n\n        <div className=\"text-xs text-dc-text-muted mt-2\">No data</div>\n      </div>\n    )\n  }\n\n  // Calculate statistics\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\n  // Format number with appropriate units and decimals (no prefix/suffix here, handled separately)\n  const formatNumber = (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  }\n\n  const mainValue = values.length === 1 ? values[0] : avg\n  const showStats = values.length > 1\n\n  // Get color from palette by index, default to first color in palette\n  const getValueColor = (): 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  }\n\n  const valueColor = getValueColor()\n  \n  // Process target values for variance calculation\n  const targetValues = parseTargetValues(displayConfig?.target || '')\n  const targetValue = targetValues.length > 0 ? targetValues[0] : null // Use first target value\n  const variance = targetValue !== null ? calculateVariance(mainValue, targetValue) : null\n  \n  // Get colors for variance display (similar to KpiDelta)\n  const getVarianceColor = (): 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  }\n\n  return (\n    <div \n      ref={containerRef}\n      className=\"flex flex-col items-center justify-center w-full h-full 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 font-bold text-center mb-3 flex items-center justify-center 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=\"cursor-help\"\n            >\n              <Icon icon={infoCircleIcon} className=\"w-4 h-4 text-dc-text-muted opacity-70\" />\n            </span>\n          )}\n        </div>\n\n        {/* Main KPI Value and Variance - Horizontal layout */}\n        <div className=\"flex items-center justify-center gap-4 mb-3\">\n          <div \n            ref={valueRef}\n            className=\"font-bold 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=\"flex flex-col items-start\">\n              <div \n                className=\"font-semibold\"\n                style={{ \n                  fontSize: `${Math.max(12, fontSize * 0.3)}px`,\n                  color: getVarianceColor(),\n                  lineHeight: '1.2'\n                }}\n              >\n                {formatVariance(variance, 1)}\n              </div>\n              <div\n                className=\"text-dc-text-muted 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 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=\"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}"],"names":["DataHistogram","values","min","max","color","bucketCount","height","formatValue","val","width","showAverageIndicator","targetValue","buckets","range","value","bucketIndex","maxBucketCount","average","sum","averagePosition","targetPosition","jsxs","count","i","normalizedHeight","minHeight","displayHeight","jsx","KpiNumber","data","chartConfig","displayConfig","queryObject","colorPalette","fontSize","setFontSize","useState","textWidth","setTextWidth","containerRef","useRef","valueRef","getFieldLabel","useCubeContext","useEffect","updateDimensions","rect","containerWidth","containerHeight","widthBasedSize","heightBasedSize","baseFontSize","clampedFontSize","measuredWidth","effectiveWidth","timer","resizeObserver","valueFields","valueField","timeDimensionField","sortedData","a","b","aVal","bVal","useLastCompletePeriod","skipLastPeriod","filteredData","excludedIncompletePeriod","skippedLastPeriod","granularity","filterIncompletePeriod","row","numericFields","key","avg","acc","formatNumber","decimals","prefix","formattedValue","mainValue","showStats","valueColor","colorIndex","targetValues","parseTargetValues","variance","calculateVariance","getVarianceColor","positiveIndex","negativeIndex","label","Icon","infoCircleIcon","formatVariance"],"mappings":"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"}