@ammarkhalidfarooq/dashboard-package 0.1.2 → 0.1.4

package/dist/index.es.js

@@ -554,7 +554,9 @@ var Dashboard = function Dashboard(_ref) {
     _ref$donationsData = _ref.donationsData,
     donationsData = _ref$donationsData === void 0 ? [15, 22, 18, 30, 25, 35, 42, 45, 28] : _ref$donationsData,
     _ref$categories = _ref.categories,
-    categories = _ref$categories === void 0 ? ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"] : _ref$categories;
+    categories = _ref$categories === void 0 ? ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"] : _ref$categories,
+    _ref$apiData = _ref.apiData,
+    apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
   var _React$useState = React.useState(initialMetric),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     metric = _React$useState2[0];
@@ -619,7 +621,9 @@ var Dashboard = function Dashboard(_ref) {
         },
         children: /*#__PURE__*/jsx(CircularProgress, {})
       }),
-      children: /*#__PURE__*/jsx(NewOverview$1, {})
+      children: /*#__PURE__*/jsx(NewOverview$1, {
+        apiData: apiData
+      })
     }), /*#__PURE__*/jsx(Suspense, {
       fallback: /*#__PURE__*/jsx(Box, {
         sx: {
@@ -628,7 +632,9 @@ var Dashboard = function Dashboard(_ref) {
         },
         children: /*#__PURE__*/jsx(CircularProgress, {})
       }),
-      children: /*#__PURE__*/jsx(PerformanceSection$1, {})
+      children: /*#__PURE__*/jsx(PerformanceSection$1, {
+        apiData: apiData
+      })
     }), /*#__PURE__*/jsx(Suspense, {
       fallback: /*#__PURE__*/jsx(Box, {
         sx: {
@@ -637,7 +643,9 @@ var Dashboard = function Dashboard(_ref) {
         },
         children: /*#__PURE__*/jsx(CircularProgress, {})
       }),
-      children: /*#__PURE__*/jsx(RecurringPlans$1, {})
+      children: /*#__PURE__*/jsx(RecurringPlans$1, {
+        apiData: apiData
+      })
     }), /*#__PURE__*/jsx(Suspense, {
       fallback: /*#__PURE__*/jsx(Box, {
         sx: {
@@ -646,7 +654,9 @@ var Dashboard = function Dashboard(_ref) {
         },
         children: /*#__PURE__*/jsx(CircularProgress, {})
       }),
-      children: /*#__PURE__*/jsx(RecurringRevenueSection$1, {})
+      children: /*#__PURE__*/jsx(RecurringRevenueSection$1, {
+        apiData: apiData
+      })
     }), /*#__PURE__*/jsx(Suspense, {
       fallback: /*#__PURE__*/jsx(Box, {
         sx: {
@@ -655,7 +665,9 @@ var Dashboard = function Dashboard(_ref) {
         },
         children: /*#__PURE__*/jsx(CircularProgress, {})
       }),
-      children: /*#__PURE__*/jsx(DonorBehavior$1, {})
+      children: /*#__PURE__*/jsx(DonorBehavior$1, {
+        apiData: apiData
+      })
     }), /*#__PURE__*/jsx(Suspense, {
       fallback: /*#__PURE__*/jsx(Box, {
         sx: {
@@ -664,7 +676,9 @@ var Dashboard = function Dashboard(_ref) {
         },
         children: /*#__PURE__*/jsx(CircularProgress, {})
       }),
-      children: /*#__PURE__*/jsx(UpdateEmails$1, {})
+      children: /*#__PURE__*/jsx(UpdateEmails$1, {
+        apiData: apiData
+      })
     })]
   });
 };
@@ -713,7 +727,9 @@ var DisplayCard = function DisplayCard(_ref) {
   });
 };
 
