@ammarkhalidfarooq/dashboard-package 0.6.70 → 0.6.72

package/dist/index.es.js

@@ -2160,6 +2160,21 @@ var DonorGeographyPanel = function DonorGeographyPanel(_ref9) {
     })
   });
 };
+var formatDonationTypeCategory = function formatDonationTypeCategory(label, slotWidth) {
+  var str = String(label !== null && label !== void 0 ? label : "").trim();
+  if (!str) return "";
+  var monthRange = str.match(/^([A-Za-z]{3})-([A-Za-z]{3})(?:\s+\d{2,4})?$/);
+  if (monthRange) {
+    var full = "".concat(monthRange[1], "-").concat(monthRange[2]);
+    var mini = "".concat(monthRange[1][0], "-").concat(monthRange[2][0]);
+    var fullWidth = full.length * 3.1;
+    return fullWidth <= slotWidth - 2 ? full : mini;
+  }
+  var noYear = str.replace(/\s+['']?\d{2,4}$/, "").trim();
+  var maxChars = Math.max(3, Math.floor(slotWidth / 3.1));
+  if (noYear.length <= maxChars) return noYear;
+  return "".concat(noYear.slice(0, Math.max(1, maxChars - 1)), "\u2026");
+};
 var DonationTypeBarSvg = function DonationTypeBarSvg(_ref0) {
   var _ref0$categories = _ref0.categories,
     categories = _ref0$categories === void 0 ? [] : _ref0$categories,
@@ -2176,13 +2191,15 @@ var DonationTypeBarSvg = function DonationTypeBarSvg(_ref0) {
   var padL = 30;
   var padR = 2;
   var padT = 14;
-  var padB = 18;
+  var padB = 20;
   var chartW = width - padL - padR;
   var chartH = height - padT - padB;
   var allVals = [].concat(_toConsumableArray(recurring), _toConsumableArray(oneTime));
   var maxVal = Math.max.apply(Math, _toConsumableArray(allVals).concat([0])) || 1;
   var n = categories.length;
   var yTicks = [0, maxVal / 2, maxVal];
+  var groupW = n > 0 ? chartW / n : chartW;
+  var labelFontSize = n > 3 ? 5 : 5.5;
   if (!n) {
     return /*#__PURE__*/jsxs("svg", {
       width: "100%",
@@ -2207,7 +2224,6 @@ var DonationTypeBarSvg = function DonationTypeBarSvg(_ref0) {
       })]
     });
   }
