@ammarkhalidfarooq/dashboard-package 0.3.39 → 0.3.40

package/dist/index.cjs.js

@@ -5519,6 +5519,10 @@ var OverallSection = function OverallSection(_ref) {
     }
   };
   var activeCampaignsData = (apiData === null || apiData === void 0 ? void 0 : apiData.activeCampaigns) || [];
+  var donorMix = (apiData === null || apiData === void 0 ? void 0 : apiData.donorMix) || {};
+  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 renderCard = function renderCard(title) {
     return /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
       title: title,
@@ -5881,22 +5885,22 @@ var OverallSection = function OverallSection(_ref) {
         children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
           title: "Donor mix",
           subtitle: "Acquisition vs retention",
-          series: [68, 32],
+          series: [donorMix.newDonors || 0, donorMix.returningDonors || 0],
           labels: ["New donors", "Returning"],
           colors: ["rgb(99, 99, 230)", "#10B981"],
           centerLabel: "donors",
-          centerValue: "215",
+          centerValue: totalDonorsMix.toString(),
           items: [{
             label: "New donors",
-            val: "146 · 68%",
+            val: "".concat(donorMix.newDonors || 0, " \xB7 ").concat(newDonorsPerc, "%"),
             color: "rgb(99, 99, 230)"
           }, {
             label: "Returning",
-            val: "69 · 32%",
+            val: "".concat(donorMix.returningDonors || 0, " \xB7 ").concat(returningDonorsPerc, "%"),
             color: "#10B981"
           }],
-          bottomSummaryValue: "$130.58",
-          bottomSummaryTrend: "8.4% vs last month",
+          bottomSummaryValue: "$".concat(donorMix.avgGift || 0),
+          bottomSummaryTrend: "".concat(donorMix.donorMixPrev || 0, "% vs ").concat(dateName || "last month"),
           sx: {
             width: "100%"
           }