@ammarkhalidfarooq/dashboard-package 0.6.77 → 0.6.79

package/dist/index.cjs.js

@@ -399,6 +399,54 @@ var MetricSelector = function MetricSelector(_ref) {
   });
 };
 
+var TREND_UP_COLOR = "#22C55E";
+var TREND_DOWN_COLOR = "#EF4444";
+function getTrendDirection(valueOrText) {
+  var text = String(valueOrText !== null && valueOrText !== void 0 ? valueOrText : "").trim();
+  if (text.includes("▼")) return "down";
+  if (text.includes("▲")) return "up";
+  var match = text.match(/-?\d+(\.\d+)?/);
+  if (!match) return "neutral";
+  var n = Number(match[0]);
+  if (n < 0) return "down";
+  if (n > 0) return "up";
+  return "neutral";
+}
+function getTrendColor(valueOrText) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$up = _ref.up,
+    up = _ref$up === void 0 ? TREND_UP_COLOR : _ref$up,
+    _ref$down = _ref.down,
+    down = _ref$down === void 0 ? TREND_DOWN_COLOR : _ref$down,
+    _ref$neutral = _ref.neutral,
+    neutral = _ref$neutral === void 0 ? up : _ref$neutral;
+  var direction = getTrendDirection(valueOrText);
+  if (direction === "down") return down;
+  if (direction === "up") return up;
+  return neutral;
+}
+function getTrendArrow(valueOrText) {
+  var direction = getTrendDirection(valueOrText);
+  if (direction === "down") return "▼";
+  if (direction === "up") return "▲";
+  return "";
+}
+function formatCurrency(value) {
+  return "$".concat(Number(value !== null && value !== void 0 ? value : 0).toLocaleString("en-US"));
+}
+function formatNumber(num) {
+  if (num >= 1000000000) {
+    return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
+  }
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
+  }
+  return (num !== null && num !== void 0 ? num : 0).toString();
+}
+
 var RevenueChart = function RevenueChart(_ref) {
   var metric = _ref.metric,
     data = _ref.data,
@@ -414,9 +462,18 @@ var RevenueChart = function RevenueChart(_ref) {
     id = _ref$id === void 0 ? "revenue-chart" : _ref$id,
     colors = _ref.colors,
     _ref$showLegend = _ref.showLegend,
-    showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend;
+    showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
+    _ref$isAmount = _ref.isAmount,
+    isAmount = _ref$isAmount === void 0 ? false : _ref$isAmount;
   var theme = styles.useTheme();
   var isRadial = type === 'donut' || type === 'pie';
+  var isCurrency = isAmount || (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'revenue';
+  var isPercent = (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'percent';
+  var formatValue = function formatValue(value) {
+    if (isCurrency) return formatCurrency(value);
+    if (isPercent) return "".concat(Number(value !== null && value !== void 0 ? value : 0).toLocaleString('en-US'), "%");
+    return Number(value !== null && value !== void 0 ? value : 0).toLocaleString('en-US');
+  };
 
   // Base options common to all charts
   var baseOptions = {
@@ -438,7 +495,7 @@ var RevenueChart = function RevenueChart(_ref) {
       theme: 'light',
       y: {
         formatter: function formatter(value) {
-          return (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'revenue' ? "$".concat((value || 0).toLocaleString()) : value || 0;
+          return formatValue(value);
         }
       }
     }
@@ -469,7 +526,7 @@ var RevenueChart = function RevenueChart(_ref) {
                 var sum = w.globals.seriesTotals.reduce(function (a, b) {
                   return a + b;
                 }, 0);
-                return metric === 'Revenue' ? "$".concat(Math.round(sum).toLocaleString()) : Math.round(sum).toLocaleString();
+                return isCurrency ? formatCurrency(Math.round(sum)) : Math.round(sum).toLocaleString('en-US');
               }
             }
           }
@@ -526,7 +583,7 @@ var RevenueChart = function RevenueChart(_ref) {
           fontSize: '12px'
         },
         formatter: function formatter(value) {
-          return (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'revenue' ? "$".concat((value || 0).toLocaleString()) : value || 0;
+          return formatValue(value);
         }
       }
     },
@@ -581,51 +638,6 @@ var RevenueChart = function RevenueChart(_ref) {
   }, "".concat(id, "-").concat(type, "-").concat(chartSeries.length));
 };
 
-var TREND_UP_COLOR = "#22C55E";
-var TREND_DOWN_COLOR = "#EF4444";
-function getTrendDirection(valueOrText) {
-  var text = String(valueOrText !== null && valueOrText !== void 0 ? valueOrText : "").trim();
-  if (text.includes("▼")) return "down";
-  if (text.includes("▲")) return "up";
-  var match = text.match(/-?\d+(\.\d+)?/);
-  if (!match) return "neutral";
-  var n = Number(match[0]);
-  if (n < 0) return "down";
-  if (n > 0) return "up";
-  return "neutral";
-}
-function getTrendColor(valueOrText) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$up = _ref.up,
-    up = _ref$up === void 0 ? TREND_UP_COLOR : _ref$up,
-    _ref$down = _ref.down,
-    down = _ref$down === void 0 ? TREND_DOWN_COLOR : _ref$down,
-    _ref$neutral = _ref.neutral,
-    neutral = _ref$neutral === void 0 ? up : _ref$neutral;
-  var direction = getTrendDirection(valueOrText);
-  if (direction === "down") return down;
-  if (direction === "up") return up;
-  return neutral;
-}
-function getTrendArrow(valueOrText) {
-  var direction = getTrendDirection(valueOrText);
-  if (direction === "down") return "▼";
-  if (direction === "up") return "▲";
-  return "";
-}
-function formatNumber(num) {
-  if (num >= 1000000000) {
-    return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
-  }
-  if (num >= 1000000) {
-    return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
-  }
-  if (num >= 1000) {
-    return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
-  }
-  return (num !== null && num !== void 0 ? num : 0).toString();
-}
-
 var RenderChartCard = function RenderChartCard(_ref) {
   var item = _ref.item,
     index = _ref.index,
@@ -655,6 +667,22 @@ var RenderChartCard = function RenderChartCard(_ref) {
   });
   var trendArrow = getTrendArrow(trendText);
   var trendBadgeBg = trendColor === "#EF4444" ? "#fee2e2" : "#8df3be9a";
