@auth0/quantum-charts 1.3.4 → 1.3.6

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 (12) hide show
  1. package/donut-chart/center.d.ts +1 -0
  2. package/donut-chart/center.js +3 -2
  3. package/donut-chart/decoupled-legend.d.ts +1 -0
  4. package/donut-chart/decoupled-legend.js +4 -3
  5. package/donut-chart/index.d.ts +2 -0
  6. package/donut-chart/index.js +7 -6
  7. package/esm/donut-chart/center.js +3 -2
  8. package/esm/donut-chart/decoupled-legend.js +4 -3
  9. package/esm/donut-chart/index.js +7 -6
  10. package/esm/line-chart/index.js +1 -1
  11. package/line-chart/index.js +1 -1
  12. package/package.json +1 -1
package/donut-chart/center.d.ts CHANGED
@@ -3,6 +3,7 @@ type CenterProps = {
3
3
  data: any;
4
4
  activeIndex?: number;
5
5
  displayType: 'absolute' | 'percent';
6
+ centerLabel?: string;
6
7
  };
7
8
  declare const Center: React.FC<CenterProps>;
8
9
  export default Center;
package/donut-chart/center.js CHANGED
@@ -43,7 +43,7 @@ var Aggregate = (0, quantum_product_1.styled)('h4')(templateObject_1 || (templat
43
43
  });
44
44
  var CenterPositioning = (0, quantum_product_1.styled)(quantum_product_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n place-items: center;\n height: 100%;\n text-align: center;\n"], ["\n display: grid;\n place-items: center;\n height: 100%;\n text-align: center;\n"])));
45
45
  var Center = function (props) {
46
- var activeIndex = props.activeIndex, data = props.data, displayType = props.displayType;
46
+ var activeIndex = props.activeIndex, data = props.data, displayType = props.displayType, centerLabel = props.centerLabel;
47
47
  var hasNoData = data.length === 0;
48
48
  var aggregate = findAggregate(data, activeIndex === undefined, activeIndex);
49
49
  var percentage = function (partialValue, totalValue) {
@@ -55,7 +55,8 @@ var Center = function (props) {
55
55
  ? 'No data'
56
56
  : displayType === 'absolute'
57
57
  ? (0, format_number_1.toShortCompactNotation)(aggregate)
58
- : (0, format_number_1.toPercentageAdaptive)(percentage(aggregate, sumValues(data)) / 100)))));
58
+ : (0, format_number_1.toPercentageAdaptive)(percentage(aggregate, sumValues(data)) / 100)),
59
+ centerLabel)));
59
60
  };
60
61
  exports.default = Center;
61
62
  var templateObject_1, templateObject_2;
package/donut-chart/decoupled-legend.d.ts CHANGED
@@ -5,6 +5,7 @@ export type IDecoupledLegendProps<DataType = unknown> = {
5
5
  activeIndex?: number;
6
6
  setActiveIndex: (index: number | undefined) => void;
7
7
  color?: 'categorical' | 'sequential';
8
+ isStacked?: boolean;
8
9
  };
9
10
  declare function DecoupledLegend<DataType = unknown>(props: IDecoupledLegendProps<DataType>): React.JSX.Element;
10
11
  export default DecoupledLegend;
package/donut-chart/decoupled-legend.js CHANGED
@@ -38,11 +38,11 @@ var LegendText = (0, quantum_product_1.styled)('span')({
38
38
  cursor: 'default',
39
39
  });
40
40
  function DecoupledLegend(props) {
41
- var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a;
41
+ var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a, isStacked = props.isStacked;
42
42
  var theme = (0, quantum_product_1.useTheme)();
43
43
  var BASE_COLORS = (0, theme_1.getColorScale)(theme)[color]['base'];
44
44
  var MUTED_COLORS = (0, theme_1.getColorScale)(theme)[color]['muted'];
45
- return (React.createElement(quantum_product_1.RowLayout, { gutter: 1 }, data.map(function (datum, index) {
45
+ var content = data.map(function (datum, index) {
46
46
  var isActive = activeIndex !== undefined && activeIndex === index;
47
47
  var color = BASE_COLORS[index % BASE_COLORS.length];
48
48
  var mutedColor = MUTED_COLORS[index % MUTED_COLORS.length];
@@ -62,6 +62,7 @@ function DecoupledLegend(props) {
62
62
  alignSelf: 'center',
63
63
  } },
64
64
  React.createElement(LegendText, { color: isActive ? 'primary' : 'secondary' }, datum.name)))));
65
- })));
65
+ });
66
+ return isStacked ? (React.createElement(quantum_product_1.StackLayout, { gutter: 1, sx: { width: '100%', justifyContent: 'space-around' } }, content)) : (React.createElement(quantum_product_1.RowLayout, { gutter: 1 }, content));
66
67
  }
67
68
  exports.default = DecoupledLegend;
