@bpfdev/oly-ui 1.0.11 → 1.0.12

package/dist/index.js

@@ -6961,7 +6961,8 @@ function StackTotalLabel({
   width,
   height,
   index,
-  stackTotalFill
+  stackTotalFill,
+  angle = 0
 }) {
   const nx = toNum(x);
   const ny = toNum(y);
@@ -6975,6 +6976,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 +6985,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 +7037,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 +7381,8 @@ function FootfallByAgeGroups({
                                 ...labelProps,
                                 series,
                                 rows: processedData,
-                                stackTotalFill: chartColors.stackTotalLabelFill
+                                stackTotalFill: chartColors.stackTotalLabelFill,
+                                angle: barValueLabelAngle
                               }
                             )
                           }
@@ -8575,7 +8580,8 @@ function BarTopLabel({
   y,
   width,
   value,
-  fill
+  fill,
+  angle = 0
 }) {
   const nx = toNum3(x);
   const ny = toNum3(y);
@@ -8589,6 +8595,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 +8604,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 +8869,7 @@ function PasserbyConversion({
   showLegend = true,
   showConversionLine: showConversionLineProp,
   showBarValueLabels = true,
+  barValueLabelAngle = 0,
   chartMargin: chartMarginProp,
   yAxisTickDx = -8,
   yAxisTickStyle,
@@ -9337,7 +9346,8 @@ function PasserbyConversion({
                               BarTopLabel,
                               {
                                 ...props,
-                                fill: chartColors.barValueLabelFill
+                                fill: chartColors.barValueLabelFill,
+                                angle: barValueLabelAngle
                               }
                             )
                           }
@@ -9373,7 +9383,8 @@ function PasserbyConversion({
                               BarTopLabel,
                               {
                                 ...props,
-                                fill: chartColors.barValueLabelFill
+                                fill: chartColors.barValueLabelFill,
+                                angle: barValueLabelAngle
                               }
                             )
                           }
@@ -10032,7 +10043,8 @@ function BarTopLabel2({
   y,
   width,
   value,
-  fill
+  fill,
+  angle = 0
 }) {
   const nx = toNum4(x);
   const ny = toNum4(y);
@@ -10046,6 +10058,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 +10067,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 +10334,7 @@ function WalkinTraffic({
   showTrendLine: showTrendLineProp,
   showLineInLegend = false,
   showBarValueLabels = true,
+  barValueLabelAngle = 0,
   chartMargin: chartMarginProp,
   yAxisTickDx = -8,
   yAxisTickStyle,
@@ -10712,7 +10727,8 @@ function WalkinTraffic({
                             BarTopLabel2,
                             {
                               ...props,
-                              fill: chartColors.barValueLabelFill
+                              fill: chartColors.barValueLabelFill,
+                              angle: barValueLabelAngle
                             }
                           )
                         }
@@ -12415,18 +12431,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 +12483,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 +12507,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 +12526,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"
     }
@@ -13328,9 +13383,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);
@@ -14189,7 +14252,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,6 +14265,7 @@ function PeakBarTopLabel(props) {
   }
   const cx = nx + nw / 2;
   const cy = ny - 6;
+  const isHorizontal = angle === 0;
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "text",
     {
@@ -14210,7 +14274,8 @@ 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))
     }
   );
@@ -14225,7 +14290,8 @@ function BarPlot({
   yAxisTickDx = -6,
   yAxisTickStyle,
   xAxisTickDx = 0,
-  xAxisTickStyle
+  xAxisTickStyle,
+  barValueLabelAngle = 0
 }) {
   const { barChart: bc } = usePeakBillingHoursCustomization();
   const height = bc?.heightPx ?? 320;
@@ -14336,7 +14402,8 @@ function BarPlot({
                     ...props,
                     fill: labelFill,
                     fontSize: labelFs,
-                    fontWeight: 500
+                    fontWeight: 500,
+                    angle: barValueLabelAngle
                   }
                 )
               }
@@ -14361,6 +14428,7 @@ function PeakBillingHours({
   yAxisTickStyle,
   xAxisTickDx = 0,
   xAxisTickStyle,
+  barValueLabelAngle = 0,
   yAxisDomain = [0, 50],
   yAxisTicks = [0, 10, 20, 30, 40, 50],
   infoPopover,
@@ -14471,7 +14539,8 @@ function PeakBillingHours({
         yAxisTickDx,
         yAxisTickStyle,
         xAxisTickDx,
-        xAxisTickStyle
+        xAxisTickStyle,
+        barValueLabelAngle
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       ChartEmptyState,
@@ -14551,6 +14620,7 @@ function CustomerJourneyAnalysis({
   avgBillingPerTrial,
   // Labels
   title = "Customer Journey Analysis",
+  hideTitle = false,
   titleFontSize,
   titleFontWeight = 700,
   titleColor = "#0f172a",
@@ -14742,7 +14812,7 @@ function CustomerJourneyAnalysis({
   ];
   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)(
+    !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       import_Stack20.default,
       {
         direction: "row",