+  var resolveChartMetric = function resolveChartMetric() {
+    if (item.label.includes("Rate") || item.label.includes("Performance") || item.label.includes("source") || item.label === "URL") {
+      return "Percent";
+    }
+    if (item.isAmount || (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === "revenue") {
+      return "Revenue";
+    }
+    if (item.stacked && item.label.includes("Traffic")) {
+      return "Visitors";
+    }
+    if (item.stacked) {
+      return "Donors";
+    }
+    return metric;
+  };
+  var chartMetric = resolveChartMetric();
   return /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
     item: true,
     xs: 12,
@@ -849,7 +877,8 @@ var RenderChartCard = function RenderChartCard(_ref) {
           },
           children: [/*#__PURE__*/jsxRuntime.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,
+            metric: chartMetric,
+            isAmount: item.isAmount,
             data: item.data,
             series: item.series,
             categories: item.categories,
@@ -4733,7 +4762,9 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
     _ref$bottomSection = _ref.bottomSection,
     bottomSection = _ref$bottomSection === void 0 ? false : _ref$bottomSection,
     _ref$compact = _ref.compact,
-    compact = _ref$compact === void 0 ? false : _ref$compact;
+    compact = _ref$compact === void 0 ? false : _ref$compact,
+    _ref$isAmount = _ref.isAmount,
+    isAmount = _ref$isAmount === void 0 ? false : _ref$isAmount;
   var resolvedTrendColor = trendColor !== null && trendColor !== void 0 ? trendColor : getTrendColor(trend);
 
   // Extract values for chart series
@@ -4794,13 +4825,13 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
       },
       y: {
         formatter: function formatter(val) {
-          if (title !== null && title !== void 0 && title.toLowerCase().includes("revenue")) {
-            return "$".concat(Number(val).toLocaleString());
+          if (isAmount || title !== null && title !== void 0 && title.toLowerCase().includes("revenue")) {
+            return formatCurrency(val);
           }
           if (title !== null && title !== void 0 && title.toLowerCase().includes("rate") || title !== null && title !== void 0 && title.toLowerCase().includes("bounce")) {
             return "".concat(val, "%");
           }
-          return Number(val).toLocaleString();
+          return Number(val).toLocaleString("en-US");
         }
       },
       marker: {
@@ -6966,6 +6997,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
           value: item.revenue
         };
       })) || [],
+      isAmount: true,
       footerMetrics: [{
         label: "Avg / Day",
         value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.averagePerDay) || 0))
@@ -7008,6 +7040,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
           value: item.revenue
         };
       })) || [],
+      isAmount: true,
       footerMetrics: [{
         label: "Referrers",
         value: formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalReferrers) || 0)
@@ -17810,7 +17843,8 @@ var OverallSection = function OverallSection(_ref) {
   mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
     label: mainChart.label || activeMetric,
     value: selectedInfo.value,
-    trend: selectedInfo.subValue
+    trend: selectedInfo.subValue,
+    isAmount: selectedInfo.money
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
@@ -17840,7 +17874,7 @@ var OverallSection = function OverallSection(_ref) {
         isPremium: true,
         isPrimary: true,
         numberOfDays: numberOfDays,
-        metric: activeMetric.includes("Raised") || activeMetric.includes("donation") ? "Revenue" : "Donors"
+        metric: activeMetric === "Conversion" ? "Percent" : selectedInfo.money ? "Revenue" : "Donors"
       })
     }), /*#__PURE__*/jsxRuntime.jsx(OverallDetailsGrid, {
       activeCampaignsRows: activeCampaignsData.map(function (campaign) {
@@ -18493,7 +18527,8 @@ var OrganicSection = function OrganicSection(_ref) {
     trend: selectedInfo.subValue,
     data: selectedInfo.data,
     categories: chartCategories,
-    hideControls: true
+    hideControls: true,
+    isAmount: selectedInfo.money
   };
   if (apiLoading) {
     return /*#__PURE__*/jsxRuntime.jsx(OrganicSectionSkeleton, {});
@@ -18525,7 +18560,8 @@ var OrganicSection = function OrganicSection(_ref) {
         type: "area",
         isPrimary: true,
         isPremium: true,
-        numberOfDays: numberOfDays
+        numberOfDays: numberOfDays,
+        metric: activeMetric === "Conversion Rate" ? "Percent" : selectedInfo.money ? "Revenue" : "Donors"
       }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,
         xs: 12,