impaktapps-design 0.2.993-alpha.233 → 0.2.993-alpha.235

package/dist/impaktapps-design.es.js

@@ -19146,7 +19146,7 @@ ParentSize$1.propTypes = {
   children: _pt.func.isRequired
 };
 const finalDataProvider = (type2, value, theme) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t5, _u, _v, _w, _x;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t5, _u, _v, _w;
   switch (type2) {
     case "BarGraph":
     case "StackBarGraph":
@@ -19281,24 +19281,12 @@ const finalDataProvider = (type2, value, theme) => {
             ...(_w = value.style) == null ? void 0 : _w.labelStyle
           },
           stackBarLineStyle: {
-            ...value.style,
-            colorMap: (_x = value.style) == null ? void 0 : _x.colorMap
+            ...value.style
           }
         }
       };
   }
 };
-function getVisibleXAxisLabels(data, xAxisValue, innerWidth, minLabelWidth = 56) {
-  const allXLabels = data.map((d2) => d2[xAxisValue]);
-  const totalLabels = allXLabels.length;
-  if (totalLabels === 0)
-    return allXLabels;
-  const maxVisibleLabels = Math.max(1, Math.floor(innerWidth / minLabelWidth));
-  if (maxVisibleLabels >= totalLabels)
-    return allXLabels;
-  const skipInterval = Math.ceil(totalLabels / maxVisibleLabels);
-  return allXLabels.filter((_2, i) => i % skipInterval === 0 || i === totalLabels - 1);
-}
 const BarGraph = ({
   value,
   theme
@@ -22176,11 +22164,11 @@ LinearGradient.propTypes = {
 const DrawAreaGraph = ({
   width: width2,
   height: height2,
-  margin: margin2,
+  margin: marginProp,
   areaValue,
   theme
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const {
     tooltipData,
     tooltipLeft,
@@ -22198,7 +22186,12 @@ const DrawAreaGraph = ({
   const legendLabels = (_g = areaValue.main) == null ? void 0 : _g.legendLabels;
   const colorMap = (_i = (_h = areaValue.style) == null ? void 0 : _h.areaStyle) == null ? void 0 : _i.colorMap;
   const defaultColour = (_k = (_j = theme.myTheme.palette) == null ? void 0 : _j.primary) == null ? void 0 : _k.main;
-  const xAxisLabelMinWidth = ((_l = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _l.xAxisLabelMinWidth) || 56;
+  const muiTheme = useTheme$1();
+  const isSmallScreen = useMediaQuery(muiTheme.breakpoints.down("sm"));
+  const margin2 = {
+    ...marginProp,
+    bottom: isSmallScreen ? Math.max(marginProp.bottom, 90) : marginProp.bottom
+  };
   const labelsArray = useMemo(() => {
     if (!chartData.length)
       return [];
@@ -22290,7 +22283,18 @@ const DrawAreaGraph = ({
       tooltipTop: yScale(tooltipPoint[labelsArray[0]] || 0)
     });
   };
-  const visibleXAxisLabels = useMemo(() => getVisibleXAxisLabels(parsedData, xAxisValue, innerWidth, xAxisLabelMinWidth), [parsedData, xAxisValue, innerWidth, xAxisLabelMinWidth]);
+  const tickLabelProps = () => isSmallScreen ? {
+    fill: "#6B7280",
+    fontSize: 10,
+    fontWeight: 600,
+    textAnchor: "end",
+    angle: -40
+  } : {
+    fill: "#6B7280",
+    fontSize: 10,
+    fontWeight: 600,
+    textAnchor: "middle"
+  };
   return /* @__PURE__ */ jsxs("div", {
     style: {
       position: "relative"
@@ -22363,20 +22367,14 @@ const DrawAreaGraph = ({
         }), /* @__PURE__ */ jsx$1(AxisBottom, {
           top: innerHeight,
           scale: xScale,
-          label: (_m = areaValue.main) == null ? void 0 : _m.bottomLabel,
+          label: (_l = areaValue.main) == null ? void 0 : _l.bottomLabel,
           tickFormat: formatXTick,
           stroke: "#d1d5db",
           tickStroke: "#d1d5db",
-          tickValues: visibleXAxisLabels,
-          tickLabelProps: () => ({
-            fill: "#6B7280",
-            fontSize: 10,
-            fontWeight: 600,
-            textAnchor: "middle"
-          })
+          tickLabelProps
         }), /* @__PURE__ */ jsx$1(AxisLeft, {
           scale: yScale,
-          label: !disableLeftLabel ? (_n = areaValue.main) == null ? void 0 : _n.leftLabel : void 0,
+          label: !disableLeftLabel ? (_m = areaValue.main) == null ? void 0 : _m.leftLabel : void 0,
           stroke: "#d1d5db",
           tickStroke: "#d1d5db",
           numTicks: yAxisTickCount || 6,
@@ -22504,15 +22502,15 @@ const AreaGraph = ({
     }), GraphRender]
   });
 };
-const TREND_KEY = "growthRate";
+const GROWTH_RATE_KEY = "growthRate";
 const DrawStackBarLineGraph = ({
   width: width2,
   height: height2,
-  margin: margin2,
+  margin: marginProp,
   stackBarLineValue,
   theme
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const {
     tooltipData,
     tooltipLeft,
@@ -22529,14 +22527,19 @@ const DrawStackBarLineGraph = ({
   const defaultColour = (_h = (_g = (_f = theme == null ? void 0 : theme.myTheme) == null ? void 0 : _f.palette) == null ? void 0 : _g.primary) == null ? void 0 : _h.main;
   const yAxisTickCount = (_i = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _i.yAxisTickCount;
   const disableLeftLabel = (_j = stackBarLineValue.main) == null ? void 0 : _j.disableLeftLabel;
-  const xAxisLabelMinWidth = ((_k = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _k.xAxisLabelMinWidth) || 56;
-  const trendColor = (_l = colorMap == null ? void 0 : colorMap[TREND_KEY]) != null ? _l : "#E24B4A";
+  const trendColor = (_k = colorMap == null ? void 0 : colorMap[GROWTH_RATE_KEY]) != null ? _k : "#E24B4A";
+  const muiTheme = useTheme$1();
+  const isSmallScreen = useMediaQuery(muiTheme.breakpoints.down("sm"));
+  const margin2 = {
+    ...marginProp,
+    bottom: isSmallScreen ? Math.max(marginProp.bottom, 80) : marginProp.bottom
+  };
   const labelsArray = useMemo(() => {
     if (!chartData.length)
       return [];
     return Object.keys(chartData[0]).filter((k2) => k2 !== xAxisValue);
   }, [chartData, xAxisValue]);
-  const barKeys = useMemo(() => labelsArray.filter((k2) => k2 !== TREND_KEY), [labelsArray]);
+  const barKeys = useMemo(() => labelsArray.filter((k2) => k2 !== GROWTH_RATE_KEY), [labelsArray]);
   const barData = useMemo(() => chartData.map((row) => {
     const stripped = {
       [xAxisValue]: row[xAxisValue]
@@ -22560,7 +22563,7 @@ const DrawStackBarLineGraph = ({
     nice: true
   }), [innerHeight, maxStacked]);
   const trendScale = useMemo(() => {
-    const vals = chartData.map((d2) => Number(d2[TREND_KEY]) || 0);
+    const vals = chartData.map((d2) => Number(d2[GROWTH_RATE_KEY]) || 0);
     return createLinearScale({
       domain: [Math.min(...vals), Math.max(...vals)],
       range: [innerHeight, 0],
@@ -22572,11 +22575,11 @@ const DrawStackBarLineGraph = ({
     return ((_a2 = categoryScale(cat)) != null ? _a2 : 0) + categoryScale.bandwidth() / 2;
   }, [categoryScale]);
   const getLineX = useCallback((d2) => getBarCentreX(d2[xAxisValue]), [getBarCentreX, xAxisValue]);
-  const getLineY = useCallback((d2) => trendScale(Number(d2[TREND_KEY]) || 0), [trendScale]);
+  const getLineY = useCallback((d2) => trendScale(Number(d2[GROWTH_RATE_KEY]) || 0), [trendScale]);
   const handleColumnEnter = useCallback((_e2, cat) => {
     const full = chartData.find((d2) => d2[xAxisValue] === cat);
     const dotX = getBarCentreX(cat) + margin2.left;
-    const dotY = trendScale(Number(full[TREND_KEY]) || 0) + margin2.top;
+    const dotY = trendScale(Number(full[GROWTH_RATE_KEY]) || 0) + margin2.top;
     setHoveredCategory(cat);
     showTooltip({
       tooltipData: full,
@@ -22588,7 +22591,18 @@ const DrawStackBarLineGraph = ({
     setHoveredCategory(null);
     hideTooltip();
   }, [hideTooltip]);
-  const visibleXAxisLabels = useMemo(() => getVisibleXAxisLabels(chartData, xAxisValue, innerWidth, xAxisLabelMinWidth), [chartData, xAxisValue, innerWidth, xAxisLabelMinWidth]);
+  const tickLabelProps = useCallback(() => isSmallScreen ? {
+    fill: "#6B7280",
+    fontSize: 12,
+    fontWeight: 500,
+    textAnchor: "end",
+    angle: -40
+  } : {
+    fill: "#6B7280",
+    fontSize: 12,
+    fontWeight: 500,
+    textAnchor: "middle"
+  }, [isSmallScreen]);
   return /* @__PURE__ */ jsxs("div", {
     style: {
       position: "relative"
@@ -22702,7 +22716,7 @@ const DrawStackBarLineGraph = ({
             textAnchor: "end",
             dy: "0.33em"
           }),
-          label: !disableLeftLabel ? (_m = stackBarLineValue.main) == null ? void 0 : _m.leftLabel : void 0,
+          label: !disableLeftLabel ? (_l = stackBarLineValue.main) == null ? void 0 : _l.leftLabel : void 0,
           labelProps: {
             fill: "#6B7280",
             fontSize: 11,
@@ -22714,7 +22728,7 @@ const DrawStackBarLineGraph = ({
           scale: trendScale,
           numTicks: 5,
           stroke: "#9CA3AF",
-          label: (_n = stackBarLineValue.main) == null ? void 0 : _n.rightLabel,
+          label: (_m = stackBarLineValue.main) == null ? void 0 : _m.rightLabel,
           tickStroke: "transparent",
           tickLabelProps: () => ({
             fill: "#6B7280",
@@ -22731,16 +22745,10 @@ const DrawStackBarLineGraph = ({
         }), /* @__PURE__ */ jsx$1(AxisBottom, {
           top: innerHeight,
           scale: categoryScale,
-          tickValues: visibleXAxisLabels,
           stroke: "#9CA3AF",
-          label: (_o = stackBarLineValue.main) == null ? void 0 : _o.bottomLabel,
+          label: (_n = stackBarLineValue.main) == null ? void 0 : _n.bottomLabel,
           tickStroke: "transparent",
-          tickLabelProps: () => ({
-            fill: "#6B7280",
-            fontSize: 12,
-            fontWeight: 500,
-            textAnchor: "middle"
-          })
+          tickLabelProps
         })]
       })
     }), stackBarLineValue.main.legendAvailable && labelsArray.length > 0 && /* @__PURE__ */ jsx$1(Legend, {