package/donut-chart/index.d.ts CHANGED
@@ -7,6 +7,8 @@ interface IDonutChartProps<DataType = unknown> extends IChartCardProps {
7
7
  layout?: 'horizontal' | 'vertical';
8
8
  color?: 'categorical' | 'sequential';
9
9
  height?: number | string;
10
+ isStacked?: boolean;
11
+ centerLabel?: string;
10
12
  }
11
13
  export declare function DonutChart(props: IDonutChartProps): React.JSX.Element;
12
14
  export {};
package/donut-chart/index.js CHANGED
@@ -71,20 +71,21 @@ var ResponsiveChartCard = (0, quantum_product_1.styled)(quantum_product_1.StackL
71
71
  })));
72
72
  });
73
73
  function DonutChart(props) {
74
- var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c, additionalMenuItems = props.additionalMenuItems;
74
+ var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c, additionalMenuItems = props.additionalMenuItems, isStacked = props.isStacked, centerLabel = props.centerLabel;
75
75
  var _d = __read(React.useState(undefined), 2), activeIndex = _d[0], setActiveIndex = _d[1];
76
+ var donutHeight = isStacked ? 196 : 150;
76
77
  var theme = (0, quantum_product_1.useTheme)();
77
78
  var BASE_COLORS = (0, theme_1.getColorScale)(theme)[color]['base'];
78
79
  return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height, additionalMenuItems: additionalMenuItems },
79
80
  React.createElement(ResponsiveChartCard, { ownerState: { layout: layout } },
80
81
  React.createElement(quantum_product_1.StackLayoutItem, { sx: {
81
- height: '150px',
82
+ height: "".concat(donutHeight, "px"),
82
83
  width: '150px',
83
84
  } },
84
- React.createElement(recharts_1.ResponsiveContainer, { width: '100%', height: 150 },
85
- React.createElement(recharts_1.PieChart, { style: { minWidth: '150px', minHeight: '150px' } },
85
+ React.createElement(recharts_1.ResponsiveContainer, { width: '100%', height: donutHeight },
86
+ React.createElement(recharts_1.PieChart, { style: { minWidth: '150px', minHeight: "".concat(donutHeight, "px") } },
86
87
  React.createElement("foreignObject", { x: 0, y: 0, width: '100%', height: '100%' },
87
- React.createElement(center_1.default, { activeIndex: activeIndex, data: data, displayType: displayType })),
88
+ React.createElement(center_1.default, { activeIndex: activeIndex, data: data, displayType: displayType, centerLabel: centerLabel })),
88
89
  React.createElement(recharts_1.Pie, { dataKey: 'value', data: data, innerRadius: 55, outerRadius: 75, paddingAngle: 2, animationDuration: 750, animationBegin: 0, activeIndex: activeIndex, onMouseEnter: function (_, index) {
89
90
  setActiveIndex(index);
90
91
  }, onMouseLeave: function () {
@@ -93,6 +94,6 @@ function DonutChart(props) {
93
94
  return (React.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: BASE_COLORS[index % BASE_COLORS.length], opacity: activeIndex === undefined ? 1 : activeIndex === index ? 1 : 0.5 }));
94
95
  }))))),
95
96
  React.createElement(quantum_product_1.StackLayoutItem, null,
96
- React.createElement(decoupled_legend_1.default, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color })))));
97
+ React.createElement(decoupled_legend_1.default, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color, isStacked: isStacked })))));
97
98
  }
98
99
  exports.DonutChart = DonutChart;
package/esm/donut-chart/center.js CHANGED
@@ -18,7 +18,7 @@ var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTempl
18
18
  });
19
19
  var CenterPositioning = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n place-items: center;\n height: 100%;\n text-align: center;\n"], ["\n display: grid;\n place-items: center;\n height: 100%;\n text-align: center;\n"])));
20
20
  var Center = function (props) {
21
- var activeIndex = props.activeIndex, data = props.data, displayType = props.displayType;
21
+ var activeIndex = props.activeIndex, data = props.data, displayType = props.displayType, centerLabel = props.centerLabel;
22
22
  var hasNoData = data.length === 0;
23
23
  var aggregate = findAggregate(data, activeIndex === undefined, activeIndex);
24
24
  var percentage = function (partialValue, totalValue) {
@@ -30,7 +30,8 @@ var Center = function (props) {
30
30
  ? 'No data'
31
31
  : displayType === 'absolute'
32
32
  ? toShortCompactNotation(aggregate)
33
- : toPercentageAdaptive(percentage(aggregate, sumValues(data)) / 100)))));
33
+ : toPercentageAdaptive(percentage(aggregate, sumValues(data)) / 100)),
34
+ centerLabel)));
34
35
  };
35
36
  export default Center;
36
37
  var templateObject_1, templateObject_2;
