@auth0/quantum-charts 1.3.12 → 1.3.14

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 +6 -2
  2. package/esm/common/custom-legend.js +6 -2
  3. package/esm/line-chart/index.js +29 -3
  4. package/line-chart/index.js +29 -3
  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;
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;
65
65
  var hiddenKeysPattern = /_hidden/;
66
66
  var customLegendPattern = /.*Control/;
67
67
  var getLegendIconColor = function (data, dataKey) {
@@ -90,6 +90,10 @@ var CustomLegend = function (props) {
90
90
  color: getLegendIconColor(dataVisibility, entry.dataKey),
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
- return (React.createElement(Root, { gutter: 1 }, 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))));
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)) {
95
+ setLegendContainerHeight(legendRef.current.getBoundingClientRect().height);
96
+ }
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))));
94
98
  };
95
99
  exports.CustomLegend = CustomLegend;
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;
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;
36
36
  var hiddenKeysPattern = /_hidden/;
37
37
  var customLegendPattern = /.*Control/;
38
38
  var getLegendIconColor = function (data, dataKey) {
@@ -61,5 +61,9 @@ export var CustomLegend = function (props) {
61
61
  color: getLegendIconColor(dataVisibility, entry.dataKey),
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
- return (React.createElement(Root, { gutter: 1 }, 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))));
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)) {
66
+ setLegendContainerHeight(legendRef.current.getBoundingClientRect().height);
67
+ }
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))));
65
69
  };
package/esm/line-chart/index.js CHANGED
@@ -150,16 +150,42 @@ export function LineChart(props) {
150
150
  setIsOpen(true);
151
151
  } },
152
152
  React.createElement(TableIcon, null)))));
153
+ var legendRef = React.useRef(null);
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];
158
+ var getContainerHeight = function () {
159
+ if (!isVertical) {
160
+ return height;
161
+ }
162
+ var legendPlusBuffer = (legendContainerHeight !== null && legendContainerHeight !== void 0 ? legendContainerHeight : 0) + 56; // To line up the bottom of the legend with the x-axis
163
+ return Math.max(legendPlusBuffer, height);
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]);
153
176
  return (React.createElement(React.Fragment, null,
154
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 },
155
- React.createElement(ResponsiveContainer, { width: '100%', height: height }, 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: {
156
182
  top: 24,
157
183
  right: 10,
158
184
  left: -24,
159
185
  bottom: 24,
160
186
  } },
161
187
  React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
162
- React.createElement(XAxis, { tickFormatter: function (value) { return tickFormatter(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "equidistantPreserveStart", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(3), axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold }, allowDecimals: bottomAxis.allowDecimals }),
188
+ React.createElement(XAxis, { tickFormatter: function (value) { return tickFormatter(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "equidistantPreserveStart", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(3), padding: isVertical ? { right: 40 } : undefined, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold }, allowDecimals: bottomAxis.allowDecimals }),
163
189
  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 }, allowDecimals: leftAxis.allowDecimals }),
164
190
  React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
165
191
  legend && isVertical ? (React.createElement(Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {
@@ -168,7 +194,7 @@ export function LineChart(props) {
168
194
  justifyItems: 'start',
169
195
  paddingLeft: '2em',
170
196
  top: '15px',
171
- }, content: React.createElement(CustomLegend, { title: title, helperText: helperText, selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, isVertical: isVertical, theme: theme }) })) : (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 }) })) : (React.createElement(Legend, { align: "center", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(CustomLegend, { selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, theme: theme }) })),
172
198
  groups.map(function (group, index) {
173
199
  var isMuted = lineVisibility.hover !== group && lineVisibility.hover;
174
200
  var strokeColor;
package/line-chart/index.js CHANGED
@@ -179,16 +179,42 @@ function LineChart(props) {
179
179
  setIsOpen(true);
180
180
  } },
181
181
  React.createElement(quantum_product_1.TableIcon, null)))));
182
+ var legendRef = React.useRef(null);
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];
187
+ var getContainerHeight = function () {
188
+ if (!isVertical) {
189
+ return height;
190
+ }
191
+ var legendPlusBuffer = (legendContainerHeight !== null && legendContainerHeight !== void 0 ? legendContainerHeight : 0) + 56; // To line up the bottom of the legend with the x-axis
192
+ return Math.max(legendPlusBuffer, height);
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]);
182
205
  return (React.createElement(React.Fragment, null,
183
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 },
184
- 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: {
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: {
185
211
  top: 24,
186
212
  right: 10,
187
213
  left: -24,
188
214
  bottom: 24,
189
215
  } },
190
216
  React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
191
- React.createElement(recharts_1.XAxis, { tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "equidistantPreserveStart", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(3), axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold }, allowDecimals: bottomAxis.allowDecimals }),
217
+ React.createElement(recharts_1.XAxis, { tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "equidistantPreserveStart", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(3), padding: isVertical ? { right: 40 } : undefined, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold }, allowDecimals: bottomAxis.allowDecimals }),
192
218
  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 }, allowDecimals: leftAxis.allowDecimals }),
193
219
  React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
194
220
  legend && isVertical ? (React.createElement(recharts_1.Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {
@@ -197,7 +223,7 @@ function LineChart(props) {
197
223
  justifyItems: 'start',
198
224
  paddingLeft: '2em',
199
225
  top: '15px',
200
- }, content: React.createElement(custom_legend_1.CustomLegend, { title: title, helperText: helperText, selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, isVertical: isVertical, theme: theme }) })) : (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 }) })) : (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 }) })),
201
227
  groups.map(function (group, index) {
202
228
  var isMuted = lineVisibility.hover !== group && lineVisibility.hover;
203
229
  var strokeColor;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.3.12",
3
+ "version": "1.3.14",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",