@auth0/quantum-charts 1.1.1 → 1.1.2
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/bar-chart/index.js +12 -14
- package/common/custom-tooltip.js +2 -1
- package/esm/bar-chart/index.js +12 -14
- package/esm/common/custom-tooltip.js +2 -1
- package/package.json +1 -1
package/bar-chart/index.js
CHANGED
|
@@ -64,7 +64,7 @@ var chart_card_1 = require("../chart-card");
|
|
|
64
64
|
var chart_1 = require("../common/chart");
|
|
65
65
|
var custom_legend_1 = require("../common/custom-legend");
|
|
66
66
|
function BarChart(props) {
|
|
67
|
-
var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e, additionalMenuItems = _a.additionalMenuItems, tooltipProp = _a.tooltipProp, _f = _a.showTotalValueInTooltip, showTotalValueInTooltip = _f === void 0 ? false : _f, _g = _a.allowDownload, allowDownload = _g === void 0 ? true : _g, _h = _a.showChartTable, showChartTable = _h === void 0 ? true : _h, headerAction = _a.headerAction, customViewChartTable = _a.customViewChartTable;
|
|
67
|
+
var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e, additionalMenuItems = _a.additionalMenuItems, tooltipProp = _a.tooltipProp, _f = _a.showTotalValueInTooltip, showTotalValueInTooltip = _f === void 0 ? false : _f, _g = _a.allowDownload, allowDownload = _g === void 0 ? true : _g, _h = _a.showChartTable, showChartTable = _h === void 0 ? true : _h, headerAction = _a.headerAction, customViewChartTable = _a.customViewChartTable, barSize = _a.barSize;
|
|
68
68
|
var theme = (0, quantum_product_1.useTheme)();
|
|
69
69
|
// Function to know how many bars we need based of how much different group values are.
|
|
70
70
|
var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
|
|
@@ -90,20 +90,18 @@ function BarChart(props) {
|
|
|
90
90
|
var entries = {};
|
|
91
91
|
data.forEach(function (entry) {
|
|
92
92
|
var _a, _b;
|
|
93
|
-
var
|
|
94
|
-
if (entries[
|
|
95
|
-
entries[
|
|
93
|
+
var entryKey = entry[bottomAxisDataKey];
|
|
94
|
+
if (entries[entryKey]) {
|
|
95
|
+
entries[entryKey][entry.group] = entry[leftAxisDataKey];
|
|
96
|
+
entries[entryKey].value = entry[leftAxisDataKey];
|
|
97
|
+
if (entry.isPartial !== undefined) {
|
|
98
|
+
entries[entryKey].isPartial = entry.isPartial;
|
|
99
|
+
}
|
|
96
100
|
}
|
|
97
101
|
else {
|
|
98
|
-
entries[
|
|
99
|
-
_a[bottomAxisDataKey] = entry[bottomAxisDataKey],
|
|
100
|
-
_a[entry.group] = entry[leftAxisDataKey],
|
|
101
|
-
_a);
|
|
102
|
+
entries[entryKey] = __assign((_a = {}, _a[bottomAxisDataKey] = entry[bottomAxisDataKey], _a[entry.group] = entry[leftAxisDataKey], _a.value = entry[leftAxisDataKey], _a), (entry.isPartial !== undefined && { isPartial: entry.isPartial }));
|
|
102
103
|
}
|
|
103
|
-
return _b = {},
|
|
104
|
-
_b[bottomAxisDataKey] = entry[bottomAxisDataKey],
|
|
105
|
-
_b[entry.group] = entry[leftAxisDataKey],
|
|
106
|
-
_b;
|
|
104
|
+
return __assign((_b = {}, _b[bottomAxisDataKey] = entry[bottomAxisDataKey], _b[entry.group] = entry[leftAxisDataKey], _b.value = entry[leftAxisDataKey], _b), (entry.isPartial !== undefined && { isPartial: entry.isPartial }));
|
|
107
105
|
});
|
|
108
106
|
return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, headerAction: headerAction, helperText: helperText, allowDownload: allowDownload, showChartTable: showChartTable, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable },
|
|
109
107
|
React.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: height }, data.length ? (React.createElement(recharts_1.BarChart, { width: 500, layout: layout === 'horizontal' ? 'vertical' : 'horizontal', height: height, data: Object.values(entries), margin: {
|
|
@@ -118,10 +116,10 @@ function BarChart(props) {
|
|
|
118
116
|
tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); },
|
|
119
117
|
dataKey: bottomAxisDataKey,
|
|
120
118
|
}), { tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
|
|
121
|
-
React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, {
|
|
119
|
+
React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
|
|
122
120
|
React.createElement(recharts_1.Legend, { align: "center", content: React.createElement(custom_legend_1.CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
|
|
123
121
|
groups.map(function (group, index) {
|
|
124
|
-
return (React.createElement(recharts_1.Bar, __assign({ key: group, dataKey: group,
|
|
122
|
+
return (React.createElement(recharts_1.Bar, __assign({ key: group, dataKey: group, barSize: barSize }, (isStacked && { stackId: 'stack' }), { name: group, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
|
|
125
123
|
? (0, theme_1.getColorScale)(theme)[color]['base'][index]
|
|
126
124
|
: (0, theme_1.getColorScale)(theme)[color]['muted'][index] })));
|
|
127
125
|
}))) : (React.createElement("div", { style: {
|
package/common/custom-tooltip.js
CHANGED
|
@@ -50,6 +50,7 @@ var CustomTooltip = function (props) {
|
|
|
50
50
|
};
|
|
51
51
|
var totalValue = formatValue_1(payload.reduce(function (total, item) { return total + (item.value || 0); }, 0));
|
|
52
52
|
var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
|
|
53
|
+
var showTooltipFooter = payload.some(function (item) { return item.payload.isPartial !== false; });
|
|
53
54
|
return (React.createElement(styles_1.CustomTooltip, null,
|
|
54
55
|
(tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipHeader) && (React.createElement(React.Fragment, null,
|
|
55
56
|
tooltipProp.tooltipHeader,
|
|
@@ -69,7 +70,7 @@ var CustomTooltip = function (props) {
|
|
|
69
70
|
x.payload['breachedPoint'] !== 'none' &&
|
|
70
71
|
(x.payload['breachedPoint'] === 'alert' ? (React.createElement(quantum_product_1.AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(quantum_product_1.AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
|
|
71
72
|
}))),
|
|
72
|
-
(tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
|
|
73
|
+
(tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && showTooltipFooter && (React.createElement(React.Fragment, null,
|
|
73
74
|
React.createElement(quantum_product_1.Divider, null),
|
|
74
75
|
tooltipProp.tooltipFooter))));
|
|
75
76
|
}
|
package/esm/bar-chart/index.js
CHANGED
|
@@ -35,7 +35,7 @@ import { ChartCard } from '../chart-card';
|
|
|
35
35
|
import { tickFormatter } from '../common/chart';
|
|
36
36
|
import { CustomLegend } from '../common/custom-legend';
|
|
37
37
|
export function BarChart(props) {
|
|
38
|
-
var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e, additionalMenuItems = _a.additionalMenuItems, tooltipProp = _a.tooltipProp, _f = _a.showTotalValueInTooltip, showTotalValueInTooltip = _f === void 0 ? false : _f, _g = _a.allowDownload, allowDownload = _g === void 0 ? true : _g, _h = _a.showChartTable, showChartTable = _h === void 0 ? true : _h, headerAction = _a.headerAction, customViewChartTable = _a.customViewChartTable;
|
|
38
|
+
var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d, _e = _a.color, color = _e === void 0 ? 'categorical' : _e, additionalMenuItems = _a.additionalMenuItems, tooltipProp = _a.tooltipProp, _f = _a.showTotalValueInTooltip, showTotalValueInTooltip = _f === void 0 ? false : _f, _g = _a.allowDownload, allowDownload = _g === void 0 ? true : _g, _h = _a.showChartTable, showChartTable = _h === void 0 ? true : _h, headerAction = _a.headerAction, customViewChartTable = _a.customViewChartTable, barSize = _a.barSize;
|
|
39
39
|
var theme = useTheme();
|
|
40
40
|
// Function to know how many bars we need based of how much different group values are.
|
|
41
41
|
var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
|
|
@@ -61,20 +61,18 @@ export function BarChart(props) {
|
|
|
61
61
|
var entries = {};
|
|
62
62
|
data.forEach(function (entry) {
|
|
63
63
|
var _a, _b;
|
|
64
|
-
var
|
|
65
|
-
if (entries[
|
|
66
|
-
entries[
|
|
64
|
+
var entryKey = entry[bottomAxisDataKey];
|
|
65
|
+
if (entries[entryKey]) {
|
|
66
|
+
entries[entryKey][entry.group] = entry[leftAxisDataKey];
|
|
67
|
+
entries[entryKey].value = entry[leftAxisDataKey];
|
|
68
|
+
if (entry.isPartial !== undefined) {
|
|
69
|
+
entries[entryKey].isPartial = entry.isPartial;
|
|
70
|
+
}
|
|
67
71
|
}
|
|
68
72
|
else {
|
|
69
|
-
entries[
|
|
70
|
-
_a[bottomAxisDataKey] = entry[bottomAxisDataKey],
|
|
71
|
-
_a[entry.group] = entry[leftAxisDataKey],
|
|
72
|
-
_a);
|
|
73
|
+
entries[entryKey] = __assign((_a = {}, _a[bottomAxisDataKey] = entry[bottomAxisDataKey], _a[entry.group] = entry[leftAxisDataKey], _a.value = entry[leftAxisDataKey], _a), (entry.isPartial !== undefined && { isPartial: entry.isPartial }));
|
|
73
74
|
}
|
|
74
|
-
return _b = {},
|
|
75
|
-
_b[bottomAxisDataKey] = entry[bottomAxisDataKey],
|
|
76
|
-
_b[entry.group] = entry[leftAxisDataKey],
|
|
77
|
-
_b;
|
|
75
|
+
return __assign((_b = {}, _b[bottomAxisDataKey] = entry[bottomAxisDataKey], _b[entry.group] = entry[leftAxisDataKey], _b.value = entry[leftAxisDataKey], _b), (entry.isPartial !== undefined && { isPartial: entry.isPartial }));
|
|
78
76
|
});
|
|
79
77
|
return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, headerAction: headerAction, helperText: helperText, allowDownload: allowDownload, showChartTable: showChartTable, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable },
|
|
80
78
|
React.createElement(ResponsiveContainer, { width: "100%", height: height }, data.length ? (React.createElement(RechartsBarChart, { width: 500, layout: layout === 'horizontal' ? 'vertical' : 'horizontal', height: height, data: Object.values(entries), margin: {
|
|
@@ -89,10 +87,10 @@ export function BarChart(props) {
|
|
|
89
87
|
tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); },
|
|
90
88
|
dataKey: bottomAxisDataKey,
|
|
91
89
|
}), { tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
|
|
92
|
-
React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, {
|
|
90
|
+
React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
|
|
93
91
|
React.createElement(Legend, { align: "center", content: React.createElement(CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
|
|
94
92
|
groups.map(function (group, index) {
|
|
95
|
-
return (React.createElement(Bar, __assign({ key: group, dataKey: group,
|
|
93
|
+
return (React.createElement(Bar, __assign({ key: group, dataKey: group, barSize: barSize }, (isStacked && { stackId: 'stack' }), { name: group, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
|
|
96
94
|
? getColorScale(theme)[color]['base'][index]
|
|
97
95
|
: getColorScale(theme)[color]['muted'][index] })));
|
|
98
96
|
}))) : (React.createElement("div", { style: {
|
|
@@ -22,6 +22,7 @@ var CustomTooltip = function (props) {
|
|
|
22
22
|
};
|
|
23
23
|
var totalValue = formatValue_1(payload.reduce(function (total, item) { return total + (item.value || 0); }, 0));
|
|
24
24
|
var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
|
|
25
|
+
var showTooltipFooter = payload.some(function (item) { return item.payload.isPartial !== false; });
|
|
25
26
|
return (React.createElement(CustomTooltipStyled, null,
|
|
26
27
|
(tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipHeader) && (React.createElement(React.Fragment, null,
|
|
27
28
|
tooltipProp.tooltipHeader,
|
|
@@ -41,7 +42,7 @@ var CustomTooltip = function (props) {
|
|
|
41
42
|
x.payload['breachedPoint'] !== 'none' &&
|
|
42
43
|
(x.payload['breachedPoint'] === 'alert' ? (React.createElement(AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
|
|
43
44
|
}))),
|
|
44
|
-
(tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
|
|
45
|
+
(tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && showTooltipFooter && (React.createElement(React.Fragment, null,
|
|
45
46
|
React.createElement(Divider, null),
|
|
46
47
|
tooltipProp.tooltipFooter))));
|
|
47
48
|
}
|