@bpfdev/oly-ui 1.0.8 → 1.0.9

package/dist/index.mjs

@@ -6348,6 +6348,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 +6392,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 +6422,8 @@ function MultiLineTick({
   y = 0,
   payload,
   angle = -38,
+  dx = 0,
+  style,
   textAnchor = "end",
   fontSize = 12
 }) {
@@ -6430,13 +6433,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 +6659,7 @@ function FootfallByAgeGroups({
   title,
   data,
   series,
+  isLoading = false,
   chartHeight = OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX,
   minWidthPerCategory = defaultMinWidthPerCategory,
   horizontalScroll: horizontalScrollProp = "auto",
@@ -6678,11 +6683,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 +6765,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 +6839,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 +6914,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 +6941,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 +6956,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 +7057,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 +7082,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 +7223,8 @@ function MultiLineTick2({
   y = 0,
   payload,
   angle = -38,
+  dx = 0,
+  style,
   textAnchor = "end",
   fontSize = 12
 }) {
@@ -7217,13 +7234,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 +7515,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 +7547,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 +7656,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 +7760,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 +7789,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 +7805,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 +7847,7 @@ function FootfallByGender({
                             dataKey: "male",
                             name: seriesLabels.male,
                             fill: seriesColors.male,
+                            barSize: resolvedMaxBarSize,
                             onMouseEnter: handleMouseEnter,
                             onMouseLeave: handleMouseLeave,
                             children: [
@@ -7865,6 +7898,7 @@ function FootfallByGender({
                             dataKey: "female",
                             name: seriesLabels.female,
                             fill: seriesColors.female,
+                            barSize: resolvedMaxBarSize,
                             onMouseEnter: handleMouseEnter,
                             onMouseLeave: handleMouseLeave,
                             children: [
@@ -7934,7 +7968,7 @@ function FootfallByGender({
                   )
                 }
               ),
-              showLegend && processedData.length > 0 ? /* @__PURE__ */ jsxs23(
+              showLegend && !isLoading && processedData.length > 0 ? /* @__PURE__ */ jsxs23(
                 Box21,
                 {
                   component: "ul",
@@ -8069,6 +8103,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 +8154,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 +8186,8 @@ function MultiLineTick3({
   y = 0,
   payload,
   angle = -42,
+  dx = 0,
+  style,
   textAnchor = "end",
   fontSize = 12
 }) {
@@ -8160,13 +8197,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 +8475,7 @@ function defaultFormatTooltipConversion(value) {
 function PasserbyConversion({
   title,
   data,
+  isLoading = false,
   timeSlots,
   fillMissingTimeSlots = true,
   chartHeight = OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX3,
@@ -8476,12 +8515,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 +8651,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 +8749,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 +8839,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 +8869,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 +8885,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 +8899,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 +9554,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 +9577,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 +9650,8 @@ function MultiLineTick4({
   y = 0,
   payload,
   angle = -42,
+  dx = 0,
+  style,
   textAnchor = "end",
   fontSize = 12
 }) {
@@ -9602,13 +9661,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 +9946,7 @@ var defaultChartColors4 = {
 function WalkinTraffic({
   title,
   data,
+  isLoading = false,
   chartHeight = OLY_DEFAULT_COMPOSED_CHART_HEIGHT_PX4,
   barSeriesName = "Walk-ins",
   lineSeriesName = "Trend",
@@ -9920,13 +9981,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 +10068,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 +10169,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 +10259,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 +10285,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 +10300,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 +12017,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 +13404,7 @@ function FootFallHeatMapView({
   }
   if (isLoading || loading) {
     return /* @__PURE__ */ jsx43(
-      Skeleton,
+      Skeleton5,
       {
         variant: "rectangular",
         width: "100%",
@@ -13659,6 +13729,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 +13898,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 +13911,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 +13951,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 +13966,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 +14032,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 +14137,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,