@auth0/quantum-charts 1.3.13 → 1.3.15

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 +21 -4
  4. package/line-chart/index.js +21 -4
  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
@@ -151,17 +151,34 @@ export function LineChart(props) {
151
151
  } },
152
152
  React.createElement(TableIcon, null)))));
153
153
  var legendRef = React.useRef(null);
154
- var _q = __read(React.useState(height), 2), legendContainerHeight = _q[0], setLegendContainerHeight = _q[1];
154
+ var _q = __read(React.useState(null), 2), legendContainerHeight = _q[0], setLegendContainerHeight = _q[1];
155
+ var _r = __read(React.useState(height), 2), responsiveContainerHeight = _r[0], setResponsiveContainerHeight = _r[1];
156
+ var _s = __read(React.useState(isVertical ? '0%' : '100%'), 2), responsiveContainerWidth = _s[0], setResponsiveContainerWidth = _s[1];
157
+ var _t = __read(React.useState(!isVertical), 2), visibility = _t[0], setVisibility = _t[1];
155
158
  var getContainerHeight = function () {
156
159
  if (!isVertical) {
157
160
  return height;
158
161
  }
159
- var legendPlusBuffer = legendContainerHeight + 56; // To line up the bottom of the legend with the x-axis
162
+ var legendPlusBuffer = (legendContainerHeight !== null && legendContainerHeight !== void 0 ? legendContainerHeight : 0) + 56; // To line up the bottom of the legend with the x-axis
160
163
  return Math.max(legendPlusBuffer, height);
161
164
  };
165
+ // forcing a re-render to get the animation of the responsive container to render left to right rather than top to bottom
166
+ React.useEffect(function () {
167
+ if (isVertical) {
168
+ setResponsiveContainerWidth('0%');
169
+ setResponsiveContainerHeight(getContainerHeight());
170
+ setTimeout(function () {
171
+ setResponsiveContainerWidth('100%');
172
+ setVisibility(!!legendContainerHeight);
173
+ }, 10);
174
+ }
175
+ }, [legendContainerHeight]);
162
176
  return (React.createElement(React.Fragment, null,
163
177
  React.createElement(ChartCard, { title: title, chartStatus: chartStatus, value: value, dataTable: data, label: label, helperText: helperText, headerAction: (groups === null || groups === void 0 ? void 0 : groups.length) > 1 ? headerActionWithThresholdDropdown : headerAction, finalMenuItem: finalMenuItem, additionalMenuItems: additionalMenuItems, allowDownload: allowDownload, showChartTable: showChartTable, triggerButtonSize: headerButtonsSize, titleIcon: titleIcon, isVertical: isVertical },
164
- React.createElement(ResponsiveContainer, { width: '100%', height: getContainerHeight() }, data.length ? (React.createElement(ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
178
+ React.createElement(ResponsiveContainer, { width: responsiveContainerWidth, height: responsiveContainerHeight, style: {
179
+ opacity: visibility ? 1 : 0,
180
+ transition: 'opacity 0.3s ease-in-out',
181
+ } }, data.length ? (React.createElement(ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
165
182
  top: 24,
166
183
  right: 10,
167
184
  left: -24,
@@ -177,7 +194,7 @@ export function LineChart(props) {
177
194
  justifyItems: 'start',
178
195
  paddingLeft: '2em',
179
196
  top: '15px',
180
- }, 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 }) })),
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, 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 }) })),
181
198
  groups.map(function (group, index) {
182
199
  var isMuted = lineVisibility.hover !== group && lineVisibility.hover;
183
200
  var strokeColor;
package/line-chart/index.js CHANGED
@@ -180,17 +180,34 @@ function LineChart(props) {
180
180
  } },
181
181
  React.createElement(quantum_product_1.TableIcon, null)))));
182
182
  var legendRef = React.useRef(null);
183
- var _q = __read(React.useState(height), 2), legendContainerHeight = _q[0], setLegendContainerHeight = _q[1];
183
+ var _q = __read(React.useState(null), 2), legendContainerHeight = _q[0], setLegendContainerHeight = _q[1];
184
+ var _r = __read(React.useState(height), 2), responsiveContainerHeight = _r[0], setResponsiveContainerHeight = _r[1];
185
+ var _s = __read(React.useState(isVertical ? '0%' : '100%'), 2), responsiveContainerWidth = _s[0], setResponsiveContainerWidth = _s[1];
186
+ var _t = __read(React.useState(!isVertical), 2), visibility = _t[0], setVisibility = _t[1];
184
187
  var getContainerHeight = function () {
185
188
  if (!isVertical) {
186
189
  return height;
187
190
  }
188
- var legendPlusBuffer = legendContainerHeight + 56; // To line up the bottom of the legend with the x-axis
191
+ var legendPlusBuffer = (legendContainerHeight !== null && legendContainerHeight !== void 0 ? legendContainerHeight : 0) + 56; // To line up the bottom of the legend with the x-axis
189
192
  return Math.max(legendPlusBuffer, height);
190
193
  };
194
+ // forcing a re-render to get the animation of the responsive container to render left to right rather than top to bottom
195
+ React.useEffect(function () {
196
+ if (isVertical) {
197
+ setResponsiveContainerWidth('0%');
198
+ setResponsiveContainerHeight(getContainerHeight());
199
+ setTimeout(function () {
200
+ setResponsiveContainerWidth('100%');
201
+ setVisibility(!!legendContainerHeight);
202
+ }, 10);
203
+ }
204
+ }, [legendContainerHeight]);
191
205
  return (React.createElement(React.Fragment, null,
192
206
  React.createElement(chart_card_1.ChartCard, { title: title, chartStatus: chartStatus, value: value, dataTable: data, label: label, helperText: helperText, headerAction: (groups === null || groups === void 0 ? void 0 : groups.length) > 1 ? headerActionWithThresholdDropdown : headerAction, finalMenuItem: finalMenuItem, additionalMenuItems: additionalMenuItems, allowDownload: allowDownload, showChartTable: showChartTable, triggerButtonSize: headerButtonsSize, titleIcon: titleIcon, isVertical: isVertical },
193
- React.createElement(recharts_1.ResponsiveContainer, { width: '100%', height: getContainerHeight() }, data.length ? (React.createElement(recharts_1.ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
207
+ React.createElement(recharts_1.ResponsiveContainer, { width: responsiveContainerWidth, height: responsiveContainerHeight, style: {
208
+ opacity: visibility ? 1 : 0,
209
+ transition: 'opacity 0.3s ease-in-out',
210
+ } }, data.length ? (React.createElement(recharts_1.ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
194
211
  top: 24,
195
212
  right: 10,
196
213
  left: -24,
@@ -206,7 +223,7 @@ function LineChart(props) {
206
223
  justifyItems: 'start',
207
224
  paddingLeft: '2em',
208
225
  top: '15px',
209
- }, 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 }) })),
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, 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 }) })),
210
227
  groups.map(function (group, index) {
211
228
  var isMuted = lineVisibility.hover !== group && lineVisibility.hover;
212
229
  var strokeColor;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.3.13",
3
+ "version": "1.3.15",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",