@ammarkhalidfarooq/dashboard-package 0.3.34 → 0.3.36

package/dist/index.cjs.js

@@ -795,9 +795,10 @@ var statusValue = function statusValue(value) {
 var CardWrapper = function CardWrapper(_ref) {
   var title = _ref.title,
     subtitle = _ref.subtitle,
-    children = _ref.children;
+    children = _ref.children,
+    sx = _ref.sx;
   return /*#__PURE__*/jsxRuntime.jsx(material.Card, {
-    sx: {
+    sx: _objectSpread2({
       width: "100%",
       display: "flex",
       flexDirection: "column",
@@ -805,7 +806,7 @@ var CardWrapper = function CardWrapper(_ref) {
       borderRadius: 4,
       border: "1px solid #f0f0f0",
       height: "100%"
-    },
+    }, sx),
     children: /*#__PURE__*/jsxRuntime.jsxs(material.CardContent, {
       sx: {
         p: 3
@@ -1089,16 +1090,15 @@ var KeywordsCard = function KeywordsCard() {
           children: item.clicks
         }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
           sx: {
-            width: "40px",
-            height: "30px",
             textAlign: "left"
           },
           children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
             sx: {
+              width: "40px",
               bgcolor: "#ebf2ffb1",
               color: "#3431e4",
               // px: 0.5,
-              // py: 0.5,
+              p: 0.5,
               borderRadius: "100px",
               fontSize: "11px",
               fontWeight: 700,
@@ -1653,9 +1653,9 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
             bgcolor: "#48d8d620",
             color: "#157c3bff",
             // px: 1,
-            // py: 0.5,
+            p: 0.5,
             width: "40px",
-            height: "25px",
+            // height: "25px",
             borderRadius: "100px",
             fontSize: "11px",
             fontWeight: 700,
@@ -1667,7 +1667,8 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
     })]
   });
 };
-var PaidDonorGeographyCard = function PaidDonorGeographyCard() {
+var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref3) {
+  var sx = _ref3.sx;
   var data = [{
     country: "United States",
     value: "78 · 36%",
@@ -1696,6 +1697,7 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard() {
   return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
     title: "Paid donor geography",
     subtitle: "Where ad-acquired donors come from",
+    sx: sx,
     children: data.map(function (item, index) {
       return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
         sx: {
@@ -4321,9 +4323,10 @@ var TrafficSourceCard = function TrafficSourceCard(_ref) {
       color: "#94A3B8"
     }] : _ref$data,
     _ref$total = _ref.total,
-    total = _ref$total === void 0 ? "$240.9K" : _ref$total;
+    total = _ref$total === void 0 ? "$240.9K" : _ref$total,
+    sx = _ref.sx;
   return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
-    sx: {
+    sx: _objectSpread2({
       p: 3,
       borderRadius: 4,
       border: "1px solid #f0f0f0",
@@ -4332,7 +4335,7 @@ var TrafficSourceCard = function TrafficSourceCard(_ref) {
       // height: "100%",
       display: "flex",
       flexDirection: "column"
-    },
+    }, sx),
     children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
       sx: {},
       children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -4534,7 +4537,25 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
     },
     colors: [chartColor],
     tooltip: {
-      enabled: false
+      enabled: true,
+      theme: "light",
+      x: {
+        show: false
+      },
+      y: {
+        formatter: function formatter(val) {
+          if (title !== null && title !== void 0 && title.toLowerCase().includes("revenue")) {
+            return "$".concat(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();
+        }
+      },
+      marker: {
+        show: false
+      }
     }
   };
   var series = [{
@@ -4717,7 +4738,16 @@ var MetricDonutCard = function MetricDonutCard(_ref) {
       lineCap: "butt"
     },
     colors: [chartColors[0]],
-    labels: ["accepted"]
+    labels: ["accepted"],
+    tooltip: {
+      enabled: true,
+      theme: "dark",
+      y: {
+        formatter: function formatter(val) {
+          return "".concat(val, "%");
+        }
+      }
+    }
   };
   var series = [acceptanceRate];
   return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
@@ -4882,7 +4912,8 @@ var MetricDonutCard = function MetricDonutCard(_ref) {
   });
 };
 
-var DonationTypeBarChart = function DonationTypeBarChart() {
+var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
+  var sx = _ref.sx;
   var chartOptions = {
     chart: {
       type: "bar",
@@ -4986,14 +5017,13 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
     data: [32.4, 41.2, 46.8, 14.3]
   }];
   return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
-    sx: {
+    sx: _objectSpread2({
       bgcolor: "#fff",
       borderRadius: 4,
       border: "1px solid #f0f0f0",
       boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
       p: 3
-      // height: "100%",
-    },
+    }, sx),
     children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
       sx: {
         display: "flex",
@@ -5102,7 +5132,8 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
   });
 };
 
-var RefundsChargebacksCard = function RefundsChargebacksCard() {
+var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
+  var sx = _ref.sx;
   var chartOptions = {
     chart: {
       type: "area",
@@ -5211,7 +5242,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
     data: [0.1, 0.2, 0.1, 0.15, 0.1, 0.2, 0.1, 0.15, 0.1]
   }];
   return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
-    sx: {
+    sx: _objectSpread2({
       bgcolor: "#fff",
       borderRadius: "24px",
       border: "1px solid #f0f0f0",
@@ -5220,7 +5251,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
       // height: "100%",
       display: "flex",
       flexDirection: "column"
-    },
+    }, sx),
     children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
       sx: {
         mb: 0
@@ -5480,8 +5511,8 @@ var OverallSection = function OverallSection(_ref) {
       label: "ROAS",
       icon: iconsMaterial.TrendingUp
     },
-    Conversion: {
-      value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
+    "Conversion": {
+      value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversionCard) || "1.7%",
       subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.conversionSub) || "215 / 12.4K",
       label: "Conversion Rate",
       icon: iconsMaterial.Adjust
@@ -5687,14 +5718,61 @@ var OverallSection = function OverallSection(_ref) {
       });
     }
   }
-  if (activeMetric === "Avg donation") {
-    var avgData = apiData === null || apiData === void 0 ? void 0 : apiData.averageDonations;
-    var _hasStackedData4 = (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 (activeMetric === "Conversion") {
+    var conversionData = apiData === null || apiData === void 0 ? void 0 : apiData.conversion;
+    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 = ((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) {
+      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;
+        })
+      }];
+      mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
+        label: "Conversion Rate",
+        data: undefined,
+        series: _series4,
+        categories: _categories4,
+        stacked: true,
+        colors: ["#6366F1", "#10B981", "#06B6D4"],
+        hideControls: true
+      });
+    } else if (Array.isArray(conversionData) && conversionData.length > 0) {
+      mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
+        label: "Conversion Rate",
+        data: conversionData.map(function (item) {
+          return item.value;
+        }),
+        categories: conversionData.map(function (item) {
+          return item.date;
+        }),
+        series: undefined,
+        stacked: false,
+        hideControls: true
+      });
+    }
+  }
+  if (activeMetric === "Avg donation") {
+    var avgData = apiData === null || apiData === void 0 ? void 0 : apiData.averageDonations;
+    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;
@@ -5713,8 +5791,8 @@ var OverallSection = function OverallSection(_ref) {
       mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
         label: "Average donation trend",
         data: undefined,
-        series: _series4,
-        categories: _categories4,
+        series: _series5,
+        categories: _categories5,
         stacked: true,
         colors: ["#6366F1", "#10B981", "#06B6D4"],
         hideControls: true
@@ -5878,22 +5956,38 @@ var OverallSection = function OverallSection(_ref) {
         item: true,
         xs: 12,
         md: 3,
-        children: /*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {})
+        children: /*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {
+          sx: {
+            minHeight: 330
+          }
+        })
       }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,
         xs: 12,
         md: 3,
-        children: /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {})
+        children: /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {
+          sx: {
+            minHeight: 330
+          }
+        })
       }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,
         xs: 12,
         md: 3,
-        children: /*#__PURE__*/jsxRuntime.jsx(RefundsChargebacksCard, {})
+        children: /*#__PURE__*/jsxRuntime.jsx(RefundsChargebacksCard, {
+          sx: {
+            minHeight: 330
+          }
+        })
       }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,
         xs: 12,
         md: 3,
-        children: /*#__PURE__*/jsxRuntime.jsx(TrafficSourceCard, {})
+        children: /*#__PURE__*/jsxRuntime.jsx(TrafficSourceCard, {
+          sx: {
+            minHeight: 330
+          }
+        })
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
       container: true,