@ammarkhalidfarooq/dashboard-package 0.4.9 → 0.4.11

package/dist/index.es.js

@@ -4708,7 +4708,7 @@ var TrafficSourceCard = function TrafficSourceCard(_ref) {
                 minWidth: "30px",
                 textAlign: "right"
               },
-              children: [(_item$share = item.share) === null || _item$share === void 0 ? void 0 : _item$share.toFixed(2), "%"]
+              children: [(_item$share = item.share) === null || _item$share === void 0 ? void 0 : _item$share.toFixed(0), "%"]
             })]
           })]
         }, index);
@@ -4754,6 +4754,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",
@@ -4762,6 +4774,15 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
       },
       animations: {
         enabled: true
+      },
+      toolbar: {
+        show: false
+      }
+    },
+    xaxis: {
+      categories: categories,
+      labels: {
+        show: false
       }
     },
     stroke: {
@@ -4782,17 +4803,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: {
@@ -4800,10 +4825,6 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
       }
     }
   };
-  var series = [{
-    name: title,
-    data: chartData
-  }];
   return /*#__PURE__*/jsxs(Card, {
     sx: {
       p: 3,
@@ -4811,7 +4832,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"
     },
@@ -4880,26 +4900,25 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
             fontSize: "10px",
             color: "rgba(0, 0, 0, 0.3)"
           },
-          children: "Apr 5"
+          children: categories[0]
         }), /*#__PURE__*/jsx(Typography, {
           sx: {
             fontSize: "10px",
             color: "rgba(0, 0, 0, 0.3)"
           },
-          children: "Apr 17"
+          children: categories[Math.floor(categories.length / 2)]
         }), /*#__PURE__*/jsx(Typography, {
           sx: {
             fontSize: "10px",
             color: "rgba(0, 0, 0, 0.3)"
           },
-          children: "May 4"
+          children: categories[categories.length - 1]
         })]
       })]
     }), /*#__PURE__*/jsx(Box, {
       sx: {
         mt: "auto",
         pt: 3,
-        // borderTop: "1px solid #f0f0f0",
         display: "flex",
         justifyContent: "space-between"
       },
@@ -5658,7 +5677,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,
@@ -5673,6 +5692,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);
@@ -6199,9 +6219,24 @@ var OverallSection = function OverallSection(_ref) {
         children: /*#__PURE__*/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],
+          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: [{
+            "label": "Apr 5",
+            "value": 1200
+          }, {
+            "label": "Apr 10",
+            "value": 1800
+          }, {
+            "label": "Apr 17",
+            "value": 1400
+          }, {
+            "label": "Apr 24",
+            "value": 2200
+          }, {
+            "label": "May 6",
+            "value": 2600
+          }],
           footerMetrics: [{
             label: "Avg/day",
             value: "$640"