@ammarkhalidfarooq/dashboard-package 0.3.22 → 0.3.24

package/dist/index.es.js

@@ -254,7 +254,9 @@ var RevenueChart = function RevenueChart(_ref) {
     type = _ref$type === void 0 ? "area" : _ref$type,
     _ref$id = _ref.id,
     id = _ref$id === void 0 ? "revenue-chart" : _ref$id,
-    colors = _ref.colors;
+    colors = _ref.colors,
+    _ref$showLegend = _ref.showLegend,
+    showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend;
   var theme = useTheme();
   var isRadial = type === 'donut' || type === 'pie';
 
@@ -292,7 +294,7 @@ var RevenueChart = function RevenueChart(_ref) {
       enabled: true
     },
     legend: {
-      show: true,
+      show: showLegend,
       position: 'bottom',
       horizontalAlign: 'center'
     },
@@ -371,7 +373,7 @@ var RevenueChart = function RevenueChart(_ref) {
       enabled: false
     },
     legend: {
-      show: stacked || series && series.length > 1,
+      show: showLegend && (stacked || series && series.length > 1),
       position: 'top',
       horizontalAlign: 'left'
     },
@@ -537,33 +539,75 @@ var RenderChartCard = function RenderChartCard(_ref) {
               },
               children: _typeof(item.subValue) === 'object' && item.subValue !== null ? JSON.stringify(item.subValue) : item.subValue
             })]
