@auth0/quantum-charts 1.0.5 → 1.0.7

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.
Files changed (9) hide show
  1. package/common/custom-legend.js +2 -1
  2. package/esm/common/custom-legend.js +2 -1
  3. package/esm/line-chart/custom-threshold-legend.js +13 -4
  4. package/esm/line-chart/index.js +18 -11
  5. package/line-chart/custom-threshold-legend.d.ts +1 -1
  6. package/line-chart/custom-threshold-legend.js +13 -4
  7. package/line-chart/index.d.ts +3 -2
  8. package/line-chart/index.js +17 -10
  9. package/package.json +1 -1
package/common/custom-legend.js CHANGED
@@ -63,11 +63,12 @@ var LegendIcon = (0, quantum_product_1.styled)('div')(function (_a) {
63
63
  var CustomLegend = function (props) {
64
64
  var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility;
65
65
  var hiddenKeysPattern = /_hidden/;
66
+ var customLegendPattern = /.*Control/;
66
67
  return (React.createElement(Root, { gutter: 1 },
67
68
  React.createElement(quantum_product_1.StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 }, payload
68
69
  .filter(function (item) { return !hiddenKeysPattern.test("".concat(item.dataKey)); })
69
70
  .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
+ customLegendPattern.test(entry.dataKey) ? (React.createElement(custom_threshold_legend_1.default, { color: entry.color, isSelected: !dataVisibility[entry.dataKey], data: dataVisibility })) : (React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } })),
71
72
  React.createElement(quantum_product_1.Text, { variant: "body2" }, entry.value))); }))));
72
73
  };
73
74
  exports.CustomLegend = CustomLegend;
package/esm/common/custom-legend.js CHANGED
@@ -34,10 +34,11 @@ var LegendIcon = styled('div')(function (_a) {
34
34
  export var CustomLegend = function (props) {
35
35
  var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility;
36
36
  var hiddenKeysPattern = /_hidden/;
37
+ var customLegendPattern = /.*Control/;
37
38
  return (React.createElement(Root, { gutter: 1 },
38
39
  React.createElement(StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 }, payload
39
40
  .filter(function (item) { return !hiddenKeysPattern.test("".concat(item.dataKey)); })
40
41
  .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
+ customLegendPattern.test(entry.dataKey) ? (React.createElement(CustomThresholdLegend, { color: entry.color, isSelected: !dataVisibility[entry.dataKey], data: dataVisibility })) : (React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } })),
42
43
  React.createElement(Text, { variant: "body2" }, entry.value))); }))));
43
44
  };
package/esm/line-chart/custom-threshold-legend.js CHANGED
@@ -1,8 +1,17 @@
1
+ import { alpha, useTheme } from '@auth0/quantum-product';
1
2
  import * as React from 'react';
2
- var CustomThresholdLegend = function () {
3
+ var CustomThresholdLegend = function (props) {
4
+ var color = props.color, data = props.data, isSelected = props.isSelected;
5
+ var theme = useTheme();
6
+ var fill = data.hover === 'thresholdControl' || !data.hover
7
+ ? theme.tokens.color_bg_state_neutral
8
+ : alpha(theme.tokens.color_bg_state_neutral, 0.35);
9
+ var stroke = data.hover === 'thresholdControl' || !data.hover
10
+ ? theme.tokens.color_border_state_neutral
11
+ : alpha(theme.tokens.color_border_state_neutral, 0.35);
3
12
  return (React.createElement(React.Fragment, null,
4
- React.createElement("svg", { width: "14", height: "2", viewBox: "0 0 14 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
5
- React.createElement("rect", { width: "6", height: "2", rx: "1", fill: "#191919" }),
6
- React.createElement("rect", { x: "8", width: "6", height: "2", rx: "1", fill: "#191919" }))));
13
+ React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
14
+ React.createElement("rect", { width: "14", height: "14", rx: isSelected ? 4 : theme.spacing(0.5), z: -1, fill: isSelected ? fill : 'none', strokeWidth: 2, stroke: stroke, strokeDasharray: '2 2', fillOpacity: 0.3 }),
15
+ React.createElement("rect", { z: 1, width: "6", height: "3", rx: "0", x: '50%', y: '50%', transform: "translate(-3 -1)", fill: color }))));
7
16
  };
