@ammarkhalidfarooq/dashboard-package 0.6.76 → 0.6.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -397,6 +397,54 @@ var MetricSelector = function MetricSelector(_ref) {
397
397
  });
398
398
  };
399
399
 
400
+ var TREND_UP_COLOR = "#22C55E";
401
+ var TREND_DOWN_COLOR = "#EF4444";
402
+ function getTrendDirection(valueOrText) {
403
+ var text = String(valueOrText !== null && valueOrText !== void 0 ? valueOrText : "").trim();
404
+ if (text.includes("▼")) return "down";
405
+ if (text.includes("▲")) return "up";
406
+ var match = text.match(/-?\d+(\.\d+)?/);
407
+ if (!match) return "neutral";
408
+ var n = Number(match[0]);
409
+ if (n < 0) return "down";
410
+ if (n > 0) return "up";
411
+ return "neutral";
412
+ }
413
+ function getTrendColor(valueOrText) {
414
+ var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
415
+ _ref$up = _ref.up,
416
+ up = _ref$up === void 0 ? TREND_UP_COLOR : _ref$up,
417
+ _ref$down = _ref.down,
418
+ down = _ref$down === void 0 ? TREND_DOWN_COLOR : _ref$down,
419
+ _ref$neutral = _ref.neutral,
420
+ neutral = _ref$neutral === void 0 ? up : _ref$neutral;
421
+ var direction = getTrendDirection(valueOrText);
422
+ if (direction === "down") return down;
423
+ if (direction === "up") return up;
424
+ return neutral;
425
+ }
426
+ function getTrendArrow(valueOrText) {
427
+ var direction = getTrendDirection(valueOrText);
428
+ if (direction === "down") return "▼";
429
+ if (direction === "up") return "▲";
430
+ return "";
431
+ }
432
+ function formatCurrency(value) {
433
+ return "$".concat(Number(value !== null && value !== void 0 ? value : 0).toLocaleString("en-US"));
434
+ }
435
+ function formatNumber(num) {
436
+ if (num >= 1000000000) {
437
+ return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
438
+ }
439
+ if (num >= 1000000) {
440
+ return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
441
+ }
442
+ if (num >= 1000) {
443
+ return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
444
+ }
445
+ return (num !== null && num !== void 0 ? num : 0).toString();
446
+ }
447
+
400
448
  var RevenueChart = function RevenueChart(_ref) {
401
449
  var metric = _ref.metric,
402
450
  data = _ref.data,
@@ -412,9 +460,18 @@ var RevenueChart = function RevenueChart(_ref) {
412
460
  id = _ref$id === void 0 ? "revenue-chart" : _ref$id,
413
461
  colors = _ref.colors,
414
462
  _ref$showLegend = _ref.showLegend,
415
- showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend;
463
+ showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
464
+ _ref$isAmount = _ref.isAmount,
465
+ isAmount = _ref$isAmount === void 0 ? false : _ref$isAmount;
416
466
  var theme = useTheme();
417
467
  var isRadial = type === 'donut' || type === 'pie';
468
+ var isCurrency = isAmount || (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'revenue';
469
+ var isPercent = (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'percent';
470
+ var formatValue = function formatValue(value) {
471
+ if (isCurrency) return formatCurrency(value);
472
+ if (isPercent) return "".concat(Number(value !== null && value !== void 0 ? value : 0).toLocaleString('en-US'), "%");
473
+ return Number(value !== null && value !== void 0 ? value : 0).toLocaleString('en-US');
474
+ };
418
475
 
419
476
  // Base options common to all charts
420
477
  var baseOptions = {
@@ -436,7 +493,7 @@ var RevenueChart = function RevenueChart(_ref) {
436
493
  theme: 'light',
437
494
  y: {
438
495
  formatter: function formatter(value) {
439
- return (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'revenue' ? "$".concat((value || 0).toLocaleString()) : value || 0;
496
+ return formatValue(value);
440
497
  }
441
498
  }
442
499
  }
@@ -467,7 +524,7 @@ var RevenueChart = function RevenueChart(_ref) {
467
524
  var sum = w.globals.seriesTotals.reduce(function (a, b) {
468
525
  return a + b;
469
526
  }, 0);
470
- return metric === 'Revenue' ? "$".concat(Math.round(sum).toLocaleString()) : Math.round(sum).toLocaleString();
527
+ return isCurrency ? formatCurrency(Math.round(sum)) : Math.round(sum).toLocaleString('en-US');
471
528
  }
472
529
  }
473
530
  }
@@ -524,7 +581,7 @@ var RevenueChart = function RevenueChart(_ref) {
524
581
  fontSize: '12px'
525
582
  },
526
583
  formatter: function formatter(value) {
527
- return (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'revenue' ? "$".concat((value || 0).toLocaleString()) : value || 0;
584
+ return formatValue(value);
528
585
  }
529
586
  }
530
587
  },
@@ -579,51 +636,6 @@ var RevenueChart = function RevenueChart(_ref) {
579
636
  }, "".concat(id, "-").concat(type, "-").concat(chartSeries.length));
580
637
  };
581
638
 
582
- var TREND_UP_COLOR = "#22C55E";
583
- var TREND_DOWN_COLOR = "#EF4444";
584
- function getTrendDirection(valueOrText) {
585
- var text = String(valueOrText !== null && valueOrText !== void 0 ? valueOrText : "").trim();
586
- if (text.includes("▼")) return "down";
587
- if (text.includes("▲")) return "up";
588
- var match = text.match(/-?\d+(\.\d+)?/);
589
- if (!match) return "neutral";
590
- var n = Number(match[0]);
591
- if (n < 0) return "down";
592
- if (n > 0) return "up";
593
- return "neutral";
594
- }
595
- function getTrendColor(valueOrText) {
596
- var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
597
- _ref$up = _ref.up,
598
- up = _ref$up === void 0 ? TREND_UP_COLOR : _ref$up,
599
- _ref$down = _ref.down,
600
- down = _ref$down === void 0 ? TREND_DOWN_COLOR : _ref$down,
601
- _ref$neutral = _ref.neutral,
602
- neutral = _ref$neutral === void 0 ? up : _ref$neutral;
603
- var direction = getTrendDirection(valueOrText);
604
- if (direction === "down") return down;
605
- if (direction === "up") return up;
606
- return neutral;
607
- }
608
- function getTrendArrow(valueOrText) {
609
- var direction = getTrendDirection(valueOrText);
610
- if (direction === "down") return "▼";
611
- if (direction === "up") return "▲";
612
- return "";
613
- }
614
- function formatNumber(num) {
615
- if (num >= 1000000000) {
616
- return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
617
- }
618
- if (num >= 1000000) {
619
- return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
620
- }
621
- if (num >= 1000) {
622
- return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
623
- }
624
- return (num !== null && num !== void 0 ? num : 0).toString();
625
- }
626
-
627
639
  var RenderChartCard = function RenderChartCard(_ref) {
628
640
  var item = _ref.item,
629
641
  index = _ref.index,
@@ -653,6 +665,22 @@ var RenderChartCard = function RenderChartCard(_ref) {
653
665
  });
654
666
  var trendArrow = getTrendArrow(trendText);
655
667
  var trendBadgeBg = trendColor === "#EF4444" ? "#fee2e2" : "#8df3be9a";
668
+ var resolveChartMetric = function resolveChartMetric() {
669
+ if (item.label.includes("Rate") || item.label.includes("Performance") || item.label.includes("source") || item.label === "URL") {
670
+ return "Percent";
671
+ }
672
+ if (item.isAmount || (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === "revenue") {
673
+ return "Revenue";
674
+ }
675
+ if (item.stacked && item.label.includes("Traffic")) {
676
+ return "Visitors";
677
+ }
678
+ if (item.stacked) {
679
+ return "Donors";
680
+ }
681
+ return metric;
682
+ };
683
+ var chartMetric = resolveChartMetric();
656
684
  return /*#__PURE__*/jsx(Grid, {
657
685
  item: true,
658
686
  xs: 12,
@@ -847,7 +875,8 @@ var RenderChartCard = function RenderChartCard(_ref) {
847
875
  },
848
876
  children: [/*#__PURE__*/jsx(RevenueChart, {
849
877
  id: "".concat(item.label, "-").concat(index),
850
- 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,
878
+ metric: chartMetric,
879
+ isAmount: item.isAmount,
851
880
  data: item.data,
852
881
  series: item.series,
853
882
  categories: item.categories,
@@ -2767,14 +2796,17 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
2767
2796
  var now = new Date();
2768
2797
  var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
2769
2798
  var windowLabel = "".concat(numberOfDays, "-day window");
2770
- var generatedLabel = now.toLocaleDateString("en-US", {
2799
+ var estOptions = {
2800
+ timeZone: "America/New_York"
2801
+ };
2802
+ var generatedLabel = now.toLocaleDateString("en-US", _objectSpread2({
2771
2803
  month: "short",
2772
2804
  day: "numeric",
2773
2805
  year: "numeric"
2774
- }) + " · " + now.toLocaleTimeString("en-US", {
2806
+ }, estOptions)) + " · " + now.toLocaleTimeString("en-US", _objectSpread2({
2775
2807
  hour: "2-digit",
2776
2808
  minute: "2-digit"
2777
- }) + " GMT";
2809
+ }, estOptions)) + " EST";
2778
2810
  var dateLabel = dateName;
2779
2811
  var _normalizeFiltersText = function normalizeFiltersText(filtersInput) {
2780
2812
  if (typeof filtersInput === "string") {
@@ -4728,7 +4760,9 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
4728
4760
  _ref$bottomSection = _ref.bottomSection,
4729
4761
  bottomSection = _ref$bottomSection === void 0 ? false : _ref$bottomSection,
4730
4762
  _ref$compact = _ref.compact,
4731
- compact = _ref$compact === void 0 ? false : _ref$compact;
4763
+ compact = _ref$compact === void 0 ? false : _ref$compact,
4764
+ _ref$isAmount = _ref.isAmount,
4765
+ isAmount = _ref$isAmount === void 0 ? false : _ref$isAmount;
4732
4766
  var resolvedTrendColor = trendColor !== null && trendColor !== void 0 ? trendColor : getTrendColor(trend);
4733
4767
 
4734
4768
  // Extract values for chart series
@@ -4789,13 +4823,13 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
4789
4823
  },
4790
4824
  y: {
4791
4825
  formatter: function formatter(val) {
4792
- if (title !== null && title !== void 0 && title.toLowerCase().includes("revenue")) {
4793
- return "$".concat(Number(val).toLocaleString());
4826
+ if (isAmount || title !== null && title !== void 0 && title.toLowerCase().includes("revenue")) {
4827
+ return formatCurrency(val);
4794
4828
  }
4795
4829
  if (title !== null && title !== void 0 && title.toLowerCase().includes("rate") || title !== null && title !== void 0 && title.toLowerCase().includes("bounce")) {
4796
4830
  return "".concat(val, "%");
4797
4831
  }
4798
- return Number(val).toLocaleString();
4832
+ return Number(val).toLocaleString("en-US");
4799
4833
  }
4800
4834
  },
4801
4835
  marker: {
@@ -6961,6 +6995,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
6961
6995
  value: item.revenue
6962
6996
  };
6963
6997
  })) || [],
6998
+ isAmount: true,
6964
6999
  footerMetrics: [{
6965
7000
  label: "Avg / Day",
6966
7001
  value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.averagePerDay) || 0))
@@ -7003,6 +7038,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
7003
7038
  value: item.revenue
7004
7039
  };
7005
7040
  })) || [],
7041
+ isAmount: true,
7006
7042
  footerMetrics: [{
7007
7043
  label: "Referrers",
7008
7044
  value: formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalReferrers) || 0)
@@ -17805,7 +17841,8 @@ var OverallSection = function OverallSection(_ref) {
17805
17841
  mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
17806
17842
  label: mainChart.label || activeMetric,
17807
17843
  value: selectedInfo.value,
17808
- trend: selectedInfo.subValue
17844
+ trend: selectedInfo.subValue,
17845
+ isAmount: selectedInfo.money
17809
17846
  });
17810
17847
  return /*#__PURE__*/jsxs(Fragment, {
17811
17848
  children: [/*#__PURE__*/jsx(Box, {
@@ -17835,7 +17872,7 @@ var OverallSection = function OverallSection(_ref) {
17835
17872
  isPremium: true,
17836
17873
  isPrimary: true,
17837
17874
  numberOfDays: numberOfDays,
17838
- metric: activeMetric.includes("Raised") || activeMetric.includes("donation") ? "Revenue" : "Donors"
17875
+ metric: activeMetric === "Conversion" ? "Percent" : selectedInfo.money ? "Revenue" : "Donors"
17839
17876
  })
17840
17877
  }), /*#__PURE__*/jsx(OverallDetailsGrid, {
17841
17878
  activeCampaignsRows: activeCampaignsData.map(function (campaign) {