@auth0/quantum-charts 1.0.4 → 1.0.6

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 (6) hide show
  1. package/common/custom-tooltip.js +1 -1
  2. package/esm/common/custom-tooltip.js +1 -1
  3. package/esm/line-chart/index.js +12 -7
  4. package/line-chart/index.d.ts +3 -2
  5. package/line-chart/index.js +12 -7
  6. package/package.json +1 -1
package/common/custom-tooltip.js CHANGED
@@ -51,7 +51,7 @@ var CustomTooltip = function (props) {
51
51
  return (React.createElement(quantum_product_1.StackLayout, { key: index, gutter: 0.5 },
52
52
  React.createElement(custom_color_status_dot_1.default, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + ' ' }),
53
53
  React.createElement(quantum_product_1.Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey || '']),
54
- x.payload['evaluated_metric'] === x.dataKey &&
54
+ x.payload['evaluated_group'] === x.dataKey &&
55
55
  x.payload['breachedPoint'] !== 'none' &&
56
56
  (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 })))));
57
57
  })))));
package/esm/common/custom-tooltip.js CHANGED
@@ -23,7 +23,7 @@ var CustomTooltip = function (props) {
23
23
  return (React.createElement(StackLayout, { key: index, gutter: 0.5 },
24
24
  React.createElement(StatusDot, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + ' ' }),
25
25
  React.createElement(Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey || '']),
26
- x.payload['evaluated_metric'] === x.dataKey &&
26
+ x.payload['evaluated_group'] === x.dataKey &&
27
27
  x.payload['breachedPoint'] !== 'none' &&
28
28
  (x.payload['breachedPoint'] === 'alert' ? (React.createElement(AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
29
29
  })))));
package/esm/line-chart/index.js CHANGED
@@ -37,7 +37,7 @@ import { tickFormatter } from '../common/chart';
37
37
  import { CustomLegend } from '../common/custom-legend';
38
38
  import { DataTableChart } from '../chart-summary/data-table-chart';
39
39
  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;
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, disableThresholdMenu = _a.disableThresholdMenu;
41
41
  var theme = useTheme();
42
42
  var _e = useDropdownMenuState({ baseId: 'threshold-menu' }), triggerProps = _e.triggerProps, menuProps = _e.menuProps;
43
43
  // Function to know how many lines we need based of how much different group values are.
