@auth0/quantum-charts 1.3.13 → 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 (3) hide show
  1. package/esm/line-chart/index.js +20 -3
  2. package/line-chart/index.js +20 -3
  3. package/package.json +1 -1
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,
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,
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.14",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",