@ammarkhalidfarooq/dashboard-package 0.4.53 → 0.4.55

package/dist/index.es.js

@@ -561,7 +561,10 @@ var RenderChartCard = function RenderChartCard(_ref) {
             },
             children: item.hideControls ? item.series && /*#__PURE__*/jsx(Box, {
               sx: {
-                display: "flex",
+                display: {
+                  xs: "none",
+                  sm: "flex"
+                },
                 gap: 2,
                 alignItems: "center"
               },
@@ -623,12 +626,12 @@ var RenderChartCard = function RenderChartCard(_ref) {
               })]
             })
           })]
-        }), /*#__PURE__*/jsx(Box, {
+        }), /*#__PURE__*/jsxs(Box, {
           sx: {
             flexGrow: 1,
             minHeight: isPrimary ? "250px" : "200px"
           },
-          children: /*#__PURE__*/jsx(RevenueChart, {
+          children: [/*#__PURE__*/jsx(RevenueChart, {
             id: "".concat(item.label, "-").concat(index),
             metric: item.label.includes("Rate") || item.label.includes("Performance") || item.label.includes("source") || item.label === "URL" ? "Percent" : item.stacked ? item.label.includes("Traffic") ? "Visitors" : "Donors" : metric,
             data: item.data,
@@ -639,7 +642,51 @@ var RenderChartCard = function RenderChartCard(_ref) {
             type: type || item.type || "area",
             colors: item.colors,
             showLegend: !item.hideControls
-          })
+          }), item.hideControls && item.series && /*#__PURE__*/jsx(Box, {
+            sx: {
+              display: {
+                xs: "flex",
+                sm: "none"
+              },
+              justifyContent: "center",
+              gap: 2,
+              flexWrap: "wrap",
+              mt: 1.5
+            },
+            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: "11px",
+                    color: "rgba(0,0,0,0.6)",
+                    fontWeight: 500
+                  },
+                  children: leg.label
+                })]
+              }, leg.label);
+            })
+          })]
         }), item.footer && /*#__PURE__*/jsxs(Box, {
           sx: {
             display: "flex",
@@ -5653,163 +5700,72 @@ var OverallSection = function OverallSection(_ref) {
           }
         })
       })]