8
17
  export default CustomThresholdLegend;
package/esm/line-chart/index.js CHANGED
@@ -28,7 +28,7 @@ var __read = (this && this.__read) || function (o, n) {
28
28
  import _ from 'lodash';
29
29
  import * as React from 'react';
30
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, IconButton, TableIcon, } from '@auth0/quantum-product';
31
+ import { useTheme, Text, DropdownMenu, useDropdownMenuState, Button, StackLayout, Divider, ChevronDownIcon, AlertDiamondIcon, IconButton, TableIcon, alpha, } 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';
@@ -36,8 +36,11 @@ import { ChartCard } from '../chart-card';
36
36
  import { tickFormatter } from '../common/chart';
37
37
  import { CustomLegend } from '../common/custom-legend';
38
38
  import { DataTableChart } from '../chart-summary/data-table-chart';
39
+ var getThresholdColor = function (data, baseColor) {
40
+ return data.hover === 'thresholdControl' || !data.hover ? baseColor : alpha(baseColor, 0.35);
41
+ };
39
42
  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, thresholds = _a.thresholds, breaches = _a.breaches;
43
+ 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, disableThresholdMenu = _a.disableThresholdMenu;
41
44
  var theme = useTheme();
42
45
  var _e = useDropdownMenuState({ baseId: 'threshold-menu' }), triggerProps = _e.triggerProps, menuProps = _e.menuProps;
43
46
  // Function to know how many lines we need based of how much different group values are.
@@ -49,6 +52,9 @@ export function LineChart(props) {
49
52
  var _f = __read(React.useState(initialState), 2), lineVisibility = _f[0], setLineVisibility = _f[1];
50
53
  var _g = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _g[0], setThreshold = _g[1];
51
54
  var _h = __read(React.useState(false), 2), isOpen = _h[0], setIsOpen = _h[1];
55
+ React.useEffect(function () {
56
+ setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
57
+ }, [thresholds]);
52
58
  var handleLegendMouseEnter = function (e) {
53
59
  if (!lineVisibility[e.dataKey]) {
54
60
  setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
@@ -129,9 +135,10 @@ export function LineChart(props) {
129
135
  return menuItems;
130
136
  }, [thresholds, menuProps]);
131
137
  var headerActionWithThresholdDropdown = (React.createElement(StackLayout, { gutter: 1 },
132
- 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' })),
133
- React.createElement(DropdownMenu, __assign({}, menuProps, { items: menuItems })),
134
- React.createElement(Divider, { orientation: "vertical" }),
138
+ !disableThresholdMenu && (React.createElement(React.Fragment, null,
139
+ 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' })),
140
+ React.createElement(DropdownMenu, __assign({}, menuProps, { items: menuItems })),
141
+ React.createElement(Divider, { orientation: "vertical" }))),
135
142
  headerAction,
136
143
  React.createElement(IconButton, { size: "small", label: "View table", onClick: function () {
137
144
  setIsOpen(true);
@@ -156,20 +163,20 @@ export function LineChart(props) {
156
163
  : getColorScale(theme)[color]['muted'][index], dot: false, activeDot: CustomActiveDot() }));
157
164
  }),
158
165
  threshold && (React.createElement(React.Fragment, null,
159
- React.createElement(Area, { type: "monotone", dataKey: 'thresholdControl', name: "".concat(threshold.threshold_label), stroke: "none", fill: "none", isAnimationActive: false, dot: false, activeDot: false }),
166
+ React.createElement(Area, { type: "monotone", dataKey: 'thresholdControl', name: "".concat(threshold.threshold_label), stroke: "none", fillOpacity: 0, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_info), isAnimationActive: false, dot: false, activeDot: false }),
160
167
  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 }),
161
- 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 }),
168
+ React.createElement(Area, { type: "monotone", dataKey: "alertThreshold_hidden", name: "Alert Threshold", fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_info), fillOpacity: 0.2, stroke: "none", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 1 }),
162
169
  threshold.warn_threshold_value && (React.createElement(React.Fragment, null,
163
170
  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 }),
164
171
  React.createElement(Area, { type: "monotone", dataKey: 'warnBuffer_hidden', stroke: "none", fill: "none", isAnimationActive: false, stackId: 2, dot: false, activeDot: false }),