-          }), /*#__PURE__*/jsxs(Box, {
+          }), /*#__PURE__*/jsx(Box, {
             sx: {
               display: "flex",
-              gap: 1
+              gap: 1,
+              alignItems: "center"
             },
-            children: [item.showSelector && /*#__PURE__*/jsx(MetricSelector, {
-              metric: metric,
-              onMetricChange: setMetric,
-              options: ["Revenue", "Donations"]
-            }), /*#__PURE__*/jsx(IconButton, {
+            children: item.hideControls ? /*#__PURE__*/jsx(Box, {
               sx: {
-                border: "1px solid #E9E9EB",
-                borderRadius: "8px",
-                color: "#000",
-                height: "40px",
-                width: "40px",
-                "&:hover": {
-                  borderColor: "primary.main",
-                  bgcolor: "rgba(99, 99, 230, 0.04)"
-                }
+                display: "flex",
+                gap: 2,
+                alignItems: "center"
               },
-              children: /*#__PURE__*/jsx(MoreHoriz, {
-                sx: {
-                  fontSize: "1.2rem"
-                }
+              children: [{
+                label: "Paid Ads",
+                color: "#6366F1"
+              }, {
+                label: "Organic",
+                color: "#10B981"
+              }, {
+                label: "Email",
+                color: "#06B6D4"
+              }].map(function (leg) {
+                return /*#__PURE__*/jsxs(Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5
+                  },
+                  children: [/*#__PURE__*/jsx(Box, {
+                    sx: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      bgcolor: leg.color
+                    }
+                  }), /*#__PURE__*/jsx(Typography, {
+                    sx: {
+                      fontSize: "12px",
+                      color: "rgba(0,0,0,0.6)",
+                      fontWeight: 500
+                    },
+                    children: leg.label
+                  })]
+                }, leg.label);
               })
-            })]
+            }) : /*#__PURE__*/jsxs(Fragment, {
+              children: [item.showSelector && /*#__PURE__*/jsx(MetricSelector, {
+                metric: metric,
+                onMetricChange: setMetric,
+                options: ["Revenue", "Donations"]
+              }), /*#__PURE__*/jsx(IconButton, {
+                sx: {
+                  border: "1px solid #E9E9EB",
+                  borderRadius: "8px",
+                  color: "#000",
+                  height: "40px",
+                  width: "40px",
+                  "&:hover": {
+                    borderColor: "primary.main",
+                    bgcolor: "rgba(99, 99, 230, 0.04)"
+                  }
+                },
+                children: /*#__PURE__*/jsx(MoreHoriz, {
+                  sx: {
+                    fontSize: "1.2rem"
+                  }
+                })
+              })]
+            })
           })]
         }), /*#__PURE__*/jsx(Box, {
           sx: {
@@ -579,7 +623,8 @@ var RenderChartCard = function RenderChartCard(_ref) {
             height: isPrimary ? 250 : 200,
             stacked: item.stacked,
             type: type || item.type || "area",
-            colors: item.colors
+            colors: item.colors,
+            showLegend: !item.hideControls
           })
         }), item.footer && /*#__PURE__*/jsxs(Box, {
           sx: {
@@ -4854,32 +4899,29 @@ var OverallSection = function OverallSection(_ref) {
   var mainChart = extendedCharts.find(function (c) {
     return c.label === selectedInfo.label;
   }) || primaryCharts[0];
-  console.log("OverallSection - activeMetric:", activeMetric);
-  console.log("OverallSection - apiData keys:", Object.keys(apiData || {}));
   if (activeMetric === "Total Raised") {
-    var hasStackedData = (apiData === null || apiData === void 0 ? void 0 : apiData.paidAds) || (apiData === null || apiData === void 0 ? void 0 : apiData.email) || (apiData === null || apiData === void 0 ? void 0 : apiData.organic);
-    console.log("OverallSection - hasStackedData:", !!hasStackedData);
+    var stackedData = apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised;
+    var hasStackedData = (stackedData === null || stackedData === void 0 ? void 0 : stackedData.paidAds) || (stackedData === null || stackedData === void 0 ? void 0 : stackedData.email) || (stackedData === null || stackedData === void 0 ? void 0 : stackedData.organic);
     if (hasStackedData) {
-      var categories = ((apiData === null || apiData === void 0 ? void 0 : apiData.organic) || (apiData === null || apiData === void 0 ? void 0 : apiData.paidAds) || (apiData === null || apiData === void 0 ? void 0 : apiData.email) || []).map(function (item) {
+      var categories = ((stackedData === null || stackedData === void 0 ? void 0 : stackedData.organic) || (stackedData === null || stackedData === void 0 ? void 0 : stackedData.paidAds) || (stackedData === null || stackedData === void 0 ? void 0 : stackedData.email) || []).map(function (item) {
         return item.date;
       });
       var series = [{
         name: "Paid Ads",
-        data: ((apiData === null || apiData === void 0 ? void 0 : apiData.paidAds) || []).map(function (item) {
+        data: ((stackedData === null || stackedData === void 0 ? void 0 : stackedData.paidAds) || []).map(function (item) {
           return item.value;
         })
       }, {
         name: "Organic",
-        data: ((apiData === null || apiData === void 0 ? void 0 : apiData.organic) || []).map(function (item) {
+        data: ((stackedData === null || stackedData === void 0 ? void 0 : stackedData.organic) || []).map(function (item) {
           return item.value;
         })
       }, {
         name: "Email",
-        data: ((apiData === null || apiData === void 0 ? void 0 : apiData.email) || []).map(function (item) {
+        data: ((stackedData === null || stackedData === void 0 ? void 0 : stackedData.email) || []).map(function (item) {
           return item.value;
         })
       }];
-      console.log("OverallSection - transformed series:", series);
       mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
         label: "Total revenue trend",
         data: undefined,
@@ -4887,7 +4929,8 @@ var OverallSection = function OverallSection(_ref) {
         series: series,
         categories: categories,
         stacked: true,
-        colors: ["#6366F1", "#10B981", "#06B6D4"]
+        colors: ["#6366F1", "#10B981", "#06B6D4"],
+        hideControls: true
       });
     }
   }
@@ -4896,7 +4939,6 @@ var OverallSection = function OverallSection(_ref) {
     value: selectedInfo.value,
     trend: selectedInfo.subValue
   });
-  console.log("OverallSection - Final mainChart:", mainChart);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Box, {
       sx: {