@bpfdev/oly-ui 1.0.8 → 1.0.9

package/dist/index.js

@@ -6433,6 +6433,7 @@ var ProgressBarNumber = ({
 // src/components/widgets/FootfallByAgeGroups/FootfallByAgeGroups.tsx
 var import_Box9 = __toESM(require("@mui/material/Box"));
 var import_Divider2 = __toESM(require("@mui/material/Divider"));
+var import_Skeleton = __toESM(require("@mui/material/Skeleton"));
 var import_Stack7 = __toESM(require("@mui/material/Stack"));
 var import_Typography6 = __toESM(require("@mui/material/Typography"));
 var React11 = __toESM(require("react"));
@@ -6467,10 +6468,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) {
@@ -6497,6 +6498,8 @@ function MultiLineTick({
   y = 0,
   payload,
   angle = -38,
+  dx = 0,
+  style,
   textAnchor = "end",
   fontSize = 12
 }) {
@@ -6506,13 +6509,14 @@ function MultiLineTick({
   const isHorizontal = angle === 0;
   const anchor = isHorizontal ? "middle" : textAnchor;
   const dy0 = isHorizontal ? lineHeight * 0.35 : 4;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("g", { transform: `translate(${x + dx},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "text",
     {
       transform: `rotate(${angle})`,
       textAnchor: anchor,
       fontSize,
       fill: "#666",
+      ...style,
       children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
     }
   ) });
@@ -6731,6 +6735,7 @@ function FootfallByAgeGroups({
   title,
   data,
   series,
+  isLoading = false,
   chartHeight = OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX,
   minWidthPerCategory = defaultMinWidthPerCategory,
   horizontalScroll: horizontalScrollProp = "auto",
@@ -6754,11 +6759,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) => {
@@ -6832,10 +6841,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(
@@ -6909,7 +6915,7 @@ function FootfallByAgeGroups({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_Divider2.default, { sx: sxChain({ borderColor: "#D8D9E4" }, dividerSx) }),
-        showLegend && hasMeaningfulData && series.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        showLegend && !isLoading && hasMeaningfulData && series.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           import_Box9.default,
           {
             sx: sxChain(
@@ -6984,7 +6990,7 @@ function FootfallByAgeGroups({
               },
               chartScrollAreaSx
             ),
-            children: hasMeaningfulData ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_Skeleton.default, { variant: "rounded", width: "100%", height: "100%" }) : hasMeaningfulData ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
               import_recharts.BarChart,
               {
                 width: chartWidthPx,
@@ -7011,7 +7017,14 @@ function FootfallByAgeGroups({
                       interval: 0,
                       height: 68,
                       tickMargin: 10,
-                      tick: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MultiLineTick, { angle: xAxisTickAngle }),
+                      tick: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        MultiLineTick,
+                        {
+                          angle: xAxisTickAngle,
+                          dx: xAxisTickDx,
+                          style: xAxisTickStyle
+                        }
+                      ),
                       axisLine: { stroke: chartColors.xAxisLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
@@ -7019,8 +7032,9 @@ function FootfallByAgeGroups({
                   /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     import_recharts.YAxis,
                     {
+                      dx: yAxisTickDx,
                       tickSize: 8,
-                      tick: { fontSize: 12, fontWeight: 400 },
+                      tick: { fontSize: 12, fontWeight: 400, ...yAxisTickStyle },
                       axisLine: { stroke: chartColors.axisTickLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
@@ -7119,11 +7133,12 @@ function FootfallByAgeGroups({
 }
 
 // src/components/widgets/FootfallByGender/FootfallByGender.tsx
+var import_react19 = require("@iconify/react");
 var import_Box10 = __toESM(require("@mui/material/Box"));
 var import_Divider3 = __toESM(require("@mui/material/Divider"));
+var import_Skeleton2 = __toESM(require("@mui/material/Skeleton"));
 var import_Stack8 = __toESM(require("@mui/material/Stack"));
 var import_Typography7 = __toESM(require("@mui/material/Typography"));
-var import_react19 = require("@iconify/react");
 var React12 = __toESM(require("react"));
 var import_recharts2 = require("recharts");
 var import_jsx_runtime31 = require("react/jsx-runtime");
@@ -7134,10 +7149,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",
@@ -7275,6 +7290,8 @@ function MultiLineTick2({
   y = 0,
   payload,
   angle = -38,
+  dx = 0,
+  style,
   textAnchor = "end",
   fontSize = 12
 }) {
@@ -7284,13 +7301,14 @@ function MultiLineTick2({
   const isHorizontal = angle === 0;
   const anchor = isHorizontal ? "middle" : textAnchor;
   const dy0 = isHorizontal ? lineHeight * 0.35 : 4;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("g", { transform: `translate(${x + dx},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "text",
     {
       transform: `rotate(${angle})`,
       textAnchor: anchor,
       fontSize,
       fill: "#666",
+      ...style,
       children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
     }
   ) });
@@ -7564,6 +7582,7 @@ function resolveCategoryScroll(minWidthPerCategory, horizontalScroll, categoryCo
 function FootfallByGender({
   title,
   data,
+  isLoading = false,
   seriesLabels: seriesLabelsProp,
   seriesColors: seriesColorsProp,
   chartHeight = OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX2,
@@ -7595,10 +7614,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,
@@ -7700,7 +7723,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(
     () => ({
@@ -7803,7 +7827,7 @@ function FootfallByGender({
                     },
                     chartScrollAreaSx
                   ),
-                  children: processedData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                  children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_Skeleton2.default, { variant: "rounded", width: "100%", height: "100%" }) : processedData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                     import_recharts2.BarChart,
                     {
                       width: chartWidthPx,
@@ -7832,7 +7856,14 @@ function FootfallByGender({
                             interval: 0,
                             height: 68,
                             tickMargin: 10,
-                            tick: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MultiLineTick2, { angle: xAxisTickAngle }),
+                            tick: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                              MultiLineTick2,
+                              {
+                                angle: xAxisTickAngle,
+                                dx: xAxisTickDx,
+                                style: xAxisTickStyle
+                              }
+                            ),
                             axisLine: { stroke: chartColors.xAxisLineStroke },
                             tickLine: { stroke: chartColors.axisTickLineStroke }
                           }
@@ -7841,8 +7872,9 @@ function FootfallByGender({
                           import_recharts2.YAxis,
                           {
                             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 }
@@ -7882,6 +7914,7 @@ function FootfallByGender({
                             dataKey: "male",
                             name: seriesLabels.male,
                             fill: seriesColors.male,
+                            barSize: resolvedMaxBarSize,
                             onMouseEnter: handleMouseEnter,
                             onMouseLeave: handleMouseLeave,
                             children: [
@@ -7932,6 +7965,7 @@ function FootfallByGender({
                             dataKey: "female",
                             name: seriesLabels.female,
                             fill: seriesColors.female,
+                            barSize: resolvedMaxBarSize,
                             onMouseEnter: handleMouseEnter,
                             onMouseLeave: handleMouseLeave,
                             children: [
@@ -8001,7 +8035,7 @@ function FootfallByGender({
                   )
                 }
               ),
-              showLegend && processedData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+              showLegend && !isLoading && processedData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                 import_Box10.default,
                 {
                   component: "ul",
@@ -8136,6 +8170,7 @@ function FootfallByGender({
 // src/components/widgets/PasserbyConversion/PasserbyConversion.tsx
 var import_Box11 = __toESM(require("@mui/material/Box"));
 var import_Divider4 = __toESM(require("@mui/material/Divider"));
+var import_Skeleton3 = __toESM(require("@mui/material/Skeleton"));
 var import_Stack9 = __toESM(require("@mui/material/Stack"));
 var import_Typography8 = __toESM(require("@mui/material/Typography"));
 var React14 = __toESM(require("react"));
@@ -8176,10 +8211,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",
@@ -8208,6 +8243,8 @@ function MultiLineTick3({
   y = 0,
   payload,
   angle = -42,
+  dx = 0,
+  style,
   textAnchor = "end",
   fontSize = 12
 }) {
@@ -8217,13 +8254,14 @@ function MultiLineTick3({
   const isHorizontal = angle === 0;
   const anchor = isHorizontal ? "middle" : textAnchor;
   const dy0 = isHorizontal ? lineHeight * 0.35 : 4;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { transform: `translate(${x + dx},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "text",
     {
       transform: `rotate(${angle})`,
       textAnchor: anchor,
       fontSize,
       fill: "#666",
+      ...style,
       children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
     }
   ) });
@@ -8494,6 +8532,7 @@ function defaultFormatTooltipConversion(value) {
 function PasserbyConversion({
   title,
   data,
+  isLoading = false,
   timeSlots,
   fillMissingTimeSlots = true,
   chartHeight = OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX3,
@@ -8533,12 +8572,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) => {
@@ -8661,12 +8708,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;
@@ -8763,7 +8806,7 @@ function PasserbyConversion({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_Divider4.default, { sx: sxChain3({ borderColor: "#D8D9E4" }, dividerSx) }),
-        showLegend && hasMeaningfulData && legendItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        showLegend && !isLoading && hasMeaningfulData && legendItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           import_Box11.default,
           {
             sx: sxChain3(
@@ -8853,7 +8896,7 @@ function PasserbyConversion({
               },
               chartScrollAreaSx
             ),
-            children: hasMeaningfulData ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_Skeleton3.default, { variant: "rounded", width: "100%", height: "100%" }) : hasMeaningfulData ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
               import_recharts3.ComposedChart,
               {
                 width: chartWidthPx,
@@ -8883,7 +8926,14 @@ function PasserbyConversion({
                       interval: 0,
                       height: 68,
                       tickMargin: 10,
-                      tick: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MultiLineTick3, { angle: xAxisTickAngle }),
+                      tick: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                        MultiLineTick3,
+                        {
+                          angle: xAxisTickAngle,
+                          dx: xAxisTickDx,
+                          style: xAxisTickStyle
+                        }
+                      ),
                       axisLine: { stroke: chartColors.xAxisLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
@@ -8892,8 +8942,9 @@ function PasserbyConversion({
                     import_recharts3.YAxis,
                     {
                       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 },
@@ -8905,8 +8956,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 },
@@ -9555,6 +9611,7 @@ var WalkinAnalysis = ({
 // src/components/widgets/WalkinTraffic/WalkinTraffic.tsx
 var import_Box13 = __toESM(require("@mui/material/Box"));
 var import_Divider5 = __toESM(require("@mui/material/Divider"));
+var import_Skeleton4 = __toESM(require("@mui/material/Skeleton"));
 var import_Stack11 = __toESM(require("@mui/material/Stack"));
 var import_Typography10 = __toESM(require("@mui/material/Typography"));
 var React16 = __toESM(require("react"));
@@ -9568,10 +9625,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",
@@ -9641,6 +9698,8 @@ function MultiLineTick4({
   y = 0,
   payload,
   angle = -42,
+  dx = 0,
+  style,
   textAnchor = "end",
   fontSize = 12
 }) {
@@ -9650,13 +9709,14 @@ function MultiLineTick4({
   const isHorizontal = angle === 0;
   const anchor = isHorizontal ? "middle" : textAnchor;
   const dy0 = isHorizontal ? lineHeight * 0.35 : 4;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("g", { transform: `translate(${x + dx},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "text",
     {
       transform: `rotate(${angle})`,
       textAnchor: anchor,
       fontSize,
       fill: "#666",
+      ...style,
       children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tspan", { x: 0, dy: i === 0 ? dy0 : lineHeight, children: line }, i))
     }
   ) });
@@ -9934,6 +9994,7 @@ var defaultChartColors4 = {
 function WalkinTraffic({
   title,
   data,
+  isLoading = false,
   chartHeight = OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX4,
   barSeriesName = "Walk-ins",
   lineSeriesName = "Trend",
@@ -9968,13 +10029,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(
@@ -10051,11 +10116,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(
     () => ({
@@ -10155,7 +10217,7 @@ function WalkinTraffic({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_Divider5.default, { sx: sxChain4({ borderColor: "#D8D9E4" }, dividerSx) }),
-        showLegend && hasMeaningfulData && legendItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        showLegend && !isLoading && hasMeaningfulData && legendItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           import_Box13.default,
           {
             sx: sxChain4(
@@ -10245,7 +10307,7 @@ function WalkinTraffic({
               },
               chartScrollAreaSx
             ),
-            children: hasMeaningfulData ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_Skeleton4.default, { variant: "rounded", width: "100%", height: "100%" }) : hasMeaningfulData ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               import_recharts5.ComposedChart,
               {
                 width: chartWidthPx,
@@ -10271,7 +10333,14 @@ function WalkinTraffic({
                       interval: 0,
                       height: 68,
                       tickMargin: 10,
-                      tick: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MultiLineTick4, { angle: xAxisTickAngle }),
+                      tick: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        MultiLineTick4,
+                        {
+                          angle: xAxisTickAngle,
+                          dx: xAxisTickDx,
+                          style: xAxisTickStyle
+                        }
+                      ),
                       axisLine: { stroke: chartColors.xAxisLineStroke },
                       tickLine: { stroke: chartColors.axisTickLineStroke }
                     }
@@ -10279,8 +10348,9 @@ function WalkinTraffic({
                   /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     import_recharts5.YAxis,
                     {
+                      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 }
@@ -13682,6 +13752,7 @@ var peakBillingHoursMockSeriesByTabId = {
 var import_Box18 = __toESM(require("@mui/material/Box"));
 var import_Card3 = __toESM(require("@mui/material/Card"));
 var import_CardContent3 = __toESM(require("@mui/material/CardContent"));
+var import_Skeleton5 = __toESM(require("@mui/material/Skeleton"));
 var import_Stack17 = __toESM(require("@mui/material/Stack"));
 var import_Typography16 = __toESM(require("@mui/material/Typography"));
 var React26 = __toESM(require("react"));
@@ -13841,7 +13912,12 @@ function BarPlot({
   yAxisDomain,
   yAxisTicks,
   activeTabId,
-  renderTooltip
+  renderTooltip,
+  chartMargin,
+  yAxisTickDx = -6,
+  yAxisTickStyle,
+  xAxisTickDx = 0,
+  xAxisTickStyle
 }) {
   const { barChart: bc } = usePeakBillingHoursCustomization();
   const height = bc?.heightPx ?? 320;
@@ -13849,7 +13925,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,
@@ -13889,7 +13965,8 @@ function BarPlot({
           import_recharts10.XAxis,
           {
             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
@@ -13903,7 +13980,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
@@ -13968,7 +14046,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,
@@ -14067,14 +14151,19 @@ function PeakBillingHours({
         inactiveTabFontWeight: st?.inactiveTabFontWeight ?? 600
       }
     ),
-    chartData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_Skeleton5.default, { variant: "rounded", width: "100%", height: 320 }) : chartData.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       BarPlot,
       {
         data: chartData,
         yAxisDomain,
         yAxisTicks,
         activeTabId,
-        renderTooltip
+        renderTooltip,
+        chartMargin,
+        yAxisTickDx,
+        yAxisTickStyle,
+        xAxisTickDx,
+        xAxisTickStyle
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       ChartEmptyState,