-  var groupW = chartW / n;
   var barW = Math.min(groupW * 0.3, 12);
   var baseY = padT + chartH;
   return /*#__PURE__*/jsxs("svg", {
@@ -2217,7 +2233,19 @@ var DonationTypeBarSvg = function DonationTypeBarSvg(_ref0) {
     style: {
       display: "block"
     },
-    children: [yTicks.map(function (tick, i) {
+    children: [/*#__PURE__*/jsx("defs", {
+      children: categories.map(function (_, i) {
+        return /*#__PURE__*/jsx("clipPath", {
+          id: "donation-type-cat-clip-".concat(i),
+          children: /*#__PURE__*/jsx("rect", {
+            x: padL + i * groupW,
+            y: baseY + 2,
+            width: groupW,
+            height: padB - 2
+          })
+        }, "clip-".concat(i));
+      })
+    }), yTicks.map(function (tick, i) {
       var y = padT + chartH - tick / maxVal * chartH;
       return /*#__PURE__*/jsxs("g", {
         children: [/*#__PURE__*/jsx("line", {
@@ -2281,11 +2309,12 @@ var DonationTypeBarSvg = function DonationTypeBarSvg(_ref0) {
           })]
         }), /*#__PURE__*/jsx("text", {
           x: groupX,
-          y: height - 4,
+          y: height - 5,
           textAnchor: "middle",
-          fontSize: 7.5,
+          fontSize: labelFontSize,
           fill: "rgba(0,0,0,0.4)",
-          children: cat
+          clipPath: "url(#donation-type-cat-clip-".concat(i, ")"),
+          children: formatDonationTypeCategory(cat, groupW)
         })]
       }, "bar-".concat(i));
     })]
@@ -2844,6 +2873,23 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
     emerald: "#10B981",
     cyan: "#06B6D4"
   };
+  var revenueLegend = [{
+    label: "Paid Ads",
+    color: C.indigo
+  }, {
+    label: "Organic",
+    color: C.emerald
+  }, {
+    label: "Email",
+    color: C.cyan
+  }];
+  var revenueTrendText = mainChart.trend || "";
+  var revenueTrendColor = getTrendColor(revenueTrendText, {
+    up: "#054835ff",
+    down: "#EF4444"
+  });
+  var revenueTrendBadgeBg = revenueTrendColor === "#EF4444" ? "#fee2e2" : "#8df3be9a";
+  var revenueTrendArrow = getTrendArrow(revenueTrendText);
   var headerProps = {
     dateLabel: dateLabel,
     generatedLabel: generatedLabel,
@@ -2943,77 +2989,90 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
               display: "flex",
               justifyContent: "space-between",
               alignItems: "flex-start",
-              marginBottom: 6
+              marginBottom: 8
             },
             children: [/*#__PURE__*/jsxs("div", {
               children: [/*#__PURE__*/jsx("div", {
                 style: {
                   fontSize: 13,
                   fontWeight: 700,
-                  color: "#111827"
+                  color: "#111827",
+                  lineHeight: 1.15
                 },
                 children: "Total revenue trend"
               }), /*#__PURE__*/jsxs("div", {
                 style: {
                   fontSize: 9.5,
-                  color: "#9CA3AF",
-                  marginTop: 1
+                  color: "rgba(0, 0, 0, 0.4)",
+                  marginTop: 2,
+                  lineHeight: 1.15
                 },
                 children: ["Last ", daysLabel, " \xB7 daily aggregation"]
-              })]
-            }), /*#__PURE__*/jsxs("div", {
-              style: {
-                textAlign: "right"
-              },
-              children: [/*#__PURE__*/jsx("span", {
-                style: {
-                  fontSize: 15,
-                  fontWeight: 800,
-                  color: "#111827"
-                },
-                children: kpi$(totalRaised)
-              }), /*#__PURE__*/jsx("span", {
-                style: {
-                  marginLeft: 8,
-                  fontSize: 10.5
-                },
-                children: /*#__PURE__*/jsx(TrendText, {
-                  children: mainChart.trend
-                })
-              })]
-            })]
-          }), /*#__PURE__*/jsx("div", {
-            style: {
-              display: "flex",
-              gap: 14,
-              marginBottom: 6
-            },
-            children: [["Email", C.cyan], ["Organic", C.emerald], ["Paid Ads", C.indigo]].map(function (_ref15) {
-              var _ref16 = _slicedToArray(_ref15, 2),
-                name = _ref16[0],
-                color = _ref16[1];
-              return /*#__PURE__*/jsxs("div", {
+              }), /*#__PURE__*/jsxs("div", {
                 style: {
                   display: "flex",
                   alignItems: "center",
-                  gap: 5
+                  gap: 6,
+                  marginTop: 8
                 },
-                children: [/*#__PURE__*/jsx("div", {
+                children: [/*#__PURE__*/jsx("span", {
                   style: {
-                    width: 20,
-                    height: 2.5,
-                    background: color,
-                    borderRadius: 2
-                  }
-                }), /*#__PURE__*/jsx("span", {
+                    fontSize: 22,
+                    fontWeight: 700,
+                    color: "#111827"
+                  },
+                  children: kpi$(totalRaised)
+                }), revenueTrendText && /*#__PURE__*/jsxs("span", {
                   style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 3,
+                    background: revenueTrendBadgeBg,
+                    color: revenueTrendColor,
+                    padding: "2px 8px",
+                    borderRadius: 100,
                     fontSize: 9.5,
-                    color: "#6B7280"
+                    fontWeight: 600
                   },
-                  children: name
+                  children: [revenueTrendArrow && /*#__PURE__*/jsx("span", {
+                    children: revenueTrendArrow
+                  }), revenueTrendText]
                 })]
-              }, name);
-            })
+              })]
+            }), revSeries.length > 0 && /*#__PURE__*/jsx("div", {
+              style: {
+                display: "flex",
+                gap: 10,
+                alignItems: "center",
+                flexShrink: 0,
+                paddingTop: 2
+              },
+              children: revenueLegend.map(function (leg) {
+                return /*#__PURE__*/jsxs("div", {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4
+                  },
+                  children: [/*#__PURE__*/jsx("div", {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      background: leg.color,
+                      flexShrink: 0
+                    }
+                  }), /*#__PURE__*/jsx("span", {
+                    style: {
+                      fontSize: 9.5,
+                      color: "rgba(0, 0, 0, 0.6)",
+                      fontWeight: 500
+                    },
+                    children: leg.label
+                  })]
+                }, leg.label);
+              })
+            })]
           }), /*#__PURE__*/jsx("div", {
             style: {
               width: "100%",
@@ -3348,10 +3407,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
                 display: "flex",
                 gap: 12
               },
-              children: [["Avg/day", d$((ob === null || ob === void 0 ? void 0 : ob.averagePerDay) || 0)], ["Peak day", d$((ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) || 0)], ["Orders", formatNumber((ob === null || ob === void 0 ? void 0 : ob.totalOrders) || 0)]].map(function (_ref17) {
-                var _ref18 = _slicedToArray(_ref17, 2),
-                  l = _ref18[0],
-                  v = _ref18[1];
+              children: [["Avg/day", d$((ob === null || ob === void 0 ? void 0 : ob.averagePerDay) || 0)], ["Peak day", d$((ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) || 0)], ["Orders", formatNumber((ob === null || ob === void 0 ? void 0 : ob.totalOrders) || 0)]].map(function (_ref15) {
+                var _ref16 = _slicedToArray(_ref15, 2),
+                  l = _ref16[0],
+                  v = _ref16[1];
                 return /*#__PURE__*/jsxs("div", {
                   children: [/*#__PURE__*/jsx("div", {
                     style: {
@@ -3424,10 +3483,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
                 display: "flex",
                 gap: 12
               },
-              children: [["Referrers", formatNumber((refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) || 0)], ["Avg gift", d$((refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) || 0)], ["Conv. rate", pct((refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) || 0, 1)]].map(function (_ref19) {
-                var _ref20 = _slicedToArray(_ref19, 2),
-                  l = _ref20[0],
-                  v = _ref20[1];
+              children: [["Referrers", formatNumber((refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) || 0)], ["Avg gift", d$((refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) || 0)], ["Conv. rate", pct((refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) || 0, 1)]].map(function (_ref17) {
+                var _ref18 = _slicedToArray(_ref17, 2),
+                  l = _ref18[0],
+                  v = _ref18[1];
                 return /*#__PURE__*/jsxs("div", {
                   children: [/*#__PURE__*/jsx("div", {
                     style: {