@auth0/quantum-charts 1.3.11 → 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.
Files changed (8) hide show
  1. package/chart-summary/index.d.ts +1 -0
  2. package/chart-summary/index.js +9 -1
  3. package/common/custom-legend.js +6 -2
  4. package/esm/chart-summary/index.js +7 -0
  5. package/esm/common/custom-legend.js +6 -2
  6. package/esm/line-chart/index.js +18 -3
  7. package/line-chart/index.js +18 -3
  8. package/package.json +1 -1
package/chart-summary/index.d.ts CHANGED
@@ -21,4 +21,5 @@ export interface IChartSummaryProps {
21
21
  titleIcon?: React.ReactNode;
22
22
  isVertical?: boolean;
23
23
  }
24
+ export declare const titleToAnalyticName: (title: string) => string;
24
25
  export declare function ChartSummary(props: IChartSummaryProps): React.JSX.Element;
package/chart-summary/index.js CHANGED
@@ -63,7 +63,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
63
63
  return to.concat(ar || Array.prototype.slice.call(from));
64
64
  };
65
65
  Object.defineProperty(exports, "__esModule", { value: true });
66
- exports.ChartSummary = void 0;
66
+ exports.ChartSummary = exports.titleToAnalyticName = void 0;
67
67
  var React = __importStar(require("react"));
68
68
  var quantum_product_1 = require("@auth0/quantum-product");
69
69
  var downloadCsv_1 = require("../helpers/downloadCsv");
@@ -92,6 +92,12 @@ var TitleWrapper = (0, quantum_product_1.styled)(quantum_product_1.Text)(templat
92
92
  var theme = _a.theme;
93
93
  return theme.tokens.type_preset_section_subtitle.fontWeight;
94
94
  });
95
+ var titleToAnalyticName = function (title) {
96
+ return title
97
+ .replace(/\s+/g, '-') // Replace spaces with underscores
98
+ .toLowerCase(); // Convert to lowercase
99
+ };
100
+ exports.titleToAnalyticName = titleToAnalyticName;
95
101
  function ChartSummary(props) {
96
102
  var title = props.title, chartStatus = props.chartStatus, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable, _a = props.triggerButtonSize, triggerButtonSize = _a === void 0 ? 'small' : _a, titleIcon = props.titleIcon, finalMenuItem = props.finalMenuItem, isVertical = props.isVertical;
97
103
  var _b = __read(React.useState(false), 2), isOpen = _b[0], setIsOpen = _b[1];
@@ -108,6 +114,7 @@ function ChartSummary(props) {
108
114
  setIsOpen(true);
109
115
  },
110
116
  title: 'View table',
117
+ analyticsId: "security-center-menu-item-".concat((0, exports.titleToAnalyticName)(title || ''), "-view-table"),
111
118
  },
112
119
  ];
113
120
  if (showChartTable && allowDownload) {
@@ -119,6 +126,7 @@ function ChartSummary(props) {
119
126
  (0, downloadCsv_1.downloadCSV)(dataTable, title);
120
127
  },
121
128
  title: 'Download CSV',
129
+ analyticsId: "security-center-menu-item-".concat((0, exports.titleToAnalyticName)(title || ''), "-download-csv"),
122
130
  });
123
131
  }
124
132
  var aggregatedMenuItems = baseMenuItems;
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/chart-summary/index.js CHANGED
@@ -66,6 +66,11 @@ var TitleWrapper = styled(Text)(templateObject_3 || (templateObject_3 = __makeTe
66
66
  var theme = _a.theme;
67
67
  return theme.tokens.type_preset_section_subtitle.fontWeight;
68
68
  });
69
+ export var titleToAnalyticName = function (title) {
70
+ return title
71
+ .replace(/\s+/g, '-') // Replace spaces with underscores
72
+ .toLowerCase(); // Convert to lowercase
73
+ };
69
74
  export function ChartSummary(props) {
70
75
  var title = props.title, chartStatus = props.chartStatus, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable, _a = props.triggerButtonSize, triggerButtonSize = _a === void 0 ? 'small' : _a, titleIcon = props.titleIcon, finalMenuItem = props.finalMenuItem, isVertical = props.isVertical;
71
76
  var _b = __read(React.useState(false), 2), isOpen = _b[0], setIsOpen = _b[1];
@@ -82,6 +87,7 @@ export function ChartSummary(props) {
82
87
  setIsOpen(true);
83
88
  },
84
89
  title: 'View table',
90
+ analyticsId: "security-center-menu-item-".concat(titleToAnalyticName(title || ''), "-view-table"),
85
91
  },
86
92
  ];
87
93
  if (showChartTable && allowDownload) {
@@ -93,6 +99,7 @@ export function ChartSummary(props) {
93
99
  downloadCSV(dataTable, title);
94
100
  },
95
101
  title: 'Download CSV',
102
+ analyticsId: "security-center-menu-item-".concat(titleToAnalyticName(title || ''), "-download-csv"),
96
103
  });
97
104
  }
