@ammarkhalidfarooq/dashboard-package 0.1.2 → 0.1.5

package/dist/index.cjs.js

@@ -91,6 +91,15 @@ function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -369,12 +378,18 @@ var RevenueChart = function RevenueChart(_ref) {
   if (isRadial) {
     var _series$;
     // For donut/pie, series must be a simple array of numbers
-    chartSeries = Array.isArray(data) ? data : (series === null || series === void 0 || (_series$ = series[0]) === null || _series$ === void 0 ? void 0 : _series$.data) || [];
+    var processedData = Array.isArray(data) ? data.map(function (v) {
+      return _typeof(v) === 'object' && v !== null ? v.value : v;
+    }) : [];
+    chartSeries = processedData.length > 0 ? processedData : (series === null || series === void 0 || (_series$ = series[0]) === null || _series$ === void 0 ? void 0 : _series$.data) || [];
   } else {
     // For bar/line/area, series must be an array of objects [{ name: '', data: [] }]
+    var _processedData = Array.isArray(data) ? data.map(function (v) {
+      return _typeof(v) === 'object' && v !== null ? v.value : v;
+    }) : [];
     chartSeries = Array.isArray(series) ? series : [{
       name: metric || "Value",
-      data: Array.isArray(data) ? data : []
+      data: _processedData
     }];
   }
   return /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
@@ -448,14 +463,14 @@ var RenderChartCard = function RenderChartCard(_ref) {
                 color: "#000000",
                 mb: 0.5
               },
-              children: item.value
+              children: _typeof(item.value) === 'object' && item.value !== null ? item.value.value !== undefined ? item.value.value : JSON.stringify(item.value) : item.value
             }), item.subValue && /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
               variant: "subtitle2",
               sx: {
                 color: "#000000",
                 fontWeight: 600
               },
-              children: item.subValue
+              children: _typeof(item.subValue) === 'object' && item.subValue !== null ? JSON.stringify(item.subValue) : item.subValue
             })]
           }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
             sx: {
@@ -556,7 +571,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];
@@ -621,7 +638,9 @@ var Dashboard = function Dashboard(_ref) {
         },
         children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {})
       }),
-      children: /*#__PURE__*/jsxRuntime.jsx(NewOverview$1, {})
+      children: /*#__PURE__*/jsxRuntime.jsx(NewOverview$1, {
+        apiData: apiData
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
       fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {
@@ -630,7 +649,9 @@ var Dashboard = function Dashboard(_ref) {
         },
         children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {})
       }),
-      children: /*#__PURE__*/jsxRuntime.jsx(PerformanceSection$1, {})
+      children: /*#__PURE__*/jsxRuntime.jsx(PerformanceSection$1, {
+        apiData: apiData
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
       fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {
@@ -639,7 +660,9 @@ var Dashboard = function Dashboard(_ref) {
         },
         children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {})
       }),
-      children: /*#__PURE__*/jsxRuntime.jsx(RecurringPlans$1, {})
+      children: /*#__PURE__*/jsxRuntime.jsx(RecurringPlans$1, {
+        apiData: apiData
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
       fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {
@@ -648,7 +671,9 @@ var Dashboard = function Dashboard(_ref) {
         },
         children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {})
       }),
-      children: /*#__PURE__*/jsxRuntime.jsx(RecurringRevenueSection$1, {})
+      children: /*#__PURE__*/jsxRuntime.jsx(RecurringRevenueSection$1, {
+        apiData: apiData
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
       fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {
@@ -657,7 +682,9 @@ var Dashboard = function Dashboard(_ref) {
         },
         children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {})
       }),
-      children: /*#__PURE__*/jsxRuntime.jsx(DonorBehavior$1, {})
+      children: /*#__PURE__*/jsxRuntime.jsx(DonorBehavior$1, {
+        apiData: apiData
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
       fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {
@@ -666,7 +693,9 @@ var Dashboard = function Dashboard(_ref) {
         },
         children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {})
       }),
-      children: /*#__PURE__*/jsxRuntime.jsx(UpdateEmails$1, {})
+      children: /*#__PURE__*/jsxRuntime.jsx(UpdateEmails$1, {
+        apiData: apiData
+      })
     })]
   });
 };
