@auth0/quantum-charts 1.3.12 → 1.3.13
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.
- package/common/custom-legend.js +6 -2
- package/esm/common/custom-legend.js +6 -2
- package/esm/line-chart/index.js +12 -3
- package/line-chart/index.js +12 -3
- 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
|
-
|
|
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;
|
|
@@ -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
|
-
|
|
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,25 @@ 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(height), 2), legendContainerHeight = _q[0], setLegendContainerHeight = _q[1];
|
|
155
|
+
var getContainerHeight = function () {
|
|
156
|
+
if (!isVertical) {
|
|
157
|
+
return height;
|
|
158
|
+
}
|
|
159
|
+
var legendPlusBuffer = legendContainerHeight + 56; // To line up the bottom of the legend with the x-axis
|
|
160
|
+
return Math.max(legendPlusBuffer, height);
|
|
161
|
+
};
|
|
153
162
|
return (React.createElement(React.Fragment, null,
|
|
154
163
|
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:
|
|
164
|
+
React.createElement(ResponsiveContainer, { width: '100%', height: getContainerHeight() }, data.length ? (React.createElement(ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
|
|
156
165
|
top: 24,
|
|
157
166
|
right: 10,
|
|
158
167
|
left: -24,
|
|
159
168
|
bottom: 24,
|
|
160
169
|
} },
|
|
161
170
|
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 }),
|
|
171
|
+
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
172
|
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
173
|
React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
|
|
165
174
|
legend && isVertical ? (React.createElement(Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {
|
|
@@ -168,7 +177,7 @@ export function LineChart(props) {
|
|
|
168
177
|
justifyItems: 'start',
|
|
169
178
|
paddingLeft: '2em',
|
|
170
179
|
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 }) })),
|
|
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 }) })),
|
|
172
181
|
groups.map(function (group, index) {
|
|
173
182
|
var isMuted = lineVisibility.hover !== group && lineVisibility.hover;
|
|
174
183
|
var strokeColor;
|
package/line-chart/index.js
CHANGED
|
@@ -179,16 +179,25 @@ 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(height), 2), legendContainerHeight = _q[0], setLegendContainerHeight = _q[1];
|
|
184
|
+
var getContainerHeight = function () {
|
|
185
|
+
if (!isVertical) {
|
|
186
|
+
return height;
|
|
187
|
+
}
|
|
188
|
+
var legendPlusBuffer = legendContainerHeight + 56; // To line up the bottom of the legend with the x-axis
|
|
189
|
+
return Math.max(legendPlusBuffer, height);
|
|
190
|
+
};
|
|
182
191
|
return (React.createElement(React.Fragment, null,
|
|
183
192
|
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:
|
|
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: {
|
|
185
194
|
top: 24,
|
|
186
195
|
right: 10,
|
|
187
196
|
left: -24,
|
|
188
197
|
bottom: 24,
|
|
189
198
|
} },
|
|
190
199
|
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 }),
|
|
200
|
+
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
201
|
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
202
|
React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
|
|
194
203
|
legend && isVertical ? (React.createElement(recharts_1.Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {
|
|
@@ -197,7 +206,7 @@ function LineChart(props) {
|
|
|
197
206
|
justifyItems: 'start',
|
|
198
207
|
paddingLeft: '2em',
|
|
199
208
|
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 }) })),
|
|
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 }) })),
|
|
201
210
|
groups.map(function (group, index) {
|
|
202
211
|
var isMuted = lineVisibility.hover !== group && lineVisibility.hover;
|
|
203
212
|
var strokeColor;
|