98
105
  var aggregatedMenuItems = baseMenuItems;
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
@@ -43,6 +43,11 @@ export function LineChart(props) {
43
43
  var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, titleIcon = _a.titleIcon, chartStatus = _a.chartStatus, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, statusColorMapping = _a.statusColorMapping, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, finalMenuItem = _a.finalMenuItem, thresholds = _a.thresholds, breaches = _a.breaches, disableThresholdMenu = _a.disableThresholdMenu, _e = _a.allowDownload, allowDownload = _e === void 0 ? true : _e, _f = _a.showChartTable, showChartTable = _f === void 0 ? true : _f, _g = _a.showChartTableButtonInHeader, showChartTableButtonInHeader = _g === void 0 ? true : _g, _h = _a.showDividerInHeader, showDividerInHeader = _h === void 0 ? true : _h, _j = _a.headerButtonsSize, headerButtonsSize = _j === void 0 ? 'medium' : _j, _k = _a.isVertical, isVertical = _k === void 0 ? false : _k;
44
44
  var theme = useTheme();
45
45
  var _l = useDropdownMenuState({ baseId: 'threshold-menu' }), triggerProps = _l.triggerProps, menuProps = _l.menuProps;
46
+ var titleToAnalyticName = function (title) {
47
+ return title
48
+ .replace(/\s+/g, '-') // Replace spaces with underscores
49
+ .toLowerCase(); // Convert to lowercase
50
+ };
46
51
  // Function to know how many lines we need based of how much different group values are.
47
52
  var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
48
53
  var initialState = __assign({ hover: null }, groups.reduce(function (acc, group) {
@@ -124,6 +129,7 @@ export function LineChart(props) {
124
129
  menuItems = thresholds.map(function (threshold) { return ({
125
130
  title: threshold.threshold_label,
126
131
  description: threshold.evaluated_metric,
132
+ analyticsId: "security-center-button-".concat(titleToAnalyticName(threshold.evaluated_metric), "-threshold"),
127
133
  onClick: function (event) {
128
134
  setThreshold(threshold);
129
135
  if (menuProps.onClose) {
@@ -144,16 +150,25 @@ export function LineChart(props) {
144
150
  setIsOpen(true);
145
151
  } },
146
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
+ };
147
162
  return (React.createElement(React.Fragment, null,
148
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 },
149
- React.createElement(ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
164
+ React.createElement(ResponsiveContainer, { width: '100%', height: getContainerHeight() }, data.length ? (React.createElement(ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
150
165
  top: 24,
151
166
  right: 10,
152
167
  left: -24,
153
168
  bottom: 24,
154
169
  } },
155
170
  React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
156
- 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 }),
157
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 }),
158
173
  React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
159
174
  legend && isVertical ? (React.createElement(Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {
@@ -162,7 +177,7 @@ export function LineChart(props) {
162
177
  justifyItems: 'start',
163
178
  paddingLeft: '2em',
164
179
  top: '15px',
165
- }, 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 }) })),
166
181
  groups.map(function (group, index) {
167
182
  var isMuted = lineVisibility.hover !== group && lineVisibility.hover;
168
183
  var strokeColor;
package/line-chart/index.js CHANGED
@@ -72,6 +72,11 @@ function LineChart(props) {
72
72
  var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, titleIcon = _a.titleIcon, chartStatus = _a.chartStatus, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, statusColorMapping = _a.statusColorMapping, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, finalMenuItem = _a.finalMenuItem, thresholds = _a.thresholds, breaches = _a.breaches, disableThresholdMenu = _a.disableThresholdMenu, _e = _a.allowDownload, allowDownload = _e === void 0 ? true : _e, _f = _a.showChartTable, showChartTable = _f === void 0 ? true : _f, _g = _a.showChartTableButtonInHeader, showChartTableButtonInHeader = _g === void 0 ? true : _g, _h = _a.showDividerInHeader, showDividerInHeader = _h === void 0 ? true : _h, _j = _a.headerButtonsSize, headerButtonsSize = _j === void 0 ? 'medium' : _j, _k = _a.isVertical, isVertical = _k === void 0 ? false : _k;
73
73
  var theme = (0, quantum_product_1.useTheme)();
74
74
  var _l = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'threshold-menu' }), triggerProps = _l.triggerProps, menuProps = _l.menuProps;
75
+ var titleToAnalyticName = function (title) {
76
+ return title
77
+ .replace(/\s+/g, '-') // Replace spaces with underscores
78
+ .toLowerCase(); // Convert to lowercase
79
+ };
75
80
  // Function to know how many lines we need based of how much different group values are.
76
81
  var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
77
82
  var initialState = __assign({ hover: null }, groups.reduce(function (acc, group) {
@@ -153,6 +158,7 @@ function LineChart(props) {
153
158
  menuItems = thresholds.map(function (threshold) { return ({
154
159
  title: threshold.threshold_label,
155
160
  description: threshold.evaluated_metric,
161
+ analyticsId: "security-center-button-".concat(titleToAnalyticName(threshold.evaluated_metric), "-threshold"),
156
162
  onClick: function (event) {
157
163
  setThreshold(threshold);
158
164
  if (menuProps.onClose) {
@@ -173,16 +179,25 @@ function LineChart(props) {
173
179
  setIsOpen(true);
174
180
  } },
175
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
+ };
176
191
  return (React.createElement(React.Fragment, null,
177
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 },
178
- 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: {
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: {
179
194
  top: 24,
180
195
  right: 10,
181
196
  left: -24,
182
197
  bottom: 24,
183
198
  } },
184
199
  React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
185
- 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 }),
186
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 }),
187
202
  React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
188
203
  legend && isVertical ? (React.createElement(recharts_1.Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {
@@ -191,7 +206,7 @@ function LineChart(props) {
191
206
  justifyItems: 'start',
192
207
  paddingLeft: '2em',
193
208
  top: '15px',
194
- }, 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 }) })),
195
210
  groups.map(function (group, index) {
196
211
  var isMuted = lineVisibility.hover !== group && lineVisibility.hover;
197
212
  var strokeColor;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.3.11",
3
+ "version": "1.3.13",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",