165
- 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 }))))),
172
+ React.createElement(Area, { type: "monotone", dataKey: "warnThreshold_hidden", name: "Warn Threshold", fill: 'none', fillOpacity: 0.2, stroke: getThresholdColor(lineVisibility, theme.tokens.color_fg_state_caution), strokeWidth: 2, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 2 }))))),
166
173
  breaches &&
167
174
  threshold &&
168
175
  breaches[threshold.evaluated_metric].map(function (breach, index) {
169
176
  return (React.createElement(React.Fragment, null,
170
- React.createElement(ReferenceLine, { key: index, x: breach.start, stroke: theme.tokens.color_border_state_neutral, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
171
- 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' }),
172
- React.createElement(ReferenceLine, { key: index, x: breach.end, stroke: theme.tokens.color_border_state_neutral, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
177
+ React.createElement(ReferenceLine, { key: index, x: breach.start, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
178
+ React.createElement(ReferenceArea, { key: index, x1: breach.start, x2: breach.end, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_neutral), fillOpacity: 0.1, visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
179
+ React.createElement(ReferenceLine, { key: index, x: breach.end, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
173
180
  }))) : (React.createElement("div", { style: {
174
181
  display: 'grid',
175
182
  placeItems: 'center',
package/line-chart/custom-threshold-legend.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import * as React from 'react';
2
- declare const CustomThresholdLegend: () => React.JSX.Element;
2
+ declare const CustomThresholdLegend: (props: any) => React.JSX.Element;
3
3
  export default CustomThresholdLegend;
package/line-chart/custom-threshold-legend.js CHANGED
@@ -23,11 +23,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
23
23
  return result;
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
+ var quantum_product_1 = require("@auth0/quantum-product");
26
27
  var React = __importStar(require("react"));
27
- var CustomThresholdLegend = function () {
28
+ var CustomThresholdLegend = function (props) {
29
+ var color = props.color, data = props.data, isSelected = props.isSelected;
30
+ var theme = (0, quantum_product_1.useTheme)();
31
+ var fill = data.hover === 'thresholdControl' || !data.hover
32
+ ? theme.tokens.color_bg_state_neutral
33
+ : (0, quantum_product_1.alpha)(theme.tokens.color_bg_state_neutral, 0.35);
34
+ var stroke = data.hover === 'thresholdControl' || !data.hover
35
+ ? theme.tokens.color_border_state_neutral
36
+ : (0, quantum_product_1.alpha)(theme.tokens.color_border_state_neutral, 0.35);
28
37
  return (React.createElement(React.Fragment, null,
29
- React.createElement("svg", { width: "14", height: "2", viewBox: "0 0 14 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
30
- React.createElement("rect", { width: "6", height: "2", rx: "1", fill: "#191919" }),
31
- React.createElement("rect", { x: "8", width: "6", height: "2", rx: "1", fill: "#191919" }))));
38
+ React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
39
+ React.createElement("rect", { width: "14", height: "14", rx: isSelected ? 4 : theme.spacing(0.5), z: -1, fill: isSelected ? fill : 'none', strokeWidth: 2, stroke: stroke, strokeDasharray: '2 2', fillOpacity: 0.3 }),
40
+ React.createElement("rect", { z: 1, width: "6", height: "3", rx: "0", x: '50%', y: '50%', transform: "translate(-3 -1)", fill: color }))));
32
41
  };
33
42
  exports.default = CustomThresholdLegend;
package/line-chart/index.d.ts CHANGED
@@ -2,7 +2,8 @@ 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
- thresholds?: object[];
6
- breaches?: object[];
5
+ thresholds?: object[] | null;
6
+ breaches?: object[] | null;
7
+ disableThresholdMenu?: boolean;
7
8
  }
8
9
  export declare function LineChart<DataType = unknown>(props: ILineChartProps<DataType>): React.JSX.Element;
package/line-chart/index.js CHANGED
@@ -65,8 +65,11 @@ var chart_card_1 = require("../chart-card");
65
65
  var chart_1 = require("../common/chart");
66
66
  var custom_legend_1 = require("../common/custom-legend");
67
67
  var data_table_chart_1 = require("../chart-summary/data-table-chart");
68
+ var getThresholdColor = function (data, baseColor) {
69
+ return data.hover === 'thresholdControl' || !data.hover ? baseColor : (0, quantum_product_1.alpha)(baseColor, 0.35);
70
+ };
68
71
  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, thresholds = _a.thresholds, breaches = _a.breaches;
72
+ 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, disableThresholdMenu = _a.disableThresholdMenu;
70
73
  var theme = (0, quantum_product_1.useTheme)();
71
74
  var _e = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'threshold-menu' }), triggerProps = _e.triggerProps, menuProps = _e.menuProps;
72
75
  // Function to know how many lines we need based of how much different group values are.
@@ -78,6 +81,9 @@ function LineChart(props) {
78
81
  var _f = __read(React.useState(initialState), 2), lineVisibility = _f[0], setLineVisibility = _f[1];
79
82
  var _g = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _g[0], setThreshold = _g[1];
80
83
  var _h = __read(React.useState(false), 2), isOpen = _h[0], setIsOpen = _h[1];
84
+ React.useEffect(function () {
85
+ setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
86
+ }, [thresholds]);
81
87
  var handleLegendMouseEnter = function (e) {
82
88
  if (!lineVisibility[e.dataKey]) {
83
89
  setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
@@ -158,9 +164,10 @@ function LineChart(props) {
158
164
  return menuItems;
159
165
  }, [thresholds, menuProps]);
160
166
  var headerActionWithThresholdDropdown = (React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
161
- 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' })),
162
- React.createElement(quantum_product_1.DropdownMenu, __assign({}, menuProps, { items: menuItems })),
163
- React.createElement(quantum_product_1.Divider, { orientation: "vertical" }),
167
+ !disableThresholdMenu && (React.createElement(React.Fragment, null,
168
+ 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' })),
169
+ React.createElement(quantum_product_1.DropdownMenu, __assign({}, menuProps, { items: menuItems })),
170
+ React.createElement(quantum_product_1.Divider, { orientation: "vertical" }))),
164
171
  headerAction,
165
172
  React.createElement(quantum_product_1.IconButton, { size: "small", label: "View table", onClick: function () {
166
173
  setIsOpen(true);
@@ -185,20 +192,20 @@ function LineChart(props) {
185
192
  : (0, theme_1.getColorScale)(theme)[color]['muted'][index], dot: false, activeDot: (0, custom_active_dot_1.default)() }));
186
193
  }),
187
194
  threshold && (React.createElement(React.Fragment, null,
188
- React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'thresholdControl', name: "".concat(threshold.threshold_label), stroke: "none", fill: "none", isAnimationActive: false, dot: false, activeDot: false }),
195
+ React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'thresholdControl', name: "".concat(threshold.threshold_label), stroke: "none", fillOpacity: 0, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_info), isAnimationActive: false, dot: false, activeDot: false }),
189
196
  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 }),
190
- 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 }),
197
+ React.createElement(recharts_1.Area, { type: "monotone", dataKey: "alertThreshold_hidden", name: "Alert Threshold", fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_info), fillOpacity: 0.2, stroke: "none", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 1 }),
191
198
  threshold.warn_threshold_value && (React.createElement(React.Fragment, null,
192
199
  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 }),
193
200
  React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'warnBuffer_hidden', stroke: "none", fill: "none", isAnimationActive: false, stackId: 2, dot: false, activeDot: false }),
194
- 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 }))))),
201
+ React.createElement(recharts_1.Area, { type: "monotone", dataKey: "warnThreshold_hidden", name: "Warn Threshold", fill: 'none', fillOpacity: 0.2, stroke: getThresholdColor(lineVisibility, theme.tokens.color_fg_state_caution), strokeWidth: 2, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 2 }))))),
195
202
  breaches &&
196
203
  threshold &&
197
204
  breaches[threshold.evaluated_metric].map(function (breach, index) {
198
205
  return (React.createElement(React.Fragment, null,
199
- 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' }),
200
- 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' }),
201
- 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' })));
206
+ React.createElement(recharts_1.ReferenceLine, { key: index, x: breach.start, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
207
+ React.createElement(recharts_1.ReferenceArea, { key: index, x1: breach.start, x2: breach.end, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_neutral), fillOpacity: 0.1, visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
208
+ React.createElement(recharts_1.ReferenceLine, { key: index, x: breach.end, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
202
209
  }))) : (React.createElement("div", { style: {
203
210
  display: 'grid',
204
211
  placeItems: 'center',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",