-    }), /*#__PURE__*/jsxs(Grid, {
-      container: true,
-      spacing: 3,
+    }), /*#__PURE__*/jsxs(Box, {
       sx: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+        gap: 3,
         mt: 2.25,
         alignItems: "stretch"
       },
-      children: [/*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        sm: 6,
-        lg: 4,
+      children: [/*#__PURE__*/jsx(DonationTypeBarChart, {
         sx: {
-          minWidth: 0
+          minHeight: 400
         },
-        children: /*#__PURE__*/jsx(DonationTypeBarChart, {
-          sx: {
-            minHeight: 400
-          },
-          donationTypeData: donationTypeData
-        })
-      }), /*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        sm: 6,
-        lg: 4,
+        donationTypeData: donationTypeData
+      }), /*#__PURE__*/jsx(PaidDonorGeographyCard, {
         sx: {
-          minWidth: 0
+          minHeight: 400
         },
-        children: /*#__PURE__*/jsx(PaidDonorGeographyCard, {
-          sx: {
-            minHeight: 400
-          },
-          donorGeographyData: donorGeographyData
-        })
-      }), /*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        sm: 6,
-        lg: 4,
+        donorGeographyData: donorGeographyData
+      }), /*#__PURE__*/jsx(RefundsChargebacksCard, {
         sx: {
-          minWidth: 0
-        },
-        children: /*#__PURE__*/jsx(RefundsChargebacksCard, {
-          sx: {
-            minHeight: 400
-          }
-        })
-      }), /*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        sm: 6,
-        lg: 4,
-        sx: {
-          minWidth: 0,
-          // only show 4-per-row on very wide screens
-          "@media (min-width:2200px)": {
-            maxWidth: "25%",
-            flexBasis: "25%"
-          }
-        },
-        children: /*#__PURE__*/jsx(TrafficSourceCard, {
-          sx: {
-            minHeight: 400
-          },
-          trafficSourceData: trafficSourceData
-        })
-      })]
-    }), /*#__PURE__*/jsxs(Grid, {
-      container: true,
-      spacing: 3,
-      sx: {
-        mt: {
-          xs: 3,
-          md: 2.25
-        },
-        alignItems: "stretch"
-      },
-      children: [/*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        sm: 6,
-        lg: 4,
-        sx: {
-          minWidth: 0
-        },
-        children: /*#__PURE__*/jsx(MetricSparklineCard, {
-          title: "Order Bump",
-          subtitle: "Revenue trend \xB7 last 30 days",
-          value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalValue) || 0)),
-          trend: "\u25B2 ".concat(orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$prevTr = orderBumpData.prevTrend) === null || _orderBumpData$prevTr === void 0 ? void 0 : _orderBumpData$prevTr.toFixed(1), "% vs last month"),
-          chartData: orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.orderBumpMetrics,
-          footerMetrics: orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.footerMetrics
-        })
-      }), /*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        sm: 6,
-        lg: 4,
-        sx: {
-          minWidth: 0
-        },
-        children: /*#__PURE__*/jsx(MetricDonutCard, {
-          title: "Upsell",
-          subtitle: "Acceptance & raised",
-          acceptanceRate: (upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceRate) || 0,
-          acceptanceVal: "".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceVal) || 0), "%"),
-          acceptanceTrend: "".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceTrend) || 0), "%"),
-          raisedVal: "$".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedVal) || 0)),
-          raisedTrend: "".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedTrend) || 0), "%")
-        })
-      }), /*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        sm: 6,
-        lg: 4,
-        sx: {
-          minWidth: 0
-        },
-        children: /*#__PURE__*/jsx(MetricDonutCard, {
-          title: "Downsell",
-          subtitle: "Acceptance & raised",
-          acceptanceRate: (downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0,
-          acceptanceVal: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceVal) || 0), "%"),
-          acceptanceTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceTrend) || 0), "%"),
-          raisedVal: "$".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedVal) || 0)),
-          raisedTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedTrend) || 0), "%")
-        })
-      }), /*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        sm: 6,
-        lg: 4,
+          minHeight: 400
+        }
+      }), /*#__PURE__*/jsx(TrafficSourceCard, {
         sx: {
-          minWidth: 0,
-          "@media (min-width:2200px)": {
-            maxWidth: "25%",
-            flexBasis: "25%"
-          }
+          minHeight: 400
         },
-        children: /*#__PURE__*/jsx(MetricSparklineCard, {
-          title: "Referrals",
-          subtitle: "Revenue trend \xB7 last 30 days",
-          value: "$22.7K",
-          trend: "\u25B2 9.1% vs last month",
-          chartData: [1500, 1700, 1600, 2200, 1900, 2400, 2270],
-          footerMetrics: [{
-            label: "Referrers",
-            value: "38"
-          }, {
-            label: "Avg gift",
-            value: "$598"
-          }, {
-            label: "Conv. rate",
-            value: "27.5%"
-          }]
-        })
+        trafficSourceData: trafficSourceData
+      }), /*#__PURE__*/jsx(MetricSparklineCard, {
+        title: "Order Bump",
+        subtitle: "Revenue trend \xB7 last 30 days",
+        value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalValue) || 0)),
+        trend: "\u25B2 ".concat(orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$prevTr = orderBumpData.prevTrend) === null || _orderBumpData$prevTr === void 0 ? void 0 : _orderBumpData$prevTr.toFixed(1), "% vs last month"),
+        chartData: orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.orderBumpMetrics,
+        footerMetrics: orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.footerMetrics
+      }), /*#__PURE__*/jsx(MetricDonutCard, {
+        title: "Upsell",
+        subtitle: "Acceptance & raised",
+        acceptanceRate: (upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceRate) || 0,
+        acceptanceVal: "".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceVal) || 0), "%"),
+        acceptanceTrend: "".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceTrend) || 0), "%"),
+        raisedVal: "$".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedVal) || 0)),
+        raisedTrend: "".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedTrend) || 0), "%")
+      }), /*#__PURE__*/jsx(MetricDonutCard, {
+        title: "Downsell",
+        subtitle: "Acceptance & raised",
+        acceptanceRate: (downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0,
+        acceptanceVal: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceVal) || 0), "%"),
+        acceptanceTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceTrend) || 0), "%"),
+        raisedVal: "$".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedVal) || 0)),
+        raisedTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedTrend) || 0), "%")
+      }), /*#__PURE__*/jsx(MetricSparklineCard, {
+        title: "Referrals",
+        subtitle: "Revenue trend \xB7 last 30 days",
+        value: "$22.7K",
+        trend: "\u25B2 9.1% vs last month",
+        chartData: [1500, 1700, 1600, 2200, 1900, 2400, 2270],
+        footerMetrics: [{
+          label: "Referrers",
+          value: "38"
+        }, {
+          label: "Avg gift",
+          value: "$598"
+        }, {
+          label: "Conv. rate",
+          value: "27.5%"
+        }]
       })]
     })]
   });