@ammarkhalidfarooq/dashboard-package 0.4.10 → 0.4.12

package/dist/index.cjs.js

@@ -4756,6 +4756,18 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
     chartColor = _ref$chartColor === void 0 ? "rgb(99, 99, 230)" : _ref$chartColor,
     _ref$footerMetrics = _ref.footerMetrics,
     footerMetrics = _ref$footerMetrics === void 0 ? [] : _ref$footerMetrics;
+  // Extract values for chart series
+  var series = [{
+    name: title,
+    data: chartData.map(function (item) {
+      return item.value;
+    })
+  }];
+
+  // Extract labels for x-axis
+  var categories = chartData.map(function (item) {
+    return item.label;
+  });
   var chartOptions = {
     chart: {
       type: "area",
@@ -4764,6 +4776,15 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
       },
       animations: {
         enabled: true
+      },
+      toolbar: {
+        show: false
+      }
+    },
+    xaxis: {
+      categories: categories,
+      labels: {
+        show: false
       }
     },
     stroke: {
@@ -4784,17 +4805,21 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
       enabled: true,
       theme: "light",
       x: {
-        show: false
+        show: true,
+        formatter: function formatter(_, _ref2) {
+          var dataPointIndex = _ref2.dataPointIndex;
+          return categories[dataPointIndex];
+        }
       },
       y: {
         formatter: function formatter(val) {
           if (title !== null && title !== void 0 && title.toLowerCase().includes("revenue")) {
-            return "$".concat(val.toLocaleString());
+            return "$".concat(Number(val).toLocaleString());
           }
           if (title !== null && title !== void 0 && title.toLowerCase().includes("rate") || title !== null && title !== void 0 && title.toLowerCase().includes("bounce")) {
             return "".concat(val, "%");
           }
-          return val.toLocaleString();
+          return Number(val).toLocaleString();
         }
       },
       marker: {
@@ -4802,10 +4827,6 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
       }
     }
   };
-  var series = [{
-    name: title,
-    data: chartData
-  }];
   return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
     sx: {
       p: 3,
@@ -4813,7 +4834,6 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
       border: "1px solid #f0f0f0",
       boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
       bgcolor: "#fff",
-      // height: "100%",
       display: "flex",
       flexDirection: "column"
     },
@@ -4882,26 +4902,25 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
             fontSize: "10px",
             color: "rgba(0, 0, 0, 0.3)"
           },
-          children: "Apr 5"
+          children: categories[0]
         }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
           sx: {
             fontSize: "10px",
             color: "rgba(0, 0, 0, 0.3)"
           },
-          children: "Apr 17"
+          children: categories[Math.floor(categories.length / 2)]
         }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
           sx: {
             fontSize: "10px",
             color: "rgba(0, 0, 0, 0.3)"
           },
-          children: "May 4"
+          children: categories[categories.length - 1]
         })]
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: {
         mt: "auto",
         pt: 3,
-        // borderTop: "1px solid #f0f0f0",
         display: "flex",
         justifyContent: "space-between"
       },
@@ -5660,7 +5679,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
 };
 
 var OverallSection = function OverallSection(_ref) {
-  var _apiData$totalRaisedP, _apiData$netRaisedCar, _apiData$netRaisedPre, _apiData$averageDonat, _apiData$averageDonat2, _apiData$roasCard, _apiData$roasCardPrev;
+  var _apiData$totalRaisedP, _apiData$netRaisedCar, _apiData$netRaisedPre, _apiData$averageDonat, _apiData$averageDonat2, _apiData$roasCard, _apiData$roasCardPrev, _orderBumpData$prevTr;
   var _ref$apiData = _ref.apiData,
     apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
     primaryCharts = _ref.primaryCharts,
@@ -5675,6 +5694,7 @@ var OverallSection = function OverallSection(_ref) {
   var donationTypeData = (apiData === null || apiData === void 0 ? void 0 : apiData.donationTypeData) || [];
   var donorGeographyData = (apiData === null || apiData === void 0 ? void 0 : apiData.donorGeography) || [];
   var trafficSourceData = (apiData === null || apiData === void 0 ? void 0 : apiData.trafficSource) || [];
+  var orderBumpData = (apiData === null || apiData === void 0 ? void 0 : apiData.orderBumpData) || [];
   var allCharts = [].concat(_toConsumableArray(primaryCharts), _toConsumableArray(secondaryCharts), _toConsumableArray(tertiaryCharts), _toConsumableArray(quaternaryCharts));
   var getExtendedCharts = function getExtendedCharts() {
     var charts = _toConsumableArray(allCharts);
@@ -6201,19 +6221,10 @@ var OverallSection = function OverallSection(_ref) {
         children: /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
           title: "Order Bump",
           subtitle: "Revenue trend \xB7 last 30 days",
-          value: "$19.2K",
-          trend: "\u25B2 8.7% vs last month",
-          chartData: [1200, 1500, 1300, 1800, 1600, 2100, 1920],
-          footerMetrics: [{
-            label: "Avg/day",
-            value: "$640"
-          }, {
-            label: "Peak day",
-            value: "$1.4K"
-          }, {
-            label: "Orders",
-            value: "84"
-          }]
+          value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalValue) || "$0")),
+          trend: "\u25B2 ".concat(orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$prevTr = orderBumpData.prevTrend) === null || _orderBumpData$prevTr === void 0 ? void 0 : _orderBumpData$prevTr.toFixed(1), "% vs last month"),
+          chartData: orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.orderBumpMetrics,
+          footerMetrics: orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.footerMetrics
         })
       }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,