@bpfdev/oly-ui 1.0.11 → 1.0.13

package/dist/index.js

@@ -49,6 +49,7 @@ __export(index_exports, {
   DEFAULT_FOOTFALL_TILE_ICONS: () => DEFAULT_FOOTFALL_TILE_ICONS,
   DEFAULT_PEAK_BILLING_HOURS_INFO_POPOVER: () => DEFAULT_PEAK_BILLING_HOURS_INFO_POPOVER,
   DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER: () => DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER,
+  DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER: () => DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER,
   FalconAuditTimeline: () => FalconAuditTimeline,
   FalconButton: () => FalconButton,
   FalconDIstrictFilter: () => FalconDIstrictFilter,
@@ -87,6 +88,17 @@ __export(index_exports, {
   QueueTimeBreakdownStackedBar: () => QueueTimeBreakdownStackedBar,
   QueueTimePeriodFilter: () => TimePeriodFilter,
   RankedBarList: () => RankedBarList,
+  STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR: () => STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR,
+  STACKED_COMPARISON_DEFAULT_FRAME_BORDER: () => STACKED_COMPARISON_DEFAULT_FRAME_BORDER,
+  STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR: () => STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR,
+  STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR: () => STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR,
+  STACKED_COMPARISON_DEFAULT_STACK_COLORS: () => STACKED_COMPARISON_DEFAULT_STACK_COLORS,
+  STORE_PERFORMANCE_DEFAULT_BUCKETS: () => STORE_PERFORMANCE_DEFAULT_BUCKETS,
+  STORE_PERFORMANCE_DEFAULT_DATA: () => STORE_PERFORMANCE_DEFAULT_DATA,
+  StackedComparisonBarChart: () => StackedComparisonBarChart,
+  StackedComparisonBarChartCustomizationProvider: () => StackedComparisonBarChartCustomizationProvider,
+  StackedComparisonBarChartTooltip: () => StackedComparisonBarChartTooltip,
+  StorePerformanceByAssist: () => StorePerformanceByAssist,
   TIME_PERIOD_FILTER_INFO_POPOVER: () => TIME_PERIOD_FILTER_INFO_POPOVER,
   TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN: () => TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN,
   TimePeriodFilter: () => TimePeriodFilter,
@@ -118,10 +130,13 @@ __export(index_exports, {
   peakBillingHoursVisitsMock: () => peakBillingHoursVisitsMock,
   preprocessData: () => preprocessData,
   skipSingleBranchLevels: () => skipSingleBranchLevels,
+  stackedComparisonMergeCss: () => mergeCss7,
+  stackedComparisonMergeSx: () => mergeSx4,
   toRechartsTreemapData: () => toRechartsTreemapData,
   useBillingCounterAnalyticsCustomization: () => useBillingCounterAnalyticsCustomization,
   usePeakBillingHoursCustomization: () => usePeakBillingHoursCustomization,
-  useQueueTimeBreakdownCustomization: () => useQueueTimeBreakdownCustomization
+  useQueueTimeBreakdownCustomization: () => useQueueTimeBreakdownCustomization,
+  useStackedComparisonBarChartCustomization: () => useStackedComparisonBarChartCustomization
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -4015,7 +4030,7 @@ var FalconAuditTimeline = ({
               date: run.date,
               ordinal: run.label ?? getOrdinalStr(idx + 1),
               status: run.status === "done" ? "completed" : "upcoming",
-              onExportClick: onExportReportClick ? (e) => onExportReportClick(e, run.date) : void 0,
+              onExportClick: onExportReportClick ? (e) => onExportReportClick(e, run.date, run) : void 0,
               brandFont,
               interFont,
               completedColor,
@@ -4053,7 +4068,16 @@ var FalconAuditTimeline = ({
               date: `${activeMonth.label} 5`,
               ordinal: getOrdinalStr(precedingEvents + 1),
               status: isFirstActiveMonth ? "completed" : "upcoming",
-              onExportClick: onExportReportClick ? (e) => onExportReportClick(e, `${activeMonth.label} 5`) : void 0,
+              onExportClick: onExportReportClick ? (e) => {
+                const date = `${activeMonth.label} 5`;
+                onExportReportClick(e, date, {
+                  run_number: precedingEvents + 1,
+                  date,
+                  month: activeMonth.label,
+                  year: activeMonth.year,
+                  status: isFirstActiveMonth ? "done" : "scheduled"
+                });
+              } : void 0,
               brandFont,
               interFont,
               completedColor,
@@ -6961,7 +6985,8 @@ function StackTotalLabel({
   width,
   height,
   index,
-  stackTotalFill
+  stackTotalFill,
+  angle = 0
 }) {
   const nx = toNum(x);
   const ny = toNum(y);
@@ -6975,6 +7000,7 @@ function StackTotalLabel({
   const total = rowTotal(row, series);
   const cx = nx + nw / 2;
   const cy = ny - 10;
+  const isHorizontal = angle === 0;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "text",
     {
@@ -6983,7 +7009,8 @@ function StackTotalLabel({
       fill: stackTotalFill,
       fontSize: 12,
       fontWeight: 500,
-      textAnchor: "middle",
+      textAnchor: isHorizontal ? "middle" : "start",
+      transform: isHorizontal ? void 0 : `rotate(${angle} ${cx} ${cy})`,
       children: formatBarLabel(total)
     }
   );
@@ -7034,7 +7061,8 @@ function FootfallByAgeGroups({
   barStackId = "footfall-by-age-groups",
   xAxisTickAngle = 0,
   xAxisTickDx = 0,
-  xAxisTickStyle
+  xAxisTickStyle,
+  barValueLabelAngle = 0
 }) {
   const [activeIndex, setActiveIndex] = React11.useState(null);
   const handleMouseEnter = React11.useCallback((_, index) => {
@@ -7377,7 +7405,8 @@ function FootfallByAgeGroups({
                                 ...labelProps,
                                 series,
                                 rows: processedData,
-                                stackTotalFill: chartColors.stackTotalLabelFill
+                                stackTotalFill: chartColors.stackTotalLabelFill,
+                                angle: barValueLabelAngle
                               }
                             )
                           }
@@ -8575,7 +8604,8 @@ function BarTopLabel({
   y,
   width,
   value,
-  fill
+  fill,
+  angle = 0
 }) {
   const nx = toNum3(x);
   const ny = toNum3(y);
@@ -8589,6 +8619,7 @@ function BarTopLabel({
   }
   const cx = nx + nw / 2;
   const cy = ny - 10;
+  const isHorizontal = angle === 0;
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "text",
     {
@@ -8597,7 +8628,8 @@ function BarTopLabel({
       fill,
       fontSize: 12,
       fontWeight: 500,
-      textAnchor: "middle",
+      textAnchor: isHorizontal ? "middle" : "start",
+      transform: isHorizontal ? void 0 : `rotate(${angle} ${cx} ${cy})`,
       children: formatBarLabel3(n)
     }
   );
@@ -8861,6 +8893,7 @@ function PasserbyConversion({
   showLegend = true,
   showConversionLine: showConversionLineProp,
   showBarValueLabels = true,
+  barValueLabelAngle = 0,
   chartMargin: chartMarginProp,
   yAxisTickDx = -8,
   yAxisTickStyle,
@@ -9337,7 +9370,8 @@ function PasserbyConversion({
                               BarTopLabel,
                               {
                                 ...props,
-                                fill: chartColors.barValueLabelFill
+                                fill: chartColors.barValueLabelFill,
+                                angle: barValueLabelAngle
                               }
                             )
                           }
@@ -9373,7 +9407,8 @@ function PasserbyConversion({
                               BarTopLabel,
                               {
                                 ...props,
-                                fill: chartColors.barValueLabelFill
+                                fill: chartColors.barValueLabelFill,
+                                angle: barValueLabelAngle
                               }
                             )
                           }
@@ -10032,7 +10067,8 @@ function BarTopLabel2({
   y,
   width,
   value,
-  fill
+  fill,
+  angle = 0
 }) {
   const nx = toNum4(x);
   const ny = toNum4(y);
@@ -10046,6 +10082,7 @@ function BarTopLabel2({
   }
   const cx = nx + nw / 2;
   const cy = ny - 10;
+  const isHorizontal = angle === 0;
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "text",
     {
@@ -10054,7 +10091,8 @@ function BarTopLabel2({
       fill,
       fontSize: 12,
       fontWeight: 500,
-      textAnchor: "middle",
+      textAnchor: isHorizontal ? "middle" : "start",
+      transform: isHorizontal ? void 0 : `rotate(${angle} ${cx} ${cy})`,
       children: formatBarLabel4(n)
     }
   );
@@ -10320,6 +10358,7 @@ function WalkinTraffic({
   showTrendLine: showTrendLineProp,
   showLineInLegend = false,
   showBarValueLabels = true,
+  barValueLabelAngle = 0,
   chartMargin: chartMarginProp,
   yAxisTickDx = -8,
   yAxisTickStyle,
@@ -10712,7 +10751,8 @@ function WalkinTraffic({
                             BarTopLabel2,
                             {
                               ...props,
-                              fill: chartColors.barValueLabelFill
+                              fill: chartColors.barValueLabelFill,
+                              angle: barValueLabelAngle
                             }
                           )
                         }
@@ -12350,12 +12390,956 @@ function QueueTimeBreakdown({
   ] }) }) }) });
 }
 
+// src/components/charts/StackedComparisonBarChart/stackedComparisonBarChart.chartTokens.ts
+var STACKED_COMPARISON_DEFAULT_STACK_COLORS = [
+  "#CFE0FB",
+  "#7FB1F0",
+  "#3D7CDF",
+  "#1E2A5E"
+];
+var STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR = "#F47C7C";
+var STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR = "#2563EB";
+var STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR = "#EF4444";
+var STACKED_COMPARISON_DEFAULT_FRAME_BORDER = "#EAECEF";
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChart.tsx
+var import_Box20 = __toESM(require("@mui/material/Box"));
+var import_ButtonBase2 = __toESM(require("@mui/material/ButtonBase"));
+var import_Stack18 = __toESM(require("@mui/material/Stack"));
+var import_Typography17 = __toESM(require("@mui/material/Typography"));
+var React25 = __toESM(require("react"));
+var import_recharts9 = require("recharts");
+
+// src/components/charts/StackedComparisonBarChart/stackedComparisonBarChartCustomization.merge.ts
+function mergeCss7(a, b) {
+  if (!b) {
+    return { ...a };
+  }
+  return { ...a, ...b };
+}
+function mergeSx4(...parts) {
+  const flat = parts.filter(Boolean);
+  if (flat.length === 0) {
+    return void 0;
+  }
+  if (flat.length === 1) {
+    return flat[0];
+  }
+  return flat.flat();
+}
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChartCustomizationContext.tsx
+var React24 = __toESM(require("react"));
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var StackedComparisonBarChartCustomizationContext = React24.createContext({});
+function StackedComparisonBarChartCustomizationProvider({
+  value,
+  children
+}) {
+  const memo = React24.useMemo(() => value, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(StackedComparisonBarChartCustomizationContext.Provider, { value: memo, children });
+}
+function useStackedComparisonBarChartCustomization() {
+  return React24.useContext(StackedComparisonBarChartCustomizationContext);
+}
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChartTooltip.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function fmt(n) {
+  return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(n);
+}
+function StackedComparisonBarChartTooltip({
+  active,
+  row,
+  buckets,
+  bucketColors,
+  comparisonColor,
+  stackedTotalLabel,
+  comparisonLabel
+}) {
+  const { barChart: bc } = useStackedComparisonBarChartCustomization();
+  const tt = bc?.tooltip;
+  if (!active || !row) {
+    return null;
+  }
+  const borderColor = tt?.borderColor ?? "#E5E7EB";
+  const radius = tt?.borderRadiusPx ?? 10;
+  const shadow = tt?.boxShadow ?? "0 8px 24px rgba(15, 23, 42, 0.12)";
+  const bg = tt?.backgroundColor ?? "#FFFFFF";
+  const pad = tt?.paddingPx ?? 14;
+  const bucketNameColor = tt?.bucketNameColor ?? "#0F172A";
+  const bucketValueColor = tt?.bucketValueColor ?? "#0F172A";
+  const totalStackedLabelColor = tt?.totalStackedLabelColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR;
+  const totalStackedValueColor = tt?.totalStackedValueColor ?? "#1D4ED8";
+  const comparisonLabelColor = tt?.comparisonLabelColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR;
+  const comparisonValueColor = tt?.comparisonValueColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR;
+  const dividerColor = tt?.dividerColor ?? "#E5E7EB";
+  const titleColor = tt?.titleColor ?? "#0F172A";
+  const fs = tt?.fontSizePx ?? 13;
+  const titleFs = tt?.titleFontSizePx ?? 15;
+  const titleText = row.subName ? `${row.name} ${row.subName}` : row.name;
+  const orderedBuckets = [...buckets].reverse();
+  const bodyStyle = mergeCss7(
+    {
+      boxSizing: "border-box",
+      backgroundColor: bg,
+      padding: pad,
+      borderRadius: radius,
+      border: `1px solid ${borderColor}`,
+      boxShadow: shadow,
+      minWidth: tt?.minWidthPx ?? 220,
+      ...tt?.maxWidthPx != null ? { maxWidth: tt.maxWidthPx } : null
+    },
+    tt?.bodyStyle
+  );
+  const rowStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    fontSize: fs,
+    lineHeight: 1.4,
+    margin: "4px 0",
+    fontFamily: "inherit"
+  };
+  const swatch = (color) => ({
+    width: 10,
+    height: 10,
+    borderRadius: "50%",
+    backgroundColor: color,
+    flexShrink: 0,
+    display: "inline-block",
+    marginRight: 8
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { style: { pointerEvents: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: bodyStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "div",
+      {
+        style: {
+          fontSize: titleFs,
+          fontWeight: 700,
+          color: titleColor,
+          marginBottom: 8
+        },
+        children: titleText
+      }
+    ),
+    orderedBuckets.map((b, i) => {
+      const originalIndex = buckets.length - 1 - i;
+      const color = b.color ?? bucketColors[originalIndex] ?? "#94A3B8";
+      const v = row.stacked[b.id] ?? 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: rowStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          "span",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              color: bucketNameColor,
+              fontWeight: 500
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: swatch(color), "aria-hidden": true }),
+              b.label
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: bucketValueColor, fontWeight: 700 }, children: fmt(v) })
+      ] }, b.id);
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "div",
+      {
+        style: {
+          height: 1,
+          background: dividerColor,
+          margin: "10px 0 8px"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { ...rowStyle, margin: "2px 0" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: totalStackedLabelColor, fontWeight: 700 }, children: stackedTotalLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: totalStackedValueColor, fontWeight: 700 }, children: fmt(buckets.reduce((acc, b) => acc + (row.stacked[b.id] ?? 0), 0)) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { ...rowStyle, margin: "6px 0 0" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+        "span",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            color: comparisonLabelColor,
+            fontWeight: 600
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: swatch(comparisonColor), "aria-hidden": true }),
+            comparisonLabel
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: comparisonValueColor, fontWeight: 700 }, children: fmt(row.comparison) })
+    ] })
+  ] }) });
+}
+
+// src/components/charts/StackedComparisonBarChart/StackedComparisonBarChart.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var DEFAULT_AXIS_TICK_FILL = "#9CA3AF";
+var DEFAULT_GRID_STROKE = "#EEF0F3";
+var STACK_KEY = (id) => `stack__${id}`;
+var COMPARISON_KEY = "__comparison";
+function SortIcon({ color }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "path",
+          {
+            d: "M4 2.5V11.5M4 11.5L1.5 9M4 11.5L6.5 9",
+            stroke: color,
+            strokeWidth: "1.4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "path",
+          {
+            d: "M10 11.5V2.5M10 2.5L7.5 5M10 2.5L12.5 5",
+            stroke: color,
+            strokeWidth: "1.4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function LegendDot({
+  color,
+  sizePx = 10
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_Box20.default,
+    {
+      sx: {
+        width: sizePx,
+        height: sizePx,
+        borderRadius: "50%",
+        bgcolor: color,
+        flexShrink: 0
+      }
+    }
+  );
+}
+function MultilineTick(props) {
+  const {
+    x = 0,
+    y = 0,
+    payload,
+    fill = DEFAULT_AXIS_TICK_FILL,
+    fontSize = 12,
+    rowsByName,
+    angle = 0,
+    textAnchor = "middle"
+  } = props;
+  const name = payload?.value ?? "";
+  if (!name) return null;
+  const row = rowsByName ? rowsByName[name] : void 0;
+  const subName = row?.subName;
+  const lines = [];
+  String(name).split("\n").forEach((s) => lines.push(s));
+  if (subName) {
+    String(subName).split("\n").forEach((s) => lines.push(s));
+  }
+  const lineHeight = fontSize * 1.25;
+  const isHorizontal = angle === 0;
+  const anchor = isHorizontal ? "middle" : textAnchor;
+  const dy0 = isHorizontal ? lineHeight : 4;
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    "text",
+    {
+      transform: angle !== 0 ? `rotate(${angle})` : void 0,
+      textAnchor: anchor,
+      fontSize,
+      fill,
+      children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
+    }
+  ) });
+}
+function BarPlot({
+  data,
+  buckets,
+  bucketColors,
+  comparisonColor,
+  rowsByName,
+  yAxisDomain,
+  yAxisTicks,
+  yAxisTickFormatter,
+  stackedTotalLabel,
+  comparisonLabel,
+  renderTooltip,
+  enableHorizontalScroll,
+  chartMinWidth,
+  categoryWidthPx
+}) {
+  const { barChart: bc } = useStackedComparisonBarChartCustomization();
+  const height = bc?.heightPx ?? 360;
+  const stackedSize = bc?.stackedBarSizePx ?? 22;
+  const comparisonSize = bc?.comparisonBarSizePx ?? 18;
+  const barCategoryGap = bc?.barCategoryGapPx ?? 20;
+  const barGap = bc?.barGap ?? 2;
+  const barTopRadius = bc?.barTopRadiusPx ?? 3;
+  const m = {
+    top: bc?.margin?.top ?? 16,
+    right: bc?.margin?.right ?? 8,
+    bottom: bc?.margin?.bottom ?? 28,
+    left: bc?.margin?.left ?? 4
+  };
+  const gridStroke = bc?.gridStroke ?? DEFAULT_GRID_STROKE;
+  const dash = bc?.gridStrokeDasharray ?? "0";
+  const xFill = bc?.xAxisTickFill ?? "#6B7280";
+  const xTickAngle = bc?.xAxisTickAngle ?? 0;
+  const xTickAnchor = bc?.xAxisTickAnchor ?? "end";
+  const xAxisHeight = bc?.xAxisHeight ?? 50;
+  const yFill = bc?.yAxisTickFill ?? DEFAULT_AXIS_TICK_FILL;
+  const yWidth = bc?.yAxisWidth ?? 44;
+  const cursorFill = bc?.cursorFill ?? "rgba(15, 23, 42, 0.04)";
+  const defaultFmt = React25.useCallback(
+    (v) => v >= 1e3 ? `${(v / 1e3).toFixed(v % 1e3 === 0 ? 0 : 1)}k` : `${v}`,
+    []
+  );
+  const tickFmt = yAxisTickFormatter ?? defaultFmt;
+  const resolvedCategoryWidth = categoryWidthPx ?? 90;
+  const innerMinWidth = chartMinWidth ?? resolvedCategoryWidth * Math.max(data.length, 1);
+  const outerSx = enableHorizontalScroll ? {
+    width: "100%",
+    height,
+    mt: 0.5,
+    overflowX: "auto",
+    overflowY: "hidden"
+  } : { width: "100%", height, mt: 0.5 };
+  const innerSx = enableHorizontalScroll ? { width: "100%", height: "100%", minWidth: innerMinWidth } : { width: "100%", height: "100%" };
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Box20.default, { sx: outerSx, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Box20.default, { sx: innerSx, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_recharts9.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    import_recharts9.BarChart,
+    {
+      data,
+      margin: m,
+      barCategoryGap,
+      barGap,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_recharts9.CartesianGrid,
+          {
+            strokeDasharray: dash,
+            vertical: false,
+            stroke: gridStroke
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_recharts9.XAxis,
+          {
+            dataKey: "__name",
+            tick: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              MultilineTick,
+              {
+                fill: xFill,
+                fontSize: 12,
+                rowsByName,
+                angle: xTickAngle,
+                textAnchor: xTickAnchor
+              }
+            ),
+            tickLine: false,
+            axisLine: { stroke: gridStroke },
+            interval: 0,
+            height: xAxisHeight
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_recharts9.YAxis,
+          {
+            domain: yAxisDomain,
+            ticks: yAxisTicks,
+            tick: { fill: yFill, fontSize: 11 },
+            tickLine: false,
+            axisLine: false,
+            width: yWidth,
+            tickFormatter: tickFmt
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_recharts9.Tooltip,
+          {
+            content: (tooltipProps) => {
+              const label = tooltipProps.label;
+              const labelStr = typeof label === "string" ? label : String(label ?? "");
+              const row = rowsByName[labelStr] ?? null;
+              if (renderTooltip) {
+                const custom = renderTooltip({
+                  tooltipProps,
+                  row,
+                  buckets,
+                  bucketColors,
+                  comparisonColor
+                });
+                return custom == null ? null : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: custom });
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                StackedComparisonBarChartTooltip,
+                {
+                  ...tooltipProps,
+                  row,
+                  buckets,
+                  bucketColors,
+                  comparisonColor,
+                  stackedTotalLabel,
+                  comparisonLabel
+                }
+              );
+            },
+            cursor: { fill: cursorFill },
+            allowEscapeViewBox: { x: false, y: true }
+          }
+        ),
+        buckets.map((b, i) => {
+          const color = b.color ?? bucketColors[i] ?? "#94A3B8";
+          const isTop = i === buckets.length - 1;
+          const radius = isTop ? [barTopRadius, barTopRadius, 0, 0] : [0, 0, 0, 0];
+          return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            import_recharts9.Bar,
+            {
+              dataKey: STACK_KEY(b.id),
+              name: b.label,
+              stackId: "stacked",
+              fill: color,
+              barSize: stackedSize,
+              isAnimationActive: false,
+              radius
+            },
+            b.id
+          );
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_recharts9.Bar,
+          {
+            dataKey: COMPARISON_KEY,
+            name: comparisonLabel,
+            stackId: "comparison",
+            fill: comparisonColor,
+            barSize: comparisonSize,
+            isAnimationActive: false,
+            radius: [barTopRadius, barTopRadius, 0, 0]
+          }
+        )
+      ]
+    }
+  ) }) }) });
+}
+function StackedComparisonBarChart({
+  subHeading,
+  showSortToggle = true,
+  onSortToggle,
+  showSubHeadingDivider = true,
+  showHeaderLegend = true,
+  enableHorizontalScroll = false,
+  chartMinWidth,
+  categoryWidthPx,
+  buckets,
+  data,
+  stackedLegendLabel = "Stacked",
+  comparisonLegendLabel = "Comparison",
+  stackedTotalLabel,
+  yAxisDomain,
+  yAxisTicks,
+  yAxisTickFormatter,
+  renderTooltip,
+  emptyStatePlaceholderProps,
+  customization
+}) {
+  const bucketColors = customization?.barChart?.stackColors ?? STACKED_COMPARISON_DEFAULT_STACK_COLORS;
+  const comparisonColor = customization?.barChart?.comparisonColor ?? STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR;
+  const legendStackDot = customization?.header?.legendStackColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR;
+  const legendComparisonDot = customization?.header?.legendComparisonColor ?? STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR;
+  const legendDividerColor = customization?.header?.legendDividerColor ?? "#E5E7EB";
+  const legendDotSize = customization?.header?.legendDotSizePx ?? 10;
+  const frameBorder = customization?.frame?.borderColor ?? STACKED_COMPARISON_DEFAULT_FRAME_BORDER;
+  const frameBg = customization?.frame?.backgroundColor ?? "#FFFFFF";
+  const rowsByName = React25.useMemo(() => {
+    const r = {};
+    for (const row of data) r[row.name] = row;
+    return r;
+  }, [data]);
+  const chartData = React25.useMemo(() => {
+    return data.map((row) => {
+      const d = {
+        __key: row.name,
+        __name: row.name,
+        __subName: row.subName,
+        __row: row,
+        [COMPARISON_KEY]: row.comparison
+      };
+      for (const b of buckets) {
+        d[STACK_KEY(b.id)] = row.stacked[b.id] ?? 0;
+      }
+      return d;
+    });
+  }, [data, buckets]);
+  const subHeadingSx = mergeSx4(
+    {
+      fontWeight: 700,
+      fontSize: "0.95rem",
+      color: "#0f172a"
+    },
+    customization?.header?.subHeadingSx
+  );
+  const frameSx = mergeSx4(
+    {
+      bgcolor: frameBg,
+      border: `1px solid ${frameBorder}`,
+      borderRadius: 2,
+      px: 2,
+      pt: 2,
+      pb: 1.5,
+      width: "100%",
+      boxSizing: "border-box"
+    },
+    customization?.frame?.sx
+  );
+  const subHeadingDividerColor = customization?.frame?.subHeadingDividerColor ?? "#C7C9D9";
+  const subHeadingDividerSx = mergeSx4(
+    {
+      height: "1px",
+      width: "100%",
+      bgcolor: subHeadingDividerColor,
+      mb: 1.5
+    },
+    customization?.frame?.subHeadingDividerSx
+  );
+  const legendSx = mergeSx4({ flexShrink: 0 }, customization?.header?.legendSx);
+  const showSubHeadingRow = Boolean(subHeading) || showSortToggle || showHeaderLegend;
+  const resolvedStackedTotal = stackedTotalLabel ?? `Total ${stackedLegendLabel}`;
+  if (chartData.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ChartEmptyState, { minHeight: 360, ...emptyStatePlaceholderProps });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StackedComparisonBarChartCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Box20.default, { sx: frameSx, children: [
+    showSubHeadingRow ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      import_Stack18.default,
+      {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        flexWrap: "wrap",
+        sx: { mb: 1 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Stack18.default, { direction: "row", alignItems: "center", spacing: 1, children: [
+            subHeading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Typography17.default, { sx: subHeadingSx, children: subHeading }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", {}),
+            showSortToggle ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              import_ButtonBase2.default,
+              {
+                onClick: onSortToggle,
+                disableRipple: !onSortToggle,
+                sx: mergeSx4(
+                  {
+                    width: 26,
+                    height: 26,
+                    borderRadius: 1,
+                    bgcolor: "#EEF2FF",
+                    color: "#5B6DEC",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    cursor: onSortToggle ? "pointer" : "default",
+                    "&:hover": onSortToggle ? { bgcolor: "#E0E7FF" } : void 0
+                  },
+                  customization?.header?.sortButtonSx
+                ),
+                "aria-label": "Toggle sort order",
+                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SortIcon, { color: "#5B6DEC" })
+              }
+            ) : null
+          ] }),
+          showHeaderLegend ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+            import_Stack18.default,
+            {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1.5,
+              sx: legendSx,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Stack18.default, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LegendDot, { color: legendStackDot, sizePx: legendDotSize }),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    import_Typography17.default,
+                    {
+                      sx: mergeSx4(
+                        {
+                          fontWeight: 700,
+                          fontSize: "0.85rem",
+                          color: legendStackDot
+                        },
+                        customization?.header?.legendLabelSx
+                      ),
+                      children: stackedLegendLabel
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                  import_Box20.default,
+                  {
+                    sx: {
+                      width: "1px",
+                      height: 18,
+                      bgcolor: legendDividerColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_Stack18.default, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    LegendDot,
+                    {
+                      color: legendComparisonDot,
+                      sizePx: legendDotSize
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    import_Typography17.default,
+                    {
+                      sx: mergeSx4(
+                        {
+                          fontWeight: 700,
+                          fontSize: "0.85rem",
+                          color: legendComparisonDot
+                        },
+                        customization?.header?.legendLabelSx
+                      ),
+                      children: comparisonLegendLabel
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) : null
+        ]
+      }
+    ) : null,
+    showSubHeadingDivider ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Box20.default, { sx: subHeadingDividerSx }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      BarPlot,
+      {
+        data: chartData,
+        buckets,
+        bucketColors,
+        comparisonColor,
+        rowsByName,
+        yAxisDomain,
+        yAxisTicks,
+        yAxisTickFormatter,
+        stackedTotalLabel: resolvedStackedTotal,
+        comparisonLabel: comparisonLegendLabel,
+        renderTooltip,
+        enableHorizontalScroll,
+        chartMinWidth,
+        categoryWidthPx
+      }
+    )
+  ] }) });
+}
+
+// src/components/widgets/StorePerformanceByAssist/storePerformanceByAssist.defaultInfoPopover.ts
+var DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER = {
+  title: "Store Performance by Assist",
+  description: "Per-store breakdown of attended customers split by attend-duration buckets, alongside the unattended count.",
+  helpBullets: [
+    "Compare attended vs unattended customer volume by store.",
+    "Identify stores with high unattended counts that need staffing.",
+    "See how attended customers split across 0-10 sec, 11-30 sec, 31-59 sec, and 1-2 min buckets."
+  ]
+};
+
+// src/components/widgets/StorePerformanceByAssist/storePerformanceByAssist.mock.ts
+var STORE_PERFORMANCE_DEFAULT_BUCKETS = [
+  { id: "0-10", label: "0-10sec" },
+  { id: "11-30", label: "11-30sec" },
+  { id: "31-59", label: "31-59sec" },
+  { id: "1-2", label: "1-2min" }
+];
+var STORE_PERFORMANCE_DEFAULT_DATA = [
+  {
+    name: "Lake Mall",
+    subName: "Kolkata",
+    stacked: { "0-10": 1100, "11-30": 1100, "31-59": 1500, "1-2": 3e3 },
+    comparison: 700
+  },
+  {
+    name: "V3s",
+    subName: "Delhi",
+    stacked: { "0-10": 1e3, "11-30": 1100, "31-59": 1450, "1-2": 2900 },
+    comparison: 620
+  },
+  {
+    name: "Forum Mall",
+    subName: "Bangalore",
+    stacked: { "0-10": 750, "11-30": 800, "31-59": 1450, "1-2": 2050 },
+    comparison: 520
+  },
+  {
+    name: "Phoenix",
+    subName: "Mumbai",
+    stacked: { "0-10": 600, "11-30": 700, "31-59": 1450, "1-2": 1500 },
+    comparison: 470
+  },
+  {
+    name: "DB City",
+    subName: "Bhopal",
+    stacked: { "0-10": 400, "11-30": 600, "31-59": 950, "1-2": 1550 },
+    comparison: 580
+  },
+  {
+    name: "DLF",
+    subName: "Gurgaon",
+    stacked: { "0-10": 225, "11-30": 300, "31-59": 375, "1-2": 600 },
+    comparison: 190
+  },
+  {
+    name: "Highway",
+    subName: "Chennai",
+    stacked: { "0-10": 200, "11-30": 250, "31-59": 350, "1-2": 850 },
+    comparison: 140
+  },
+  {
+    name: "Elante",
+    subName: "Chandigarh",
+    stacked: { "0-10": 150, "11-30": 200, "31-59": 250, "1-2": 600 },
+    comparison: 100
+  }
+];
+
+// src/components/widgets/StorePerformanceByAssist/StorePerformanceByAssist.tsx
+var import_Box21 = __toESM(require("@mui/material/Box"));
+var import_Card3 = __toESM(require("@mui/material/Card"));
+var import_CardContent3 = __toESM(require("@mui/material/CardContent"));
+var import_Stack19 = __toESM(require("@mui/material/Stack"));
+var import_Typography18 = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function LegendSquare({
+  color,
+  size = 12
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    import_Box21.default,
+    {
+      sx: {
+        width: size,
+        height: size,
+        borderRadius: 0.5,
+        bgcolor: color,
+        flexShrink: 0
+      }
+    }
+  );
+}
+function StorePerformanceByAssist({
+  title,
+  width,
+  maxWidth,
+  minWidth,
+  subHeading = "Stores (Top to Bottom)",
+  showSortToggle = true,
+  onSortToggle,
+  showSubHeadingDivider = true,
+  showHeaderLegend = true,
+  enableHorizontalScroll = false,
+  chartMinWidth,
+  categoryWidthPx,
+  buckets,
+  data,
+  attendedLegendLabel = "Attended",
+  unattendedLegendLabel = "Unattended",
+  unattendedBottomLegendLabel = "Unattended Customers",
+  yAxisDomain,
+  yAxisTicks,
+  yAxisTickFormatter,
+  infoPopover = null,
+  renderTooltip,
+  emptyStatePlaceholderProps,
+  customization
+}) {
+  const bucketColors = customization?.chart?.barChart?.stackColors ?? STACKED_COMPARISON_DEFAULT_STACK_COLORS;
+  const comparisonColor = customization?.chart?.barChart?.comparisonColor ?? STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR;
+  const bottomLegendColor = customization?.bottomLegend?.labelColor ?? "#6B7280";
+  const bottomLegendFs = customization?.bottomLegend?.fontSizePx ?? 12;
+  const bottomLegendDividerColor = customization?.bottomLegend?.dividerColor ?? "#E5E7EB";
+  const bottomSwatch = customization?.bottomLegend?.swatchSizePx ?? 12;
+  const resolvedInfo = infoPopover === void 0 ? DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER : infoPopover;
+  const rootSx = mergeSx4(
+    {
+      bgcolor: "#FFFFFF",
+      borderRadius: 2,
+      boxShadow: "0 1px 3px rgba(15, 23, 42, 0.08)",
+      ...width !== void 0 ? { width } : null,
+      ...maxWidth !== void 0 ? { maxWidth } : null,
+      ...minWidth !== void 0 ? { minWidth } : null
+    },
+    customization?.rootCard?.sx
+  );
+  const titleSx = mergeSx4(
+    {
+      fontWeight: 700,
+      fontSize: { xs: "1rem", sm: "1.05rem" },
+      color: "#0f172a"
+    },
+    customization?.header?.titleSx
+  );
+  const bottomLegendSx = mergeSx4(
+    {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      rowGap: 1,
+      mt: 1.5,
+      px: 0.5
+    },
+    customization?.bottomLegend?.sx
+  );
+  const showOuterHeader = Boolean(title) || Boolean(resolvedInfo);
+  const hasData = data.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_Card3.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_CardContent3.default, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_Stack19.default, { spacing: 1.5, sx: { width: "100%" }, children: [
+    showOuterHeader ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      import_Stack19.default,
+      {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        flexWrap: "wrap",
+        children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_Typography18.default, { sx: titleSx, children: title }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            import_Stack19.default,
+            {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1.5,
+              sx: { flexShrink: 0 },
+              children: resolvedInfo ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ChartWidgetHeaderSeparator, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  ChartWidgetInfoButton,
+                  {
+                    popover: resolvedInfo,
+                    ariaLabel: "Store performance by assist information"
+                  }
+                )
+              ] }) : null
+            }
+          )
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      StackedComparisonBarChart,
+      {
+        subHeading,
+        showSortToggle,
+        onSortToggle,
+        showSubHeadingDivider,
+        showHeaderLegend,
+        enableHorizontalScroll,
+        chartMinWidth,
+        categoryWidthPx,
+        buckets,
+        data,
+        stackedLegendLabel: attendedLegendLabel,
+        comparisonLegendLabel: unattendedLegendLabel,
+        yAxisDomain,
+        yAxisTicks,
+        yAxisTickFormatter,
+        renderTooltip,
+        emptyStatePlaceholderProps,
+        customization: customization?.chart
+      }
+    ),
+    hasData ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_Box21.default, { sx: bottomLegendSx, children: [
+      buckets.map((b, i) => {
+        const color = b.color ?? bucketColors[i] ?? "#94A3B8";
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          import_Stack19.default,
+          {
+            direction: "row",
+            alignItems: "center",
+            spacing: 0.75,
+            sx: { mr: 2 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LegendSquare, { color, size: bottomSwatch }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                import_Typography18.default,
+                {
+                  sx: {
+                    fontSize: bottomLegendFs,
+                    color: bottomLegendColor,
+                    fontWeight: 500
+                  },
+                  children: b.label
+                }
+              )
+            ]
+          },
+          b.id
+        );
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        import_Box21.default,
+        {
+          sx: {
+            width: "1px",
+            height: 14,
+            bgcolor: bottomLegendDividerColor,
+            mx: 1
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+        import_Stack19.default,
+        {
+          direction: "row",
+          alignItems: "center",
+          spacing: 0.75,
+          sx: { mr: 2 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LegendSquare, { color: comparisonColor, size: bottomSwatch }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              import_Typography18.default,
+              {
+                sx: {
+                  fontSize: bottomLegendFs,
+                  color: bottomLegendColor,
+                  fontWeight: 500
+                },
+                children: unattendedBottomLegendLabel
+              }
+            )
+          ]
+        }
+      )
+    ] }) : null
+  ] }) }) });
+}
+
 // src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
 var import_react21 = require("@iconify/react");
 var import_material19 = require("@mui/material");
