@auth0/quantum-charts 1.3.14 → 1.3.16

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 (5) hide show
  1. package/common/custom-legend.js +2 -2
  2. package/esm/common/custom-legend.js +2 -2
  3. package/esm/line-chart/index.js +6 -2
  4. package/line-chart/index.js +6 -2
  5. package/package.json +1 -1
package/common/custom-legend.js CHANGED
@@ -61,7 +61,7 @@ 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, title = props.title, helperText = props.helperText, isVertical = props.isVertical, theme = props.theme, legendRef = props.legendRef, setLegendContainerHeight = props.setLegendContainerHeight;
64
+ var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility, title = props.title, helperText = props.helperText, isVertical = props.isVertical, theme = props.theme, legendRef = props.legendRef, setLegendContainerHeight = props.setLegendContainerHeight, legendContainerHeight = props.legendContainerHeight;
65
65
  var hiddenKeysPattern = /_hidden/;
66
66
  var customLegendPattern = /.*Control/;
67
67
  var getLegendIconColor = function (data, dataKey) {
@@ -91,7 +91,7 @@ var CustomLegend = function (props) {
91
91
  } })) : (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 } })),
92
92
  React.createElement(quantum_product_1.Text, { variant: "body2" }, entry.value))); })));
93
93
  // If the legend is vertical, we need to set the height of the responsive container
94
- if (isVertical && (legendRef === null || legendRef === void 0 ? void 0 : legendRef.current)) {
94
+ if (isVertical && (legendRef === null || legendRef === void 0 ? void 0 : legendRef.current) && !legendContainerHeight) {
95
95
  setLegendContainerHeight(legendRef.current.getBoundingClientRect().height);
96
96
  }
97
97
  return (React.createElement(Root, { gutter: 1, ref: legendRef }, isVertical ? (React.createElement(quantum_product_1.RowLayout, { sx: { padding: '0 8px', cursor: 'pointer' }, gutter: 1 }, legendContent)) : (React.createElement(quantum_product_1.StackLayout, { gutter: 1, sx: { padding: '4px 8px', cursor: 'pointer' } }, legendContent))));
package/esm/common/custom-legend.js CHANGED
@@ -32,7 +32,7 @@ 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, title = props.title, helperText = props.helperText, isVertical = props.isVertical, theme = props.theme, legendRef = props.legendRef, setLegendContainerHeight = props.setLegendContainerHeight;
35
+ var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility, title = props.title, helperText = props.helperText, isVertical = props.isVertical, theme = props.theme, legendRef = props.legendRef, setLegendContainerHeight = props.setLegendContainerHeight, legendContainerHeight = props.legendContainerHeight;
36
36
  var hiddenKeysPattern = /_hidden/;
37
37
  var customLegendPattern = /.*Control/;
38
38
  var getLegendIconColor = function (data, dataKey) {
@@ -62,7 +62,7 @@ export var CustomLegend = function (props) {
62
62
  } })) : (React.createElement(CustomThresholdLegend, { color: entry.color, isSelected: !dataVisibility[entry.dataKey], data: dataVisibility }))) : (React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } })),
63
63
  React.createElement(Text, { variant: "body2" }, entry.value))); })));
64
64
  // If the legend is vertical, we need to set the height of the responsive container