package/esm/donut-chart/decoupled-legend.js CHANGED
@@ -13,11 +13,11 @@ var LegendText = styled('span')({
13
13
  cursor: 'default',
14
14
  });
15
15
  function DecoupledLegend(props) {
16
- var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a;
16
+ var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a, isStacked = props.isStacked;
17
17
  var theme = useTheme();
18
18
  var BASE_COLORS = getColorScale(theme)[color]['base'];
19
19
  var MUTED_COLORS = getColorScale(theme)[color]['muted'];
20
- return (React.createElement(RowLayout, { gutter: 1 }, data.map(function (datum, index) {
20
+ var content = data.map(function (datum, index) {
21
21
  var isActive = activeIndex !== undefined && activeIndex === index;
22
22
  var color = BASE_COLORS[index % BASE_COLORS.length];
23
23
  var mutedColor = MUTED_COLORS[index % MUTED_COLORS.length];
@@ -37,6 +37,7 @@ function DecoupledLegend(props) {
37
37
  alignSelf: 'center',
38
38
  } },
39
39
  React.createElement(LegendText, { color: isActive ? 'primary' : 'secondary' }, datum.name)))));
40
- })));
40
+ });
41
+ return isStacked ? (React.createElement(StackLayout, { gutter: 1, sx: { width: '100%', justifyContent: 'space-around' } }, content)) : (React.createElement(RowLayout, { gutter: 1 }, content));
41
42
  }
42
43
  export default DecoupledLegend;
package/esm/donut-chart/index.js CHANGED
@@ -42,20 +42,21 @@ var ResponsiveChartCard = styled(StackLayout)(function (_a) {
42
42
  })));
43
43
  });
44
44
  export function DonutChart(props) {
45
- var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c, additionalMenuItems = props.additionalMenuItems;
45
+ var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c, additionalMenuItems = props.additionalMenuItems, isStacked = props.isStacked, centerLabel = props.centerLabel;
46
46
  var _d = __read(React.useState(undefined), 2), activeIndex = _d[0], setActiveIndex = _d[1];
47
+ var donutHeight = isStacked ? 196 : 150;
47
48
  var theme = useTheme();
48
49
  var BASE_COLORS = getColorScale(theme)[color]['base'];
49
50
  return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height, additionalMenuItems: additionalMenuItems },
50
51
  React.createElement(ResponsiveChartCard, { ownerState: { layout: layout } },
51
52
  React.createElement(StackLayoutItem, { sx: {
52
- height: '150px',
53
+ height: "".concat(donutHeight, "px"),
53
54
  width: '150px',
54
55
  } },
55
- React.createElement(ResponsiveContainer, { width: '100%', height: 150 },
56
- React.createElement(RechartsPieChart, { style: { minWidth: '150px', minHeight: '150px' } },
56
+ React.createElement(ResponsiveContainer, { width: '100%', height: donutHeight },
57
+ React.createElement(RechartsPieChart, { style: { minWidth: '150px', minHeight: "".concat(donutHeight, "px") } },
57
58
  React.createElement("foreignObject", { x: 0, y: 0, width: '100%', height: '100%' },
58
- React.createElement(Center, { activeIndex: activeIndex, data: data, displayType: displayType })),
59
+ React.createElement(Center, { activeIndex: activeIndex, data: data, displayType: displayType, centerLabel: centerLabel })),
59
60
  React.createElement(Pie, { dataKey: 'value', data: data, innerRadius: 55, outerRadius: 75, paddingAngle: 2, animationDuration: 750, animationBegin: 0, activeIndex: activeIndex, onMouseEnter: function (_, index) {
60
61
  setActiveIndex(index);
61
62
  }, onMouseLeave: function () {
@@ -64,5 +65,5 @@ export function DonutChart(props) {
64
65
  return (React.createElement(Cell, { key: "cell-".concat(index), fill: BASE_COLORS[index % BASE_COLORS.length], opacity: activeIndex === undefined ? 1 : activeIndex === index ? 1 : 0.5 }));
65
66
  }))))),
66
67
  React.createElement(StackLayoutItem, null,
67
- React.createElement(DecoupledLegend, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color })))));
68
+ React.createElement(DecoupledLegend, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color, isStacked: isStacked })))));
68
69
  }
package/esm/line-chart/index.js CHANGED
@@ -153,7 +153,7 @@ export function LineChart(props) {
153
153
  bottom: 24,
154
154
  } },
155
155
  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: "preserveStartEnd", 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 }),
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 }),
157
157
  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
158
  React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
159
159
  legend && isVertical ? (React.createElement(Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {
package/line-chart/index.js CHANGED
@@ -182,7 +182,7 @@ function LineChart(props) {
182
182
  bottom: 24,
183
183
  } },
184
184
  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: "preserveStartEnd", 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 }),
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 }),
186
186
  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
187
  React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
188
188
  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.4",
3
+ "version": "1.3.6",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",