impaktapps-design 0.2.993-alpha.255 → 0.2.993-alpha.256

package/dist/impaktapps-design.es.js

@@ -22047,7 +22047,7 @@ const DrawAreaGraph = ({
   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, _n, _o;
   const {
     tooltipData,
     tooltipLeft,
@@ -22068,6 +22068,7 @@ const DrawAreaGraph = ({
   const legendLabels = (_i = areaValue.main) == null ? void 0 : _i.legendLabels;
   const colorMap = (_j = areaValue.style) == null ? void 0 : _j.colorMap;
   const defaultColour = (_l = (_k = theme.myTheme.palette) == null ? void 0 : _k.primary) == null ? void 0 : _l.main;
+  const xAxisTickCount = (_m = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _m.xAxisTickCount;
   const isSmallScreen = width2 < 600;
   const longestLabelLength = useMemo(() => chartData.length ? Math.max(...chartData.map((d2) => String(d2[xAxisValue]).length)) : 0, [chartData, xAxisValue]);
   const dynamicBottomMargin = Math.ceil(longestLabelLength * PX_PER_CHAR$1 * LABEL_ROTATION$1);
@@ -22258,14 +22259,16 @@ const DrawAreaGraph = ({
         }), /* @__PURE__ */ jsx$1(AxisBottom, {
           top: innerHeight,
           scale: xScale,
-          label: (_m = areaValue.main) == null ? void 0 : _m.bottomLabel,
+          label: (_n = areaValue.main) == null ? void 0 : _n.bottomLabel,
           tickFormat: formatXTick,
           stroke: "#d1d5db",
           tickStroke: "#d1d5db",
+          tickTransform: xAxisType === "date" ? "translate(8, 0)" : void 0,
+          numTicks: xAxisTickCount || 20,
           tickLabelProps
         }), /* @__PURE__ */ jsx$1(AxisLeft, {
           scale: yScale,
-          label: !disableLeftLabel ? (_n = areaValue.main) == null ? void 0 : _n.leftLabel : void 0,
+          label: !disableLeftLabel ? (_o = areaValue.main) == null ? void 0 : _o.leftLabel : void 0,
           stroke: "#d1d5db",
           tickStroke: "#d1d5db",
           numTicks: yAxisTickCount || 6,
@@ -22310,9 +22313,11 @@ const DrawAreaGraph = ({
       left: (tooltipLeft != null ? tooltipLeft : 0) + margin2.left,
       style: {
         ...defaultStyles,
-        background: "#f4f7fc",
-        borderRadius: "8px",
-        padding: "12px",
+        background: "#ffffff",
+        borderRadius: "18px",
+        padding: "16px 12px 5px 12px",
+        border: "1px solid #E5E7EB",
+        boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06)",
         fontSize: "12px"
       },
       children: [/* @__PURE__ */ jsx$1("div", {
@@ -22321,23 +22326,15 @@ const DrawAreaGraph = ({
           marginBottom: 6
         },
         children: formatXTick(tooltipData[xAxisValue])
-      }), labelsArray.map((key) => {
-        var _a2, _b2;
+      }), labelsArray.map((key, i) => {
+        var _a2;
         return /* @__PURE__ */ jsxs("div", {
           style: {
-            display: "flex",
-            justifyContent: "space-between",
-            gap: "16px",
-            paddingBottom: "12px"
+            paddingBottom: "11px",
+            fontWeight: 500,
+            color: "#756d6d"
           },
-          children: [/* @__PURE__ */ jsx$1("span", {
-            style: {
-              color: (_a2 = colorMap == null ? void 0 : colorMap[key]) != null ? _a2 : defaultColour
-            },
-            children: (_b2 = legendLabels == null ? void 0 : legendLabels[key]) != null ? _b2 : key
-          }), /* @__PURE__ */ jsx$1("span", {
-            children: tooltipData[key]
-          })]
+          children: [(_a2 = legendLabels == null ? void 0 : legendLabels[key]) != null ? _a2 : key, " : ", tooltipData[key]]
         }, key);
       })]
     })]
@@ -22401,7 +22398,7 @@ const DrawStackBarLineGraph = ({
   stackBarLineValue,
   theme
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const {
     tooltipData,
     tooltipLeft,
@@ -22422,6 +22419,7 @@ const DrawStackBarLineGraph = ({
   const disableLeftLabel = (_m = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _m.disableLeftLabel;
   const tooltipUnit = (_n = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _n.tooltipUnit;
   const trendColor = (_o = colorMap == null ? void 0 : colorMap[growthRateKey]) != null ? _o : "#E24B4A";
+  const xAxisTickCount = (_p = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _p.xAxisTickCount;
   const isSmallScreen = width2 < 600;
   const longestLabelLength = useMemo(() => chartData.length ? Math.max(...chartData.map((d2) => String(d2[xAxisValue]).length)) : 0, [chartData, xAxisValue]);
   const dynamicBottomMargin = Math.ceil(longestLabelLength * PX_PER_CHAR * LABEL_ROTATION);
@@ -22621,7 +22619,7 @@ const DrawStackBarLineGraph = ({
             textAnchor: "end",
             dy: "0.33em"
           }),
-          label: !disableLeftLabel ? (_p = stackBarLineValue.main) == null ? void 0 : _p.leftLabel : void 0,
+          label: !disableLeftLabel ? (_q = stackBarLineValue.main) == null ? void 0 : _q.leftLabel : void 0,
           labelProps: {
             fill: "#6B7280",
             fontSize: 11,
@@ -22633,7 +22631,7 @@ const DrawStackBarLineGraph = ({
           scale: trendScale,
           numTicks: 5,
           stroke: "#9CA3AF",
-          label: (_q = stackBarLineValue.main) == null ? void 0 : _q.rightLabel,
+          label: (_r = stackBarLineValue.main) == null ? void 0 : _r.rightLabel,
           tickStroke: "transparent",
           tickLabelProps: () => ({
             fill: "#6B7280",
@@ -22651,7 +22649,8 @@ const DrawStackBarLineGraph = ({
           top: innerHeight,
           scale: categoryScale,
           stroke: "#9CA3AF",
-          label: (_r = stackBarLineValue.main) == null ? void 0 : _r.bottomLabel,
+          label: (_s = stackBarLineValue.main) == null ? void 0 : _s.bottomLabel,
+          numTicks: xAxisTickCount || 20,
           tickStroke: "transparent",
           tickLabelProps
         })]
@@ -22670,13 +22669,12 @@ const DrawStackBarLineGraph = ({
       left: tooltipLeft,
       style: {
         ...defaultStyles,
-        background: "#fff",
-        border: "none",
-        borderRadius: 8,
-        boxShadow: "0 4px 16px rgba(0,0,0,0.35)",
-        padding: "15px 12px",
-        fontSize: 12,
-        minWidth: 160
+        background: "#ffffff",
+        borderRadius: "18px",
+        padding: "16px 12px 5px 12px",
+        border: "1px solid #E5E7EB",
+        boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06)",
+        fontSize: "12px"
       },
       children: [/* @__PURE__ */ jsx$1("p", {
         style: {
@@ -22692,28 +22690,15 @@ const DrawStackBarLineGraph = ({
           flexDirection: "column",
           gap: 11
         },
-        children: labelsArray.map((key) => {
-          var _a2, _b2;
+        children: labelsArray.map((key, i) => {
+          var _a2;
           return /* @__PURE__ */ jsxs("div", {
             style: {
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              gap: 16
+              paddingBottom: "11px",
+              fontWeight: 500,
+              color: "#756d6d"
             },
-            children: [/* @__PURE__ */ jsx$1("span", {
-              style: {
-                color: (_a2 = colorMap == null ? void 0 : colorMap[key]) != null ? _a2 : defaultColour,
-                fontWeight: 500
-              },
-              children: (_b2 = legendLabels == null ? void 0 : legendLabels[key]) != null ? _b2 : key
-            }), /* @__PURE__ */ jsxs("span", {
-              style: {
-                color: "#454444",
-                fontWeight: 600
-              },
-              children: [tooltipData[key], tooltipUnit]
-            })]
+            children: [(_a2 = legendLabels == null ? void 0 : legendLabels[key]) != null ? _a2 : key, " : ", tooltipData[key], tooltipUnit]
           }, key);
         })
       })]