-var OrganicSection = function OrganicSection() {
+var OrganicSection = function OrganicSection(_ref) {
+  var _ref$apiData = _ref.apiData,
+    apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
   var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
   var dailyPerformance = {
     label: "Search Visibility",
@@ -745,37 +761,37 @@ var OrganicSection = function OrganicSection() {
       },
       children: [/*#__PURE__*/jsx(DisplayCard, {
         title: "Organic Users",
-        value: "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.organicUsers) || "$9,200",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
         title: "Search Clicks",
-        value: "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.searchClicks) || "$9,200",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
         title: "Donations",
-        value: "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.donations) || "$9,200",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
         title: "Converstion Rate",
-        value: "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversionRate) || "$9,200",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
         title: "Revenue Raised",
-        value: "3.0",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.revenueRaised) || "3.0",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
         title: "Avg Donation",
-        value: "215",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonation) || "215",
         sx: {
           flex: 1
         }
@@ -816,11 +832,13 @@ var OverallSection$2 = /*#__PURE__*/lazy(function () {
 var PaidSection$2 = /*#__PURE__*/lazy(function () {
   return Promise.resolve().then(function () { return PaidSection$1; });
 });
-var NewOverview = function NewOverview() {
+var NewOverview = function NewOverview(_ref) {
+  var _ref$apiData = _ref.apiData,
+    apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
   var initialMetric = "Revenue";
-  var revenueData = [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000];
-  var donationsData = [15, 22, 18, 30, 25, 35, 42, 45, 28];
-  var categories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];
+  var revenueData = (apiData === null || apiData === void 0 ? void 0 : apiData.revenueData) || [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000];
+  var donationsData = (apiData === null || apiData === void 0 ? void 0 : apiData.donationsData) || [15, 22, 18, 30, 25, 35, 42, 45, 28];
+  var categories = (apiData === null || apiData === void 0 ? void 0 : apiData.categories) || ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];
   var _useState = useState(initialMetric),
     _useState2 = _slicedToArray(_useState, 2),
     metric = _useState2[0];
@@ -830,10 +848,20 @@ var NewOverview = function NewOverview() {
     activeSection = _useState4[0],
     setActiveSection = _useState4[1];
   var currentData = metric === "Revenue" ? revenueData : donationsData;
+  var oneTimeData = (apiData === null || apiData === void 0 ? void 0 : apiData.oneTimeDonations) || [];
+  var oneTimeValues = oneTimeData.length > 0 ? oneTimeData.map(function (item) {
+    return item.value;
+  }) : currentData;
+  var oneTimeCategories = oneTimeData.length > 0 ? oneTimeData.map(function (item) {
+    return item.date;
+  }) : categories;
+  var oneTimeTotal = oneTimeData.length > 0 ? oneTimeValues.reduce(function (sum, val) {
+    return sum + val;
+  }, 0) : 7100;
   var primaryCharts = [{
     label: "Total Revenue",
-    value: "$9,200.00",
-    subValue: "Total Donations: 215",
+    value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRevenue) || "$9,200.00",
+    subValue: "Total Donations: ".concat((apiData === null || apiData === void 0 ? void 0 : apiData.totalDonations) || 215),
     data: currentData,
     categories: categories,
     showSelector: true
@@ -844,9 +872,9 @@ var NewOverview = function NewOverview() {
     categories: categories.slice(-7)
   }, {
     label: "One-time donations",
-    value: "$7,100.00",
-    data: currentData,
-    categories: categories
+    value: apiData !== null && apiData !== void 0 && apiData.oneTimeDonations ? "$".concat(oneTimeTotal.toLocaleString()) : "$7,100.00",
+    data: oneTimeValues,
+    categories: oneTimeCategories
   }];
   var secondaryCharts = [{
     label: "New vs Returning Donors",
@@ -995,15 +1023,20 @@ var NewOverview = function NewOverview() {
         })
       }),
       children: [activeSection === "Overall" && /*#__PURE__*/jsx(OverallSection$2, {
+        apiData: apiData,
         primaryCharts: primaryCharts,
         secondaryCharts: secondaryCharts,
         tertiaryCharts: tertiaryCharts,
         quaternaryCharts: quaternaryCharts
-      }), activeSection === "Paid" && /*#__PURE__*/jsx(PaidSection$2, {}), activeSection === "Organic" && /*#__PURE__*/jsx(Box, {
+      }), activeSection === "Paid" && /*#__PURE__*/jsx(PaidSection$2, {
+        apiData: apiData
+      }), activeSection === "Organic" && /*#__PURE__*/jsx(Box, {
         sx: {
           p: 2
         },
-        children: /*#__PURE__*/jsx(OrganicSection, {})
+        children: /*#__PURE__*/jsx(OrganicSection, {
+          apiData: apiData
+        })
       }), activeSection === "Email" && /*#__PURE__*/jsx(Box, {
         sx: {
           p: 2