@ammarkhalidfarooq/dashboard-package 0.6.11 → 0.6.13

package/dist/index.es.js

@@ -474,6 +474,7 @@ var RevenueChart = function RevenueChart(_ref) {
       }
     },
     xaxis: {
+      type: 'category',
       categories: categories || [],
       axisBorder: {
         show: false
@@ -481,7 +482,6 @@ var RevenueChart = function RevenueChart(_ref) {
       axisTicks: {
         show: false
       },
-      tickAmount: 5,
       labels: {
         rotate: 0,
         rotateAlways: false,
@@ -491,13 +491,7 @@ var RevenueChart = function RevenueChart(_ref) {
           fontSize: '12px'
         },
         formatter: function formatter(val) {
-          if (!val || typeof val !== 'string') return val;
-          var date = new Date(val);
-          if (isNaN(date.getTime())) return val;
-          return date.toLocaleDateString('en-US', {
-            month: 'short',
-            day: 'numeric'
-          });
+          return val;
         }
       }
     },
@@ -1181,6 +1175,14 @@ var MetricCard$1 = function MetricCard(_ref) {
     captionSx = _ref$captionSx === void 0 ? {} : _ref$captionSx,
     _ref$avatarSx = _ref.avatarSx,
     avatarSx = _ref$avatarSx === void 0 ? {} : _ref$avatarSx;
+  var captionText = String(caption !== null && caption !== void 0 ? caption : "");
+  var isPercentCaption = captionText.includes("%");
+  var firstNumberMatch = captionText.match(/-?\d+(\.\d+)?/);
+  var trendValue = firstNumberMatch ? Number(firstNumberMatch[0]) : null;
+  var isNegativeTrend = isPercentCaption && trendValue !== null && trendValue < 0;
+  var isPositiveTrend = isPercentCaption && trendValue !== null && trendValue > 0;
+  var trendPrefix = isNegativeTrend ? "▼ " : isPositiveTrend ? "▲ " : "";
+  var captionColor = captionText.includes("failed") ? "#4F46E5" : error || isNegativeTrend ? "#ef4444" : "#0B8F61";
   return /*#__PURE__*/jsxs(Box, {
     sx: _objectSpread2({
       bgcolor: "#fff",
@@ -1229,9 +1231,9 @@ var MetricCard$1 = function MetricCard(_ref) {
       sx: _objectSpread2({
         fontSize: 12,
         fontWeight: 500,
-        color: caption !== null && caption !== void 0 && caption.includes("failed") ? "#4F46E5" : error ? "#ef4444" : "#0B8F61"
+        color: captionColor
       }, captionSx),
-      children: caption
+      children: "".concat(trendPrefix).concat(captionText)
     })]
   });
 };
@@ -15161,7 +15163,7 @@ var OverallSection = function OverallSection(_ref) {
   var allCharts = [].concat(_toConsumableArray(primaryCharts), _toConsumableArray(secondaryCharts), _toConsumableArray(tertiaryCharts), _toConsumableArray(quaternaryCharts));
   var getExtendedCharts = function getExtendedCharts() {
     var charts = _toConsumableArray(allCharts);
-    var categories = (apiData === null || apiData === void 0 ? void 0 : apiData.categories) || ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];
+    var categories = (apiData === null || apiData === void 0 ? void 0 : apiData.categories) || [];
     if (!charts.find(function (c) {
       return c.label === "Net Raised";
     })) {
@@ -15326,30 +15328,58 @@ var OverallSection = function OverallSection(_ref) {
   var mainChart = extendedCharts.find(function (c) {
     return c.label === selectedInfo.label;
   }) || primaryCharts[0];
-  if (activeMetric === "Total Raised") {
-    var _apiData$overviewStat17;
-    var stackedData = apiData === null || apiData === void 0 || (_apiData$overviewStat17 = apiData.overviewStats) === null || _apiData$overviewStat17 === void 0 ? void 0 : _apiData$overviewStat17.totalRaised;
-    var hasStackedData = (stackedData === null || stackedData === void 0 ? void 0 : stackedData.paidAds) || (stackedData === null || stackedData === void 0 ? void 0 : stackedData.email) || (stackedData === null || stackedData === void 0 ? void 0 : stackedData.organic);
-    if (hasStackedData) {
-      var categories = ((stackedData === null || stackedData === void 0 ? void 0 : stackedData.organic) || (stackedData === null || stackedData === void 0 ? void 0 : stackedData.paidAds) || (stackedData === null || stackedData === void 0 ? void 0 : stackedData.email) || []).map(function (item) {
+  var buildStackedSeries = function buildStackedSeries() {
+    var stackedSource = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var sourceKeys = ["paidAds", "organic", "email"];
+    var allDates = sourceKeys.flatMap(function (key) {
+      return ((stackedSource === null || stackedSource === void 0 ? void 0 : stackedSource[key]) || []).map(function (item) {
         return item.date;
       });
-      var series = [{
+    }).filter(Boolean);
+    var categories = _toConsumableArray(new Set(allDates));
+    var mapByDate = function mapByDate() {
+      var rows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      return new Map(rows.filter(function (item) {
+        return item === null || item === void 0 ? void 0 : item.date;
+      }).map(function (item) {
+        var _item$value;
+        return [item.date, (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : 0];
+      }));
+    };
+    var paidMap = mapByDate((stackedSource === null || stackedSource === void 0 ? void 0 : stackedSource.paidAds) || []);
+    var organicMap = mapByDate((stackedSource === null || stackedSource === void 0 ? void 0 : stackedSource.organic) || []);
+    var emailMap = mapByDate((stackedSource === null || stackedSource === void 0 ? void 0 : stackedSource.email) || []);
+    return {
+      categories: categories,
+      series: [{
         name: "Paid Ads",
-        data: ((stackedData === null || stackedData === void 0 ? void 0 : stackedData.paidAds) || []).map(function (item) {
-          return item.value;
+        data: categories.map(function (date) {
+          var _paidMap$get;
+          return (_paidMap$get = paidMap.get(date)) !== null && _paidMap$get !== void 0 ? _paidMap$get : 0;
         })
       }, {
         name: "Organic",
-        data: ((stackedData === null || stackedData === void 0 ? void 0 : stackedData.organic) || []).map(function (item) {
-          return item.value;
+        data: categories.map(function (date) {
+          var _organicMap$get;
+          return (_organicMap$get = organicMap.get(date)) !== null && _organicMap$get !== void 0 ? _organicMap$get : 0;
         })
       }, {
         name: "Email",
-        data: ((stackedData === null || stackedData === void 0 ? void 0 : stackedData.email) || []).map(function (item) {
-          return item.value;
+        data: categories.map(function (date) {
+          var _emailMap$get;
+          return (_emailMap$get = emailMap.get(date)) !== null && _emailMap$get !== void 0 ? _emailMap$get : 0;
         })
-      }];
+      }]
+    };
+  };
+  if (activeMetric === "Total Raised") {
+    var _apiData$overviewStat17;
+    var stackedData = apiData === null || apiData === void 0 || (_apiData$overviewStat17 = apiData.overviewStats) === null || _apiData$overviewStat17 === void 0 ? void 0 : _apiData$overviewStat17.totalRaised;
+    var hasStackedData = (stackedData === null || stackedData === void 0 ? void 0 : stackedData.paidAds) || (stackedData === null || stackedData === void 0 ? void 0 : stackedData.email) || (stackedData === null || stackedData === void 0 ? void 0 : stackedData.organic);
+    if (hasStackedData) {
+      var _buildStackedSeries = buildStackedSeries(stackedData),
+        categories = _buildStackedSeries.categories,
+        series = _buildStackedSeries.series;
       mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
         label: "Total revenue trend",
         data: undefined,
@@ -15371,25 +15401,9 @@ var OverallSection = function OverallSection(_ref) {
     var netData = apiData === null || apiData === void 0 || (_apiData$overviewStat18 = apiData.overviewStats) === null || _apiData$overviewStat18 === void 0 ? void 0 : _apiData$overviewStat18.netRaised;
     var _hasStackedData = (netData === null || netData === void 0 ? void 0 : netData.paidAds) || (netData === null || netData === void 0 ? void 0 : netData.email) || (netData === null || netData === void 0 ? void 0 : netData.organic);
     if (_hasStackedData) {
-      var _categories = ((netData === null || netData === void 0 ? void 0 : netData.organic) || (netData === null || netData === void 0 ? void 0 : netData.paidAds) || (netData === null || netData === void 0 ? void 0 : netData.email) || []).map(function (item) {
-        return item.date;
-      });
-      var _series = [{
-        name: "Paid Ads",
-        data: ((netData === null || netData === void 0 ? void 0 : netData.paidAds) || []).map(function (item) {
-          return item.value;
-        })
-      }, {
-        name: "Organic",
-        data: ((netData === null || netData === void 0 ? void 0 : netData.organic) || []).map(function (item) {
-          return item.value;
-        })
-      }, {
-        name: "Email",
-        data: ((netData === null || netData === void 0 ? void 0 : netData.email) || []).map(function (item) {
-          return item.value;
-        })
-      }];
+      var _buildStackedSeries2 = buildStackedSeries(netData),
+        _categories = _buildStackedSeries2.categories,
+        _series = _buildStackedSeries2.series;
       mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
         label: "Net revenue trend",
         data: undefined,
@@ -15419,25 +15433,9 @@ var OverallSection = function OverallSection(_ref) {
     var donorsData = apiData === null || apiData === void 0 || (_apiData$overviewStat19 = apiData.overviewStats) === null || _apiData$overviewStat19 === void 0 ? void 0 : _apiData$overviewStat19.totalDonations;
     var _hasStackedData2 = (donorsData === null || donorsData === void 0 ? void 0 : donorsData.paidAds) || (donorsData === null || donorsData === void 0 ? void 0 : donorsData.email) || (donorsData === null || donorsData === void 0 ? void 0 : donorsData.organic);
     if (_hasStackedData2) {
-      var _categories2 = ((donorsData === null || donorsData === void 0 ? void 0 : donorsData.organic) || (donorsData === null || donorsData === void 0 ? void 0 : donorsData.paidAds) || (donorsData === null || donorsData === void 0 ? void 0 : donorsData.email) || []).map(function (item) {
-        return item.date;
-      });
-      var _series2 = [{
-        name: "Paid Ads",
-        data: ((donorsData === null || donorsData === void 0 ? void 0 : donorsData.paidAds) || []).map(function (item) {
-          return item.value;
-        })
-      }, {
-        name: "Organic",
-        data: ((donorsData === null || donorsData === void 0 ? void 0 : donorsData.organic) || []).map(function (item) {
-          return item.value;
-        })
-      }, {
-        name: "Email",
-        data: ((donorsData === null || donorsData === void 0 ? void 0 : donorsData.email) || []).map(function (item) {
-          return item.value;
-        })
-      }];
+      var _buildStackedSeries3 = buildStackedSeries(donorsData),
+        _categories2 = _buildStackedSeries3.categories,
+        _series2 = _buildStackedSeries3.series;
       mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
         label: "Donor trend",
         data: undefined,
@@ -15466,25 +15464,9 @@ var OverallSection = function OverallSection(_ref) {
     var roasData = apiData === null || apiData === void 0 ? void 0 : apiData.roas;
     var _hasStackedData3 = (roasData === null || roasData === void 0 ? void 0 : roasData.paidAds) || (roasData === null || roasData === void 0 ? void 0 : roasData.email) || (roasData === null || roasData === void 0 ? void 0 : roasData.organic);
     if (_hasStackedData3) {
-      var _categories3 = ((roasData === null || roasData === void 0 ? void 0 : roasData.organic) || (roasData === null || roasData === void 0 ? void 0 : roasData.paidAds) || (roasData === null || roasData === void 0 ? void 0 : roasData.email) || []).map(function (item) {
-        return item.date;
-      });
-      var _series3 = [{
-        name: "Paid Ads",
-        data: ((roasData === null || roasData === void 0 ? void 0 : roasData.paidAds) || []).map(function (item) {
-          return item.value;
-        })
-      }, {
-        name: "Organic",
-        data: ((roasData === null || roasData === void 0 ? void 0 : roasData.organic) || []).map(function (item) {
-          return item.value;
-        })
-      }, {
-        name: "Email",
-        data: ((roasData === null || roasData === void 0 ? void 0 : roasData.email) || []).map(function (item) {
-          return item.value;
-        })
-      }];
+      var _buildStackedSeries4 = buildStackedSeries(roasData),
+        _categories3 = _buildStackedSeries4.categories,
+        _series3 = _buildStackedSeries4.series;
       mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
         label: "ROAS",
         data: undefined,
@@ -15514,25 +15496,9 @@ var OverallSection = function OverallSection(_ref) {
     var conversionData = apiData === null || apiData === void 0 || (_apiData$overviewStat20 = apiData.overviewStats) === null || _apiData$overviewStat20 === void 0 ? void 0 : _apiData$overviewStat20.conversionRate;
     var _hasStackedData4 = (conversionData === null || conversionData === void 0 ? void 0 : conversionData.paidAds) || (conversionData === null || conversionData === void 0 ? void 0 : conversionData.email) || (conversionData === null || conversionData === void 0 ? void 0 : conversionData.organic);
     if (_hasStackedData4) {
-      var _categories4 = ((conversionData === null || conversionData === void 0 ? void 0 : conversionData.organic) || (conversionData === null || conversionData === void 0 ? void 0 : conversionData.paidAds) || (conversionData === null || conversionData === void 0 ? void 0 : conversionData.email) || []).map(function (item) {
-        return item.date;
-      });
-      var _series4 = [{
-        name: "Paid Ads",
-        data: ((conversionData === null || conversionData === void 0 ? void 0 : conversionData.paidAds) || []).map(function (item) {
-          return item.value;
-        })
-      }, {
-        name: "Organic",
-        data: ((conversionData === null || conversionData === void 0 ? void 0 : conversionData.organic) || []).map(function (item) {
-          return item.value;
-        })
-      }, {
-        name: "Email",
-        data: ((conversionData === null || conversionData === void 0 ? void 0 : conversionData.email) || []).map(function (item) {
-          return item.value;
-        })
-      }];
+      var _buildStackedSeries5 = buildStackedSeries(conversionData),
+        _categories4 = _buildStackedSeries5.categories,
+        _series4 = _buildStackedSeries5.series;
       mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
         label: "Conversion Rate",
         data: undefined,
@@ -15562,25 +15528,9 @@ var OverallSection = function OverallSection(_ref) {
     var avgData = apiData === null || apiData === void 0 || (_apiData$overviewStat21 = apiData.overviewStats) === null || _apiData$overviewStat21 === void 0 ? void 0 : _apiData$overviewStat21.avgDonations;
     var _hasStackedData5 = (avgData === null || avgData === void 0 ? void 0 : avgData.paidAds) || (avgData === null || avgData === void 0 ? void 0 : avgData.email) || (avgData === null || avgData === void 0 ? void 0 : avgData.organic);
     if (_hasStackedData5) {
-      var _categories5 = ((avgData === null || avgData === void 0 ? void 0 : avgData.organic) || (avgData === null || avgData === void 0 ? void 0 : avgData.paidAds) || (avgData === null || avgData === void 0 ? void 0 : avgData.email) || []).map(function (item) {
-        return item.date;
-      });
-      var _series5 = [{
-        name: "Paid Ads",
-        data: ((avgData === null || avgData === void 0 ? void 0 : avgData.paidAds) || []).map(function (item) {
-          return item.value;
-        })
-      }, {
-        name: "Organic",
-        data: ((avgData === null || avgData === void 0 ? void 0 : avgData.organic) || []).map(function (item) {
-          return item.value;
-        })
-      }, {
-        name: "Email",
-        data: ((avgData === null || avgData === void 0 ? void 0 : avgData.email) || []).map(function (item) {
-          return item.value;
-        })
-      }];
+      var _buildStackedSeries6 = buildStackedSeries(avgData),
+        _categories5 = _buildStackedSeries6.categories,
+        _series5 = _buildStackedSeries6.series;
       mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
         label: "Average donation trend",
         data: undefined,