65
- if (isVertical && (legendRef === null || legendRef === void 0 ? void 0 : legendRef.current)) {
65
+ if (isVertical && (legendRef === null || legendRef === void 0 ? void 0 : legendRef.current) && !legendContainerHeight) {
66
66
  setLegendContainerHeight(legendRef.current.getBoundingClientRect().height);
67
67
  }
68
68
  return (React.createElement(Root, { gutter: 1, ref: legendRef }, isVertical ? (React.createElement(RowLayout, { sx: { padding: '0 8px', cursor: 'pointer' }, gutter: 1 }, legendContent)) : (React.createElement(StackLayout, { gutter: 1, sx: { padding: '4px 8px', cursor: 'pointer' } }, legendContent))));
package/esm/line-chart/index.js CHANGED
@@ -59,6 +59,7 @@ export function LineChart(props) {
59
59
  var _p = __read(React.useState(false), 2), isOpen = _p[0], setIsOpen = _p[1];
60
60
  React.useEffect(function () {
61
61
  setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
62
+ setLineVisibility(__assign(__assign({}, ((thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]) && { thresholdControl: false })), lineVisibility));
62
63
  }, [thresholds]);
63
64
  var handleLegendMouseEnter = function (e) {
64
65
  if (!lineVisibility[e.dataKey]) {
@@ -73,7 +74,10 @@ export function LineChart(props) {
73
74
  };
74
75
  var selectLine = function (e) {
75
76
  var _a;
76
- setLineVisibility(__assign(__assign({}, lineVisibility), (_a = {}, _a[e.dataKey] = !lineVisibility[e.dataKey], _a.hover = null, _a)));
77
+ var checkedLines = Object.values(lineVisibility).filter(function (line) { return line === false; }).length;
78
+ if (checkedLines > 1 || lineVisibility[e.dataKey]) {
79
+ setLineVisibility(__assign(__assign({}, lineVisibility), (_a = {}, _a[e.dataKey] = !lineVisibility[e.dataKey], _a.hover = null, _a)));
80
+ }
77
81
  };
78
82
  var getThresholdData = function (threshold, entry) {
79
83
  var ewma = entry.ewma, stdDev = entry.stdDev;
@@ -194,7 +198,7 @@ export function LineChart(props) {
194
198
  justifyItems: 'start',
195
199
  paddingLeft: '2em',
196
200
  top: '15px',
197
- }, content: React.createElement(CustomLegend, { title: title, helperText: helperText, selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, isVertical: isVertical, theme: theme, setLegendContainerHeight: setLegendContainerHeight, legendRef: legendRef }) })) : (React.createElement(Legend, { align: "center", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(CustomLegend, { selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, theme: theme }) })),
201
+ }, content: React.createElement(CustomLegend, { title: title, helperText: helperText, selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, isVertical: isVertical, theme: theme, setLegendContainerHeight: setLegendContainerHeight, legendRef: legendRef, legendContainerHeight: legendContainerHeight }) })) : (React.createElement(Legend, { align: "center", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(CustomLegend, { selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, theme: theme }) })),
198
202
  groups.map(function (group, index) {
199
203
  var isMuted = lineVisibility.hover !== group && lineVisibility.hover;
200
204
  var strokeColor;
package/line-chart/index.js CHANGED
@@ -88,6 +88,7 @@ function LineChart(props) {
88
88
  var _p = __read(React.useState(false), 2), isOpen = _p[0], setIsOpen = _p[1];
89
89
  React.useEffect(function () {
90
90
  setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
91
+ setLineVisibility(__assign(__assign({}, ((thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]) && { thresholdControl: false })), lineVisibility));
91
92
  }, [thresholds]);
92
93
  var handleLegendMouseEnter = function (e) {
93
94
  if (!lineVisibility[e.dataKey]) {
@@ -102,7 +103,10 @@ function LineChart(props) {
102
103
  };
103
104
  var selectLine = function (e) {
104
105
  var _a;
105
- setLineVisibility(__assign(__assign({}, lineVisibility), (_a = {}, _a[e.dataKey] = !lineVisibility[e.dataKey], _a.hover = null, _a)));
106
+ var checkedLines = Object.values(lineVisibility).filter(function (line) { return line === false; }).length;
107
+ if (checkedLines > 1 || lineVisibility[e.dataKey]) {
108
+ setLineVisibility(__assign(__assign({}, lineVisibility), (_a = {}, _a[e.dataKey] = !lineVisibility[e.dataKey], _a.hover = null, _a)));
109
+ }
106
110
  };
107
111
  var getThresholdData = function (threshold, entry) {
108
112
  var ewma = entry.ewma, stdDev = entry.stdDev;
@@ -223,7 +227,7 @@ function LineChart(props) {
223
227
  justifyItems: 'start',
224
228
  paddingLeft: '2em',
225
229
  top: '15px',
226
- }, content: React.createElement(custom_legend_1.CustomLegend, { title: title, helperText: helperText, selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, isVertical: isVertical, theme: theme, setLegendContainerHeight: setLegendContainerHeight, legendRef: legendRef }) })) : (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, theme: theme }) })),
230
+ }, content: React.createElement(custom_legend_1.CustomLegend, { title: title, helperText: helperText, selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, isVertical: isVertical, theme: theme, setLegendContainerHeight: setLegendContainerHeight, legendRef: legendRef, legendContainerHeight: legendContainerHeight }) })) : (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, theme: theme }) })),
227
231
  groups.map(function (group, index) {
228
232
  var isMuted = lineVisibility.hover !== group && lineVisibility.hover;
229
233
  var strokeColor;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.3.14",
3
+ "version": "1.3.16",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",