@@ -709,13 +738,15 @@ var DisplayCard = function DisplayCard(_ref) {
           fontSize: '22px',
           fontWeight: '500'
         },
-        children: value
+        children: _typeof(value) === 'object' && value !== null ? value.value !== undefined ? value.value : JSON.stringify(value) : value
       })]
     })
   });
 };
 
-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",
@@ -747,37 +778,37 @@ var OrganicSection = function OrganicSection() {
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
         title: "Organic Users",
-        value: "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.organicUsers) || "$9,200",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
         title: "Search Clicks",
-        value: "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.searchClicks) || "$9,200",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
         title: "Donations",
-        value: "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.donations) || "$9,200",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
         title: "Converstion Rate",
-        value: "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversionRate) || "$9,200",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
         title: "Revenue Raised",
-        value: "3.0",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.revenueRaised) || "3.0",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
         title: "Avg Donation",
-        value: "215",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonation) || "215",
         sx: {
           flex: 1
         }
@@ -818,11 +849,13 @@ var OverallSection$2 = /*#__PURE__*/React.lazy(function () {
 var PaidSection$2 = /*#__PURE__*/React.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 = React.useState(initialMetric),
     _useState2 = _slicedToArray(_useState, 2),
     metric = _useState2[0];
@@ -832,10 +865,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
@@ -846,9 +889,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",
@@ -997,15 +1040,20 @@ var NewOverview = function NewOverview() {
         })
       }),
       children: [activeSection === "Overall" && /*#__PURE__*/jsxRuntime.jsx(OverallSection$2, {
+        apiData: apiData,
         primaryCharts: primaryCharts,
         secondaryCharts: secondaryCharts,
         tertiaryCharts: tertiaryCharts,
         quaternaryCharts: quaternaryCharts
-      }), activeSection === "Paid" && /*#__PURE__*/jsxRuntime.jsx(PaidSection$2, {}), activeSection === "Organic" && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      }), activeSection === "Paid" && /*#__PURE__*/jsxRuntime.jsx(PaidSection$2, {
+        apiData: apiData
+      }), activeSection === "Organic" && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {
           p: 2
         },
-        children: /*#__PURE__*/jsxRuntime.jsx(OrganicSection, {})
+        children: /*#__PURE__*/jsxRuntime.jsx(OrganicSection, {
+          apiData: apiData
+        })
       }), activeSection === "Email" && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {
           p: 2
@@ -5147,7 +5195,9 @@ var index = /*#__PURE__*/Object.freeze({
 });
 
 var OverallSection = function OverallSection(_ref) {
-  var primaryCharts = _ref.primaryCharts,
+  var _ref$apiData = _ref.apiData,
+    apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
+    primaryCharts = _ref.primaryCharts,
     secondaryCharts = _ref.secondaryCharts,
     tertiaryCharts = _ref.tertiaryCharts,
     quaternaryCharts = _ref.quaternaryCharts;
@@ -5160,31 +5210,31 @@ var OverallSection = function OverallSection(_ref) {
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
         title: "Total Raised",
-        value: "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$9,200",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
         title: "Net Raised",
-        value: "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$9,200",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
         title: "Total Spent",
-        value: "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalSpent) || "$9,200",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
         title: "Total ROAS",
-        value: "3.0",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRoas) || "3.0",
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
         title: "Total Donors",
-        value: "215",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
         sx: {
           flex: 1
         }
@@ -5199,7 +5249,7 @@ var OverallSection = function OverallSection(_ref) {
         return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
           item: item,
           index: index
-        });
+        }, "primary-".concat(index));
       })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
       container: true,
@@ -5211,7 +5261,7 @@ var OverallSection = function OverallSection(_ref) {
         return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
           item: item,
           index: index
-        });
+        }, "secondary-".concat(index));
       })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
       container: true,
@@ -5223,7 +5273,7 @@ var OverallSection = function OverallSection(_ref) {
         return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
           item: item,
           index: index
-        });
+        }, "tertiary-".concat(index));
       })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
       container: true,
@@ -5235,7 +5285,7 @@ var OverallSection = function OverallSection(_ref) {
         return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
           item: item,
           index: index
-        });
+        }, "quaternary-".concat(index));
       })
     })]
   });