@auth0/quantum-charts 0.3.4 → 1.0.1
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/common/custom-legend.js +7 -6
- package/common/custom-tooltip.js +10 -2
- package/esm/common/custom-legend.js +7 -6
- package/esm/common/custom-tooltip.js +11 -3
- package/esm/line-chart/custom-threshold-legend.js +1 -3
- package/esm/line-chart/index.js +93 -30
- package/line-chart/custom-threshold-legend.js +1 -3
- package/line-chart/index.d.ts +2 -2
- package/line-chart/index.js +91 -28
- package/package.json +2 -2
- package/esm/line-chart/custom-threshold-label.js +0 -9
- package/line-chart/custom-threshold-label.d.ts +0 -7
- package/line-chart/custom-threshold-label.js +0 -36
package/common/custom-legend.js
CHANGED
|
@@ -61,12 +61,13 @@ var LegendIcon = (0, quantum_product_1.styled)('div')(function (_a) {
|
|
|
61
61
|
})));
|
|
62
62
|
});
|
|
63
63
|
var CustomLegend = function (props) {
|
|
64
|
-
var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility
|
|
64
|
+
var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility;
|
|
65
|
+
var hiddenKeysPattern = /_hidden/;
|
|
65
66
|
return (React.createElement(Root, { gutter: 1 },
|
|
66
|
-
React.createElement(quantum_product_1.StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 },
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
67
|
+
React.createElement(quantum_product_1.StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 }, payload
|
|
68
|
+
.filter(function (item) { return !hiddenKeysPattern.test("".concat(item.dataKey)); })
|
|
69
|
+
.map(function (entry, index) { return (React.createElement(quantum_product_1.StackLayout, { key: index, sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1, onClick: function () { return selectData(entry); }, onMouseEnter: function () { return handleLegendMouseEnter(entry); }, onMouseLeave: function () { return handleLegendMouseLeave(entry); } },
|
|
70
|
+
entry.dataKey === 'thresholdControl' ? (React.createElement(custom_threshold_legend_1.default, null)) : (React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } })),
|
|
71
|
+
React.createElement(quantum_product_1.Text, { variant: "body2" }, entry.value))); }))));
|
|
71
72
|
};
|
|
72
73
|
exports.CustomLegend = CustomLegend;
|
package/common/custom-tooltip.js
CHANGED
|
@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
var React = __importStar(require("react"));
|
|
30
|
+
var icon_1 = require("@auth0/quantum-product/src/icon");
|
|
30
31
|
var quantum_product_1 = require("@auth0/quantum-product");
|
|
31
32
|
var custom_color_status_dot_1 = __importDefault(require("./custom-color-status-dot"));
|
|
32
33
|
var date_fns_1 = require("date-fns");
|
|
@@ -34,19 +35,26 @@ var styles_1 = require("../styles");
|
|
|
34
35
|
var CustomTooltip = function (props) {
|
|
35
36
|
var _a, _b, _c;
|
|
36
37
|
var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label;
|
|
38
|
+
var theme = (0, quantum_product_1.useTheme)();
|
|
37
39
|
if (active && payload && payload.length) {
|
|
38
40
|
var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
|
|
39
41
|
? scaleType === 'datetime'
|
|
40
42
|
? "".concat((0, date_fns_1.format)(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
|
|
41
43
|
: "".concat((0, date_fns_1.format)(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
|
|
42
44
|
: labelProp;
|
|
45
|
+
var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
|
|
43
46
|
return (React.createElement(styles_1.CustomTooltip, null,
|
|
44
47
|
React.createElement(quantum_product_1.Text, { color: "text.secondary" }, label),
|
|
45
48
|
React.createElement(quantum_product_1.Box, null,
|
|
46
|
-
React.createElement(quantum_product_1.RowLayout, { gutter: 1 }, payload
|
|
49
|
+
React.createElement(quantum_product_1.RowLayout, { gutter: 1 }, payload
|
|
50
|
+
.filter(function (item) { return !hiddenKeysPattern_1.test("".concat(item.dataKey)); })
|
|
51
|
+
.map(function (x, index) {
|
|
47
52
|
return (React.createElement(quantum_product_1.StackLayout, { key: index, gutter: 0.5 },
|
|
48
53
|
React.createElement(custom_color_status_dot_1.default, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + ' ' }),
|
|
49
|
-
React.createElement(quantum_product_1.Text, { color: "text.secondary" }, x.payload[x.
|
|
54
|
+
React.createElement(quantum_product_1.Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey || '']),
|
|
55
|
+
x.payload['evaluated_metric'] === x.dataKey &&
|
|
56
|
+
x.payload['breachedPoint'] !== 'none' &&
|
|
57
|
+
(x.payload['breachedPoint'] === 'alert' ? (React.createElement(icon_1.AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(icon_1.AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
|
|
50
58
|
})))));
|
|
51
59
|
}
|
|
52
60
|
return null;
|
|
@@ -32,11 +32,12 @@ var LegendIcon = styled('div')(function (_a) {
|
|
|
32
32
|
})));
|
|
33
33
|
});
|
|
34
34
|
export var CustomLegend = function (props) {
|
|
35
|
-
var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility
|
|
35
|
+
var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility;
|
|
36
|
+
var hiddenKeysPattern = /_hidden/;
|
|
36
37
|
return (React.createElement(Root, { gutter: 1 },
|
|
37
|
-
React.createElement(StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 },
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
(
|
|
38
|
+
React.createElement(StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 }, payload
|
|
39
|
+
.filter(function (item) { return !hiddenKeysPattern.test("".concat(item.dataKey)); })
|
|
40
|
+
.map(function (entry, index) { return (React.createElement(StackLayout, { key: index, sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1, onClick: function () { return selectData(entry); }, onMouseEnter: function () { return handleLegendMouseEnter(entry); }, onMouseLeave: function () { return handleLegendMouseLeave(entry); } },
|
|
41
|
+
entry.dataKey === 'thresholdControl' ? (React.createElement(CustomThresholdLegend, null)) : (React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } })),
|
|
42
|
+
React.createElement(Text, { variant: "body2" }, entry.value))); }))));
|
|
42
43
|
};
|
|
@@ -1,24 +1,32 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { AlertTriangleFilledIcon, AlertDiamondFilledIcon } from '@auth0/quantum-product/src/icon';
|
|
3
|
+
import { Box, RowLayout, StackLayout, Text, useTheme } from '@auth0/quantum-product';
|
|
3
4
|
import StatusDot from './custom-color-status-dot';
|
|
4
5
|
import { format } from 'date-fns';
|
|
5
6
|
import { CustomTooltip as CustomTooltipStyled } from '../styles';
|
|
6
7
|
var CustomTooltip = function (props) {
|
|
7
8
|
var _a, _b, _c;
|
|
8
9
|
var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label;
|
|
10
|
+
var theme = useTheme();
|
|
9
11
|
if (active && payload && payload.length) {
|
|
10
12
|
var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
|
|
11
13
|
? scaleType === 'datetime'
|
|
12
14
|
? "".concat(format(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
|
|
13
15
|
: "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
|
|
14
16
|
: labelProp;
|
|
17
|
+
var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
|
|
15
18
|
return (React.createElement(CustomTooltipStyled, null,
|
|
16
19
|
React.createElement(Text, { color: "text.secondary" }, label),
|
|
17
20
|
React.createElement(Box, null,
|
|
18
|
-
React.createElement(RowLayout, { gutter: 1 }, payload
|
|
21
|
+
React.createElement(RowLayout, { gutter: 1 }, payload
|
|
22
|
+
.filter(function (item) { return !hiddenKeysPattern_1.test("".concat(item.dataKey)); })
|
|
23
|
+
.map(function (x, index) {
|
|
19
24
|
return (React.createElement(StackLayout, { key: index, gutter: 0.5 },
|
|
20
25
|
React.createElement(StatusDot, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + ' ' }),
|
|
21
|
-
React.createElement(Text, { color: "text.secondary" }, x.payload[x.
|
|
26
|
+
React.createElement(Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey || '']),
|
|
27
|
+
x.payload['evaluated_metric'] === x.dataKey &&
|
|
28
|
+
x.payload['breachedPoint'] !== 'none' &&
|
|
29
|
+
(x.payload['breachedPoint'] === 'alert' ? (React.createElement(AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
|
|
22
30
|
})))));
|
|
23
31
|
}
|
|
24
32
|
return null;
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { Text } from '@auth0/quantum-product';
|
|
3
2
|
var CustomThresholdLegend = function () {
|
|
4
3
|
return (React.createElement(React.Fragment, null,
|
|
5
4
|
React.createElement("svg", { width: "14", height: "2", viewBox: "0 0 14 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
6
5
|
React.createElement("rect", { width: "6", height: "2", rx: "1", fill: "#191919" }),
|
|
7
|
-
React.createElement("rect", { x: "8", width: "6", height: "2", rx: "1", fill: "#191919" }))
|
|
8
|
-
React.createElement(Text, { variant: "body2" }, "Threshold")));
|
|
6
|
+
React.createElement("rect", { x: "8", width: "6", height: "2", rx: "1", fill: "#191919" }))));
|
|
9
7
|
};
|
|
10
8
|
export default CustomThresholdLegend;
|
package/esm/line-chart/index.js
CHANGED
|
@@ -27,25 +27,26 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
27
27
|
};
|
|
28
28
|
import _ from 'lodash';
|
|
29
29
|
import * as React from 'react';
|
|
30
|
-
import { CartesianGrid,
|
|
31
|
-
import { useTheme, Text } from '@auth0/quantum-product';
|
|
30
|
+
import { Area, CartesianGrid, ComposedChart, Legend, Line, ReferenceArea, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
|
|
31
|
+
import { useTheme, Text, DropdownMenu, useDropdownMenuState, Button, StackLayout, Divider, ChevronDownIcon, AlertDiamondIcon, } from '@auth0/quantum-product';
|
|
32
32
|
import { getColorScale } from '../theme';
|
|
33
33
|
import CustomActiveDot from './custom-active-dot';
|
|
34
34
|
import CustomTooltip from '../common/custom-tooltip';
|
|
35
|
-
import { CustomThresholdLabel } from './custom-threshold-label';
|
|
36
35
|
import { ChartCard } from '../chart-card';
|
|
37
36
|
import { tickFormatter } from '../common/chart';
|
|
38
37
|
import { CustomLegend } from '../common/custom-legend';
|
|
39
38
|
export function LineChart(props) {
|
|
40
|
-
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.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems,
|
|
39
|
+
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.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, thresholds = _a.thresholds, breaches = _a.breaches;
|
|
41
40
|
var theme = useTheme();
|
|
41
|
+
var _e = useDropdownMenuState({ baseId: 'threshold-menu' }), triggerProps = _e.triggerProps, menuProps = _e.menuProps;
|
|
42
42
|
// Function to know how many lines we need based of how much different group values are.
|
|
43
43
|
var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
|
|
44
44
|
var initialState = __assign({ hover: null }, groups.reduce(function (acc, group) {
|
|
45
45
|
var _a;
|
|
46
46
|
return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
|
|
47
47
|
}, {}));
|
|
48
|
-
var
|
|
48
|
+
var _f = __read(React.useState(initialState), 2), lineVisibility = _f[0], setLineVisibility = _f[1];
|
|
49
|
+
var _g = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _g[0], setThreshold = _g[1];
|
|
49
50
|
var handleLegendMouseEnter = function (e) {
|
|
50
51
|
if (!lineVisibility[e.dataKey]) {
|
|
51
52
|
setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
|
|
@@ -58,6 +59,19 @@ export function LineChart(props) {
|
|
|
58
59
|
var _a;
|
|
59
60
|
setLineVisibility(__assign(__assign({}, lineVisibility), (_a = {}, _a[e.dataKey] = !lineVisibility[e.dataKey], _a.hover = null, _a)));
|
|
60
61
|
};
|
|
62
|
+
var getThresholdData = function (threshold, entry) {
|
|
63
|
+
var ewma = entry.ewma, stdDev = entry.stdDev;
|
|
64
|
+
var usePercentage = threshold.alert_threshold_unit === 'PERCENT';
|
|
65
|
+
var getThreshold = function (thresholdValue) { return (usePercentage ? (ewma * thresholdValue) / 100 : stdDev * thresholdValue); };
|
|
66
|
+
var alertThreshold = getThreshold(threshold.alert_threshold_value);
|
|
67
|
+
var warnThreshold = getThreshold(threshold.warn_threshold_value);
|
|
68
|
+
return {
|
|
69
|
+
ewma_hidden: threshold.threshold_trigger === 'ABOVE' ? entry.ewma : entry.ewma - alertThreshold,
|
|
70
|
+
alertThreshold_hidden: alertThreshold,
|
|
71
|
+
warnBuffer_hidden: alertThreshold - warnThreshold,
|
|
72
|
+
warnThreshold_hidden: warnThreshold,
|
|
73
|
+
};
|
|
74
|
+
};
|
|
61
75
|
var bottomAxisDataKey = bottomAxis.mapsTo || 'date';
|
|
62
76
|
var leftAxisDataKey = leftAxis.mapsTo || 'value';
|
|
63
77
|
var entries = {};
|
|
@@ -73,34 +87,83 @@ export function LineChart(props) {
|
|
|
73
87
|
_a[entry.group] = entry[leftAxisDataKey],
|
|
74
88
|
_a);
|
|
75
89
|
}
|
|
90
|
+
if ((threshold === null || threshold === void 0 ? void 0 : threshold.evaluated_metric) === entry.group) {
|
|
91
|
+
var _c = getThresholdData(threshold, entry), ewma_hidden = _c.ewma_hidden, alertThreshold_hidden = _c.alertThreshold_hidden, warnBuffer_hidden = _c.warnBuffer_hidden, warnThreshold_hidden = _c.warnThreshold_hidden;
|
|
92
|
+
entries[entrytKey].thresholdControl = true;
|
|
93
|
+
entries[entrytKey].breachedPoint = entry.breachedPoint;
|
|
94
|
+
// _hidden suffix is used to hide a dataKey from the tooltips and legend
|
|
95
|
+
entries[entrytKey].ewma_hidden = ewma_hidden;
|
|
96
|
+
entries[entrytKey].alertThreshold_hidden = alertThreshold_hidden;
|
|
97
|
+
entries[entrytKey].warnThreshold_hidden = warnThreshold_hidden;
|
|
98
|
+
if (threshold.threshold_trigger === 'BELOW') {
|
|
99
|
+
entries[entrytKey].warnBuffer_hidden = warnBuffer_hidden;
|
|
100
|
+
entries[entrytKey].warnThreshold_hidden = 0;
|
|
101
|
+
}
|
|
102
|
+
entries[entrytKey].evaluated_metric = threshold.evaluated_metric;
|
|
103
|
+
}
|
|
76
104
|
return _b = {},
|
|
77
105
|
_b[bottomAxisDataKey] = entry[bottomAxisDataKey],
|
|
78
106
|
_b[entry.group] = entry[leftAxisDataKey],
|
|
79
107
|
_b;
|
|
80
108
|
});
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
109
|
+
var menuItems = React.useMemo(function () {
|
|
110
|
+
var menuItems = [];
|
|
111
|
+
if (thresholds) {
|
|
112
|
+
menuItems = thresholds.map(function (threshold) { return ({
|
|
113
|
+
title: threshold.threshold_label,
|
|
114
|
+
onClick: function (event) {
|
|
115
|
+
setThreshold(threshold);
|
|
116
|
+
if (menuProps.onClose) {
|
|
117
|
+
menuProps.onClose(event, 'itemSelect');
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
}); });
|
|
121
|
+
}
|
|
122
|
+
return menuItems;
|
|
123
|
+
}, [thresholds, menuProps]);
|
|
124
|
+
var headerActionWithThresholdDropdown = (React.createElement(StackLayout, { gutter: 1 },
|
|
125
|
+
React.createElement(Button, __assign({}, triggerProps, { startIcon: React.createElement(AlertDiamondIcon, null), endIcon: React.createElement(ChevronDownIcon, null), disabled: !threshold, variant: 'outlined', label: threshold ? threshold.threshold_label : 'No threshold' })),
|
|
126
|
+
React.createElement(DropdownMenu, __assign({}, menuProps, { items: menuItems })),
|
|
127
|
+
headerAction && React.createElement(Divider, { orientation: "vertical" }),
|
|
128
|
+
headerAction));
|
|
129
|
+
return (React.createElement(React.Fragment, null,
|
|
130
|
+
React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: (groups === null || groups === void 0 ? void 0 : groups.length) > 1 ? headerActionWithThresholdDropdown : headerAction, additionalMenuItems: additionalMenuItems },
|
|
131
|
+
React.createElement(ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
|
|
132
|
+
top: 24,
|
|
133
|
+
right: 10,
|
|
134
|
+
left: -24,
|
|
135
|
+
bottom: 0,
|
|
136
|
+
} },
|
|
137
|
+
React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
|
|
138
|
+
React.createElement(XAxis, { tickFormatter: function (value) { return tickFormatter(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "preserveStartEnd", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(3), axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } }),
|
|
139
|
+
React.createElement(YAxis, { tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], width: 78, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } }),
|
|
140
|
+
React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
|
|
141
|
+
legend && (React.createElement(Legend, { align: "center", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(CustomLegend, { selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility }) })),
|
|
142
|
+
groups.map(function (group, index) {
|
|
143
|
+
return (React.createElement(Line, { key: group, dataKey: group, name: group, strokeWidth: 3, hide: lineVisibility[group] === true, stroke: lineVisibility.hover === group || !lineVisibility.hover
|
|
144
|
+
? getColorScale(theme)[color]['base'][index]
|
|
145
|
+
: getColorScale(theme)[color]['muted'][index], dot: false, activeDot: CustomActiveDot() }));
|
|
146
|
+
}),
|
|
147
|
+
threshold && (React.createElement(React.Fragment, null,
|
|
148
|
+
React.createElement(Area, { type: "monotone", dataKey: 'thresholdControl', name: "".concat(threshold.threshold_label), stroke: "none", fill: "none", isAnimationActive: false, dot: false, activeDot: false }),
|
|
149
|
+
React.createElement(Area, { type: "monotone", dataKey: 'ewma_hidden', name: "Exponential Weighted Moving Average", stroke: "none", fill: "none", isAnimationActive: false, stackId: 1, dot: false, activeDot: false }),
|
|
150
|
+
React.createElement(Area, { type: "monotone", dataKey: "alertThreshold_hidden", name: "Alert Threshold", fill: theme.tokens.color_bg_state_info, fillOpacity: 0.2, stroke: "none", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 1 }),
|
|
151
|
+
threshold.warn_threshold_value && (React.createElement(React.Fragment, null,
|
|
152
|
+
React.createElement(Area, { type: "monotone", dataKey: 'ewma_hidden', name: "Exponential Weighted Moving Average", stroke: "none", fill: "none", isAnimationActive: false, stackId: 2, dot: false, activeDot: false }),
|
|
153
|
+
React.createElement(Area, { type: "monotone", dataKey: 'warnBuffer_hidden', stroke: "none", fill: "none", isAnimationActive: false, stackId: 2, dot: false, activeDot: false }),
|
|
154
|
+
React.createElement(Area, { type: "monotone", dataKey: "warnThreshold_hidden", name: "Warn Threshold", fill: 'none', fillOpacity: 0.2, stroke: theme.tokens.color_fg_state_caution, strokeWidth: 2, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 2 }))))),
|
|
155
|
+
breaches &&
|
|
156
|
+
threshold &&
|
|
157
|
+
breaches[threshold.evaluated_metric].map(function (breach, index) {
|
|
158
|
+
return (React.createElement(React.Fragment, null,
|
|
159
|
+
React.createElement(ReferenceLine, { key: index, x: breach.start, stroke: theme.tokens.color_border_state_neutral, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
|
|
160
|
+
React.createElement(ReferenceArea, { key: index, x1: breach.start, x2: breach.end, fill: theme.tokens.color_bg_state_neutral, fillOpacity: 0.1, visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
|
|
161
|
+
React.createElement(ReferenceLine, { key: index, x: breach.end, stroke: theme.tokens.color_border_state_neutral, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
|
|
162
|
+
}))) : (React.createElement("div", { style: {
|
|
163
|
+
display: 'grid',
|
|
164
|
+
placeItems: 'center',
|
|
165
|
+
height: '100%',
|
|
166
|
+
textAlign: 'center',
|
|
167
|
+
} },
|
|
168
|
+
React.createElement(Text, { variant: "subtitle1" }, "No data")))))));
|
|
106
169
|
}
|
|
@@ -24,12 +24,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
var React = __importStar(require("react"));
|
|
27
|
-
var quantum_product_1 = require("@auth0/quantum-product");
|
|
28
27
|
var CustomThresholdLegend = function () {
|
|
29
28
|
return (React.createElement(React.Fragment, null,
|
|
30
29
|
React.createElement("svg", { width: "14", height: "2", viewBox: "0 0 14 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
31
30
|
React.createElement("rect", { width: "6", height: "2", rx: "1", fill: "#191919" }),
|
|
32
|
-
React.createElement("rect", { x: "8", width: "6", height: "2", rx: "1", fill: "#191919" }))
|
|
33
|
-
React.createElement(quantum_product_1.Text, { variant: "body2" }, "Threshold")));
|
|
31
|
+
React.createElement("rect", { x: "8", width: "6", height: "2", rx: "1", fill: "#191919" }))));
|
|
34
32
|
};
|
|
35
33
|
exports.default = CustomThresholdLegend;
|
package/line-chart/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { IBaseChartProps } from '../common/chart';
|
|
3
3
|
export interface ILineChartProps<DataType = unknown> extends IBaseChartProps<DataType> {
|
|
4
4
|
syncId?: number | string;
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
thresholds?: object[];
|
|
6
|
+
breaches?: object[];
|
|
7
7
|
}
|
|
8
8
|
export declare function LineChart<DataType = unknown>(props: ILineChartProps<DataType>): React.JSX.Element;
|
package/line-chart/index.js
CHANGED
|
@@ -61,20 +61,21 @@ var quantum_product_1 = require("@auth0/quantum-product");
|
|
|
61
61
|
var theme_1 = require("../theme");
|
|
62
62
|
var custom_active_dot_1 = __importDefault(require("./custom-active-dot"));
|
|
63
63
|
var custom_tooltip_1 = __importDefault(require("../common/custom-tooltip"));
|
|
64
|
-
var custom_threshold_label_1 = require("./custom-threshold-label");
|
|
65
64
|
var chart_card_1 = require("../chart-card");
|
|
66
65
|
var chart_1 = require("../common/chart");
|
|
67
66
|
var custom_legend_1 = require("../common/custom-legend");
|
|
68
67
|
function LineChart(props) {
|
|
69
|
-
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.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems,
|
|
68
|
+
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.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, thresholds = _a.thresholds, breaches = _a.breaches;
|
|
70
69
|
var theme = (0, quantum_product_1.useTheme)();
|
|
70
|
+
var _e = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'threshold-menu' }), triggerProps = _e.triggerProps, menuProps = _e.menuProps;
|
|
71
71
|
// Function to know how many lines we need based of how much different group values are.
|
|
72
72
|
var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
|
|
73
73
|
var initialState = __assign({ hover: null }, groups.reduce(function (acc, group) {
|
|
74
74
|
var _a;
|
|
75
75
|
return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
|
|
76
76
|
}, {}));
|
|
77
|
-
var
|
|
77
|
+
var _f = __read(React.useState(initialState), 2), lineVisibility = _f[0], setLineVisibility = _f[1];
|
|
78
|
+
var _g = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _g[0], setThreshold = _g[1];
|
|
78
79
|
var handleLegendMouseEnter = function (e) {
|
|
79
80
|
if (!lineVisibility[e.dataKey]) {
|
|
80
81
|
setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
|
|
@@ -87,6 +88,19 @@ function LineChart(props) {
|
|
|
87
88
|
var _a;
|
|
88
89
|
setLineVisibility(__assign(__assign({}, lineVisibility), (_a = {}, _a[e.dataKey] = !lineVisibility[e.dataKey], _a.hover = null, _a)));
|
|
89
90
|
};
|
|
91
|
+
var getThresholdData = function (threshold, entry) {
|
|
92
|
+
var ewma = entry.ewma, stdDev = entry.stdDev;
|
|
93
|
+
var usePercentage = threshold.alert_threshold_unit === 'PERCENT';
|
|
94
|
+
var getThreshold = function (thresholdValue) { return (usePercentage ? (ewma * thresholdValue) / 100 : stdDev * thresholdValue); };
|
|
95
|
+
var alertThreshold = getThreshold(threshold.alert_threshold_value);
|
|
96
|
+
var warnThreshold = getThreshold(threshold.warn_threshold_value);
|
|
97
|
+
return {
|
|
98
|
+
ewma_hidden: threshold.threshold_trigger === 'ABOVE' ? entry.ewma : entry.ewma - alertThreshold,
|
|
99
|
+
alertThreshold_hidden: alertThreshold,
|
|
100
|
+
warnBuffer_hidden: alertThreshold - warnThreshold,
|
|
101
|
+
warnThreshold_hidden: warnThreshold,
|
|
102
|
+
};
|
|
103
|
+
};
|
|
90
104
|
var bottomAxisDataKey = bottomAxis.mapsTo || 'date';
|
|
91
105
|
var leftAxisDataKey = leftAxis.mapsTo || 'value';
|
|
92
106
|
var entries = {};
|
|
@@ -102,35 +116,84 @@ function LineChart(props) {
|
|
|
102
116
|
_a[entry.group] = entry[leftAxisDataKey],
|
|
103
117
|
_a);
|
|
104
118
|
}
|
|
119
|
+
if ((threshold === null || threshold === void 0 ? void 0 : threshold.evaluated_metric) === entry.group) {
|
|
120
|
+
var _c = getThresholdData(threshold, entry), ewma_hidden = _c.ewma_hidden, alertThreshold_hidden = _c.alertThreshold_hidden, warnBuffer_hidden = _c.warnBuffer_hidden, warnThreshold_hidden = _c.warnThreshold_hidden;
|
|
121
|
+
entries[entrytKey].thresholdControl = true;
|
|
122
|
+
entries[entrytKey].breachedPoint = entry.breachedPoint;
|
|
123
|
+
// _hidden suffix is used to hide a dataKey from the tooltips and legend
|
|
124
|
+
entries[entrytKey].ewma_hidden = ewma_hidden;
|
|
125
|
+
entries[entrytKey].alertThreshold_hidden = alertThreshold_hidden;
|
|
126
|
+
entries[entrytKey].warnThreshold_hidden = warnThreshold_hidden;
|
|
127
|
+
if (threshold.threshold_trigger === 'BELOW') {
|
|
128
|
+
entries[entrytKey].warnBuffer_hidden = warnBuffer_hidden;
|
|
129
|
+
entries[entrytKey].warnThreshold_hidden = 0;
|
|
130
|
+
}
|
|
131
|
+
entries[entrytKey].evaluated_metric = threshold.evaluated_metric;
|
|
132
|
+
}
|
|
105
133
|
return _b = {},
|
|
106
134
|
_b[bottomAxisDataKey] = entry[bottomAxisDataKey],
|
|
107
135
|
_b[entry.group] = entry[leftAxisDataKey],
|
|
108
136
|
_b;
|
|
109
137
|
});
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
138
|
+
var menuItems = React.useMemo(function () {
|
|
139
|
+
var menuItems = [];
|
|
140
|
+
if (thresholds) {
|
|
141
|
+
menuItems = thresholds.map(function (threshold) { return ({
|
|
142
|
+
title: threshold.threshold_label,
|
|
143
|
+
onClick: function (event) {
|
|
144
|
+
setThreshold(threshold);
|
|
145
|
+
if (menuProps.onClose) {
|
|
146
|
+
menuProps.onClose(event, 'itemSelect');
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
}); });
|
|
150
|
+
}
|
|
151
|
+
return menuItems;
|
|
152
|
+
}, [thresholds, menuProps]);
|
|
153
|
+
var headerActionWithThresholdDropdown = (React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
|
|
154
|
+
React.createElement(quantum_product_1.Button, __assign({}, triggerProps, { startIcon: React.createElement(quantum_product_1.AlertDiamondIcon, null), endIcon: React.createElement(quantum_product_1.ChevronDownIcon, null), disabled: !threshold, variant: 'outlined', label: threshold ? threshold.threshold_label : 'No threshold' })),
|
|
155
|
+
React.createElement(quantum_product_1.DropdownMenu, __assign({}, menuProps, { items: menuItems })),
|
|
156
|
+
headerAction && React.createElement(quantum_product_1.Divider, { orientation: "vertical" }),
|
|
157
|
+
headerAction));
|
|
158
|
+
return (React.createElement(React.Fragment, null,
|
|
159
|
+
React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: (groups === null || groups === void 0 ? void 0 : groups.length) > 1 ? headerActionWithThresholdDropdown : headerAction, additionalMenuItems: additionalMenuItems },
|
|
160
|
+
React.createElement(recharts_1.ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(recharts_1.ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
|
|
161
|
+
top: 24,
|
|
162
|
+
right: 10,
|
|
163
|
+
left: -24,
|
|
164
|
+
bottom: 0,
|
|
165
|
+
} },
|
|
166
|
+
React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
|
|
167
|
+
React.createElement(recharts_1.XAxis, { tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "preserveStartEnd", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(3), axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } }),
|
|
168
|
+
React.createElement(recharts_1.YAxis, { tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], width: 78, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } }),
|
|
169
|
+
React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
|
|
170
|
+
legend && (React.createElement(recharts_1.Legend, { align: "center", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(custom_legend_1.CustomLegend, { selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility }) })),
|
|
171
|
+
groups.map(function (group, index) {
|
|
172
|
+
return (React.createElement(recharts_1.Line, { key: group, dataKey: group, name: group, strokeWidth: 3, hide: lineVisibility[group] === true, stroke: lineVisibility.hover === group || !lineVisibility.hover
|
|
173
|
+
? (0, theme_1.getColorScale)(theme)[color]['base'][index]
|
|
174
|
+
: (0, theme_1.getColorScale)(theme)[color]['muted'][index], dot: false, activeDot: (0, custom_active_dot_1.default)() }));
|
|
175
|
+
}),
|
|
176
|
+
threshold && (React.createElement(React.Fragment, null,
|
|
177
|
+
React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'thresholdControl', name: "".concat(threshold.threshold_label), stroke: "none", fill: "none", isAnimationActive: false, dot: false, activeDot: false }),
|
|
178
|
+
React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'ewma_hidden', name: "Exponential Weighted Moving Average", stroke: "none", fill: "none", isAnimationActive: false, stackId: 1, dot: false, activeDot: false }),
|
|
179
|
+
React.createElement(recharts_1.Area, { type: "monotone", dataKey: "alertThreshold_hidden", name: "Alert Threshold", fill: theme.tokens.color_bg_state_info, fillOpacity: 0.2, stroke: "none", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 1 }),
|
|
180
|
+
threshold.warn_threshold_value && (React.createElement(React.Fragment, null,
|
|
181
|
+
React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'ewma_hidden', name: "Exponential Weighted Moving Average", stroke: "none", fill: "none", isAnimationActive: false, stackId: 2, dot: false, activeDot: false }),
|
|
182
|
+
React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'warnBuffer_hidden', stroke: "none", fill: "none", isAnimationActive: false, stackId: 2, dot: false, activeDot: false }),
|
|
183
|
+
React.createElement(recharts_1.Area, { type: "monotone", dataKey: "warnThreshold_hidden", name: "Warn Threshold", fill: 'none', fillOpacity: 0.2, stroke: theme.tokens.color_fg_state_caution, strokeWidth: 2, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 2 }))))),
|
|
184
|
+
breaches &&
|
|
185
|
+
threshold &&
|
|
186
|
+
breaches[threshold.evaluated_metric].map(function (breach, index) {
|
|
187
|
+
return (React.createElement(React.Fragment, null,
|
|
188
|
+
React.createElement(recharts_1.ReferenceLine, { key: index, x: breach.start, stroke: theme.tokens.color_border_state_neutral, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
|
|
189
|
+
React.createElement(recharts_1.ReferenceArea, { key: index, x1: breach.start, x2: breach.end, fill: theme.tokens.color_bg_state_neutral, fillOpacity: 0.1, visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
|
|
190
|
+
React.createElement(recharts_1.ReferenceLine, { key: index, x: breach.end, stroke: theme.tokens.color_border_state_neutral, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
|
|
191
|
+
}))) : (React.createElement("div", { style: {
|
|
192
|
+
display: 'grid',
|
|
193
|
+
placeItems: 'center',
|
|
194
|
+
height: '100%',
|
|
195
|
+
textAlign: 'center',
|
|
196
|
+
} },
|
|
197
|
+
React.createElement(quantum_product_1.Text, { variant: "subtitle1" }, "No data")))))));
|
|
135
198
|
}
|
|
136
199
|
exports.LineChart = LineChart;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@auth0/quantum-charts",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"main": "./index.js",
|
|
6
6
|
"types": "./index.d.ts",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"registry": "https://registry.npmjs.org/"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@auth0/quantum-product": "^2.
|
|
19
|
+
"@auth0/quantum-product": "^2.1.0",
|
|
20
20
|
"@formatjs/intl": "^2.5.1",
|
|
21
21
|
"date-fns": "^2.29.3",
|
|
22
22
|
"recharts": "^2.0.7"
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export var CustomThresholdLabel = function (_a) {
|
|
3
|
-
var label = _a.label, thresholdType = _a.thresholdType, theme = _a.theme, viewBox = _a.viewBox;
|
|
4
|
-
return (React.createElement("g", { transform: "translate(".concat(viewBox.width - 30, ",-10)") },
|
|
5
|
-
React.createElement("rect", { x: viewBox.x, y: viewBox.y, width: 38, height: 20, fill: thresholdType === 'alert' ? theme.tokens.color_bg_state_danger : theme.tokens.color_bg_state_caution, rx: "4" }),
|
|
6
|
-
React.createElement("text", { x: viewBox.x, y: viewBox.y, fill: thresholdType === 'alert'
|
|
7
|
-
? theme.tokens.color_global_functional_static_neutral_white
|
|
8
|
-
: theme.tokens.color_global_functional_static_neutral_black, textAnchor: "middle", dominantBaseline: "middle", dy: 11, dx: 19, fontWeight: 500 }, label)));
|
|
9
|
-
};
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.CustomThresholdLabel = void 0;
|
|
27
|
-
var React = __importStar(require("react"));
|
|
28
|
-
var CustomThresholdLabel = function (_a) {
|
|
29
|
-
var label = _a.label, thresholdType = _a.thresholdType, theme = _a.theme, viewBox = _a.viewBox;
|
|
30
|
-
return (React.createElement("g", { transform: "translate(".concat(viewBox.width - 30, ",-10)") },
|
|
31
|
-
React.createElement("rect", { x: viewBox.x, y: viewBox.y, width: 38, height: 20, fill: thresholdType === 'alert' ? theme.tokens.color_bg_state_danger : theme.tokens.color_bg_state_caution, rx: "4" }),
|
|
32
|
-
React.createElement("text", { x: viewBox.x, y: viewBox.y, fill: thresholdType === 'alert'
|
|
33
|
-
? theme.tokens.color_global_functional_static_neutral_white
|
|
34
|
-
: theme.tokens.color_global_functional_static_neutral_black, textAnchor: "middle", dominantBaseline: "middle", dy: 11, dx: 19, fontWeight: 500 }, label)));
|
|
35
|
-
};
|
|
36
|
-
exports.CustomThresholdLabel = CustomThresholdLabel;
|