@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/MetricCard.cjs.js.map +1 -1
- package/dist/MetricCard.es.js.map +1 -1
- package/dist/RenderChartCard.cjs.js +67 -38
- package/dist/RenderChartCard.cjs.js.map +1 -1
- package/dist/RenderChartCard.es.js +67 -38
- package/dist/RenderChartCard.es.js.map +1 -1
- package/dist/index.cjs.js +96 -59
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +96 -59
- package/dist/index.es.js.map +1 -1
- package/package.json +1 -1
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 (
|
|
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
|
|
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 (
|
|
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:
|
|
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
|
|
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
|
-
}) + "
|
|
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
|
|
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
|
|
17875
|
+
metric: activeMetric === "Conversion" ? "Percent" : selectedInfo.money ? "Revenue" : "Donors"
|
|
17839
17876
|
})
|
|
17840
17877
|
}), /*#__PURE__*/jsx(OverallDetailsGrid, {
|
|
17841
17878
|
activeCampaignsRows: activeCampaignsData.map(function (campaign) {
|