@bpfdev/oly-ui 1.0.13 → 1.0.14

package/dist/index.mjs

@@ -668,7 +668,12 @@ function InfoPopoverPanel({
   placement,
   compact
 }) {
-  const helpTitle = content.helpTitle ?? "How does it help?";
+  const hasTitle = typeof content.title === "string" && content.title.trim() !== "";
+  const hasDescription = typeof content.description === "string" && content.description.trim() !== "";
+  const hasBullets = content.helpBullets.length > 0;
+  const hasExplicitHelpTitle = typeof content.helpTitle === "string" && content.helpTitle.trim() !== "";
+  const showHelpSection = hasBullets || hasExplicitHelpTitle;
+  const helpTitle = hasExplicitHelpTitle ? content.helpTitle : "How does it help?";
   const border = isDark ? popperBorderDark : popperBorder;
   const paperBg = isDark ? "#1c2128" : "#fff";
   const textPrimary = isDark ? "#f0f6fc" : "#1a1a1a";
@@ -696,7 +701,7 @@ function InfoPopoverPanel({
         boxShadow: panelShadow
       },
       children: /* @__PURE__ */ jsxs4(Stack2, { spacing: stackSpacing, sx: { position: "relative", zIndex: 1 }, children: [
-        /* @__PURE__ */ jsx5(
+        hasTitle && /* @__PURE__ */ jsx5(
           Typography4,
           {
             component: "h3",
@@ -709,7 +714,7 @@ function InfoPopoverPanel({
             children: content.title
           }
         ),
-        /* @__PURE__ */ jsx5(
+        hasDescription && /* @__PURE__ */ jsx5(
           Typography4,
           {
             sx: {
@@ -720,7 +725,7 @@ function InfoPopoverPanel({
             children: content.description
           }
         ),
-        /* @__PURE__ */ jsx5(
+        showHelpSection && /* @__PURE__ */ jsx5(
           Typography4,
           {
             sx: {
@@ -733,7 +738,7 @@ function InfoPopoverPanel({
             children: helpTitle
           }
         ),
-        /* @__PURE__ */ jsx5(
+        hasBullets && /* @__PURE__ */ jsx5(
           Box4,
           {
             component: "ul",
@@ -10967,6 +10972,10 @@ function LinePlot({
     left: lc?.margin?.left ?? 4
   };
   const xFill = lc?.xAxisTickFill ?? OLY_DEFAULT_CHART_AXIS_TICK_FILL;
+  const xTickAngle = lc?.xAxisTickAngle ?? 0;
+  const xTickStyle = lc?.xAxisTickStyle;
+  const xAxisHeight = lc?.xAxisHeight ?? 40;
+  const xTickAnchor = xTickAngle < 0 ? "end" : xTickAngle > 0 ? "start" : "middle";
   const yFill = lc?.yAxisTickFill ?? OLY_DEFAULT_CHART_AXIS_TICK_FILL;
   const yWidth = lc?.yAxisWidth ?? 36;
   const cursorStroke = lc?.cursorStroke ?? "#9CA3AF";
@@ -10985,13 +10994,15 @@ function LinePlot({
       XAxis5,
       {
         dataKey: "label",
-        tick: { fill: xFill, fontSize: 11 },
+        tick: { fill: xFill, fontSize: 11, style: xTickStyle },
         tickLine: false,
         axisLine: {
           stroke: OLY_DEFAULT_COMPOSED_CHART_CHROME5.axisTickLineStroke
         },
         interval: 0,
-        height: 40
+        height: xAxisHeight,
+        angle: xTickAngle,
+        textAnchor: xTickAnchor
       }
     ),
     /* @__PURE__ */ jsx39(
@@ -11279,6 +11290,7 @@ var QueueTimeBreakdownArea = ({
     () => mergeAreaData(series, xAxis),
     [series, xAxis]
   );
+  const fill = ac?.fillHeight ?? false;
   const stackH = ac?.stackHeightPx ?? 330;
   const chartH = ac?.chartHeightPx ?? 350;
   const margin = React20.useMemo(
@@ -11298,90 +11310,102 @@ var QueueTimeBreakdownArea = ({
   }, [chartData, series]);
   const yDomain = allZero ? [0, 16e3] : [0, "auto"];
   const yTickCount = allZero ? 5 : void 0;
-  return /* @__PURE__ */ jsx41(Stack21, { justifyContent: "center", height: stackH, children: /* @__PURE__ */ jsx41(ResponsiveContainer3, { width: "100%", height: chartH, children: /* @__PURE__ */ jsxs32(AreaChart, { data: chartData, margin, children: [
-    /* @__PURE__ */ jsx41(
-      CartesianGrid6,
-      {
-        strokeDasharray: "3 3",
-        stroke: gridStroke,
-        vertical: false
-      }
-    ),
-    /* @__PURE__ */ jsx41(
-      XAxis6,
-      {
-        dataKey: "name",
-        tick: { fill: theme.palette.text.secondary, fontSize: 11 },
-        axisLine: false,
-        tickLine: false
-      }
-    ),
-    /* @__PURE__ */ jsx41(
-      YAxis6,
-      {
-        domain: yDomain,
-        tickCount: yTickCount,
-        tick: { fill: theme.palette.text.secondary, fontSize: 11 },
-        axisLine: false,
-        tickLine: false,
-        tickFormatter: (v) => {
-          const n = typeof v === "number" ? v : Number(v);
-          const safe = Number.isFinite(n) ? n : 0;
-          return safe > 1e3 ? `${Math.ceil(safe / 1e3)}k` : String(safe);
-        },
-        label: {
-          value: yLabel,
-          angle: -90,
-          position: "insideLeft",
-          style: { fill: theme.palette.text.secondary, fontSize: 11 }
-        }
-      }
-    ),
-    series.map((s, i) => /* @__PURE__ */ jsx41(
-      Area,
-      {
-        type: "monotone",
-        dataKey: s.name,
-        stackId: "queueArea",
-        stroke: palette[i % palette.length],
-        fill: palette[i % palette.length],
-        fillOpacity: 1,
-        strokeWidth: 0
-      },
-      s.name
-    )),
-    /* @__PURE__ */ jsx41(
-      Tooltip9,
-      {
-        content: (tooltipProps) => {
-          if (renderTooltip) {
-            const custom = renderTooltip({
-              tooltipProps,
-              chartData,
-              series,
-              xAxis
-            });
-            return custom == null ? null : /* @__PURE__ */ jsx41(Fragment14, { children: custom });
+  return /* @__PURE__ */ jsx41(
+    Stack21,
+    {
+      justifyContent: fill ? "stretch" : "center",
+      sx: fill ? {
+        flexGrow: 1,
+        minHeight: 0,
+        height: "100%",
+        "& > *": { flex: 1, minHeight: 0 }
+      } : { height: stackH },
+      children: /* @__PURE__ */ jsx41(ResponsiveContainer3, { width: "100%", height: fill ? "100%" : chartH, children: /* @__PURE__ */ jsxs32(AreaChart, { data: chartData, margin, children: [
+        /* @__PURE__ */ jsx41(
+          CartesianGrid6,
+          {
+            strokeDasharray: "3 3",
+            stroke: gridStroke,
+            vertical: false
           }
-          const { active, payload, label } = tooltipProps;
-          return /* @__PURE__ */ jsx41(
-            QueueTimeBreakdownAreaTooltip,
-            {
-              active,
-              label,
-              payload,
-              styleOverrides: ac?.areaTooltip
+        ),
+        /* @__PURE__ */ jsx41(
+          XAxis6,
+          {
+            dataKey: "name",
+            tick: { fill: theme.palette.text.secondary, fontSize: 11 },
+            axisLine: false,
+            tickLine: false
+          }
+        ),
+        /* @__PURE__ */ jsx41(
+          YAxis6,
+          {
+            domain: yDomain,
+            tickCount: yTickCount,
+            tick: { fill: theme.palette.text.secondary, fontSize: 11 },
+            axisLine: false,
+            tickLine: false,
+            tickFormatter: (v) => {
+              const n = typeof v === "number" ? v : Number(v);
+              const safe = Number.isFinite(n) ? n : 0;
+              return safe > 1e3 ? `${Math.ceil(safe / 1e3)}k` : String(safe);
+            },
+            label: {
+              value: yLabel,
+              angle: -90,
+              position: "insideLeft",
+              style: { fill: theme.palette.text.secondary, fontSize: 11 }
             }
-          );
-        },
-        cursor: {
-          stroke: ac?.cursorStroke ?? "#D4D4D8",
-          strokeWidth: ac?.cursorStrokeWidth ?? 1
-        },
-        wrapperStyle: { outline: "none" }
-      }
-    )
-  ] }) }) });
+          }
+        ),
+        series.map((s, i) => /* @__PURE__ */ jsx41(
+          Area,
+          {
+            type: "monotone",
+            dataKey: s.name,
+            stackId: "queueArea",
+            stroke: palette[i % palette.length],
+            fill: palette[i % palette.length],
+            fillOpacity: 1,
+            strokeWidth: 0
+          },
+          s.name
+        )),
+        /* @__PURE__ */ jsx41(
+          Tooltip9,
+          {
+            content: (tooltipProps) => {
+              if (renderTooltip) {
+                const custom = renderTooltip({
+                  tooltipProps,
+                  chartData,
+                  series,
+                  xAxis
+                });
+                return custom == null ? null : /* @__PURE__ */ jsx41(Fragment14, { children: custom });
+              }
+              const { active, payload, label } = tooltipProps;
+              return /* @__PURE__ */ jsx41(
+                QueueTimeBreakdownAreaTooltip,
+                {
+                  active,
+                  label,
+                  payload,
+                  styleOverrides: ac?.areaTooltip
+                }
+              );
+            },
+            cursor: {
+              stroke: ac?.cursorStroke ?? "#D4D4D8",
+              strokeWidth: ac?.cursorStrokeWidth ?? 1
+            },
+            wrapperStyle: { outline: "none" }
+          }
+        )
+      ] }) })
+    }
+  );
 };
 var QueueTimeBreakdownArea_default = QueueTimeBreakdownArea;
 var xDays = [
@@ -11562,10 +11586,10 @@ function DonutInnerPercentLabel(props) {
   );
 }
 var DEFAULT_LABELS = [
-  "0-20 years old (male)",
-  "21-45 years old (male)",
-  "46-60 years old (male)",
-  "60+ years old (male)"
+  "1-15 mins",
+  "16-30 mins",
+  "30-45 mins",
+  "> 45 mins"
 ];
 function QueueTimeBreakdownDonut({
   chartFilter,
@@ -11585,8 +11609,9 @@ function QueueTimeBreakdownDonut({
   const padAngle = dn?.paddingAngle ?? 0;
   const chartH = dn?.chartHeightPx ?? 220;
   const pieData = React21.useMemo(() => {
-    return labels.map((name, i) => ({
-      name,
+    const count = Math.max(averageData.length, labels.length);
+    return Array.from({ length: count }, (_, i) => ({
+      name: labels[i] ?? `Bucket ${i + 1}`,
       value: Math.max(0, averageData[i] ?? 0)
     }));
   }, [averageData, labels]);
@@ -12069,6 +12094,9 @@ function QueueTimeBreakdown({
   data,
   Donut_data,
   donutYesterdayData,
+  donutLabels,
+  areaSeries,
+  areaXAxis,
   headerImageSrc,
   headlineTotal = "14,123",
   headlineSubtitle = "Queue Time Breakdown Of All Visitors",
@@ -12093,6 +12121,12 @@ function QueueTimeBreakdown({
     () => data.some((row) => row.data.some((seg) => (seg.data[0] ?? 0) > 0)),
     [data]
   );
+  const areaProvided = areaSeries !== void 0;
+  const resolvedAreaSeries = areaSeries !== void 0 ? areaSeries : getQueueTimeBreakdownAreaSeriesData(filter);
+  const resolvedAreaXAxis = areaProvided ? areaXAxis ?? [] : areaXAxis && areaXAxis.length > 0 ? areaXAxis : getQueueTimeBreakdownAreaXAxisData(filter);
+  const hasAreaData = resolvedAreaXAxis.length > 0 && resolvedAreaSeries.some(
+    (s) => s.data.some((v) => (typeof v === "number" ? v : 0) > 0)
+  );
   const palette = customization?.chartPalette && customization.chartPalette.length > 0 ? customization.chartPalette : QUEUE_CHART_COLORS;
   const legend = queueBucketLegend ?? defaultBucketLegendFromPalette(palette);
   const resolvedHeaderImageSrc = headerImageSrc === void 0 ? QUEUE_TIME_BREAKDOWN_DEFAULT_HEADER_IMAGE_SRC : headerImageSrc;
@@ -12110,234 +12144,245 @@ function QueueTimeBreakdown({
     { fontWeight: 700, color: "#0f172a" },
     customization?.periodFilter?.titleSx
   );
-  return /* @__PURE__ */ jsx44(QueueTimeBreakdownCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ jsx44(Card3, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ jsx44(CardContent2, { sx: mergeSx2(customization?.rootCard?.cardContentSx), children: /* @__PURE__ */ jsxs35(Stack24, { width: "100%", direction: "column", gap: 3, mb: 4, children: [
-    /* @__PURE__ */ jsxs35(
-      Stack24,
-      {
-        direction: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexWrap: "wrap",
-        gap: 2,
-        width: "100%",
-        children: [
-          /* @__PURE__ */ jsx44(
-            Typography25,
-            {
-              variant: isSmallScreen ? "subtitle2" : "body1",
-              sx: periodTitleSx,
-              children: title
-            }
-          ),
-          /* @__PURE__ */ jsx44(
-            TimePeriodFilter,
-            {
-              selectedFilter: filter,
-              onFilterChange: setFilter,
-              infoPopover: resolvedPeriodInfoPopover
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx44(Box30, { children: /* @__PURE__ */ jsxs35(Grid, { container: true, spacing: 3, children: [
-      /* @__PURE__ */ jsxs35(Grid, { size: { md: 6, xs: 12 }, children: [
+  return /* @__PURE__ */ jsx44(QueueTimeBreakdownCustomizationProvider, { value: customization ?? {}, children: /* @__PURE__ */ jsx44(Card3, { elevation: customization?.rootCard?.elevation ?? 0, sx: rootSx, children: /* @__PURE__ */ jsx44(CardContent2, { sx: mergeSx2(customization?.rootCard?.cardContentSx), children: /* @__PURE__ */ jsxs35(
+    Stack24,
+    {
+      width: "100%",
+      direction: "column",
+      gap: 3,
+      sx: mergeSx2({ mb: 4 }, customization?.rootCard?.contentStackSx),
+      children: [
         /* @__PURE__ */ jsxs35(
           Stack24,
           {
-            gap: 1,
-            sx: mergeSx2(customization?.leftColumn?.columnStackSx),
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexWrap: "wrap",
+            gap: 2,
+            width: "100%",
             children: [
-              /* @__PURE__ */ jsx44(Stack24, { children: /* @__PURE__ */ jsxs35(
-                Stack24,
+              /* @__PURE__ */ jsx44(
+                Typography25,
                 {
-                  direction: "row",
-                  gap: 4,
-                  justifyContent: "start",
-                  alignItems: "center",
-                  children: [
-                    resolvedHeaderImageSrc ? /* @__PURE__ */ jsx44(
-                      Box30,
-                      {
-                        component: "img",
-                        src: resolvedHeaderImageSrc,
-                        alt: "",
-                        width: 52,
-                        height: 52,
-                        sx: { objectFit: "contain" }
-                      }
-                    ) : null,
-                    /* @__PURE__ */ jsxs35(Stack24, { children: [
-                      /* @__PURE__ */ jsx44(
-                        Typography25,
-                        {
-                          sx: mergeSx2(
-                            {
-                              fontSize: "20px",
-                              fontWeight: 600,
-                              color: "#222222"
-                            },
-                            customization?.header?.headlineSx
-                          ),
-                          children: headlineTotal
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs35(Stack24, { direction: "row", alignItems: "center", gap: 1, children: [
-                        /* @__PURE__ */ jsx44(
-                          Typography25,
-                          {
-                            sx: mergeSx2(
-                              {
-                                fontSize: "11px",
-                                fontWeight: 400,
-                                color: "#222222"
-                              },
-                              customization?.header?.subtitleSx
-                            ),
-                            children: headlineSubtitle
-                          }
-                        ),
-                        resolvedHeadlineInfoPopover ? /* @__PURE__ */ jsx44(
-                          ChartWidgetInfoButton,
-                          {
-                            density: "compact",
-                            popover: resolvedHeadlineInfoPopover,
-                            ariaLabel: "Queue time breakdown information"
-                          }
-                        ) : null
-                      ] })
-                    ] })
-                  ]
+                  variant: isSmallScreen ? "subtitle2" : "body1",
+                  sx: periodTitleSx,
+                  children: title
                 }
-              ) }),
+              ),
               /* @__PURE__ */ jsx44(
-                Stack24,
+                TimePeriodFilter,
                 {
-                  sx: mergeSx2(customization?.leftColumn?.barRowsStackSx),
-                  children: data.map((item) => /* @__PURE__ */ jsx44(
-                    QueueTimeBreakdownStackedBar,
-                    {
-                      row: item,
-                      legendRows: legend,
-                      renderTooltip: renderStackedBarTooltip
-                    },
-                    item.name
-                  ))
+                  selectedFilter: filter,
+                  onFilterChange: setFilter,
+                  infoPopover: resolvedPeriodInfoPopover
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx44(
-          Typography25,
-          {
-            sx: mergeSx2(
-              {
-                marginTop: "10px",
-                fontSize: "14px",
-                fontWeight: 500,
-                color: "#222222"
-              },
-              customization?.dataComparison?.titleSx
-            ),
-            children: dataComparisonTitle
-          }
-        ),
-        /* @__PURE__ */ jsx44(
-          Card3,
-          {
-            elevation: 0,
-            sx: mergeSx2(
-              {
-                cursor: "pointer",
-                marginTop: "10px",
-                bgcolor: "#FFFFFF",
-                border: "1px solid #E5E7EB",
-                borderRadius: 2
-              },
-              customization?.dataComparison?.cardSx
-            ),
-            children: /* @__PURE__ */ jsx44(CardContent2, { sx: { padding: "4px 8px" }, children: hasComparisonData ? /* @__PURE__ */ jsxs35(
+        /* @__PURE__ */ jsx44(Box30, { children: /* @__PURE__ */ jsxs35(Grid, { container: true, spacing: 3, children: [
+          /* @__PURE__ */ jsxs35(Grid, { size: { md: 6, xs: 12 }, children: [
+            /* @__PURE__ */ jsxs35(
               Stack24,
               {
-                direction: "row",
-                justifyContent: "space-evenly",
-                alignItems: "center",
+                gap: 1,
+                sx: mergeSx2(customization?.leftColumn?.columnStackSx),
                 children: [
-                  /* @__PURE__ */ jsx44(Stack24, { width: "50%", children: /* @__PURE__ */ jsx44(
-                    QueueTimeBreakdownDonut,
+                  /* @__PURE__ */ jsx44(Stack24, { children: /* @__PURE__ */ jsxs35(
+                    Stack24,
                     {
-                      averageData: Donut_data,
-                      chartFilter: filter,
-                      LabelName: "Today",
-                      renderTooltip: renderDonutTooltip
+                      direction: "row",
+                      gap: 4,
+                      justifyContent: "start",
+                      alignItems: "center",
+                      children: [
+                        resolvedHeaderImageSrc ? /* @__PURE__ */ jsx44(
+                          Box30,
+                          {
+                            component: "img",
+                            src: resolvedHeaderImageSrc,
+                            alt: "",
+                            width: 52,
+                            height: 52,
+                            sx: { objectFit: "contain" }
+                          }
+                        ) : null,
+                        /* @__PURE__ */ jsxs35(Stack24, { children: [
+                          /* @__PURE__ */ jsx44(
+                            Typography25,
+                            {
+                              sx: mergeSx2(
+                                {
+                                  fontSize: "20px",
+                                  fontWeight: 600,
+                                  color: "#222222"
+                                },
+                                customization?.header?.headlineSx
+                              ),
+                              children: headlineTotal
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs35(Stack24, { direction: "row", alignItems: "center", gap: 1, children: [
+                            /* @__PURE__ */ jsx44(
+                              Typography25,
+                              {
+                                sx: mergeSx2(
+                                  {
+                                    fontSize: "11px",
+                                    fontWeight: 400,
+                                    color: "#222222"
+                                  },
+                                  customization?.header?.subtitleSx
+                                ),
+                                children: headlineSubtitle
+                              }
+                            ),
+                            resolvedHeadlineInfoPopover ? /* @__PURE__ */ jsx44(
+                              ChartWidgetInfoButton,
+                              {
+                                density: "compact",
+                                popover: resolvedHeadlineInfoPopover,
+                                ariaLabel: "Queue time breakdown information"
+                              }
+                            ) : null
+                          ] })
+                        ] })
+                      ]
                     }
                   ) }),
                   /* @__PURE__ */ jsx44(
-                    Box30,
+                    Stack24,
                     {
-                      component: "span",
-                      sx: mergeSx2(
+                      sx: mergeSx2(customization?.leftColumn?.barRowsStackSx),
+                      children: data.map((item) => /* @__PURE__ */ jsx44(
+                        QueueTimeBreakdownStackedBar,
                         {
-                          height: "180px",
-                          width: "2px",
-                          backgroundColor: "#D8D9E4",
-                          display: "inline-block"
+                          row: item,
+                          legendRows: legend,
+                          renderTooltip: renderStackedBarTooltip
                         },
-                        customization?.dataComparison?.dividerSx
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx44(Stack24, { width: "50%", children: /* @__PURE__ */ jsx44(
-                    QueueTimeBreakdownDonut,
-                    {
-                      averageData: yesterdayDonut,
-                      chartFilter: filter,
-                      LabelName: "Yesterday",
-                      renderTooltip: renderDonutTooltip
+                        item.name
+                      ))
                     }
-                  ) })
+                  )
                 ]
               }
-            ) : /* @__PURE__ */ jsx44(ChartEmptyState, { minHeight: 220 }) })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx44(Grid, { size: { md: 6, xs: 12 }, children: /* @__PURE__ */ jsx44(
-        Card3,
-        {
-          elevation: 0,
-          sx: mergeSx2(
-            {
-              cursor: "pointer",
-              borderRadius: "8px",
-              border: "1px solid #E5E7EB",
-              bgcolor: "#FFFFFF",
-              height: "100%"
-            },
-            customization?.areaChart?.cardSx
-          ),
-          children: /* @__PURE__ */ jsx44(
-            CardContent2,
+            ),
+            /* @__PURE__ */ jsx44(
+              Typography25,
+              {
+                sx: mergeSx2(
+                  {
+                    marginTop: "10px",
+                    fontSize: "14px",
+                    fontWeight: 500,
+                    color: "#222222"
+                  },
+                  customization?.dataComparison?.titleSx
+                ),
+                children: dataComparisonTitle
+              }
+            ),
+            /* @__PURE__ */ jsx44(
+              Card3,
+              {
+                elevation: 0,
+                sx: mergeSx2(
+                  {
+                    cursor: "pointer",
+                    marginTop: "10px",
+                    bgcolor: "#FFFFFF",
+                    border: "1px solid #E5E7EB",
+                    borderRadius: 2
+                  },
+                  customization?.dataComparison?.cardSx
+                ),
+                children: /* @__PURE__ */ jsx44(CardContent2, { sx: { padding: "4px 8px" }, children: hasComparisonData ? /* @__PURE__ */ jsxs35(
+                  Stack24,
+                  {
+                    direction: "row",
+                    justifyContent: "space-evenly",
+                    alignItems: "center",
+                    children: [
+                      /* @__PURE__ */ jsx44(Stack24, { width: "50%", children: /* @__PURE__ */ jsx44(
+                        QueueTimeBreakdownDonut,
+                        {
+                          averageData: Donut_data,
+                          labels: donutLabels,
+                          chartFilter: filter,
+                          LabelName: "Today",
+                          renderTooltip: renderDonutTooltip
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx44(
+                        Box30,
+                        {
+                          component: "span",
+                          sx: mergeSx2(
+                            {
+                              height: "180px",
+                              width: "2px",
+                              backgroundColor: "#D8D9E4",
+                              display: "inline-block"
+                            },
+                            customization?.dataComparison?.dividerSx
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx44(Stack24, { width: "50%", children: /* @__PURE__ */ jsx44(
+                        QueueTimeBreakdownDonut,
+                        {
+                          averageData: yesterdayDonut,
+                          labels: donutLabels,
+                          chartFilter: filter,
+                          LabelName: "Yesterday",
+                          renderTooltip: renderDonutTooltip
+                        }
+                      ) })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx44(ChartEmptyState, { minHeight: 220 }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx44(Grid, { size: { md: 6, xs: 12 }, children: /* @__PURE__ */ jsx44(
+            Card3,
             {
+              elevation: 0,
               sx: mergeSx2(
-                { padding: "10px 8px" },
-                customization?.areaChart?.cardContentSx
+                {
+                  cursor: "pointer",
+                  borderRadius: "8px",
+                  border: "1px solid #E5E7EB",
+                  bgcolor: "#FFFFFF",
+                  height: "100%"
+                },
+                customization?.areaChart?.cardSx
               ),
-              children: hasBarData ? /* @__PURE__ */ jsx44(
-                QueueTimeBreakdownArea_default,
+              children: /* @__PURE__ */ jsx44(
+                CardContent2,
                 {
-                  series: getQueueTimeBreakdownAreaSeriesData(filter),
-                  xAxis: getQueueTimeBreakdownAreaXAxisData(filter),
-                  renderTooltip: renderAreaTooltip
+                  sx: mergeSx2(
+                    { padding: "10px 8px" },
+                    customization?.areaChart?.cardContentSx
+                  ),
+                  children: (areaProvided ? hasAreaData : hasBarData) ? /* @__PURE__ */ jsx44(
+                    QueueTimeBreakdownArea_default,
+                    {
+                      series: resolvedAreaSeries,
+                      xAxis: resolvedAreaXAxis,
+                      renderTooltip: renderAreaTooltip
+                    }
+                  ) : /* @__PURE__ */ jsx44(ChartEmptyState, { minHeight: 330 })
                 }
-              ) : /* @__PURE__ */ jsx44(ChartEmptyState, { minHeight: 330 })
+              )
             }
-          )
-        }
-      ) })
-    ] }) })
-  ] }) }) }) });
+          ) })
+        ] }) })
+      ]
+    }
+  ) }) }) });
 }
 
 // src/components/charts/StackedComparisonBarChart/stackedComparisonBarChart.chartTokens.ts
@@ -13366,7 +13411,8 @@ function rowFromHeuristicLabel(zoneName, total) {
   }));
   return { id, label: zoneName, value: a + b + c + d, segments };
 }
-function deriveFootfallHeatMapKpiStrip(activeZone, childTiles, buildBarRow) {
+function deriveFootfallHeatMapKpiStrip(activeZone, childTiles, buildBarRow, options) {
+  const includeZeroValueRows = options?.includeZeroValueRows ?? false;
   const buildRow = (node, role, total, fallback) => {
     if (buildBarRow) {
       const custom = buildBarRow({ node, activeZone, role, total });
@@ -13376,7 +13422,7 @@ function deriveFootfallHeatMapKpiStrip(activeZone, childTiles, buildBarRow) {
   };
   if (activeZone) {
     const childRowsSource = (activeZone.list ?? []).filter(
-      (n) => parseVisitorCount(n.overallData?.count) > 0
+      (n) => includeZeroValueRows ? true : parseVisitorCount(n.overallData?.count) > 0
     );
     if (childRowsSource.length > 0) {
       const items = childRowsSource.map((node) => {
@@ -14319,7 +14365,8 @@ function FootFallHeatMapView({
     return deriveFootfallHeatMapKpiStrip(
       activeZoneForStrip,
       data.current ?? [],
-      kpiStripPresentation?.buildBarRow
+      kpiStripPresentation?.buildBarRow,
+      { includeZeroValueRows: kpiStripPresentation?.includeZeroValueRows }
     );
   }, [
     isLoading,
@@ -14327,7 +14374,8 @@ function FootFallHeatMapView({
     initialData,
     trackingDetails,
     data,
-    kpiStripPresentation?.buildBarRow
+    kpiStripPresentation?.buildBarRow,
+    kpiStripPresentation?.includeZeroValueRows
   ]);
   const formatPercentage = (value) => {
     if (typeof value !== "number") return "0%";