@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.cjs.js
CHANGED
|
@@ -399,6 +399,54 @@ var MetricSelector = function MetricSelector(_ref) {
|
|
|
399
399
|
});
|
|
400
400
|
};
|
|
401
401
|
|
|
402
|
+
var TREND_UP_COLOR = "#22C55E";
|
|
403
|
+
var TREND_DOWN_COLOR = "#EF4444";
|
|
404
|
+
function getTrendDirection(valueOrText) {
|
|
405
|
+
var text = String(valueOrText !== null && valueOrText !== void 0 ? valueOrText : "").trim();
|
|
406
|
+
if (text.includes("▼")) return "down";
|
|
407
|
+
if (text.includes("▲")) return "up";
|
|
408
|
+
var match = text.match(/-?\d+(\.\d+)?/);
|
|
409
|
+
if (!match) return "neutral";
|
|
410
|
+
var n = Number(match[0]);
|
|
411
|
+
if (n < 0) return "down";
|
|
412
|
+
if (n > 0) return "up";
|
|
413
|
+
return "neutral";
|
|
414
|
+
}
|
|
415
|
+
function getTrendColor(valueOrText) {
|
|
416
|
+
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
417
|
+
_ref$up = _ref.up,
|
|
418
|
+
up = _ref$up === void 0 ? TREND_UP_COLOR : _ref$up,
|
|
419
|
+
_ref$down = _ref.down,
|
|
420
|
+
down = _ref$down === void 0 ? TREND_DOWN_COLOR : _ref$down,
|
|
421
|
+
_ref$neutral = _ref.neutral,
|
|
422
|
+
neutral = _ref$neutral === void 0 ? up : _ref$neutral;
|
|
423
|
+
var direction = getTrendDirection(valueOrText);
|
|
424
|
+
if (direction === "down") return down;
|
|
425
|
+
if (direction === "up") return up;
|
|
426
|
+
return neutral;
|
|
427
|
+
}
|
|
428
|
+
function getTrendArrow(valueOrText) {
|
|
429
|
+
var direction = getTrendDirection(valueOrText);
|
|
430
|
+
if (direction === "down") return "▼";
|
|
431
|
+
if (direction === "up") return "▲";
|
|
432
|
+
return "";
|
|
433
|
+
}
|
|
434
|
+
function formatCurrency(value) {
|
|
435
|
+
return "$".concat(Number(value !== null && value !== void 0 ? value : 0).toLocaleString("en-US"));
|
|
436
|
+
}
|
|
437
|
+
function formatNumber(num) {
|
|
438
|
+
if (num >= 1000000000) {
|
|
439
|
+
return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
|
|
440
|
+
}
|
|
441
|
+
if (num >= 1000000) {
|
|
442
|
+
return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
|
|
443
|
+
}
|
|
444
|
+
if (num >= 1000) {
|
|
445
|
+
return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
|
|
446
|
+
}
|
|
447
|
+
return (num !== null && num !== void 0 ? num : 0).toString();
|
|
448
|
+
}
|
|
449
|
+
|
|
402
450
|
var RevenueChart = function RevenueChart(_ref) {
|
|
403
451
|
var metric = _ref.metric,
|
|
404
452
|
data = _ref.data,
|
|
@@ -414,9 +462,18 @@ var RevenueChart = function RevenueChart(_ref) {
|
|
|
414
462
|
id = _ref$id === void 0 ? "revenue-chart" : _ref$id,
|
|
415
463
|
colors = _ref.colors,
|
|
416
464
|
_ref$showLegend = _ref.showLegend,
|
|
417
|
-
showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend
|
|
465
|
+
showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
|
|
466
|
+
_ref$isAmount = _ref.isAmount,
|
|
467
|
+
isAmount = _ref$isAmount === void 0 ? false : _ref$isAmount;
|
|
418
468
|
var theme = styles.useTheme();
|
|
419
469
|
var isRadial = type === 'donut' || type === 'pie';
|
|
470
|
+
var isCurrency = isAmount || (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'revenue';
|
|
471
|
+
var isPercent = (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === 'percent';
|
|
472
|
+
var formatValue = function formatValue(value) {
|
|
473
|
+
if (isCurrency) return formatCurrency(value);
|
|
474
|
+
if (isPercent) return "".concat(Number(value !== null && value !== void 0 ? value : 0).toLocaleString('en-US'), "%");
|
|
475
|
+
return Number(value !== null && value !== void 0 ? value : 0).toLocaleString('en-US');
|
|
476
|
+
};
|
|
420
477
|
|
|
421
478
|
// Base options common to all charts
|
|
422
479
|
var baseOptions = {
|
|
@@ -438,7 +495,7 @@ var RevenueChart = function RevenueChart(_ref) {
|
|
|
438
495
|
theme: 'light',
|
|
439
496
|
y: {
|
|
440
497
|
formatter: function formatter(value) {
|
|
441
|
-
return (
|
|
498
|
+
return formatValue(value);
|
|
442
499
|
}
|
|
443
500
|
}
|
|
444
501
|
}
|
|
@@ -469,7 +526,7 @@ var RevenueChart = function RevenueChart(_ref) {
|
|
|
469
526
|
var sum = w.globals.seriesTotals.reduce(function (a, b) {
|
|
470
527
|
return a + b;
|
|
471
528
|
}, 0);
|
|
472
|
-
return
|
|
529
|
+
return isCurrency ? formatCurrency(Math.round(sum)) : Math.round(sum).toLocaleString('en-US');
|
|
473
530
|
}
|
|
474
531
|
}
|
|
475
532
|
}
|
|
@@ -526,7 +583,7 @@ var RevenueChart = function RevenueChart(_ref) {
|
|
|
526
583
|
fontSize: '12px'
|
|
527
584
|
},
|
|
528
585
|
formatter: function formatter(value) {
|
|
529
|
-
return (
|
|
586
|
+
return formatValue(value);
|
|
530
587
|
}
|
|
531
588
|
}
|
|
532
589
|
},
|
|
@@ -581,51 +638,6 @@ var RevenueChart = function RevenueChart(_ref) {
|
|
|
581
638
|
}, "".concat(id, "-").concat(type, "-").concat(chartSeries.length));
|
|
582
639
|
};
|
|
583
640
|
|
|
584
|
-
var TREND_UP_COLOR = "#22C55E";
|
|
585
|
-
var TREND_DOWN_COLOR = "#EF4444";
|
|
586
|
-
function getTrendDirection(valueOrText) {
|
|
587
|
-
var text = String(valueOrText !== null && valueOrText !== void 0 ? valueOrText : "").trim();
|
|
588
|
-
if (text.includes("▼")) return "down";
|
|
589
|
-
if (text.includes("▲")) return "up";
|
|
590
|
-
var match = text.match(/-?\d+(\.\d+)?/);
|
|
591
|
-
if (!match) return "neutral";
|
|
592
|
-
var n = Number(match[0]);
|
|
593
|
-
if (n < 0) return "down";
|
|
594
|
-
if (n > 0) return "up";
|
|
595
|
-
return "neutral";
|
|
596
|
-
}
|
|
597
|
-
function getTrendColor(valueOrText) {
|
|
598
|
-
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
599
|
-
_ref$up = _ref.up,
|
|
600
|
-
up = _ref$up === void 0 ? TREND_UP_COLOR : _ref$up,
|
|
601
|
-
_ref$down = _ref.down,
|
|
602
|
-
down = _ref$down === void 0 ? TREND_DOWN_COLOR : _ref$down,
|
|
603
|
-
_ref$neutral = _ref.neutral,
|
|
604
|
-
neutral = _ref$neutral === void 0 ? up : _ref$neutral;
|
|
605
|
-
var direction = getTrendDirection(valueOrText);
|
|
606
|
-
if (direction === "down") return down;
|
|
607
|
-
if (direction === "up") return up;
|
|
608
|
-
return neutral;
|
|
609
|
-
}
|
|
610
|
-
function getTrendArrow(valueOrText) {
|
|
611
|
-
var direction = getTrendDirection(valueOrText);
|
|
612
|
-
if (direction === "down") return "▼";
|
|
613
|
-
if (direction === "up") return "▲";
|
|
614
|
-
return "";
|
|
615
|
-
}
|
|
616
|
-
function formatNumber(num) {
|
|
617
|
-
if (num >= 1000000000) {
|
|
618
|
-
return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
|
|
619
|
-
}
|
|
620
|
-
if (num >= 1000000) {
|
|
621
|
-
return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
|
|
622
|
-
}
|
|
623
|
-
if (num >= 1000) {
|
|
624
|
-
return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
|
|
625
|
-
}
|
|
626
|
-
return (num !== null && num !== void 0 ? num : 0).toString();
|
|
627
|
-
}
|
|
628
|
-
|
|
629
641
|
var RenderChartCard = function RenderChartCard(_ref) {
|
|
630
642
|
var item = _ref.item,
|
|
631
643
|
index = _ref.index,
|
|
@@ -655,6 +667,22 @@ var RenderChartCard = function RenderChartCard(_ref) {
|
|
|
655
667
|
});
|
|
656
668
|
var trendArrow = getTrendArrow(trendText);
|
|
657
669
|
var trendBadgeBg = trendColor === "#EF4444" ? "#fee2e2" : "#8df3be9a";
|
|
670
|
+
var resolveChartMetric = function resolveChartMetric() {
|
|
671
|
+
if (item.label.includes("Rate") || item.label.includes("Performance") || item.label.includes("source") || item.label === "URL") {
|
|
672
|
+
return "Percent";
|
|
673
|
+
}
|
|
674
|
+
if (item.isAmount || (metric === null || metric === void 0 ? void 0 : metric.toLowerCase()) === "revenue") {
|
|
675
|
+
return "Revenue";
|
|
676
|
+
}
|
|
677
|
+
if (item.stacked && item.label.includes("Traffic")) {
|
|
678
|
+
return "Visitors";
|
|
679
|
+
}
|
|
680
|
+
if (item.stacked) {
|
|
681
|
+
return "Donors";
|
|
682
|
+
}
|
|
683
|
+
return metric;
|
|
684
|
+
};
|
|
685
|
+
var chartMetric = resolveChartMetric();
|
|
658
686
|
return /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
|
|
659
687
|
item: true,
|
|
660
688
|
xs: 12,
|
|
@@ -849,7 +877,8 @@ var RenderChartCard = function RenderChartCard(_ref) {
|
|
|
849
877
|
},
|
|
850
878
|
children: [/*#__PURE__*/jsxRuntime.jsx(RevenueChart, {
|
|
851
879
|
id: "".concat(item.label, "-").concat(index),
|
|
852
|
-
metric:
|
|
880
|
+
metric: chartMetric,
|
|
881
|
+
isAmount: item.isAmount,
|
|
853
882
|
data: item.data,
|
|
854
883
|
series: item.series,
|
|
855
884
|
categories: item.categories,
|
|
@@ -2769,14 +2798,17 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
|
|
|
2769
2798
|
var now = new Date();
|
|
2770
2799
|
var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
|
|
2771
2800
|
var windowLabel = "".concat(numberOfDays, "-day window");
|
|
2772
|
-
var
|
|
2801
|
+
var estOptions = {
|
|
2802
|
+
timeZone: "America/New_York"
|
|
2803
|
+
};
|
|
2804
|
+
var generatedLabel = now.toLocaleDateString("en-US", _objectSpread2({
|
|
2773
2805
|
month: "short",
|
|
2774
2806
|
day: "numeric",
|
|
2775
2807
|
year: "numeric"
|
|
2776
|
-
}) + " · " + now.toLocaleTimeString("en-US", {
|
|
2808
|
+
}, estOptions)) + " · " + now.toLocaleTimeString("en-US", _objectSpread2({
|
|
2777
2809
|
hour: "2-digit",
|
|
2778
2810
|
minute: "2-digit"
|
|
2779
|
-
}) + "
|
|
2811
|
+
}, estOptions)) + " EST";
|
|
2780
2812
|
var dateLabel = dateName;
|
|
2781
2813
|
var _normalizeFiltersText = function normalizeFiltersText(filtersInput) {
|
|
2782
2814
|
if (typeof filtersInput === "string") {
|
|
@@ -4730,7 +4762,9 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
|
|
|
4730
4762
|
_ref$bottomSection = _ref.bottomSection,
|
|
4731
4763
|
bottomSection = _ref$bottomSection === void 0 ? false : _ref$bottomSection,
|
|
4732
4764
|
_ref$compact = _ref.compact,
|
|
4733
|
-
compact = _ref$compact === void 0 ? false : _ref$compact
|
|
4765
|
+
compact = _ref$compact === void 0 ? false : _ref$compact,
|
|
4766
|
+
_ref$isAmount = _ref.isAmount,
|
|
4767
|
+
isAmount = _ref$isAmount === void 0 ? false : _ref$isAmount;
|
|
4734
4768
|
var resolvedTrendColor = trendColor !== null && trendColor !== void 0 ? trendColor : getTrendColor(trend);
|
|
4735
4769
|
|
|
4736
4770
|
// Extract values for chart series
|
|
@@ -4791,13 +4825,13 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
|
|
|
4791
4825
|
},
|
|
4792
4826
|
y: {
|
|
4793
4827
|
formatter: function formatter(val) {
|
|
4794
|
-
if (title !== null && title !== void 0 && title.toLowerCase().includes("revenue")) {
|
|
4795
|
-
return
|
|
4828
|
+
if (isAmount || title !== null && title !== void 0 && title.toLowerCase().includes("revenue")) {
|
|
4829
|
+
return formatCurrency(val);
|
|
4796
4830
|
}
|
|
4797
4831
|
if (title !== null && title !== void 0 && title.toLowerCase().includes("rate") || title !== null && title !== void 0 && title.toLowerCase().includes("bounce")) {
|
|
4798
4832
|
return "".concat(val, "%");
|
|
4799
4833
|
}
|
|
4800
|
-
return Number(val).toLocaleString();
|
|
4834
|
+
return Number(val).toLocaleString("en-US");
|
|
4801
4835
|
}
|
|
4802
4836
|
},
|
|
4803
4837
|
marker: {
|
|
@@ -6963,6 +6997,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
|
|
|
6963
6997
|
value: item.revenue
|
|
6964
6998
|
};
|
|
6965
6999
|
})) || [],
|
|
7000
|
+
isAmount: true,
|
|
6966
7001
|
footerMetrics: [{
|
|
6967
7002
|
label: "Avg / Day",
|
|
6968
7003
|
value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.averagePerDay) || 0))
|
|
@@ -7005,6 +7040,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
|
|
|
7005
7040
|
value: item.revenue
|
|
7006
7041
|
};
|
|
7007
7042
|
})) || [],
|
|
7043
|
+
isAmount: true,
|
|
7008
7044
|
footerMetrics: [{
|
|
7009
7045
|
label: "Referrers",
|
|
7010
7046
|
value: formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalReferrers) || 0)
|
|
@@ -17807,7 +17843,8 @@ var OverallSection = function OverallSection(_ref) {
|
|
|
17807
17843
|
mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
|
|
17808
17844
|
label: mainChart.label || activeMetric,
|
|
17809
17845
|
value: selectedInfo.value,
|
|
17810
|
-
trend: selectedInfo.subValue
|
|
17846
|
+
trend: selectedInfo.subValue,
|
|
17847
|
+
isAmount: selectedInfo.money
|
|
17811
17848
|
});
|
|
17812
17849
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
17813
17850
|
children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
|
|
@@ -17837,7 +17874,7 @@ var OverallSection = function OverallSection(_ref) {
|
|
|
17837
17874
|
isPremium: true,
|
|
17838
17875
|
isPrimary: true,
|
|
17839
17876
|
numberOfDays: numberOfDays,
|
|
17840
|
-
metric: activeMetric
|
|
17877
|
+
metric: activeMetric === "Conversion" ? "Percent" : selectedInfo.money ? "Revenue" : "Donors"
|
|
17841
17878
|
})
|
|
17842
17879
|
}), /*#__PURE__*/jsxRuntime.jsx(OverallDetailsGrid, {
|
|
17843
17880
|
activeCampaignsRows: activeCampaignsData.map(function (campaign) {
|