@bpfdev/oly-ui 1.0.8 → 1.0.10

package/dist/index.mjs

@@ -3517,6 +3517,12 @@ var FalconAuditTimeline = ({
   chevronLeftIcon,
   chevronRightIcon,
   exportIcon,
+  eventsMaxHeight = "280px",
+  cardMaxWidth = "1324px",
+  hideScrollbar = false,
+  scrollbarWidth = "6px",
+  scrollbarThumbColor = "#D1D5DB",
+  scrollbarTrackColor = "transparent",
   timeControlsRowSx
 }) => {
   const getInitialKey = () => {
@@ -3622,10 +3628,25 @@ var FalconAuditTimeline = ({
         {
           sx: {
             display: "flex !important",
-            alignItems: "center !important",
+            alignItems: "flex-start !important",
             gap: "8px !important",
             width: "100% !important",
-            flexWrap: "wrap"
+            flexWrap: "wrap",
+            overflowY: "auto",
+            maxHeight: eventsMaxHeight,
+            paddingRight: hideScrollbar ? 0 : "4px",
+            scrollbarWidth: hideScrollbar ? "none" : "auto",
+            "&::-webkit-scrollbar": {
+              width: hideScrollbar ? 0 : scrollbarWidth,
+              display: hideScrollbar ? "none" : void 0
+            },
+            "&::-webkit-scrollbar-thumb": {
+              backgroundColor: scrollbarThumbColor,
+              borderRadius: "999px"
+            },
+            "&::-webkit-scrollbar-track": {
+              backgroundColor: scrollbarTrackColor
+            }
           },
           children: activeRuns.map((run, idx) => /* @__PURE__ */ jsx15(
             TimelineEventCard,
@@ -3715,9 +3736,9 @@ var FalconAuditTimeline = ({
     {
       sx: {
         width: "100% !important",
-        maxWidth: "1324px !important",
+        maxWidth: `${cardMaxWidth} !important`,
         height: "auto !important",
-        minHeight: isZeroCount ? "166px !important" : "183.5px !important",
+        minHeight: isZeroCount ? "166px !important" : "200px !important",
         padding: "16px !important",
         borderRadius: `${borderRadius} !important`,
         border: `${borderWidth} solid ${borderColor} !important`,
@@ -3750,7 +3771,9 @@ var FalconAuditTimeline = ({
                 display: "flex !important",
                 alignItems: "center !important",
                 gap: "8px !important",
-                overflow: "hidden !important"
+                overflowX: "auto",
+                overflowY: "hidden",
+                paddingBottom: "2px"
               },
               ...timeControlsRowSx ? [timeControlsRowSx] : []
             ],
@@ -6348,6 +6371,7 @@ var ProgressBarNumber = ({
 // src/components/widgets/FootfallByAgeGroups/FootfallByAgeGroups.tsx
 import Box20 from "@mui/material/Box";
 import Divider3 from "@mui/material/Divider";
+import Skeleton from "@mui/material/Skeleton";
 import Stack13 from "@mui/material/Stack";
 import Typography15 from "@mui/material/Typography";
 import * as React11 from "react";
@@ -6391,10 +6415,10 @@ var OLY_DEFAULT_COMPOSED_CHART_CHROME = {
   axisTickLineStroke: "#E5E7EB"
 };
 var OLY_DEFAULT_FOOTFALL_BY_AGE_CHART_MARGIN = {
-  top: 36,
-  right: 28,
-  left: 12,
-  bottom: 28
+  top: 16,
+  right: 8,
+  left: 6,
+  bottom: 0
 };
 var OLY_DEFAULT_FOOTFALL_BY_AGE_STACK_TOTAL_LABEL_FILL = "#28293D";
 function mergeCss2(base, override) {
@@ -6421,6 +6445,8 @@ function MultiLineTick({
   y = 0,
   payload,
   angle = -38,
+  dx = 0,
+  style,
   textAnchor = "end",
   fontSize = 12
 }) {
@@ -6430,13 +6456,14 @@ function MultiLineTick({
   const isHorizontal = angle === 0;
   const anchor = isHorizontal ? "middle" : textAnchor;
   const dy0 = isHorizontal ? lineHeight * 0.35 : 4;
-  return /* @__PURE__ */ jsx30("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx30("g", { transform: `translate(${x + dx},${y})`, children: /* @__PURE__ */ jsx30(
     "text",
     {
       transform: `rotate(${angle})`,
       textAnchor: anchor,
       fontSize,
       fill: "#666",
+      ...style,
       children: lines.map((line, i) => /* @__PURE__ */ jsx30("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
     }
   ) });
@@ -6655,6 +6682,7 @@ function FootfallByAgeGroups({
   title,
   data,
   series,
+  isLoading = false,
   chartHeight = OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX,
   minWidthPerCategory = defaultMinWidthPerCategory,
   horizontalScroll: horizontalScrollProp = "auto",
@@ -6678,11 +6706,15 @@ function FootfallByAgeGroups({
   renderTooltip,
   showLegend = true,
   chartMargin: chartMarginProp,
+  yAxisTickDx = -8,
+  yAxisTickStyle,
   chartColors: chartColorsProp,
   emptyStatePlaceholderProps,
   dimmedStackOpacity = 0.35,
   barStackId = "footfall-by-age-groups",
-  xAxisTickAngle = 0
+  xAxisTickAngle = 0,
+  xAxisTickDx = 0,
+  xAxisTickStyle
 }) {
   const [activeIndex, setActiveIndex] = React11.useState(null);
   const handleMouseEnter = React11.useCallback((_, index) => {
@@ -6756,10 +6788,7 @@ function FootfallByAgeGroups({
   const barOpacity = (index) => activeIndex === null || activeIndex === index ? 1 : dimmedStackOpacity;
   const lastSeriesIndex = series.length - 1;
   const chartMargin = React11.useMemo(
-    () => ({
-      ...defaultChartMargin,
-      ...chartMarginProp
-    }),
+    () => chartMarginProp ?? defaultChartMargin,
     [chartMarginProp]
   );
   const chartColors = React11.useMemo(
@@ -6833,7 +6862,7 @@ function FootfallByAgeGroups({
           }
         ),
         /* @__PURE__ */ jsx30(Divider3, { sx: sxChain({ borderColor: "#D8D9E4" }, dividerSx) }),
-        showLegend && hasMeaningfulData && series.length > 0 ? /* @__PURE__ */ jsx30(
+        showLegend && !isLoading && hasMeaningfulData && series.length > 0 ? /* @__PURE__ */ jsx30(
           Box20,
           {
             sx: sxChain(
@@ -6908,7 +6937,7 @@ function FootfallByAgeGroups({
               },
               chartScrollAreaSx
             ),
-            children: hasMeaningfulData ? /* @__PURE__ */ jsxs22(
+            children: isLoading ? /* @__PURE__ */ jsx30(Skeleton, { variant: "rounded", width: "100%", height: "100%" }) : hasMeaningfulData ? /* @__PURE__ */ jsxs22(
               BarChart,
               {
                 width: chartWidthPx,
@@ -6935,7 +6964,14 @@ function FootfallByAgeGroups({
                       interval: 0,
                       height: 68,
                       tickMargin: 10,
-                      tick: /* @__PURE__ */ jsx30(MultiLineTick, { angle: xAxisTickAngle }),
+                      tick: /* @__PURE__ */ jsx30(
+                        MultiLineTick,
+                        {
+                          angle: xAxisTickAngle,
+                          dx: xAxisTickDx,
+                          style: xAxisTickStyle
+                        }
+                      ),
                       axisLine: { stroke: chartColors.xAxisLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
@@ -6943,8 +6979,9 @@ function FootfallByAgeGroups({
                   /* @__PURE__ */ jsx30(
                     YAxis,
                     {
+                      dx: yAxisTickDx,
                       tickSize: 8,
-                      tick: { fontSize: 12, fontWeight: 400 },
+                      tick: { fontSize: 12, fontWeight: 400, ...yAxisTickStyle },
                       axisLine: { stroke: chartColors.axisTickLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
@@ -7043,11 +7080,12 @@ function FootfallByAgeGroups({
 }
 
 // src/components/widgets/FootfallByGender/FootfallByGender.tsx
+import { Icon as Icon11 } from "@iconify/react";
 import Box21 from "@mui/material/Box";
 import Divider4 from "@mui/material/Divider";
+import Skeleton2 from "@mui/material/Skeleton";
 import Stack14 from "@mui/material/Stack";
 import Typography16 from "@mui/material/Typography";
-import { Icon as Icon11 } from "@iconify/react";
 import * as React12 from "react";
 import {
   Bar as Bar2,
@@ -7067,10 +7105,10 @@ var OLY_DEFAULT_COMPOSED_CHART_CHROME2 = {
   axisTickLineStroke: "#E5E7EB"
 };
 var OLY_DEFAULT_FOOTFALL_GENDER_CHART_MARGIN = {
-  top: 28,
-  right: 20,
-  left: 16,
-  bottom: 28
+  top: 16,
+  right: 8,
+  left: 4,
+  bottom: 0
 };
 var OLY_DEFAULT_FOOTFALL_GENDER_SERIES_COLORS = {
   male: "#7266E9",
@@ -7208,6 +7246,8 @@ function MultiLineTick2({
   y = 0,
   payload,
   angle = -38,
+  dx = 0,
+  style,
   textAnchor = "end",
   fontSize = 12
 }) {
@@ -7217,13 +7257,14 @@ function MultiLineTick2({
   const isHorizontal = angle === 0;
   const anchor = isHorizontal ? "middle" : textAnchor;
   const dy0 = isHorizontal ? lineHeight * 0.35 : 4;
-  return /* @__PURE__ */ jsx31("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx31("g", { transform: `translate(${x + dx},${y})`, children: /* @__PURE__ */ jsx31(
     "text",
     {
       transform: `rotate(${angle})`,
       textAnchor: anchor,
       fontSize,
       fill: "#666",
+      ...style,
       children: lines.map((line, i) => /* @__PURE__ */ jsx31("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
     }
   ) });
@@ -7497,6 +7538,7 @@ function resolveCategoryScroll(minWidthPerCategory, horizontalScroll, categoryCo
 function FootfallByGender({
   title,
   data,
+  isLoading = false,
   seriesLabels: seriesLabelsProp,
   seriesColors: seriesColorsProp,
   chartHeight = OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX2,
@@ -7528,10 +7570,14 @@ function FootfallByGender({
   tooltipStyles,
   renderTooltip,
   chartMargin: chartMarginProp,
+  yAxisTickDx = -6,
+  yAxisTickStyle,
   chartColors: chartColorsProp,
   emptyStatePlaceholderProps,
   yAxisTickFormatter,
   xAxisTickAngle = 0,
+  xAxisTickDx = 0,
+  xAxisTickStyle,
   barValueLabelAngle = 0,
   growthBadgeWidth = 45,
   growthBadgeHeight = 38,
@@ -7633,7 +7679,8 @@ function FootfallByGender({
     if (hasGrowthBadges) top = topReserveForGrowthBadges;
     else if (showBarValueLabels) top = topReserveForBarLabels;
     else top = topReserveNoBarLabels;
-    return { ...defaultChartMargin2, top, ...chartMarginProp };
+    if (chartMarginProp) return chartMarginProp;
+    return { ...defaultChartMargin2, top };
   }, [hasGrowthBadges, showBarValueLabels, chartMarginProp]);
   const chartColors = React12.useMemo(
     () => ({
@@ -7736,7 +7783,7 @@ function FootfallByGender({
                     },
                     chartScrollAreaSx
                   ),
-                  children: processedData.length > 0 ? /* @__PURE__ */ jsxs23(
+                  children: isLoading ? /* @__PURE__ */ jsx31(Skeleton2, { variant: "rounded", width: "100%", height: "100%" }) : processedData.length > 0 ? /* @__PURE__ */ jsxs23(
                     BarChart2,
                     {
                       width: chartWidthPx,
@@ -7765,7 +7812,14 @@ function FootfallByGender({
                             interval: 0,
                             height: 68,
                             tickMargin: 10,
-                            tick: /* @__PURE__ */ jsx31(MultiLineTick2, { angle: xAxisTickAngle }),
+                            tick: /* @__PURE__ */ jsx31(
+                              MultiLineTick2,
+                              {
+                                angle: xAxisTickAngle,
+                                dx: xAxisTickDx,
+                                style: xAxisTickStyle
+                              }
+                            ),
                             axisLine: { stroke: chartColors.xAxisLineStroke },
                             tickLine: { stroke: chartColors.axisTickLineStroke }
                           }
@@ -7774,8 +7828,9 @@ function FootfallByGender({
                           YAxis2,
                           {
                             width: 52,
+                            dx: yAxisTickDx,
                             tickSize: 8,
-                            tick: { fontSize: 12, fontWeight: 400 },
+                            tick: { fontSize: 12, fontWeight: 400, ...yAxisTickStyle },
                             tickFormatter: yAxisTick,
                             axisLine: { stroke: chartColors.axisTickLineStroke },
                             tickLine: { stroke: chartColors.axisTickLineStroke }
@@ -7815,6 +7870,7 @@ function FootfallByGender({
                             dataKey: "male",
                             name: seriesLabels.male,
                             fill: seriesColors.male,
+                            barSize: resolvedMaxBarSize,
                             onMouseEnter: handleMouseEnter,
                             onMouseLeave: handleMouseLeave,
                             children: [
@@ -7865,6 +7921,7 @@ function FootfallByGender({
                             dataKey: "female",
                             name: seriesLabels.female,
                             fill: seriesColors.female,
+                            barSize: resolvedMaxBarSize,
                             onMouseEnter: handleMouseEnter,
                             onMouseLeave: handleMouseLeave,
                             children: [
@@ -7934,7 +7991,7 @@ function FootfallByGender({
                   )
                 }
               ),
-              showLegend && processedData.length > 0 ? /* @__PURE__ */ jsxs23(
+              showLegend && !isLoading && processedData.length > 0 ? /* @__PURE__ */ jsxs23(
                 Box21,
                 {
                   component: "ul",
@@ -8069,6 +8126,7 @@ function FootfallByGender({
 // src/components/widgets/PasserbyConversion/PasserbyConversion.tsx
 import Box22 from "@mui/material/Box";
 import Divider5 from "@mui/material/Divider";
+import Skeleton3 from "@mui/material/Skeleton";
 import Stack15 from "@mui/material/Stack";
 import Typography17 from "@mui/material/Typography";
 import * as React14 from "react";
@@ -8119,10 +8177,10 @@ var OLY_DEFAULT_COMPOSED_CHART_CHROME3 = {
   axisTickLineStroke: "#E5E7EB"
 };
 var OLY_DEFAULT_PASSERBY_CHART_MARGIN = {
-  top: 28,
+  top: 16,
   right: 8,
-  left: 4,
-  bottom: 28
+  left: 6,
+  bottom: 0
 };
 var OLY_DEFAULT_PASSERBY_CHART_SERIES_COLORS = {
   passerbyBarFill: "#FFCC4D",
@@ -8151,6 +8209,8 @@ function MultiLineTick3({
   y = 0,
   payload,
   angle = -42,
+  dx = 0,
+  style,
   textAnchor = "end",
   fontSize = 12
 }) {
@@ -8160,13 +8220,14 @@ function MultiLineTick3({
   const isHorizontal = angle === 0;
   const anchor = isHorizontal ? "middle" : textAnchor;
   const dy0 = isHorizontal ? lineHeight * 0.35 : 4;
-  return /* @__PURE__ */ jsx32("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx32("g", { transform: `translate(${x + dx},${y})`, children: /* @__PURE__ */ jsx32(
     "text",
     {
       transform: `rotate(${angle})`,
       textAnchor: anchor,
       fontSize,
       fill: "#666",
+      ...style,
       children: lines.map((line, i) => /* @__PURE__ */ jsx32("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
     }
   ) });
@@ -8437,6 +8498,7 @@ function defaultFormatTooltipConversion(value) {
 function PasserbyConversion({
   title,
   data,
+  isLoading = false,
   timeSlots,
   fillMissingTimeSlots = true,
   chartHeight = OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX3,
@@ -8476,12 +8538,20 @@ function PasserbyConversion({
   showConversionLine: showConversionLineProp,
   showBarValueLabels = true,
   chartMargin: chartMarginProp,
+  yAxisTickDx = -8,
+  yAxisTickStyle,
+  conversionAxisTickDx = 0,
+  conversionAxisTickStyle,
+  rightYAxisTickDx,
+  rightYAxisTickStyle,
   chartColors: chartColorsProp,
   emptyStatePlaceholderProps,
   isChartAnimationActive = true,
   chartAnimationDuration = 400,
   scrollChartToEndOnDataChange = true,
-  xAxisTickAngle = 0
+  xAxisTickAngle = 0,
+  xAxisTickDx = 0,
+  xAxisTickStyle
 }) {
   const [activeIndex, setActiveIndex] = React14.useState(null);
   const handleBarMouseEnter = React14.useCallback((_, index) => {
@@ -8604,12 +8674,8 @@ function PasserbyConversion({
   const chartMargin = React14.useMemo(() => {
     const top = showBarValueLabels ? topReserveForBarLabels2 : topReserveNoBarLabels2;
     const right = showConversionLine ? 52 : defaultChartMargin3.right;
-    return {
-      ...defaultChartMargin3,
-      top,
-      right,
-      ...chartMarginProp
-    };
+    if (chartMarginProp) return chartMarginProp;
+    return { ...defaultChartMargin3, top, right };
   }, [showBarValueLabels, showConversionLine, chartMarginProp]);
   const yTickLeft = yAxisTickFormatter ?? formatYAxisTickDefault2;
   const yTickRight = conversionAxisTickFormatter ?? formatYAxisTickDefault2;
@@ -8706,7 +8772,7 @@ function PasserbyConversion({
           }
         ),
         /* @__PURE__ */ jsx32(Divider5, { sx: sxChain3({ borderColor: "#D8D9E4" }, dividerSx) }),
-        showLegend && hasMeaningfulData && legendItems.length > 0 ? /* @__PURE__ */ jsx32(
+        showLegend && !isLoading && hasMeaningfulData && legendItems.length > 0 ? /* @__PURE__ */ jsx32(
           Box22,
           {
             sx: sxChain3(
@@ -8796,7 +8862,7 @@ function PasserbyConversion({
               },
               chartScrollAreaSx
             ),
-            children: hasMeaningfulData ? /* @__PURE__ */ jsxs24(
+            children: isLoading ? /* @__PURE__ */ jsx32(Skeleton3, { variant: "rounded", width: "100%", height: "100%" }) : hasMeaningfulData ? /* @__PURE__ */ jsxs24(
               ComposedChart,
               {
                 width: chartWidthPx,
@@ -8826,7 +8892,14 @@ function PasserbyConversion({
                       interval: 0,
                       height: 68,
                       tickMargin: 10,
-                      tick: /* @__PURE__ */ jsx32(MultiLineTick3, { angle: xAxisTickAngle }),
+                      tick: /* @__PURE__ */ jsx32(
+                        MultiLineTick3,
+                        {
+                          angle: xAxisTickAngle,
+                          dx: xAxisTickDx,
+                          style: xAxisTickStyle
+                        }
+                      ),
                       axisLine: { stroke: chartColors.xAxisLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
@@ -8835,8 +8908,9 @@ function PasserbyConversion({
                     YAxis3,
                     {
                       yAxisId: "left",
+                      dx: yAxisTickDx,
                       tickSize: 8,
-                      tick: { fontSize: 12, fontWeight: 400 },
+                      tick: { fontSize: 12, fontWeight: 400, ...yAxisTickStyle },
                       tickFormatter: yTickLeft,
                       axisLine: { stroke: chartColors.axisTickLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke },
@@ -8848,8 +8922,13 @@ function PasserbyConversion({
                     {
                       yAxisId: "right",
                       orientation: "right",
+                      dx: rightYAxisTickDx ?? conversionAxisTickDx,
                       tickSize: 8,
-                      tick: { fontSize: 12, fontWeight: 400 },
+                      tick: {
+                        fontSize: 12,
+                        fontWeight: 400,
+                        ...rightYAxisTickStyle ?? conversionAxisTickStyle
+                      },
                       tickFormatter: yTickRight,
                       axisLine: { stroke: chartColors.axisTickLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke },
@@ -9498,6 +9577,7 @@ var WalkinAnalysis = ({
 // src/components/widgets/WalkinTraffic/WalkinTraffic.tsx
 import Box24 from "@mui/material/Box";
 import Divider6 from "@mui/material/Divider";
+import Skeleton4 from "@mui/material/Skeleton";
 import Stack17 from "@mui/material/Stack";
 import Typography19 from "@mui/material/Typography";
 import * as React16 from "react";
@@ -9520,10 +9600,10 @@ var OLY_DEFAULT_COMPOSED_CHART_CHROME4 = {
   axisTickLineStroke: "#E5E7EB"
 };
 var OLY_DEFAULT_WALKIN_TRAFFIC_CHART_MARGIN = {
-  top: 28,
-  right: 20,
-  left: 12,
-  bottom: 28
+  top: 16,
+  right: 8,
+  left: 6,
+  bottom: 0
 };
 var OLY_DEFAULT_WALKIN_TRAFFIC_CHART_SERIES_COLORS = {
   barFill: "#0086A9",
@@ -9593,6 +9673,8 @@ function MultiLineTick4({
   y = 0,
   payload,
   angle = -42,
+  dx = 0,
+  style,
   textAnchor = "end",
   fontSize = 12
 }) {
@@ -9602,13 +9684,14 @@ function MultiLineTick4({
   const isHorizontal = angle === 0;
   const anchor = isHorizontal ? "middle" : textAnchor;
   const dy0 = isHorizontal ? lineHeight * 0.35 : 4;
-  return /* @__PURE__ */ jsx34("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx34("g", { transform: `translate(${x + dx},${y})`, children: /* @__PURE__ */ jsx34(
     "text",
     {
       transform: `rotate(${angle})`,
       textAnchor: anchor,
       fontSize,
       fill: "#666",
+      ...style,
       children: lines.map((line, i) => /* @__PURE__ */ jsx34("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
     }
   ) });
@@ -9886,6 +9969,7 @@ var defaultChartColors4 = {
 function WalkinTraffic({
   title,
   data,
+  isLoading = false,
   chartHeight = OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX4,
   barSeriesName = "Walk-ins",
   lineSeriesName = "Trend",
@@ -9920,13 +10004,17 @@ function WalkinTraffic({
   showLineInLegend = false,
   showBarValueLabels = true,
   chartMargin: chartMarginProp,
+  yAxisTickDx = -8,
+  yAxisTickStyle,
   chartColors: chartColorsProp,
   emptyStatePlaceholderProps,
   yAxisTickFormatter,
   isChartAnimationActive = true,
   chartAnimationDuration = 400,
   scrollChartToEndOnDataChange = true,
-  xAxisTickAngle = 0
+  xAxisTickAngle = 0,
+  xAxisTickDx = 0,
+  xAxisTickStyle
 }) {
   const tooltipFooterNote = tooltipFooterNoteProp === void 0 ? defaultFfGrowthTooltipFooterNote : tooltipFooterNoteProp;
   const processedData = React16.useMemo(
@@ -10003,11 +10091,8 @@ function WalkinTraffic({
   }, [chartInnerMinWidthPx, containerWidth]);
   const chartMargin = React16.useMemo(() => {
     const top = showBarValueLabels ? topReserveForBarLabels3 : topReserveNoBarLabels3;
-    return {
-      ...defaultChartMargin4,
-      top,
-      ...chartMarginProp
-    };
+    if (chartMarginProp) return chartMarginProp;
+    return { ...defaultChartMargin4, top };
   }, [showBarValueLabels, chartMarginProp]);
   const chartColors = React16.useMemo(
     () => ({
@@ -10107,7 +10192,7 @@ function WalkinTraffic({
           }
         ),
         /* @__PURE__ */ jsx34(Divider6, { sx: sxChain4({ borderColor: "#D8D9E4" }, dividerSx) }),
-        showLegend && hasMeaningfulData && legendItems.length > 0 ? /* @__PURE__ */ jsx34(
+        showLegend && !isLoading && hasMeaningfulData && legendItems.length > 0 ? /* @__PURE__ */ jsx34(
           Box24,
           {
             sx: sxChain4(
@@ -10197,7 +10282,7 @@ function WalkinTraffic({
               },
               chartScrollAreaSx
             ),
-            children: hasMeaningfulData ? /* @__PURE__ */ jsxs26(
+            children: isLoading ? /* @__PURE__ */ jsx34(Skeleton4, { variant: "rounded", width: "100%", height: "100%" }) : hasMeaningfulData ? /* @__PURE__ */ jsxs26(
               ComposedChart2,
               {
                 width: chartWidthPx,
@@ -10223,7 +10308,14 @@ function WalkinTraffic({
                       interval: 0,
                       height: 68,
                       tickMargin: 10,
-                      tick: /* @__PURE__ */ jsx34(MultiLineTick4, { angle: xAxisTickAngle }),
+                      tick: /* @__PURE__ */ jsx34(
+                        MultiLineTick4,
+                        {
+                          angle: xAxisTickAngle,
+                          dx: xAxisTickDx,
+                          style: xAxisTickStyle
+                        }
+                      ),
                       axisLine: { stroke: chartColors.xAxisLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
@@ -10231,8 +10323,9 @@ function WalkinTraffic({
                   /* @__PURE__ */ jsx34(
                     YAxis4,
                     {
+                      dx: yAxisTickDx,
                       tickSize: 8,
-                      tick: { fontSize: 12, fontWeight: 400 },
+                      tick: { fontSize: 12, fontWeight: 400, ...yAxisTickStyle },
                       tickFormatter: yTick,
                       axisLine: { stroke: chartColors.axisTickLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke }
@@ -11947,7 +12040,7 @@ import {
   Button as Button8,
   IconButton as IconButton5,
   Paper as Paper5,
-  Skeleton,
+  Skeleton as Skeleton5,
   Stack as Stack23,
   Tooltip as Tooltip12,
   Typography as Typography24
@@ -13334,7 +13427,7 @@ function FootFallHeatMapView({
   }
   if (isLoading || loading) {
     return /* @__PURE__ */ jsx43(
-      Skeleton,
+      Skeleton5,
       {
         variant: "rectangular",
         width: "100%",
@@ -13659,6 +13752,7 @@ var peakBillingHoursMockSeriesByTabId = {
 import Box30 from "@mui/material/Box";
 import Card4 from "@mui/material/Card";
 import CardContent3 from "@mui/material/CardContent";
+import Skeleton6 from "@mui/material/Skeleton";
 import Stack25 from "@mui/material/Stack";
 import Typography26 from "@mui/material/Typography";
 import * as React26 from "react";
@@ -13827,7 +13921,12 @@ function BarPlot({
   yAxisDomain,
   yAxisTicks,
   activeTabId,
-  renderTooltip
+  renderTooltip,
+  chartMargin,
+  yAxisTickDx = -6,
+  yAxisTickStyle,
+  xAxisTickDx = 0,
+  xAxisTickStyle
 }) {
   const { barChart: bc } = usePeakBillingHoursCustomization();
   const height = bc?.heightPx ?? 320;
@@ -13835,7 +13934,7 @@ function BarPlot({
   const barRadius = bc?.barRadius ?? 0;
   const gridStroke = bc?.gridStroke ?? OLY_DEFAULT_COMPOSED_CHART_CHROME6.cartesianGridStroke;
   const dash = bc?.gridStrokeDasharray ?? "3 3";
-  const m = {
+  const m = chartMargin ?? {
     top: bc?.margin?.top ?? 28,
     right: bc?.margin?.right ?? 12,
     bottom: bc?.margin?.bottom ?? 8,
@@ -13875,7 +13974,8 @@ function BarPlot({
           XAxis7,
           {
             dataKey: "label",
-            tick: { fill: xFill, fontSize: 11 },
+            dx: xAxisTickDx,
+            tick: { fill: xFill, fontSize: 11, ...xAxisTickStyle },
             tickLine: false,
             axisLine: {
               stroke: OLY_DEFAULT_COMPOSED_CHART_CHROME6.axisTickLineStroke
@@ -13889,7 +13989,8 @@ function BarPlot({
           {
             domain: yAxisDomain,
             ticks: yAxisTicks,
-            tick: { fill: yFill, fontSize: 11 },
+            dx: yAxisTickDx,
+            tick: { fill: yFill, fontSize: 11, ...yAxisTickStyle },
             tickLine: false,
             axisLine: false,
             width: yWidth
@@ -13954,7 +14055,13 @@ function PeakBillingHours({
   activeTabId,
   onTabChange,
   data,
+  isLoading = false,
   seriesByTabId,
+  chartMargin,
+  yAxisTickDx = -6,
+  yAxisTickStyle,
+  xAxisTickDx = 0,
+  xAxisTickStyle,
   yAxisDomain = [0, 50],
   yAxisTicks = [0, 10, 20, 30, 40, 50],
   infoPopover,
@@ -14053,14 +14160,19 @@ function PeakBillingHours({
         inactiveTabFontWeight: st?.inactiveTabFontWeight ?? 600
       }
     ),
-    chartData.length > 0 ? /* @__PURE__ */ jsx47(
+    isLoading ? /* @__PURE__ */ jsx47(Skeleton6, { variant: "rounded", width: "100%", height: 320 }) : chartData.length > 0 ? /* @__PURE__ */ jsx47(
       BarPlot,
       {
         data: chartData,
         yAxisDomain,
         yAxisTicks,
         activeTabId,
-        renderTooltip
+        renderTooltip,
+        chartMargin,
+        yAxisTickDx,
+        yAxisTickStyle,
+        xAxisTickDx,
+        xAxisTickStyle
       }
     ) : /* @__PURE__ */ jsx47(
       ChartEmptyState,