@auth0/quantum-charts 1.1.0 → 1.1.2
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/bar-chart/index.js +13 -16
- package/common/chart.d.ts +2 -2
- package/common/chart.js +2 -0
- package/common/custom-tooltip.js +13 -7
- package/esm/bar-chart/index.js +13 -16
- package/esm/common/chart.js +2 -0
- package/esm/common/custom-tooltip.js +13 -7
- package/package.json +1 -1
package/bar-chart/index.js
CHANGED
|
@@ -64,7 +64,7 @@ var chart_card_1 = require("../chart-card");
|
|
|
64
64
|
var chart_1 = require("../common/chart");
|
|
65
65
|
var custom_legend_1 = require("../common/custom-legend");
|
|
66
66
|
function BarChart(props) {
|
|
67
|
-
var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e, additionalMenuItems = _a.additionalMenuItems, tooltipProp = _a.tooltipProp, _f = _a.showTotalValueInTooltip, showTotalValueInTooltip = _f === void 0 ? false : _f, _g = _a.allowDownload, allowDownload = _g === void 0 ? true : _g, _h = _a.showChartTable, showChartTable = _h === void 0 ? true : _h, headerAction = _a.headerAction, customViewChartTable = _a.customViewChartTable;
|
|
67
|
+
var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e, additionalMenuItems = _a.additionalMenuItems, tooltipProp = _a.tooltipProp, _f = _a.showTotalValueInTooltip, showTotalValueInTooltip = _f === void 0 ? false : _f, _g = _a.allowDownload, allowDownload = _g === void 0 ? true : _g, _h = _a.showChartTable, showChartTable = _h === void 0 ? true : _h, headerAction = _a.headerAction, customViewChartTable = _a.customViewChartTable, barSize = _a.barSize;
|
|
68
68
|
var theme = (0, quantum_product_1.useTheme)();
|
|
69
69
|
// Function to know how many bars we need based of how much different group values are.
|
|
70
70
|
var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
|
|
@@ -90,26 +90,23 @@ function BarChart(props) {
|
|
|
90
90
|
var entries = {};
|
|
91
91
|
data.forEach(function (entry) {
|
|
92
92
|
var _a, _b;
|
|
93
|
-
var
|
|
94
|
-
if (entries[
|
|
95
|
-
entries[
|
|
93
|
+
var entryKey = entry[bottomAxisDataKey];
|
|
94
|
+
if (entries[entryKey]) {
|
|
95
|
+
entries[entryKey][entry.group] = entry[leftAxisDataKey];
|
|
96
|
+
entries[entryKey].value = entry[leftAxisDataKey];
|
|
97
|
+
if (entry.isPartial !== undefined) {
|
|
98
|
+
entries[entryKey].isPartial = entry.isPartial;
|
|
99
|
+
}
|
|
96
100
|
}
|
|
97
101
|
else {
|
|
98
|
-
entries[
|
|
99
|
-
_a[bottomAxisDataKey] = entry[bottomAxisDataKey],
|
|
100
|
-
_a[entry.group] = entry[leftAxisDataKey],
|
|
101
|
-
_a);
|
|
102
|
+
entries[entryKey] = __assign((_a = {}, _a[bottomAxisDataKey] = entry[bottomAxisDataKey], _a[entry.group] = entry[leftAxisDataKey], _a.value = entry[leftAxisDataKey], _a), (entry.isPartial !== undefined && { isPartial: entry.isPartial }));
|
|
102
103
|
}
|
|
103
|
-
return _b = {},
|
|
104
|
-
_b[bottomAxisDataKey] = entry[bottomAxisDataKey],
|
|
105
|
-
_b[entry.group] = entry[leftAxisDataKey],
|
|
106
|
-
_b;
|
|
104
|
+
return __assign((_b = {}, _b[bottomAxisDataKey] = entry[bottomAxisDataKey], _b[entry.group] = entry[leftAxisDataKey], _b.value = entry[leftAxisDataKey], _b), (entry.isPartial !== undefined && { isPartial: entry.isPartial }));
|
|
107
105
|
});
|
|
108
106
|
return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, headerAction: headerAction, helperText: helperText, allowDownload: allowDownload, showChartTable: showChartTable, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable },
|
|
109
107
|
React.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: height }, data.length ? (React.createElement(recharts_1.BarChart, { width: 500, layout: layout === 'horizontal' ? 'vertical' : 'horizontal', height: height, data: Object.values(entries), margin: {
|
|
110
108
|
top: 24,
|
|
111
109
|
right: 10,
|
|
112
|
-
left: layout === 'vertical' ? -24 : 36,
|
|
113
110
|
bottom: 0,
|
|
114
111
|
} },
|
|
115
112
|
React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
|
|
@@ -118,11 +115,11 @@ function BarChart(props) {
|
|
|
118
115
|
type: 'category',
|
|
119
116
|
tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); },
|
|
120
117
|
dataKey: bottomAxisDataKey,
|
|
121
|
-
}), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
|
|
122
|
-
React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, {
|
|
118
|
+
}), { tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
|
|
119
|
+
React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
|
|
123
120
|
React.createElement(recharts_1.Legend, { align: "center", content: React.createElement(custom_legend_1.CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
|
|
124
121
|
groups.map(function (group, index) {
|
|
125
|
-
return (React.createElement(recharts_1.Bar, __assign({ key: group, dataKey: group }, (isStacked && { stackId: 'stack' }), { name: group,
|
|
122
|
+
return (React.createElement(recharts_1.Bar, __assign({ key: group, dataKey: group, barSize: barSize }, (isStacked && { stackId: 'stack' }), { name: group, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
|
|
126
123
|
? (0, theme_1.getColorScale)(theme)[color]['base'][index]
|
|
127
124
|
: (0, theme_1.getColorScale)(theme)[color]['muted'][index] })));
|
|
128
125
|
}))) : (React.createElement("div", { style: {
|
package/common/chart.d.ts
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import { TooltipProps } from 'recharts';
|
|
3
3
|
import { IChartCardProps } from '../chart-card';
|
|
4
4
|
import { DropdownMenuListItemValue } from '@auth0/quantum-product';
|
|
5
|
-
export type ScaleType = 'date' | 'datetime' | 'label' | 'number';
|
|
5
|
+
export type ScaleType = 'date' | 'datetime' | 'label' | 'number' | 'monthyear';
|
|
6
6
|
export interface ICustomTooltipProps extends TooltipProps<number, string> {
|
|
7
|
-
scaleType?: 'datetime' | 'date' | 'label';
|
|
7
|
+
scaleType?: 'datetime' | 'date' | 'label' | 'monthyear';
|
|
8
8
|
showTotalValue?: boolean;
|
|
9
9
|
tooltipProp?: {
|
|
10
10
|
tooltipHeader?: React.ReactElement;
|
package/common/chart.js
CHANGED
|
@@ -25,6 +25,8 @@ var tickFormatter = function (value, scaleType) {
|
|
|
25
25
|
return (0, date_fns_1.format)(new Date(value), 'LLL d');
|
|
26
26
|
case 'datetime':
|
|
27
27
|
return (0, date_fns_1.format)(new Date(value), 'LLL d p');
|
|
28
|
+
case 'monthyear':
|
|
29
|
+
return (0, date_fns_1.format)(new Date(value), 'LLL yyyy');
|
|
28
30
|
default:
|
|
29
31
|
break;
|
|
30
32
|
}
|
package/common/custom-tooltip.js
CHANGED
|
@@ -32,19 +32,25 @@ var custom_color_status_dot_1 = __importDefault(require("./custom-color-status-d
|
|
|
32
32
|
var date_fns_1 = require("date-fns");
|
|
33
33
|
var styles_1 = require("../styles");
|
|
34
34
|
var CustomTooltip = function (props) {
|
|
35
|
-
var _a, _b, _c;
|
|
35
|
+
var _a, _b, _c, _d;
|
|
36
36
|
var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label, tooltipProp = props.tooltipProp, showTotalValue = props.showTotalValue;
|
|
37
37
|
var theme = (0, quantum_product_1.useTheme)();
|
|
38
38
|
if (active && payload && payload.length) {
|
|
39
39
|
var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
|
|
40
40
|
? scaleType === 'datetime'
|
|
41
41
|
? "".concat((0, date_fns_1.format)(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
|
|
42
|
-
: scaleType === '
|
|
43
|
-
?
|
|
44
|
-
:
|
|
42
|
+
: scaleType === 'monthyear'
|
|
43
|
+
? "".concat((0, date_fns_1.format)(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL yyyy'))
|
|
44
|
+
: scaleType === 'label'
|
|
45
|
+
? labelProp
|
|
46
|
+
: "".concat((0, date_fns_1.format)(new Date((_d = payload[0].payload) === null || _d === void 0 ? void 0 : _d.date), 'LLL d'))
|
|
45
47
|
: labelProp;
|
|
46
|
-
var
|
|
48
|
+
var formatValue_1 = function (value) {
|
|
49
|
+
return value % 1 !== 0 ? parseFloat(value.toFixed(2)) : value;
|
|
50
|
+
};
|
|
51
|
+
var totalValue = formatValue_1(payload.reduce(function (total, item) { return total + (item.value || 0); }, 0));
|
|
47
52
|
var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
|
|
53
|
+
var showTooltipFooter = payload.some(function (item) { return item.payload.isPartial !== false; });
|
|
48
54
|
return (React.createElement(styles_1.CustomTooltip, null,
|
|
49
55
|
(tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipHeader) && (React.createElement(React.Fragment, null,
|
|
50
56
|
tooltipProp.tooltipHeader,
|
|
@@ -59,12 +65,12 @@ var CustomTooltip = function (props) {
|
|
|
59
65
|
.map(function (x, index) {
|
|
60
66
|
return (React.createElement(quantum_product_1.StackLayout, { key: index, gutter: 0.5 },
|
|
61
67
|
React.createElement(custom_color_status_dot_1.default, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + ' ' }),
|
|
62
|
-
React.createElement(quantum_product_1.Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey
|
|
68
|
+
React.createElement(quantum_product_1.Text, { color: "text.secondary", alignItems: 'end' }, x.dataKey ? formatValue_1(x.payload[x.dataKey]) : ''),
|
|
63
69
|
x.payload['evaluated_group'] === x.dataKey &&
|
|
64
70
|
x.payload['breachedPoint'] !== 'none' &&
|
|
65
71
|
(x.payload['breachedPoint'] === 'alert' ? (React.createElement(quantum_product_1.AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(quantum_product_1.AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
|
|
66
72
|
}))),
|
|
67
|
-
(tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
|
|
73
|
+
(tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && showTooltipFooter && (React.createElement(React.Fragment, null,
|
|
68
74
|
React.createElement(quantum_product_1.Divider, null),
|
|
69
75
|
tooltipProp.tooltipFooter))));
|
|
70
76
|
}
|
package/esm/bar-chart/index.js
CHANGED
|
@@ -35,7 +35,7 @@ import { ChartCard } from '../chart-card';
|
|
|
35
35
|
import { tickFormatter } from '../common/chart';
|
|
36
36
|
import { CustomLegend } from '../common/custom-legend';
|
|
37
37
|
export function BarChart(props) {
|
|
38
|
-
var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e, additionalMenuItems = _a.additionalMenuItems, tooltipProp = _a.tooltipProp, _f = _a.showTotalValueInTooltip, showTotalValueInTooltip = _f === void 0 ? false : _f, _g = _a.allowDownload, allowDownload = _g === void 0 ? true : _g, _h = _a.showChartTable, showChartTable = _h === void 0 ? true : _h, headerAction = _a.headerAction, customViewChartTable = _a.customViewChartTable;
|
|
38
|
+
var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e, additionalMenuItems = _a.additionalMenuItems, tooltipProp = _a.tooltipProp, _f = _a.showTotalValueInTooltip, showTotalValueInTooltip = _f === void 0 ? false : _f, _g = _a.allowDownload, allowDownload = _g === void 0 ? true : _g, _h = _a.showChartTable, showChartTable = _h === void 0 ? true : _h, headerAction = _a.headerAction, customViewChartTable = _a.customViewChartTable, barSize = _a.barSize;
|
|
39
39
|
var theme = useTheme();
|
|
40
40
|
// Function to know how many bars we need based of how much different group values are.
|
|
41
41
|
var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
|
|
@@ -61,26 +61,23 @@ export function BarChart(props) {
|
|
|
61
61
|
var entries = {};
|
|
62
62
|
data.forEach(function (entry) {
|
|
63
63
|
var _a, _b;
|
|
64
|
-
var
|
|
65
|
-
if (entries[
|
|
66
|
-
entries[
|
|
64
|
+
var entryKey = entry[bottomAxisDataKey];
|
|
65
|
+
if (entries[entryKey]) {
|
|
66
|
+
entries[entryKey][entry.group] = entry[leftAxisDataKey];
|
|
67
|
+
entries[entryKey].value = entry[leftAxisDataKey];
|
|
68
|
+
if (entry.isPartial !== undefined) {
|
|
69
|
+
entries[entryKey].isPartial = entry.isPartial;
|
|
70
|
+
}
|
|
67
71
|
}
|
|
68
72
|
else {
|
|
69
|
-
entries[
|
|
70
|
-
_a[bottomAxisDataKey] = entry[bottomAxisDataKey],
|
|
71
|
-
_a[entry.group] = entry[leftAxisDataKey],
|
|
72
|
-
_a);
|
|
73
|
+
entries[entryKey] = __assign((_a = {}, _a[bottomAxisDataKey] = entry[bottomAxisDataKey], _a[entry.group] = entry[leftAxisDataKey], _a.value = entry[leftAxisDataKey], _a), (entry.isPartial !== undefined && { isPartial: entry.isPartial }));
|
|
73
74
|
}
|
|
74
|
-
return _b = {},
|
|
75
|
-
_b[bottomAxisDataKey] = entry[bottomAxisDataKey],
|
|
76
|
-
_b[entry.group] = entry[leftAxisDataKey],
|
|
77
|
-
_b;
|
|
75
|
+
return __assign((_b = {}, _b[bottomAxisDataKey] = entry[bottomAxisDataKey], _b[entry.group] = entry[leftAxisDataKey], _b.value = entry[leftAxisDataKey], _b), (entry.isPartial !== undefined && { isPartial: entry.isPartial }));
|
|
78
76
|
});
|
|
79
77
|
return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, headerAction: headerAction, helperText: helperText, allowDownload: allowDownload, showChartTable: showChartTable, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable },
|
|
80
78
|
React.createElement(ResponsiveContainer, { width: "100%", height: height }, data.length ? (React.createElement(RechartsBarChart, { width: 500, layout: layout === 'horizontal' ? 'vertical' : 'horizontal', height: height, data: Object.values(entries), margin: {
|
|
81
79
|
top: 24,
|
|
82
80
|
right: 10,
|
|
83
|
-
left: layout === 'vertical' ? -24 : 36,
|
|
84
81
|
bottom: 0,
|
|
85
82
|
} },
|
|
86
83
|
React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
|
|
@@ -89,11 +86,11 @@ export function BarChart(props) {
|
|
|
89
86
|
type: 'category',
|
|
90
87
|
tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); },
|
|
91
88
|
dataKey: bottomAxisDataKey,
|
|
92
|
-
}), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
|
|
93
|
-
React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, {
|
|
89
|
+
}), { tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
|
|
90
|
+
React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
|
|
94
91
|
React.createElement(Legend, { align: "center", content: React.createElement(CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
|
|
95
92
|
groups.map(function (group, index) {
|
|
96
|
-
return (React.createElement(Bar, __assign({ key: group, dataKey: group }, (isStacked && { stackId: 'stack' }), { name: group,
|
|
93
|
+
return (React.createElement(Bar, __assign({ key: group, dataKey: group, barSize: barSize }, (isStacked && { stackId: 'stack' }), { name: group, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
|
|
97
94
|
? getColorScale(theme)[color]['base'][index]
|
|
98
95
|
: getColorScale(theme)[color]['muted'][index] })));
|
|
99
96
|
}))) : (React.createElement("div", { style: {
|
package/esm/common/chart.js
CHANGED
|
@@ -22,6 +22,8 @@ export var tickFormatter = function (value, scaleType) {
|
|
|
22
22
|
return format(new Date(value), 'LLL d');
|
|
23
23
|
case 'datetime':
|
|
24
24
|
return format(new Date(value), 'LLL d p');
|
|
25
|
+
case 'monthyear':
|
|
26
|
+
return format(new Date(value), 'LLL yyyy');
|
|
25
27
|
default:
|
|
26
28
|
break;
|
|
27
29
|
}
|
|
@@ -4,19 +4,25 @@ import StatusDot from './custom-color-status-dot';
|
|
|
4
4
|
import { format } from 'date-fns';
|
|
5
5
|
import { CustomTooltip as CustomTooltipStyled } from '../styles';
|
|
6
6
|
var CustomTooltip = function (props) {
|
|
7
|
-
var _a, _b, _c;
|
|
7
|
+
var _a, _b, _c, _d;
|
|
8
8
|
var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label, tooltipProp = props.tooltipProp, showTotalValue = props.showTotalValue;
|
|
9
9
|
var theme = useTheme();
|
|
10
10
|
if (active && payload && payload.length) {
|
|
11
11
|
var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
|
|
12
12
|
? scaleType === 'datetime'
|
|
13
13
|
? "".concat(format(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
|
|
14
|
-
: scaleType === '
|
|
15
|
-
?
|
|
16
|
-
:
|
|
14
|
+
: scaleType === 'monthyear'
|
|
15
|
+
? "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL yyyy'))
|
|
16
|
+
: scaleType === 'label'
|
|
17
|
+
? labelProp
|
|
18
|
+
: "".concat(format(new Date((_d = payload[0].payload) === null || _d === void 0 ? void 0 : _d.date), 'LLL d'))
|
|
17
19
|
: labelProp;
|
|
18
|
-
var
|
|
20
|
+
var formatValue_1 = function (value) {
|
|
21
|
+
return value % 1 !== 0 ? parseFloat(value.toFixed(2)) : value;
|
|
22
|
+
};
|
|
23
|
+
var totalValue = formatValue_1(payload.reduce(function (total, item) { return total + (item.value || 0); }, 0));
|
|
19
24
|
var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
|
|
25
|
+
var showTooltipFooter = payload.some(function (item) { return item.payload.isPartial !== false; });
|
|
20
26
|
return (React.createElement(CustomTooltipStyled, null,
|
|
21
27
|
(tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipHeader) && (React.createElement(React.Fragment, null,
|
|
22
28
|
tooltipProp.tooltipHeader,
|
|
@@ -31,12 +37,12 @@ var CustomTooltip = function (props) {
|
|
|
31
37
|
.map(function (x, index) {
|
|
32
38
|
return (React.createElement(StackLayout, { key: index, gutter: 0.5 },
|
|
33
39
|
React.createElement(StatusDot, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + ' ' }),
|
|
34
|
-
React.createElement(Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey
|
|
40
|
+
React.createElement(Text, { color: "text.secondary", alignItems: 'end' }, x.dataKey ? formatValue_1(x.payload[x.dataKey]) : ''),
|
|
35
41
|
x.payload['evaluated_group'] === x.dataKey &&
|
|
36
42
|
x.payload['breachedPoint'] !== 'none' &&
|
|
37
43
|
(x.payload['breachedPoint'] === 'alert' ? (React.createElement(AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
|
|
38
44
|
}))),
|
|
39
|
-
(tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
|
|
45
|
+
(tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && showTooltipFooter && (React.createElement(React.Fragment, null,
|
|
40
46
|
React.createElement(Divider, null),
|
|
41
47
|
tooltipProp.tooltipFooter))));
|
|
42
48
|
}
|