@ammarkhalidfarooq/dashboard-package 0.4.83 → 0.4.85

package/dist/index.cjs.js

@@ -3675,13 +3675,56 @@ var MetricDonutCard = function MetricDonutCard(_ref) {
 };
 
 var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
-  var _donationTypeData$sum, _donationTypeData$sum2, _donationTypeData$sum3, _donationTypeData$sum4, _donationTypeData$sum5, _donationTypeData$sum6;
   var sx = _ref.sx,
-    _ref$donationTypeData = _ref.donationTypeData,
-    donationTypeData = _ref$donationTypeData === void 0 ? [] : _ref$donationTypeData;
-  console.log("CHART DATA", donationTypeData);
-  var recurringColor = (donationTypeData === null || donationTypeData === void 0 || (_donationTypeData$sum = donationTypeData.summary) === null || _donationTypeData$sum === void 0 || (_donationTypeData$sum = _donationTypeData$sum.recurring) === null || _donationTypeData$sum === void 0 ? void 0 : _donationTypeData$sum.color) || "rgb(99, 99, 230)";
-  var oneTimeColor = (donationTypeData === null || donationTypeData === void 0 || (_donationTypeData$sum2 = donationTypeData.summary) === null || _donationTypeData$sum2 === void 0 || (_donationTypeData$sum2 = _donationTypeData$sum2.oneTime) === null || _donationTypeData$sum2 === void 0 ? void 0 : _donationTypeData$sum2.color) || "#10B981";
+    donationTypeData = _ref.donationTypeData;
+  var recurringColor = "rgb(99, 99, 230)";
+  var oneTimeColor = "#10B981";
+  var colors = [recurringColor, oneTimeColor, "#06B6D4", "#F59E0B", "#EF4444"];
+  var categories = [];
+  var series = [];
+  var summaries = [];
+  var title = "Donation Type";
+  var isDistributed = false;
+  if (Array.isArray(donationTypeData) && donationTypeData.length > 0 && donationTypeData[0].totalAmount !== undefined) {
+    // New array format
+    categories = donationTypeData.map(function (item) {
+      return item.type || "";
+    });
+    series = [{
+      name: "Amount",
+      data: donationTypeData.map(function (item) {
+        return item.totalAmount || 0;
+      })
+    }];
+    summaries = donationTypeData.map(function (item, index) {
+      return {
+        label: item.type || "",
+        total: item.totalAmount || 0,
+        color: colors[index % colors.length]
+      };
+    });
+    isDistributed = true;
+    if (donationTypeData.length === 2) {
+      title = "".concat(donationTypeData[0].type, " vs ").concat(donationTypeData[1].type);
+    }
+  } else {
+    var _dataObj$summary, _dataObj$summary2, _dataObj$summary3, _dataObj$summary4;
+    // Object format or simple series array
+    var dataObj = donationTypeData || {};
+    categories = dataObj.categories || [];
+    series = Array.isArray(donationTypeData) ? donationTypeData : dataObj.series || [];
+    summaries = [{
+      label: (dataObj === null || dataObj === void 0 || (_dataObj$summary = dataObj.summary) === null || _dataObj$summary === void 0 || (_dataObj$summary = _dataObj$summary.recurring) === null || _dataObj$summary === void 0 ? void 0 : _dataObj$summary.label) || "Recurring",
+      total: (dataObj === null || dataObj === void 0 || (_dataObj$summary2 = dataObj.summary) === null || _dataObj$summary2 === void 0 || (_dataObj$summary2 = _dataObj$summary2.recurring) === null || _dataObj$summary2 === void 0 ? void 0 : _dataObj$summary2.total) || 0,
+      color: recurringColor
+    }, {
+      label: (dataObj === null || dataObj === void 0 || (_dataObj$summary3 = dataObj.summary) === null || _dataObj$summary3 === void 0 || (_dataObj$summary3 = _dataObj$summary3.oneTime) === null || _dataObj$summary3 === void 0 ? void 0 : _dataObj$summary3.label) || "One-time",
+      total: (dataObj === null || dataObj === void 0 || (_dataObj$summary4 = dataObj.summary) === null || _dataObj$summary4 === void 0 || (_dataObj$summary4 = _dataObj$summary4.oneTime) === null || _dataObj$summary4 === void 0 ? void 0 : _dataObj$summary4.total) || 0,
+      color: oneTimeColor
+    }];
+    title = "Recurring vs one-time";
+    isDistributed = false;
+  }
   var chartOptions = {
     chart: {
       type: "bar",
@@ -3696,8 +3739,9 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
     plotOptions: {
       bar: {
         horizontal: false,
-        columnWidth: "70%",
+        columnWidth: "50%",
         borderRadius: 4,
+        distributed: isDistributed,
         dataLabels: {
           position: "top"
         }
@@ -3708,10 +3752,10 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
       formatter: function formatter(val) {
         return "$".concat(formatNumber(val));
       },
-      offsetY: -10,
+      offsetY: -20,
       style: {
-        fontSize: "6px",
-        fontWeight: 400,
+        fontSize: "9px",
+        fontWeight: 600,
         colors: ["#000"]
       }
     },
@@ -3721,7 +3765,7 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
       colors: ["transparent"]
     },
     xaxis: {
-      categories: (donationTypeData === null || donationTypeData === void 0 ? void 0 : donationTypeData.categories) || [],
+      categories: categories,
       axisBorder: {
         show: false
       },
@@ -3751,7 +3795,7 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
     fill: {
       opacity: 1
     },
-    colors: [recurringColor, oneTimeColor],
+    colors: colors,
     grid: {
       borderColor: "#f1f1f1",
       strokeDashArray: 4,
@@ -3776,7 +3820,6 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
       }
     }
   };
-  var series = (donationTypeData === null || donationTypeData === void 0 ? void 0 : donationTypeData.series) || [];
   return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
     sx: _objectSpread2({
       bgcolor: "#fff",
@@ -3800,78 +3843,53 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
             fontSize: "18px",
             color: "#000"
           },
-          children: "Recurring vs one-time"
+          children: title
         }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
           sx: {
             fontSize: "13px",
             color: "rgba(0, 0, 0, 0.4)",
             mt: 0
           },
-          children: "Donation type \xB7 weekly"
+          children: "Donation type"
         })]
