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

package/dist/impaktapps-design.es.js

@@ -22161,6 +22161,8 @@ LinearGradient.propTypes = {
   children: _pt.node,
   vertical: _pt.bool
 };
+const PX_PER_CHAR$1 = 7;
+const LABEL_ROTATION$1 = Math.sin(40 * Math.PI / 180);
 const DrawAreaGraph = ({
   width: width2,
   height: height2,
@@ -22186,11 +22188,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 muiTheme = useTheme$1();
-  const isSmallScreen = useMediaQuery(muiTheme.breakpoints.down("sm"));
+  const isSmallScreen = width2 < 600;
+  const longestLabelLength = useMemo(() => Math.max(...chartData.map((d2) => String(d2[xAxisValue]).length)), [chartData, xAxisValue]);
+  const dynamicBottomMargin = Math.ceil(longestLabelLength * PX_PER_CHAR$1 * LABEL_ROTATION$1);
   const margin2 = {
     ...marginProp,
-    bottom: isSmallScreen ? Math.max(marginProp.bottom, 90) : marginProp.bottom
+    bottom: isSmallScreen ? Math.max(marginProp.bottom, dynamicBottomMargin) : marginProp.bottom
   };
   const labelsArray = useMemo(() => {
     if (!chartData.length)
@@ -22283,18 +22286,26 @@ const DrawAreaGraph = ({
       tooltipTop: yScale(tooltipPoint[labelsArray[0]] || 0)
     });
   };
-  const tickLabelProps = () => isSmallScreen ? {
+  const tickLabelProps = useCallback(() => isSmallScreen ? {
     fill: "#6B7280",
-    fontSize: 10,
+    fontSize: 12,
     fontWeight: 600,
     textAnchor: "end",
-    angle: -40
+    angle: -40,
+    dx: "-0.2em",
+    dy: "0.1em",
+    style: {
+      transition: "transform 0.2s ease"
+    }
   } : {
     fill: "#6B7280",
-    fontSize: 10,
-    fontWeight: 600,
-    textAnchor: "middle"
-  };
+    fontSize: 12,
+    fontWeight: 500,
+    textAnchor: "middle",
+    style: {
+      transition: "transform 0.2s ease"
+    }
+  }, [isSmallScreen]);
   return /* @__PURE__ */ jsxs("div", {
     style: {
       position: "relative"
@@ -22503,6 +22514,8 @@ const AreaGraph = ({
   });
 };
 const GROWTH_RATE_KEY = "growthRate";
+const PX_PER_CHAR = 7;
+const LABEL_ROTATION = Math.sin(40 * Math.PI / 180);
 const DrawStackBarLineGraph = ({
   width: width2,
   height: height2,
@@ -22528,11 +22541,12 @@ const DrawStackBarLineGraph = ({
   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 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 isSmallScreen = width2 < 600;
+  const longestLabelLength = useMemo(() => Math.max(...chartData.map((d2) => String(d2[xAxisValue]).length)), [chartData, xAxisValue]);
+  const dynamicBottomMargin = Math.ceil(longestLabelLength * PX_PER_CHAR * LABEL_ROTATION);
   const margin2 = {
     ...marginProp,
-    bottom: isSmallScreen ? Math.max(marginProp.bottom, 80) : marginProp.bottom
+    bottom: isSmallScreen ? Math.max(marginProp.bottom, dynamicBottomMargin) : marginProp.bottom
   };
   const labelsArray = useMemo(() => {
     if (!chartData.length)
@@ -22596,12 +22610,20 @@ const DrawStackBarLineGraph = ({
     fontSize: 12,
     fontWeight: 500,
     textAnchor: "end",
-    angle: -40
+    angle: -40,
+    dx: "-0.2em",
+    dy: "0.1em",
+    style: {
+      transition: "transform 0.2s ease"
+    }
   } : {
     fill: "#6B7280",
     fontSize: 12,
     fontWeight: 500,
-    textAnchor: "middle"
+    textAnchor: "middle",
+    style: {
+      transition: "transform 0.2s ease"
+    }
   }, [isSmallScreen]);
   return /* @__PURE__ */ jsxs("div", {
     style: {