@auth0/quantum-charts 1.3.17 → 1.3.19

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/esm/line-chart/custom-active-dot.js +2 -2
  2. package/esm/line-chart/index.js +4 -4
  3. package/line-chart/custom-active-dot.js +2 -2
  4. package/line-chart/index.js +4 -4
  5. package/package.json +1 -1
package/esm/line-chart/custom-active-dot.js CHANGED
@@ -13,7 +13,7 @@ import * as React from 'react';
13
13
  import { Dot } from 'recharts';
14
14
  var CustomActiveDot = function (onMouseOver) { return function (props) {
15
15
  return (React.createElement(React.Fragment, null,
16
- React.createElement(Dot, __assign({}, props, { key: "outerDot", r: 10, strokeWidth: 0 }, (onMouseOver ? { onMouseOver: onMouseOver } : {}))),
17
- React.createElement(Dot, __assign({}, props, { key: "innerDot", r: 4, style: { fill: 'white' } }, (onMouseOver ? { onMouseOver: onMouseOver } : {})))));
16
+ React.createElement(Dot, __assign({}, props, { key: "outerDot", r: 6, strokeWidth: 0 }, (onMouseOver ? { onMouseOver: onMouseOver } : {}))),
17
+ React.createElement(Dot, __assign({}, props, { key: "innerDot", r: 2, style: { fill: 'white' } }, (onMouseOver ? { onMouseOver: onMouseOver } : {})))));
18
18
  }; };
19
19
  export default CustomActiveDot;
package/esm/line-chart/index.js CHANGED
@@ -60,7 +60,7 @@ export function LineChart(props) {
60
60
  React.useEffect(function () {
61
61
  setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
62
62
  setLineVisibility(__assign(__assign({}, ((thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]) && { thresholdControl: false })), lineVisibility));
63
- }, [thresholds, lineVisibility]);
63
+ }, [thresholds]); // ⚠️ removed lineVisibility to avoid infinite loop
64
64
  var handleLegendMouseEnter = function (e) {
65
65
  if (!lineVisibility[e.dataKey]) {
66
66
  setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
@@ -184,13 +184,13 @@ export function LineChart(props) {
184
184
  opacity: visibility ? 1 : 0,
185
185
  transition: 'opacity 0.3s ease-in-out',
186
186
  } }, data.length ? (React.createElement(ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
187
- top: 24, // custom active dot gets clipped on the edges otherwise
187
+ top: 11, // custom active dot gets clipped on the edges otherwise
188
188
  right: 10, // custom active dot gets clipped on the edges otherwise
189
189
  left: -24,
190
- bottom: 24,
190
+ bottom: 5,
191
191
  } },
192
192
  React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
193
- 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 }),
193
+ React.createElement(XAxis, { tickFormatter: function (value) { return tickFormatter(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "equidistantPreserveStart", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(2), padding: isVertical ? { right: 40 } : undefined, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold }, allowDecimals: bottomAxis.allowDecimals }),
194
194
  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 }),
195
195
  React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
196
196
  legend && isVertical ? (React.createElement(Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {
package/line-chart/custom-active-dot.js CHANGED
@@ -48,7 +48,7 @@ var React = __importStar(require("react"));
48
48
  var recharts_1 = require("recharts");
49
49
  var CustomActiveDot = function (onMouseOver) { return function (props) {
50
50
  return (React.createElement(React.Fragment, null,
51
- React.createElement(recharts_1.Dot, __assign({}, props, { key: "outerDot", r: 10, strokeWidth: 0 }, (onMouseOver ? { onMouseOver: onMouseOver } : {}))),
52
- React.createElement(recharts_1.Dot, __assign({}, props, { key: "innerDot", r: 4, style: { fill: 'white' } }, (onMouseOver ? { onMouseOver: onMouseOver } : {})))));
51
+ React.createElement(recharts_1.Dot, __assign({}, props, { key: "outerDot", r: 6, strokeWidth: 0 }, (onMouseOver ? { onMouseOver: onMouseOver } : {}))),
52
+ React.createElement(recharts_1.Dot, __assign({}, props, { key: "innerDot", r: 2, style: { fill: 'white' } }, (onMouseOver ? { onMouseOver: onMouseOver } : {})))));
53
53
  }; };
54
54
  exports.default = CustomActiveDot;
package/line-chart/index.js CHANGED
@@ -99,7 +99,7 @@ function LineChart(props) {
99
99
  React.useEffect(function () {
100
100
  setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
101
101
  setLineVisibility(__assign(__assign({}, ((thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]) && { thresholdControl: false })), lineVisibility));
102
- }, [thresholds, lineVisibility]);
102
+ }, [thresholds]); // ⚠️ removed lineVisibility to avoid infinite loop
103
103
  var handleLegendMouseEnter = function (e) {
104
104
  if (!lineVisibility[e.dataKey]) {
105
105
  setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
@@ -223,13 +223,13 @@ function LineChart(props) {
223
223
  opacity: visibility ? 1 : 0,
224
224
  transition: 'opacity 0.3s ease-in-out',
225
225
  } }, data.length ? (React.createElement(recharts_1.ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
226
- top: 24, // custom active dot gets clipped on the edges otherwise
226
+ top: 11, // custom active dot gets clipped on the edges otherwise
227
227
  right: 10, // custom active dot gets clipped on the edges otherwise
228
228
  left: -24,
229
- bottom: 24,
229
+ bottom: 5,
230
230
  } },
231
231
  React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
232
- 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 }),
232
+ 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(2), padding: isVertical ? { right: 40 } : undefined, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold }, allowDecimals: bottomAxis.allowDecimals }),
233
233
  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 }),
234
234
  React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
235
235
  legend && isVertical ? (React.createElement(recharts_1.Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.3.17",
3
+ "version": "1.3.19",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",