@@ -49,6 +49,9 @@ export function LineChart(props) {
49
49
  var _f = __read(React.useState(initialState), 2), lineVisibility = _f[0], setLineVisibility = _f[1];
50
50
  var _g = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _g[0], setThreshold = _g[1];
51
51
  var _h = __read(React.useState(false), 2), isOpen = _h[0], setIsOpen = _h[1];
52
+ React.useEffect(function () {
53
+ setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
54
+ }, [thresholds]);
52
55
  var handleLegendMouseEnter = function (e) {
53
56
  if (!lineVisibility[e.dataKey]) {
54
57
  setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
@@ -92,19 +95,20 @@ export function LineChart(props) {
92
95
  _a[entry.group] = entry[leftAxisDataKey],
93
96
  _a);
94
97
  }
95
- if ((threshold === null || threshold === void 0 ? void 0 : threshold.evaluated_metric) === entry.group) {
98
+ if (threshold && threshold.evaluated_metric === entry.evaluated_metric) {
96
99
  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;
97
100
  entries[entrytKey].thresholdControl = true;
98
101
  entries[entrytKey].breachedPoint = entry.breachedPoint;
99
102
  // _hidden suffix is used to hide a dataKey from the tooltips and legend
100
- entries[entrytKey].ewma_hidden = ewma_hidden;
103
+ entries[entrytKey].ewma_hidden = Math.max(0, ewma_hidden);
101
104
  entries[entrytKey].alertThreshold_hidden = alertThreshold_hidden;
102
105
  entries[entrytKey].warnThreshold_hidden = warnThreshold_hidden;
103
106
  if (threshold.threshold_trigger === 'BELOW') {
104
- entries[entrytKey].warnBuffer_hidden = warnBuffer_hidden;
107
+ entries[entrytKey].warnBuffer_hidden = Math.max(0, warnBuffer_hidden);
105
108
  entries[entrytKey].warnThreshold_hidden = 0;
106
109
  }
107
110
  entries[entrytKey].evaluated_metric = threshold.evaluated_metric;
111
+ entries[entrytKey].evaluated_group = entry.group;
108
112
  }
109
113
  return _b = {},
110
114
  _b[bottomAxisDataKey] = entry[bottomAxisDataKey],
@@ -128,9 +132,10 @@ export function LineChart(props) {
128
132
  return menuItems;
129
133
  }, [thresholds, menuProps]);
130
134
  var headerActionWithThresholdDropdown = (React.createElement(StackLayout, { gutter: 1 },
131
- 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' })),
132
- React.createElement(DropdownMenu, __assign({}, menuProps, { items: menuItems })),
133
- React.createElement(Divider, { orientation: "vertical" }),
135
+ !disableThresholdMenu && (React.createElement(React.Fragment, null,
136
+ 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' })),
137
+ React.createElement(DropdownMenu, __assign({}, menuProps, { items: menuItems })),
138
+ React.createElement(Divider, { orientation: "vertical" }))),
134
139
  headerAction,
135
140
  React.createElement(IconButton, { size: "small", label: "View table", onClick: function () {
136
141
  setIsOpen(true);
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
@@ -66,7 +66,7 @@ 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
68
  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;
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, disableThresholdMenu = _a.disableThresholdMenu;
70
70
  var theme = (0, quantum_product_1.useTheme)();
71
71
  var _e = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'threshold-menu' }), triggerProps = _e.triggerProps, menuProps = _e.menuProps;
72
72
  // Function to know how many lines we need based of how much different group values are.
@@ -78,6 +78,9 @@ function LineChart(props) {
78
78
  var _f = __read(React.useState(initialState), 2), lineVisibility = _f[0], setLineVisibility = _f[1];
79
79
  var _g = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _g[0], setThreshold = _g[1];
80
80
  var _h = __read(React.useState(false), 2), isOpen = _h[0], setIsOpen = _h[1];
81
+ React.useEffect(function () {
82
+ setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
83
+ }, [thresholds]);
81
84
  var handleLegendMouseEnter = function (e) {
82
85
  if (!lineVisibility[e.dataKey]) {
83
86
  setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
@@ -121,19 +124,20 @@ function LineChart(props) {
121
124
  _a[entry.group] = entry[leftAxisDataKey],
122
125
  _a);
123
126
  }
124
- if ((threshold === null || threshold === void 0 ? void 0 : threshold.evaluated_metric) === entry.group) {
127
+ if (threshold && threshold.evaluated_metric === entry.evaluated_metric) {
125
128
  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;
126
129
  entries[entrytKey].thresholdControl = true;
127
130
  entries[entrytKey].breachedPoint = entry.breachedPoint;
128
131
  // _hidden suffix is used to hide a dataKey from the tooltips and legend
129
- entries[entrytKey].ewma_hidden = ewma_hidden;
132
+ entries[entrytKey].ewma_hidden = Math.max(0, ewma_hidden);
130
133
  entries[entrytKey].alertThreshold_hidden = alertThreshold_hidden;
131
134
  entries[entrytKey].warnThreshold_hidden = warnThreshold_hidden;
132
135
  if (threshold.threshold_trigger === 'BELOW') {
133
- entries[entrytKey].warnBuffer_hidden = warnBuffer_hidden;
136
+ entries[entrytKey].warnBuffer_hidden = Math.max(0, warnBuffer_hidden);
134
137
  entries[entrytKey].warnThreshold_hidden = 0;
135
138
  }
136
139
  entries[entrytKey].evaluated_metric = threshold.evaluated_metric;
140
+ entries[entrytKey].evaluated_group = entry.group;
137
141
  }
138
142
  return _b = {},
139
143
  _b[bottomAxisDataKey] = entry[bottomAxisDataKey],
@@ -157,9 +161,10 @@ function LineChart(props) {
157
161
  return menuItems;
158
162
  }, [thresholds, menuProps]);
159
163
  var headerActionWithThresholdDropdown = (React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
160
- 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' })),
161
- React.createElement(quantum_product_1.DropdownMenu, __assign({}, menuProps, { items: menuItems })),
162
- React.createElement(quantum_product_1.Divider, { orientation: "vertical" }),
164
+ !disableThresholdMenu && (React.createElement(React.Fragment, null,
165
+ 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' })),
166
+ React.createElement(quantum_product_1.DropdownMenu, __assign({}, menuProps, { items: menuItems })),
167
+ React.createElement(quantum_product_1.Divider, { orientation: "vertical" }))),
163
168
  headerAction,
164
169
  React.createElement(quantum_product_1.IconButton, { size: "small", label: "View table", onClick: function () {
165
170
  setIsOpen(true);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",