-      }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {
           display: "flex",
           gap: 1.5,
-          mt: 0.5
+          mt: 0.5,
+          flexWrap: "wrap"
         },
-        children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: 0.5
-          },
-          children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
-            sx: {
-              width: 8,
-              height: 8,
-              bgcolor: "rgb(99, 99, 230)",
-              borderRadius: "50%"
-            }
-          }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-            sx: {
-              fontSize: "13px",
-              color: "rgba(0, 0, 0, 0.5)",
-              fontWeight: 500
-            },
-            children: donationTypeData === null || donationTypeData === void 0 || (_donationTypeData$sum3 = donationTypeData.summary) === null || _donationTypeData$sum3 === void 0 || (_donationTypeData$sum3 = _donationTypeData$sum3.recurring) === null || _donationTypeData$sum3 === void 0 ? void 0 : _donationTypeData$sum3.label
-          }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
-            sx: {
-              fontSize: "13px",
-              fontWeight: 600,
-              color: "#000"
-            },
-            children: ["$", formatNumber((donationTypeData === null || donationTypeData === void 0 || (_donationTypeData$sum4 = donationTypeData.summary) === null || _donationTypeData$sum4 === void 0 || (_donationTypeData$sum4 = _donationTypeData$sum4.recurring) === null || _donationTypeData$sum4 === void 0 ? void 0 : _donationTypeData$sum4.total) || 0)]
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: 0.5
-          },
-          children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
-            sx: {
-              width: 8,
-              height: 8,
-              bgcolor: "#10B981",
-              borderRadius: "50%"
-            }
-          }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-            sx: {
-              fontSize: "13px",
-              color: "rgba(0, 0, 0, 0.5)",
-              fontWeight: 500
-            },
-            children: donationTypeData === null || donationTypeData === void 0 || (_donationTypeData$sum5 = donationTypeData.summary) === null || _donationTypeData$sum5 === void 0 || (_donationTypeData$sum5 = _donationTypeData$sum5.oneTime) === null || _donationTypeData$sum5 === void 0 ? void 0 : _donationTypeData$sum5.label
-          }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
+        children: summaries.map(function (item, index) {
+          return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
             sx: {
-              fontSize: "13px",
-              fontWeight: 600,
-              color: "#000"
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
             },
-            children: ["$", formatNumber((donationTypeData === null || donationTypeData === void 0 || (_donationTypeData$sum6 = donationTypeData.summary) === null || _donationTypeData$sum6 === void 0 || (_donationTypeData$sum6 = _donationTypeData$sum6.oneTime) === null || _donationTypeData$sum6 === void 0 ? void 0 : _donationTypeData$sum6.total) || 0)]
-          })]
-        })]
+            children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+              sx: {
+                width: 8,
+                height: 8,
+                bgcolor: item.color,
+                borderRadius: "50%"
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+              sx: {
+                fontSize: "13px",
+                color: "rgba(0, 0, 0, 0.5)",
+                fontWeight: 500
+              },
+              children: item.label
+            }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
+              sx: {
+                fontSize: "13px",
+                fontWeight: 600,
+                color: "#000"
+              },
+              children: ["$", formatNumber(item.total || 0)]
+            })]
+          }, item.label || index);
+        })
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: {
@@ -5196,7 +5214,7 @@ var OverallSection = function OverallSection(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     activeMetric = _useState2[0],
     setActiveMetric = _useState2[1];
-  var donationTypeData = (apiData === null || apiData === void 0 ? void 0 : apiData.donationTypeData1) || [];
+  var donationTypeData = (apiData === null || apiData === void 0 ? void 0 : apiData.donorPieChartData1) || [];
   var donorGeographyData = (apiData === null || apiData === void 0 ? void 0 : apiData.donorGeography1) || [];
   var trafficSourceData = (apiData === null || apiData === void 0 ? void 0 : apiData.trafficSource1) || [];
   var orderBumpData = (apiData === null || apiData === void 0 ? void 0 : apiData.orderBumpData1) || [];
@@ -5298,10 +5316,38 @@ var OverallSection = function OverallSection(_ref) {
   };
   var activeCampaignsData = (apiData === null || apiData === void 0 ? void 0 : apiData.activeCampaigns) || [];
   console.log("ACtive campaigns", activeCampaignsData);
-  var donorMix = (apiData === null || apiData === void 0 ? void 0 : apiData.donorMix1) || {};
-  var totalDonorsMix = (donorMix.newDonors || 0) + (donorMix.returningDonors || 0);
-  var newDonorsPerc = totalDonorsMix > 0 ? Math.round(donorMix.newDonors / totalDonorsMix * 100) : 0;
-  var returningDonorsPerc = totalDonorsMix > 0 ? Math.round(donorMix.returningDonors / totalDonorsMix * 100) : 0;
+  var donorMix = apiData === null || apiData === void 0 ? void 0 : apiData.donorPieChartData;
+  var newDonorsCount = 0;
+  var returningDonorsCount = 0;
+  var totalDonorsMix = 0;
+  var newDonorsPerc = 0;
+  var returningDonorsPerc = 0;
+  var avgGift = 0;
+  var donorMixPrev = 0;
+  if (Array.isArray(donorMix)) {
+    var newDonorsObj = donorMix.find(function (d) {
+      return d.type === "New Donors" || d.type === "New donors";
+    }) || {};
+    var returningDonorsObj = donorMix.find(function (d) {
+      return d.type === "Returning Donors" || d.type === "Returning";
+    }) || {};
+    newDonorsCount = newDonorsObj.totalDonations || 0;
+    returningDonorsCount = returningDonorsObj.totalDonations || 0;
+    totalDonorsMix = newDonorsCount + returningDonorsCount;
+    newDonorsPerc = totalDonorsMix > 0 ? Math.round(newDonorsCount / totalDonorsMix * 100) : 0;
+    returningDonorsPerc = totalDonorsMix > 0 ? Math.round(returningDonorsCount / totalDonorsMix * 100) : 0;
+    var totalAmount = (newDonorsObj.totalAmount || 0) + (returningDonorsObj.totalAmount || 0);
+    avgGift = totalDonorsMix > 0 ? Number((totalAmount / totalDonorsMix).toFixed(2)) : 0;
+    donorMixPrev = (apiData === null || apiData === void 0 ? void 0 : apiData.donorMixPrev) || 0;
+  } else if (donorMix && _typeof(donorMix) === "object") {
+    newDonorsCount = donorMix.newDonors || 0;
+    returningDonorsCount = donorMix.returningDonors || 0;
+    totalDonorsMix = newDonorsCount + returningDonorsCount;
+    newDonorsPerc = totalDonorsMix > 0 ? Math.round(newDonorsCount / totalDonorsMix * 100) : 0;
+    returningDonorsPerc = totalDonorsMix > 0 ? Math.round(returningDonorsCount / totalDonorsMix * 100) : 0;
+    avgGift = donorMix.avgGift || 0;
+    donorMixPrev = donorMix.donorMixPrev || 0;
+  }
   var renderCard = function renderCard(title) {
     return /*#__PURE__*/jsxRuntime.jsx(MetricCard
     // key={title}
@@ -5700,22 +5746,22 @@ var OverallSection = function OverallSection(_ref) {
         children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
           title: "Donor mix",
           subtitle: "Acquisition vs retention",
-          series: [donorMix.newDonors || 0, donorMix.returningDonors || 0],
+          series: [newDonorsCount, returningDonorsCount],
           labels: ["New donors", "Returning"],
           colors: ["rgb(99, 99, 230)", "#10B981"],
           centerLabel: "donors",
           centerValue: totalDonorsMix.toString(),
           items: [{
             label: "New donors",
-            val: "".concat(donorMix.newDonors || 0, " \xB7 ").concat(newDonorsPerc, "%"),
+            val: "".concat(newDonorsCount, " \xB7 ").concat(newDonorsPerc, "%"),
             color: "rgb(99, 99, 230)"
           }, {
             label: "Returning",
-            val: "".concat(donorMix.returningDonors || 0, " \xB7 ").concat(returningDonorsPerc, "%"),
+            val: "".concat(returningDonorsCount, " \xB7 ").concat(returningDonorsPerc, "%"),
             color: "#10B981"
           }],
-          bottomSummaryValue: "$".concat(donorMix.avgGift || 0),
-          bottomSummaryTrend: "".concat(donorMix.donorMixPrev || 0, "% vs ").concat(dateName || "last month"),
+          bottomSummaryValue: "$".concat(avgGift),
+          bottomSummaryTrend: "".concat(donorMixPrev, "% vs ").concat(dateName || "last month"),
           sx: {
             width: "100%"
           }