-var React24 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 var import_react22 = require("react");
-var import_recharts9 = require("recharts");
+var import_recharts10 = require("recharts");
 
 // src/components/widgets/FootFallHeatMap/FootFallHeatMapView.types.ts
 var DEFAULT_FOOTFALL_TILE_ICONS = {
@@ -12415,18 +13399,28 @@ function rowFromHeuristicLabel(zoneName, total) {
   }));
   return { id, label: zoneName, value: a + b + c + d, segments };
 }
-function deriveFootfallHeatMapKpiStrip(activeZone, childTiles) {
+function deriveFootfallHeatMapKpiStrip(activeZone, childTiles, buildBarRow) {
+  const buildRow = (node, role, total, fallback) => {
+    if (buildBarRow) {
+      const custom = buildBarRow({ node, activeZone, role, total });
+      if (custom) return custom;
+    }
+    return fallback();
+  };
   if (activeZone) {
     const childRowsSource = (activeZone.list ?? []).filter(
       (n) => parseVisitorCount(n.overallData?.count) > 0
     );
     if (childRowsSource.length > 0) {
-      const items = childRowsSource.map(
-        (node) => rowFromHeuristicLabel(
-          node.name,
-          parseVisitorCount(node.overallData?.count)
-        )
-      );
+      const items = childRowsSource.map((node) => {
+        const total = parseVisitorCount(node.overallData?.count);
+        return buildRow(
+          node,
+          "child",
+          total,
+          () => rowFromHeuristicLabel(node.name, total)
+        );
+      });
       const overallVisitorsFromChildren = childRowsSource.reduce(
         (sum, node) => sum + parseVisitorCount(node.overallData?.count),
         0
@@ -12457,7 +13451,14 @@ function deriveFootfallHeatMapKpiStrip(activeZone, childTiles) {
         },
         rankedBarList: {
           title: "Zone breakdown",
-          items: [rowFromExplicitStrip(activeZone.name, zs)],
+          items: [
+            buildRow(
+              activeZone,
+              "active",
+              zs.overallVisitors,
+              () => rowFromExplicitStrip(activeZone.name, zs)
+            )
+          ],
           listHeaderLabel: "Zone",
           valueColumnHeader: "Visitors"
         }
@@ -12474,7 +13475,14 @@ function deriveFootfallHeatMapKpiStrip(activeZone, childTiles) {
       summaryKpis: { storeCount: storeCount2, overallVisitors: overallVisitors2 },
       rankedBarList: {
         title: "Zone breakdown",
-        items: [rowFromHeuristicLabel(activeZone.name, overallVisitors2)],
+        items: [
+          buildRow(
+            activeZone,
+            "active",
+            overallVisitors2,
+            () => rowFromHeuristicLabel(activeZone.name, overallVisitors2)
+          )
+        ],
         listHeaderLabel: "Zone",
         valueColumnHeader: "Visitors"
       }
@@ -12486,11 +13494,26 @@ function deriveFootfallHeatMapKpiStrip(activeZone, childTiles) {
     0
   );
   const storeCount = childTiles.length;
+  const overviewNode = {
+    name: "Overview",
+    value: overallVisitors,
+    originalValue: overallVisitors,
+    color: "",
+    overallData: { count: overallVisitors, dwell: "" },
+    list: []
+  };
   return {
     summaryKpis: { storeCount, overallVisitors },
     rankedBarList: {
       title: "Footfall overview",
-      items: [rowFromHeuristicLabel("Overview", overallVisitors)],
+      items: [
+        buildRow(
+          overviewNode,
+          "overview",
+          overallVisitors,
+          () => rowFromHeuristicLabel("Overview", overallVisitors)
+        )
+      ],
       listHeaderLabel: "Scope",
       valueColumnHeader: "Visitors"
     }
@@ -12739,7 +13762,7 @@ function getNestedList(payload) {
 }
 
 // src/components/widgets/FootFallHeatMap/FootFallHeatMapView.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function toDisplayNumber(value) {
   if (!Number.isFinite(value)) return "0";
   return new Intl.NumberFormat("en-IN").format(value);
@@ -12758,7 +13781,7 @@ function InlineStatCard({
   sx,
   iconColor = "#1565C0"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     import_material19.Paper,
     {
       elevation: 0,
@@ -12774,8 +13797,8 @@ function InlineStatCard({
         },
         ...sx ? [sx] : []
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", spacing: 1.5, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", spacing: 1.5, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_react21.Icon,
           {
             icon,
@@ -12785,8 +13808,8 @@ function InlineStatCard({
             style: { flexShrink: 0 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Stack, { spacing: 0.15, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Stack, { spacing: 0.15, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               variant: "body2",
@@ -12794,7 +13817,7 @@ function InlineStatCard({
               children: title
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               variant: "h6",
@@ -12824,8 +13847,8 @@ function InlineSegmentStrip({
   const barHeight = presentation?.barHeight ?? 12;
   const trackInsetPx = presentation?.trackInsetPx ?? 3;
   const trackBg = presentation?.trackBackgroundColor ?? "#ECEFF3";
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Stack, { spacing: 0.75, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Stack, { spacing: 0.75, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       import_material19.Stack,
       {
         direction: "row",
@@ -12833,7 +13856,7 @@ function InlineSegmentStrip({
         justifyContent: "space-between",
         gap: 1,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               variant: "subtitle2",
@@ -12844,7 +13867,7 @@ function InlineSegmentStrip({
               children: item.label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               variant: "body2",
@@ -12858,7 +13881,7 @@ function InlineSegmentStrip({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_material19.Box,
       {
         sx: {
@@ -12876,7 +13899,7 @@ function InlineSegmentStrip({
           const widthPercent = total > 0 ? segment.value / total * filledPercent : 0;
           const isLast = idx === lastIdx;
           const fill = resolveSegmentFill(presentation, idx, segment.color);
-          return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Tooltip,
             {
               title: (() => {
@@ -12889,7 +13912,7 @@ function InlineSegmentStrip({
                   });
                   return custom == null ? "" : custom;
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   InlineSegmentTooltipCard,
                   {
                     segment,
@@ -12904,7 +13927,7 @@ function InlineSegmentStrip({
                   sx: inlineSegmentTooltipPopperSx
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 import_material19.Box,
                 {
                   sx: {
@@ -12949,9 +13972,9 @@ function InlineSegmentTooltipCard({
   cardSx
 }) {
   const tooltipSurfaceSx = cardSx ? [inlineSegmentTooltipCardSx, cardSx] : inlineSegmentTooltipCardSx;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Box, { sx: tooltipSurfaceSx, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Box, { sx: { height: 3, bgcolor: "grey.200", width: "100%" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Box, { sx: tooltipSurfaceSx, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Box, { sx: { height: 3, bgcolor: "grey.200", width: "100%" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       import_material19.Box,
       {
         sx: {
@@ -12964,7 +13987,7 @@ function InlineSegmentTooltipCard({
           py: 1.25
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Box,
             {
               component: "span",
@@ -12978,7 +14001,7 @@ function InlineSegmentTooltipCard({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               component: "span",
@@ -12991,7 +14014,7 @@ function InlineSegmentTooltipCard({
               children: segment.label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               component: "span",
@@ -13004,7 +14027,7 @@ function InlineSegmentTooltipCard({
               children: " : "
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_material19.Typography,
             {
               component: "span",
@@ -13035,7 +14058,7 @@ function FootfallHeatMapKpiRankedBlock({
   const statIcon = presentation?.statCardIconColor ?? "#1565C0";
   const customSummary = presentation?.summaryCards?.(summaryKpis);
   const useCustomSummary = customSummary !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     import_material19.Stack,
     {
       spacing: 2,
@@ -13045,7 +14068,7 @@ function FootfallHeatMapKpiRankedBlock({
         ...presentation?.kpiContainerSx ? [presentation.kpiContainerSx] : []
       ],
       children: [
-        useCustomSummary && customSummary.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        useCustomSummary && customSummary.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_material19.Stack,
           {
             direction: "row",
@@ -13053,7 +14076,7 @@ function FootfallHeatMapKpiRankedBlock({
             flexWrap: "wrap",
             useFlexGap: true,
             sx: presentation?.summaryRowSx ? [presentation.summaryRowSx] : void 0,
-            children: useCustomSummary ? customSummary.map((card) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: useCustomSummary ? customSummary.map((card) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               InlineStatCard,
               {
                 icon: card.icon ?? "mdi:chart-box-outline",
@@ -13066,7 +14089,7 @@ function FootfallHeatMapKpiRankedBlock({
               },
               card.id
             )) : [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 InlineStatCard,
                 {
                   icon: "mdi:store-marker-outline",
@@ -13077,7 +14100,7 @@ function FootfallHeatMapKpiRankedBlock({
                 },
                 "default-stores"
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 InlineStatCard,
                 {
                   icon: "fluent:people-community-16-filled",
@@ -13091,7 +14114,7 @@ function FootfallHeatMapKpiRankedBlock({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_material19.Stack,
           {
             spacing: 1.25,
@@ -13099,7 +14122,7 @@ function FootfallHeatMapKpiRankedBlock({
               { pt: 0.5, pb: 1 },
               ...presentation?.rankedListStackSx ? [presentation.rankedListStackSx] : []
             ],
-            children: rankedBarList.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: rankedBarList.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               InlineSegmentStrip,
               {
                 item,
@@ -13328,9 +14351,17 @@ function FootFallHeatMapView({
     const activeZoneForStrip = trackingDetails.length > 0 ? trackingDetails[trackingDetails.length - 1] : void 0;
     return deriveFootfallHeatMapKpiStrip(
       activeZoneForStrip,
-      data.current ?? []
+      data.current ?? [],
+      kpiStripPresentation?.buildBarRow
     );
-  }, [isLoading, loading, initialData, trackingDetails, data]);
+  }, [
+    isLoading,
+    loading,
+    initialData,
+    trackingDetails,
+    data,
+    kpiStripPresentation?.buildBarRow
+  ]);
   const formatPercentage = (value) => {
     if (typeof value !== "number") return "0%";
     const formatted = value.toFixed(2);
@@ -13411,7 +14442,7 @@ function FootFallHeatMapView({
     );
     const dwellIconColor = resolveIconColor(iconColorProp, tileColor, "dwell");
     const p = inner;
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "foreignObject",
       {
         x,
@@ -13419,7 +14450,7 @@ function FootFallHeatMapView({
         width,
         height,
         style: { borderRadius: "12px", overflow: "hidden" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
           import_material19.Stack,
           {
             onClick: handleClick,
@@ -13450,7 +14481,7 @@ function FootFallHeatMapView({
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                 import_material19.Stack,
                 {
                   direction: isSmall ? "row" : "column",
@@ -13462,7 +14493,7 @@ function FootFallHeatMapView({
                     mb: isSmall ? 0.5 : 1
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                       import_material19.Typography,
                       {
                         sx: {
@@ -13485,7 +14516,7 @@ function FootFallHeatMapView({
                         children: name
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                       import_material19.Typography,
                       {
                         sx: {
@@ -13500,7 +14531,7 @@ function FootFallHeatMapView({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                 import_material19.Stack,
                 {
                   direction: "row",
@@ -13514,7 +14545,7 @@ function FootFallHeatMapView({
                     ...tileMetrics?.metricsRowStackSx != null ? [tileMetrics.metricsRowStackSx] : []
                   ],
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                       import_material19.Stack,
                       {
                         direction: "row",
@@ -13532,7 +14563,7 @@ function FootFallHeatMapView({
                           ...tileMetrics?.metricPillStackSx != null ? [tileMetrics.metricPillStackSx] : []
                         ],
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                             import_material19.Box,
                             {
                               sx: [
@@ -13545,7 +14576,7 @@ function FootFallHeatMapView({
                                 },
                                 ...tileMetrics?.metricPillIconBoxSx != null ? [tileMetrics.metricPillIconBoxSx] : []
                               ],
-                              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                                 import_react21.Icon,
                                 {
                                   icon: icons.visitors,
@@ -13555,7 +14586,7 @@ function FootFallHeatMapView({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                             import_material19.Typography,
                             {
                               sx: [
@@ -13573,7 +14604,7 @@ function FootFallHeatMapView({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                       import_material19.Stack,
                       {
                         direction: "row",
@@ -13591,7 +14622,7 @@ function FootFallHeatMapView({
                           ...tileMetrics?.metricPillStackSx != null ? [tileMetrics.metricPillStackSx] : []
                         ],
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                             import_material19.Box,
                             {
                               sx: [
@@ -13604,7 +14635,7 @@ function FootFallHeatMapView({
                                 },
                                 ...tileMetrics?.metricPillIconBoxSx != null ? [tileMetrics.metricPillIconBoxSx] : []
                               ],
-                              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                                 import_react21.Icon,
                                 {
                                   icon: icons.dwell,
@@ -13614,7 +14645,7 @@ function FootFallHeatMapView({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                             import_material19.Typography,
                             {
                               sx: [
@@ -13657,7 +14688,7 @@ function FootFallHeatMapView({
   const LabelTag = ({ textColor = "#f0f0f0" }) => {
     const pathSegments = trackingDetails.map((t) => String(t?.name ?? "").trim()).filter(Boolean);
     const breadcrumbSegments = Array.from(new Set([...pathSegments].reverse()));
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Stack, { direction: "row", alignItems: "baseline", flexWrap: "wrap", gap: 1.5, children: breadcrumbSegments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Stack, { direction: "row", alignItems: "baseline", flexWrap: "wrap", gap: 1.5, children: breadcrumbSegments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_material19.Typography,
       {
         component: "span",
@@ -13671,9 +14702,9 @@ function FootFallHeatMapView({
         color: textColor,
         children: brandLabel
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-      breadcrumbSegments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(React24.Fragment, { children: [
-        i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+      breadcrumbSegments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(React26.Fragment, { children: [
+        i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_material19.Typography,
           {
             component: "span",
@@ -13684,7 +14715,7 @@ function FootFallHeatMapView({
             children: "/"
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_material19.Typography,
           {
             component: "span",
@@ -13700,8 +14731,8 @@ function FootFallHeatMapView({
           }
         )
       ] }, `${seg}-${i}`)),
-      brandLabel ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      brandLabel ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_material19.Typography,
           {
             component: "span",
@@ -13711,7 +14742,7 @@ function FootFallHeatMapView({
             children: "/"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_material19.Typography,
           {
             component: "span",
@@ -13731,10 +14762,10 @@ function FootFallHeatMapView({
   };
   const is500Error = error !== null && error !== void 0 && typeof error === "object" && "status" in error && error.status === 500;
   if (is500Error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Box, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Typography, { color: "error", children: "Something went wrong (500). Try again later." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Box, { sx: { p: 4, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Typography, { color: "error", children: "Something went wrong (500). Try again later." }) });
   }
   if (isLoading || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_material19.Skeleton,
       {
         variant: "rectangular",
@@ -13775,8 +14806,8 @@ function FootFallHeatMapView({
     "#888888",
     "header"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Stack, { width: "100%", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Stack, { width: "100%", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       import_material19.Box,
       {
         sx: {
@@ -13788,16 +14819,16 @@ function FootFallHeatMapView({
           gap: 1
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Typography, { variant: "h6", fontWeight: 700, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", gap: 1, children: [
-            isFetching ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Typography, { variant: "caption", color: "text.secondary", children: "Updating\u2026" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material19.Tooltip, { title: infoTooltip, arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Typography, { variant: "h6", fontWeight: 700, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", gap: 1, children: [
+            isFetching ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Typography, { variant: "caption", color: "text.secondary", children: "Updating\u2026" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material19.Tooltip, { title: infoTooltip, arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               import_material19.IconButton,
               {
                 size: "small",
                 "aria-label": "Zone performance info",
                 edge: "end",
-                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   import_react21.Icon,
                   {
                     icon: icons.headerInfo,
@@ -13812,7 +14843,7 @@ function FootFallHeatMapView({
         ]
       }
     ),
-    data?.previous?.length > 0 && headerData ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    data?.previous?.length > 0 && headerData ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       import_material19.Stack,
       {
         direction: "row",
@@ -13827,13 +14858,13 @@ function FootFallHeatMapView({
           backgroundColor: zoneBarColor
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_material19.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               import_material19.Button,
               {
                 size: "small",
                 onClick: handleClose,
-                startIcon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                startIcon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   import_react21.Icon,
                   {
                     icon: "mdi:chevron-left",
@@ -13853,9 +14884,9 @@ function FootFallHeatMapView({
                 children: "Back"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LabelTag, { textColor: zoneBarHeaderFg })
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(LabelTag, { textColor: zoneBarHeaderFg })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
             import_material19.Typography,
             {
               variant: "h6",
@@ -13870,7 +14901,7 @@ function FootFallHeatMapView({
         ]
       }
     ) : null,
-    isDrilledIntoZone && showKpiStrip && derivedKpiStrip ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    isDrilledIntoZone && showKpiStrip && derivedKpiStrip ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       FootfallHeatMapKpiRankedBlock,
       {
         strip: derivedKpiStrip,
@@ -13887,7 +14918,7 @@ function FootFallHeatMapView({
         }
       }
     ) : null,
-    showLeafDetailsBody ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    showLeafDetailsBody ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_material19.Box,
       {
         sx: [
@@ -13903,8 +14934,8 @@ function FootFallHeatMapView({
         ]
       }
     ) : null,
-    showLeaf ? null : showChart ? hideTreemapForTerminalCardWithKpi ? null : hasTreemapData ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts9.ResponsiveContainer, { width: "100%", height: treemapHeight, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      import_recharts9.Treemap,
+    showLeaf ? null : showChart ? hideTreemapForTerminalCardWithKpi ? null : hasTreemapData ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_recharts10.ResponsiveContainer, { width: "100%", height: treemapHeight, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      import_recharts10.Treemap,
       {
         data: data?.current ?? [],
         dataKey: "value",
@@ -13916,22 +14947,22 @@ function FootFallHeatMapView({
         animationDuration: 0,
         style: { borderRadius: "12px" }
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       ChartEmptyState,
       {
         minHeight: treemapHeight,
         ...emptyStatePlaceholderProps
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ChartEmptyState, { minHeight: 400, ...emptyStatePlaceholderProps })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChartEmptyState, { minHeight: 400, ...emptyStatePlaceholderProps })
   ] });
 }
 
 // src/components/widgets/FootFallHeatMap/ZoneWiseKpiCards.tsx
 var import_Grid2 = __toESM(require("@mui/material/Grid"));
 var import_Paper3 = __toESM(require("@mui/material/Paper"));
-var import_Stack18 = __toESM(require("@mui/material/Stack"));
-var import_Typography17 = __toESM(require("@mui/material/Typography"));
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_Stack20 = __toESM(require("@mui/material/Stack"));
+var import_Typography19 = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function metricsToRows(metrics) {
   return [
     { id: 1, title: "Overall Visits", value: metrics.overall_visits ?? 0 },
@@ -13969,7 +15000,7 @@ function metricsToRows(metrics) {
 }
 var ZoneWiseKpiCards = ({ metrics }) => {
   const rows = metricsToRows(metrics);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_Grid2.default, { container: true, spacing: 3, sx: { marginTop: "10px", paddingX: "6px" }, children: rows.map((item) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_Grid2.default, { container: true, spacing: 3, sx: { marginTop: "10px", paddingX: "6px" }, children: rows.map((item) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     import_Grid2.default,
     {
       size: {
@@ -13977,7 +15008,7 @@ var ZoneWiseKpiCards = ({ metrics }) => {
         sm: 6,
         md: 3
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         import_Paper3.default,
         {
           elevation: 0,
@@ -13989,8 +15020,8 @@ var ZoneWiseKpiCards = ({ metrics }) => {
             height: "100%"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-              import_Typography17.default,
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              import_Typography19.default,
               {
                 variant: "caption",
                 color: "text.secondary",
@@ -13998,7 +15029,7 @@ var ZoneWiseKpiCards = ({ metrics }) => {
                 children: item.title
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_Stack18.default, { mt: 1, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_Typography17.default, { variant: "h6", fontWeight: 700, children: item.value }) })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_Stack20.default, { mt: 1, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_Typography19.default, { variant: "h6", fontWeight: 700, children: item.value }) })
           ]
         }
       )
@@ -14057,32 +15088,32 @@ var peakBillingHoursMockSeriesByTabId = {
 };
 
 // src/components/widgets/PeakBillingHours/PeakBillingHours.tsx
-var import_Box20 = __toESM(require("@mui/material/Box"));
-var import_Card3 = __toESM(require("@mui/material/Card"));
-var import_CardContent3 = __toESM(require("@mui/material/CardContent"));
+var import_Box22 = __toESM(require("@mui/material/Box"));
+var import_Card4 = __toESM(require("@mui/material/Card"));
+var import_CardContent4 = __toESM(require("@mui/material/CardContent"));
 var import_Skeleton7 = __toESM(require("@mui/material/Skeleton"));
-var import_Stack19 = __toESM(require("@mui/material/Stack"));
-var import_Typography18 = __toESM(require("@mui/material/Typography"));
-var React26 = __toESM(require("react"));
-var import_recharts10 = require("recharts");
+var import_Stack21 = __toESM(require("@mui/material/Stack"));
+var import_Typography20 = __toESM(require("@mui/material/Typography"));
+var React28 = __toESM(require("react"));
+var import_recharts11 = require("recharts");
 
 // src/components/widgets/PeakBillingHours/PeakBillingHoursCustomizationContext.tsx
-var React25 = __toESM(require("react"));
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var PeakBillingHoursCustomizationContext = React25.createContext({});
+var React27 = __toESM(require("react"));
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var PeakBillingHoursCustomizationContext = React27.createContext({});
 function PeakBillingHoursCustomizationProvider({
   value,
   children
 }) {
-  const memo = React25.useMemo(() => value, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PeakBillingHoursCustomizationContext.Provider, { value: memo, children });
+  const memo = React27.useMemo(() => value, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PeakBillingHoursCustomizationContext.Provider, { value: memo, children });
 }
 function usePeakBillingHoursCustomization() {
-  return React25.useContext(PeakBillingHoursCustomizationContext);
+  return React27.useContext(PeakBillingHoursCustomizationContext);
 }
 
 // src/components/widgets/PeakBillingHours/PeakBillingHoursTooltip.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function formatTooltipValue2(n) {
   return new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 }).format(
     Math.round(n)
@@ -14129,7 +15160,7 @@ function PeakBillingHoursTooltip(props) {
     },
     tt?.bodyStyle
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       style: {
@@ -14137,7 +15168,7 @@ function PeakBillingHoursTooltip(props) {
         minWidth: 160,
         maxWidth: 280
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         "div",
         {
           style: {
@@ -14148,7 +15179,7 @@ function PeakBillingHoursTooltip(props) {
             boxShadow: shadow
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               "div",
               {
                 style: {
@@ -14159,14 +15190,14 @@ function PeakBillingHoursTooltip(props) {
                 "aria-hidden": true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { style: bodyStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { style: rowStyle, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: dateP }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: labelText })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: bodyStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: rowStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: dateP }),
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: labelText })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { style: { ...rowStyle, marginTop: gap }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue2(num) })
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { ...rowStyle, marginTop: gap }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue2(num) })
               ] })
             ] })
           ]
@@ -14177,7 +15208,7 @@ function PeakBillingHoursTooltip(props) {
 }
 
 // src/components/widgets/PeakBillingHours/PeakBillingHours.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var OLY_DEFAULT_COMPOSED_CHART_CHROME6 = {
   cartesianGridStroke: "#D3D6DF",
   xAxisLineStroke: "#7566FC",
@@ -14189,7 +15220,7 @@ function toNum5(n) {
   return typeof n === "number" ? n : Number(n);
 }
 function PeakBarTopLabel(props) {
-  const { x, y, width, value, fill, fontSize, fontWeight } = props;
+  const { x, y, width, value, fill, fontSize, fontWeight, angle = 0 } = props;
   const nx = toNum5(x);
   const ny = toNum5(y);
   const nw = toNum5(width);
@@ -14202,7 +15233,8 @@ function PeakBarTopLabel(props) {
   }
   const cx = nx + nw / 2;
   const cy = ny - 6;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  const isHorizontal = angle === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "text",
     {
       x: cx,
@@ -14210,12 +15242,13 @@ function PeakBarTopLabel(props) {
       fill,
       fontSize,
       fontWeight,
-      textAnchor: "middle",
+      textAnchor: isHorizontal ? "middle" : "start",
+      transform: isHorizontal ? void 0 : `rotate(${angle} ${cx} ${cy})`,
       children: String(Math.round(n))
     }
   );
 }
-function BarPlot({
+function BarPlot2({
   data,
   yAxisDomain,
   yAxisTicks,
@@ -14225,7 +15258,8 @@ function BarPlot({
   yAxisTickDx = -6,
   yAxisTickStyle,
   xAxisTickDx = 0,
-  xAxisTickStyle
+  xAxisTickStyle,
+  barValueLabelAngle = 0
 }) {
   const { barChart: bc } = usePeakBillingHoursCustomization();
   const height = bc?.heightPx ?? 320;
@@ -14253,24 +15287,24 @@ function BarPlot({
     barRadius,
     barRadius
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_Box20.default, { sx: { width: "100%", height, mt: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_recharts10.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-    import_recharts10.BarChart,
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Box22.default, { sx: { width: "100%", height, mt: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_recharts11.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+    import_recharts11.BarChart,
     {
       data,
       margin: m,
       barCategoryGap: categoryGap,
       barGap,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_recharts10.CartesianGrid,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_recharts11.CartesianGrid,
           {
             strokeDasharray: dash,
             vertical: false,
             stroke: gridStroke
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_recharts10.XAxis,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_recharts11.XAxis,
           {
             dataKey: "label",
             dx: xAxisTickDx,
@@ -14283,8 +15317,8 @@ function BarPlot({
             height: 36
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_recharts10.YAxis,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_recharts11.YAxis,
           {
             domain: yAxisDomain,
             ticks: yAxisTicks,
@@ -14295,8 +15329,8 @@ function BarPlot({
             width: yWidth
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_recharts10.Tooltip,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_recharts11.Tooltip,
           {
             content: (tooltipProps) => {
               if (renderTooltip) {
@@ -14305,9 +15339,9 @@ function BarPlot({
                   data,
                   activeTabId
                 });
-                return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: customTooltip });
+                return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: customTooltip });
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PeakBillingHoursTooltip, { ...tooltipProps });
+              return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PeakBillingHoursTooltip, { ...tooltipProps });
             },
             cursor: {
               fill: hoverBandFill,
@@ -14317,8 +15351,8 @@ function BarPlot({
             allowEscapeViewBox: { x: false, y: true }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_recharts10.Bar,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_recharts11.Bar,
           {
             dataKey: "value",
             name: "Visits",
@@ -14326,17 +15360,18 @@ function BarPlot({
             radius: radiusTuple,
             isAnimationActive: false,
             maxBarSize: 48,
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-              import_recharts10.LabelList,
+            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              import_recharts11.LabelList,
               {
                 dataKey: "value",
-                content: (props) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                content: (props) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   PeakBarTopLabel,
                   {
                     ...props,
                     fill: labelFill,
                     fontSize: labelFs,
-                    fontWeight: 500
+                    fontWeight: 500,
+                    angle: barValueLabelAngle
                   }
                 )
               }
@@ -14361,6 +15396,7 @@ function PeakBillingHours({
   yAxisTickStyle,
   xAxisTickDx = 0,
   xAxisTickStyle,
+  barValueLabelAngle = 0,
   yAxisDomain = [0, 50],
   yAxisTicks = [0, 10, 20, 30, 40, 50],
   infoPopover,
@@ -14368,7 +15404,7 @@ function PeakBillingHours({
   emptyStatePlaceholderProps,
   customization
 }) {
-  const chartData = React26.useMemo(() => {
+  const chartData = React28.useMemo(() => {
     if (seriesByTabId) {
       return seriesByTabId[activeTabId] ?? [];
     }
@@ -14403,9 +15439,9 @@ function PeakBillingHours({
     },
     customization?.header?.subtitleSx
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PeakBillingHoursCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_Card3.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_CardContent3.default, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_Stack19.default, { spacing: 1.75, sx: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-      import_Stack19.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PeakBillingHoursCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Card4.default, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_CardContent4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_Stack21.default, { spacing: 1.75, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      import_Stack21.default,
       {
         direction: "row",
         alignItems: "flex-start",
@@ -14413,20 +15449,20 @@ function PeakBillingHours({
         gap: 2,
         flexWrap: "wrap",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_Box20.default, { component: "div", sx: { minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_Typography18.default, { component: "span", sx: titleSx, children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_Typography18.default, { component: "span", sx: subtitleSx, children: subtitle })
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_Box22.default, { component: "div", sx: { minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Typography20.default, { component: "span", sx: titleSx, children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Typography20.default, { component: "span", sx: subtitleSx, children: subtitle })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_Stack19.default,
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            import_Stack21.default,
             {
               direction: "row",
               alignItems: "center",
               spacing: 1.5,
               sx: { flexShrink: 0 },
-              children: resolvedInfo ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChartWidgetHeaderSeparator, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              children: resolvedInfo ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ChartWidgetHeaderSeparator, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                   ChartWidgetInfoButton,
                   {
                     popover: resolvedInfo,
@@ -14439,7 +15475,7 @@ function PeakBillingHours({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       ChartWidgetSegmentedTabs,
       {
         tabs,
@@ -14459,8 +15495,8 @@ function PeakBillingHours({
         inactiveTabFontWeight: st?.inactiveTabFontWeight ?? 600
       }
     ),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_Skeleton7.default, { variant: "rounded", width: "100%", height: 320 }) : chartData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      BarPlot,
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_Skeleton7.default, { variant: "rounded", width: "100%", height: 320 }) : chartData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      BarPlot2,
       {
         data: chartData,
         yAxisDomain,
@@ -14471,9 +15507,10 @@ function PeakBillingHours({
         yAxisTickDx,
         yAxisTickStyle,
         xAxisTickDx,
-        xAxisTickStyle
+        xAxisTickStyle,
+        barValueLabelAngle
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       ChartEmptyState,
       {
         minHeight: 320,
@@ -14484,10 +15521,10 @@ function PeakBillingHours({
 }
 
 // src/components/widgets/CustomerJourneyAnalysis/CustomerJourneyAnalysis.tsx
-var import_Box21 = __toESM(require("@mui/material/Box"));
-var import_Stack20 = __toESM(require("@mui/material/Stack"));
-var import_Typography19 = __toESM(require("@mui/material/Typography"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_Box23 = __toESM(require("@mui/material/Box"));
+var import_Stack22 = __toESM(require("@mui/material/Stack"));
+var import_Typography21 = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var DEFAULT_WALK_INS_BG = "#5B8DEF";
 var DEFAULT_TRIAL_VISITS_BG = "#F59E42";
 var DEFAULT_BILLING_VISITS_BG = "#6EBE7A";
@@ -14535,7 +15572,7 @@ function resolveMetricConfig(shared, perCard, props) {
     sx: perCard?.sx ?? shared?.sx
   };
 }
-function mergeSx4(...items) {
+function mergeSx5(...items) {
   return items.flatMap(
     (item) => Array.isArray(item) ? item : item ? [item] : []
   );
@@ -14551,6 +15588,7 @@ function CustomerJourneyAnalysis({
   avgBillingPerTrial,
   // Labels
   title = "Customer Journey Analysis",
+  hideTitle = false,
   titleFontSize,
   titleFontWeight = 700,
   titleColor = "#0f172a",
@@ -14741,17 +15779,17 @@ function CustomerJourneyAnalysis({
     ...Array.isArray(metricsSx) ? metricsSx : metricsSx ? [metricsSx] : []
   ];
   const bodyDirection = { xs: "column", [bodyBreakpoint]: "row" };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_Box21.default, { sx: outerSx, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_Stack20.default, { spacing: 2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-      import_Stack20.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_Box23.default, { sx: outerSx, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_Stack22.default, { spacing: 2, children: [
+    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      import_Stack22.default,
       {
         direction: "row",
         alignItems: "flex-start",
         justifyContent: "space-between",
         gap: 2,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-            import_Typography19.default,
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            import_Typography21.default,
             {
               component: "h2",
               variant: "h6",
@@ -14764,8 +15802,8 @@ function CustomerJourneyAnalysis({
               children: title
             }
           ),
-          headerActions != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-            import_Box21.default,
+          headerActions != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            import_Box23.default,
             {
               sx: {
                 flexShrink: 0,
@@ -14779,9 +15817,9 @@ function CustomerJourneyAnalysis({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_Stack20.default, { direction: bodyDirection, spacing: bodyGap, alignItems: "stretch", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_Box21.default, { sx: stripSx, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_Box21.default, { sx: statCardsRowSx, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_Stack22.default, { direction: bodyDirection, spacing: bodyGap, alignItems: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_Box23.default, { sx: stripSx, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_Box23.default, { sx: statCardsRowSx, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           JourneyStatCard,
           {
             icon: wiConfig.icon,
@@ -14802,7 +15840,7 @@ function CustomerJourneyAnalysis({
             borderRadius: wiConfig.borderRadius,
             minHeight: wiConfig.minHeight,
             isLoading,
-            sx: mergeSx4(
+            sx: mergeSx5(
               {
                 flex: statCardFlexes[0],
                 borderRadius: `${statStripInnerBorderRadius} 0 0 ${statStripInnerBorderRadius}`
@@ -14811,7 +15849,7 @@ function CustomerJourneyAnalysis({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           JourneyStatCard,
           {
             icon: tvConfig.icon,
@@ -14832,10 +15870,10 @@ function CustomerJourneyAnalysis({
             borderRadius: tvConfig.borderRadius,
             minHeight: tvConfig.minHeight,
             isLoading,
-            sx: mergeSx4({ flex: statCardFlexes[1] }, tvConfig.sx)
+            sx: mergeSx5({ flex: statCardFlexes[1] }, tvConfig.sx)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           JourneyStatCard,
           {
             icon: bvConfig.icon,
@@ -14856,7 +15894,7 @@ function CustomerJourneyAnalysis({
             borderRadius: bvConfig.borderRadius,
             minHeight: bvConfig.minHeight,
             isLoading,
-            sx: mergeSx4(
+            sx: mergeSx5(
               {
                 flex: statCardFlexes[2],
                 borderRadius: `0 ${statStripInnerBorderRadius} ${statStripInnerBorderRadius} 0`
@@ -14866,8 +15904,8 @@ function CustomerJourneyAnalysis({
           }
         )
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_Box21.default, { sx: metricsBoxSx, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-        import_Box21.default,
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_Box23.default, { sx: metricsBoxSx, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        import_Box23.default,
         {
           sx: {
             display: "grid",
@@ -14900,8 +15938,8 @@ function CustomerJourneyAnalysis({
               label: avgBillingPerTrialLabel,
               value: formatAverage(avgBillingPerTrial)
             }
-          ].map(({ cfg, label, value }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-            import_Box21.default,
+          ].map(({ cfg, label, value }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            import_Box23.default,
             {
               sx: {
                 bgcolor: metricsCardBg,
@@ -14910,7 +15948,7 @@ function CustomerJourneyAnalysis({
                 height: "100%",
                 minWidth: 0
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 JourneyMetricCard,
                 {
                   label,
@@ -14941,7 +15979,7 @@ function CustomerJourneyAnalysis({
 // src/components/FalconThemeProvider/FalconThemeProvider.tsx
 var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"));
 var import_styles7 = require("@mui/material/styles");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var lightColor = "51, 48, 60";
 var darkColor = "228, 230, 244";
 var darkPaperBg = "#2F3349";
@@ -15021,8 +16059,8 @@ var FalconThemeProvider = ({
       mixins: { toolbar: { minHeight: 64 } }
     })
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_styles7.ThemeProvider, { theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_CssBaseline.default, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_styles7.ThemeProvider, { theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_CssBaseline.default, {}),
     children
   ] });
 };
@@ -15046,6 +16084,7 @@ var FalconThemeProvider = ({
   DEFAULT_FOOTFALL_TILE_ICONS,
   DEFAULT_PEAK_BILLING_HOURS_INFO_POPOVER,
   DEFAULT_QUEUE_TIME_BREAKDOWN_INFO_POPOVER,
+  DEFAULT_STORE_PERFORMANCE_BY_ASSIST_INFO_POPOVER,
   FalconAuditTimeline,
   FalconButton,
   FalconDIstrictFilter,
@@ -15084,6 +16123,17 @@ var FalconThemeProvider = ({
   QueueTimeBreakdownStackedBar,
   QueueTimePeriodFilter,
   RankedBarList,
+  STACKED_COMPARISON_DEFAULT_COMPARISON_COLOR,
+  STACKED_COMPARISON_DEFAULT_FRAME_BORDER,
+  STACKED_COMPARISON_DEFAULT_LEGEND_COMPARISON_COLOR,
+  STACKED_COMPARISON_DEFAULT_LEGEND_STACK_COLOR,
+  STACKED_COMPARISON_DEFAULT_STACK_COLORS,
+  STORE_PERFORMANCE_DEFAULT_BUCKETS,
+  STORE_PERFORMANCE_DEFAULT_DATA,
+  StackedComparisonBarChart,
+  StackedComparisonBarChartCustomizationProvider,
+  StackedComparisonBarChartTooltip,
+  StorePerformanceByAssist,
   TIME_PERIOD_FILTER_INFO_POPOVER,
   TIME_PERIOD_FILTER_INFO_POPOVER_BREAKDOWN,
   TimePeriodFilter,
@@ -15115,9 +16165,12 @@ var FalconThemeProvider = ({
   peakBillingHoursVisitsMock,
   preprocessData,
   skipSingleBranchLevels,
+  stackedComparisonMergeCss,
+  stackedComparisonMergeSx,
   toRechartsTreemapData,
   useBillingCounterAnalyticsCustomization,
   usePeakBillingHoursCustomization,
-  useQueueTimeBreakdownCustomization
+  useQueueTimeBreakdownCustomization,
+  useStackedComparisonBarChartCustomization
 });
 //# sourceMappingURL=index.js.map