@auth0/quantum-charts 1.3.5 → 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 (10) 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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.3.5",
3
+ "version": "1.3.6",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",