@ammarkhalidfarooq/dashboard-package 0.3.23 → 0.3.24

package/dist/index.cjs.js

@@ -256,7 +256,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 = styles.useTheme();
   var isRadial = type === 'donut' || type === 'pie';
 
@@ -294,7 +296,7 @@ var RevenueChart = function RevenueChart(_ref) {
       enabled: true
     },
     legend: {
-      show: true,
+      show: showLegend,
       position: 'bottom',
       horizontalAlign: 'center'
     },
@@ -373,7 +375,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'
     },
@@ -539,33 +541,75 @@ var RenderChartCard = function RenderChartCard(_ref) {
               },
               children: _typeof(item.subValue) === 'object' && item.subValue !== null ? JSON.stringify(item.subValue) : item.subValue
             })]
-          }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
             sx: {
               display: "flex",
-              gap: 1
+              gap: 1,
+              alignItems: "center"
             },
-            children: [item.showSelector && /*#__PURE__*/jsxRuntime.jsx(MetricSelector, {
-              metric: metric,
-              onMetricChange: setMetric,
-              options: ["Revenue", "Donations"]
-            }), /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
+            children: item.hideControls ? /*#__PURE__*/jsxRuntime.jsx(material.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__*/jsxRuntime.jsx(iconsMaterial.MoreHoriz, {
-                sx: {
-                  fontSize: "1.2rem"
-                }
+              children: [{
+                label: "Paid Ads",
+                color: "#6366F1"
+              }, {
+                label: "Organic",
+                color: "#10B981"
+              }, {
+                label: "Email",
+                color: "#06B6D4"
+              }].map(function (leg) {
+                return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5
+                  },
+                  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+                    sx: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      bgcolor: leg.color
+                    }
+                  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                    sx: {
+                      fontSize: "12px",
+                      color: "rgba(0,0,0,0.6)",
+                      fontWeight: 500
+                    },
+                    children: leg.label
+                  })]
+                }, leg.label);
               })
-            })]
+            }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [item.showSelector && /*#__PURE__*/jsxRuntime.jsx(MetricSelector, {
+                metric: metric,
+                onMetricChange: setMetric,
+                options: ["Revenue", "Donations"]
+              }), /*#__PURE__*/jsxRuntime.jsx(material.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__*/jsxRuntime.jsx(iconsMaterial.MoreHoriz, {
+                  sx: {
+                    fontSize: "1.2rem"
+                  }
+                })
+              })]
+            })
           })]
         }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
           sx: {
@@ -581,7 +625,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__*/jsxRuntime.jsxs(material.Box, {
           sx: {
@@ -4886,7 +4931,8 @@ var OverallSection = function OverallSection(_ref) {
         series: series,
         categories: categories,
         stacked: true,
-        colors: ["#6366F1", "#10B981", "#06B6D4"]
+        colors: ["#6366F1", "#10B981", "#06B6D4"],
+        hideControls: true
       });
     }
   }