@ammarkhalidfarooq/dashboard-package 0.6.79 → 0.6.81

package/dist/index.cjs.js

@@ -6488,6 +6488,38 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref8) {
   });
 };
 
+var formatCategoryLabel$1 = function formatCategoryLabel(val) {
+  if (!val || typeof val !== "string") return val;
+  var ddMmYyyy = val.match(/^(\d{2})-(\d{2})-(\d{4})$/);
+  if (ddMmYyyy) {
+    var _ddMmYyyy = _slicedToArray(ddMmYyyy, 4),
+      day = _ddMmYyyy[1],
+      month = _ddMmYyyy[2],
+      year = _ddMmYyyy[3];
+    var _date = new Date(Number(year), Number(month) - 1, Number(day));
+    if (!Number.isNaN(_date.getTime())) {
+      return _date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric"
+      });
+    }
+  }
+  var date = new Date(val);
+  if (!Number.isNaN(date.getTime())) {
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric"
+    });
+  }
+  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,
@@ -6522,6 +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 showAxisLabels = categories.length <= 15;
+  var axisLabels = showAxisLabels ? buildAxisLabels(categories) : [];
   var chartOptions = {
     chart: {
       type: "area",
@@ -6563,18 +6597,17 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
         show: false
       },
       labels: {
-        show: categories.length <= 15,
-        rotate: -45,
-        style: {
-          colors: "rgba(0, 0, 0, 0.4)",
-          fontSize: "10px"
-        }
+        show: false
       }
     },
-    yaxis: {
+    yaxis: _objectSpread2(_objectSpread2({
       min: 0,
-      max: yAxisMax,
-      tickAmount: 4,
+      max: yAxisMax
+    }, hasChartData ? {
+      tickAmount: 4
+    } : {
+      stepSize: 0.25
+    }), {}, {
       labels: {
         formatter: function formatter(val) {
           return "".concat(parseFloat(val.toFixed(1)), "%");
@@ -6588,7 +6621,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
           fontSize: "11px"
         }
       }
-    },
+    }),
     grid: {
       borderColor: "#f1f1f1",
       strokeDashArray: 4,
@@ -6628,6 +6661,12 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
     } : {},
     tooltip: {
       shared: true,
+      x: {
+        formatter: function formatter(_, _ref2) {
+          var dataPointIndex = _ref2.dataPointIndex;
+          return formatCategoryLabel$1(categories[dataPointIndex]);
+        }
+      },
       y: {
         formatter: function formatter(val) {
           return "".concat(parseFloat(val.toFixed(2)), "%");
@@ -6798,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: 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));
+        })
+      })]
     })]
   });
 };