@ammarkhalidfarooq/dashboard-package 0.3.35 → 0.3.37

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
@@ -5398,7 +5429,7 @@ function formatNumber(num) {
 }
 
 var OverallSection = function OverallSection(_ref) {
-  var _apiData$totalRaisedP, _apiData$netRaisedCar, _apiData$netRaisedPre;
+  var _apiData$totalRaisedP, _apiData$netRaisedCar, _apiData$netRaisedPre, _apiData$averageDonat, _apiData$averageDonat2;
   var _ref$apiData = _ref.apiData,
     apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
     primaryCharts = _ref.primaryCharts,
@@ -5469,8 +5500,8 @@ var OverallSection = function OverallSection(_ref) {
       icon: iconsMaterial.PeopleAltOutlined
     },
     "Avg donation": {
-      value: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonation) || "$130.58",
-      subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
+      value: "$".concat(formatNumber((_apiData$averageDonat = apiData === null || apiData === void 0 ? void 0 : apiData.averageDonationsCard) !== null && _apiData$averageDonat !== void 0 ? _apiData$averageDonat : 0)),
+      subValue: "".concat(Number((_apiData$averageDonat2 = apiData === null || apiData === void 0 ? void 0 : apiData.averageDonationsCardPrev) !== null && _apiData$averageDonat2 !== void 0 ? _apiData$averageDonat2 : 0).toFixed(2), "% vs ").concat(dateName !== null && dateName !== void 0 ? dateName : "last month"),
       label: "Average Donation Amount",
       icon: iconsMaterial.PaidOutlined
     },
@@ -5925,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,