@ammarkhalidfarooq/dashboard-package 0.6.80 → 0.6.82

package/dist/index.cjs.js

@@ -2752,7 +2752,7 @@ var PageHeader = function PageHeader(_ref12) {
           fontWeight: 700,
           letterSpacing: "0.3px"
         },
-        children: "ACTIVE FILTERS:"
+        children: "Active Filters:"
       }), " ", /*#__PURE__*/jsxRuntime.jsx("span", {
         style: {
           fontWeight: 500,
@@ -6513,6 +6513,13 @@ var formatCategoryLabel$1 = function formatCategoryLabel(val) {
   }
   return val;
 };
+var buildAxisLabels = function buildAxisLabels(categories) {
+  if (categories.length <= 1) return categories.map(formatCategoryLabel$1);
+  if (categories.length === 2) {
+    return [formatCategoryLabel$1(categories[0]), formatCategoryLabel$1(categories[categories.length - 1])];
+  }
+  return [formatCategoryLabel$1(categories[0]), formatCategoryLabel$1(categories[Math.floor(categories.length / 2)]), formatCategoryLabel$1(categories[categories.length - 1])];
+};
 var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
   var sx = _ref.sx,
     _ref$refundsChargebac = _ref.refundsChargebacksData,
@@ -6547,8 +6554,8 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
   var dataMax = Math.max.apply(Math, [0].concat(_toConsumableArray(chargebackSeries), _toConsumableArray(refundSeries)));
   var hasChartData = dataMax > 0;
   var yAxisMax = hasChartData ? Math.ceil(Math.max(dataMax, 1) * 1.2) : 0.5;
-  var showXAxisLabels = categories.length <= 15;
-  var yAxisTickAmount = hasChartData ? 4 : 2;
+  var showAxisLabels = categories.length <= 15;
+  var axisLabels = showAxisLabels ? buildAxisLabels(categories) : [];
   var chartOptions = {
     chart: {
       type: "area",
@@ -6583,7 +6590,6 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
     },
     xaxis: {
       categories: categories,
-      tickAmount: 5,
       axisBorder: {
         show: false
       },
@@ -6591,20 +6597,17 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
         show: false
       },
       labels: {
-        show: showXAxisLabels,
-        rotate: 0,
-        hideOverlappingLabels: true,
-        formatter: formatCategoryLabel$1,
-        style: {
-          colors: "rgba(0, 0, 0, 0.4)",
-          fontSize: "10px"
-        }
+        show: false
       }
     },
-    yaxis: {
+    yaxis: _objectSpread2(_objectSpread2({
       min: 0,
-      max: yAxisMax,
-      tickAmount: yAxisTickAmount,
+      max: yAxisMax
+    }, hasChartData ? {
+      tickAmount: 4
+    } : {
+      stepSize: 0.25
+    }), {}, {
       labels: {
         formatter: function formatter(val) {
           return "".concat(parseFloat(val.toFixed(1)), "%");
@@ -6618,7 +6621,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
           fontSize: "11px"
         }
       }
-    },
+    }),
     grid: {
       borderColor: "#f1f1f1",
       strokeDashArray: 4,
@@ -6834,18 +6837,39 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
         },
         children: ["$", fmt(totalRefundedAmount), " refunded \xB7 ", totalChargebacks, " chargebacks \xB7 ", totalRefunds, " refunds"]
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+    }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
       sx: {
-        height: showXAxisLabels ? 160 : 140,
         width: "100%",
         flexShrink: 0
       },
-      children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
-        options: chartOptions,
-        series: series,
-        type: "area",
-        height: "100%"
-      })
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        sx: {
+          height: 140
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
+          options: chartOptions,
+          series: series,
+          type: "area",
+          height: "100%"
+        })
+      }), axisLabels.length > 0 && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          mt: 0.5,
+          pl: 3,
+          pr: 0.75
+        },
+        children: axisLabels.map(function (label, idx) {
+          return /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+            sx: {
+              fontSize: "10px",
+              color: "rgba(0, 0, 0, 0.4)"
+            },
+            children: label
+          }, "".concat(label, "-").concat(idx));
+        })
+      })]
     })]
   });
 };