@auth0/quantum-charts 1.1.0 → 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.
@@ -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,26 +90,23 @@ function BarChart(props) {
90
90
  var entries = {};
91
91
  data.forEach(function (entry) {
92
92
  var _a, _b;
93
- var entrytKey = entry[bottomAxisDataKey];
94
- if (entries[entrytKey]) {
95
- entries[entrytKey][entry.group] = entry[leftAxisDataKey];
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[entrytKey] = (_a = {},
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: {
110
108
  top: 24,
111
109
  right: 10,
112
- left: layout === 'vertical' ? -24 : 36,
113
110
  bottom: 0,
114
111
  } },
115
112
  React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
@@ -118,11 +115,11 @@ function BarChart(props) {
118
115
  type: 'category',
119
116
  tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); },
120
117
  dataKey: bottomAxisDataKey,
121
- }), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
122
- React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
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 } })),
119
+ React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
123
120
  React.createElement(recharts_1.Legend, { align: "center", content: React.createElement(custom_legend_1.CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
124
121
  groups.map(function (group, index) {
125
- return (React.createElement(recharts_1.Bar, __assign({ key: group, dataKey: group }, (isStacked && { stackId: 'stack' }), { name: group, maxBarSize: 70, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
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
126
123
  ? (0, theme_1.getColorScale)(theme)[color]['base'][index]
127
124
  : (0, theme_1.getColorScale)(theme)[color]['muted'][index] })));
128
125
  }))) : (React.createElement("div", { style: {
package/common/chart.d.ts CHANGED
@@ -2,9 +2,9 @@
2
2
  import { TooltipProps } from 'recharts';
3
3
  import { IChartCardProps } from '../chart-card';
4
4
  import { DropdownMenuListItemValue } from '@auth0/quantum-product';
5
- export type ScaleType = 'date' | 'datetime' | 'label' | 'number';
5
+ export type ScaleType = 'date' | 'datetime' | 'label' | 'number' | 'monthyear';
6
6
  export interface ICustomTooltipProps extends TooltipProps<number, string> {
7
- scaleType?: 'datetime' | 'date' | 'label';
7
+ scaleType?: 'datetime' | 'date' | 'label' | 'monthyear';
8
8
  showTotalValue?: boolean;
9
9
  tooltipProp?: {
10
10
  tooltipHeader?: React.ReactElement;
package/common/chart.js CHANGED
@@ -25,6 +25,8 @@ var tickFormatter = function (value, scaleType) {
25
25
  return (0, date_fns_1.format)(new Date(value), 'LLL d');
26
26
  case 'datetime':
27
27
  return (0, date_fns_1.format)(new Date(value), 'LLL d p');
28
+ case 'monthyear':
29
+ return (0, date_fns_1.format)(new Date(value), 'LLL yyyy');
28
30
  default:
29
31
  break;
30
32
  }
@@ -32,19 +32,25 @@ var custom_color_status_dot_1 = __importDefault(require("./custom-color-status-d
32
32
  var date_fns_1 = require("date-fns");
33
33
  var styles_1 = require("../styles");
34
34
  var CustomTooltip = function (props) {
35
- var _a, _b, _c;
35
+ var _a, _b, _c, _d;
36
36
  var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label, tooltipProp = props.tooltipProp, showTotalValue = props.showTotalValue;
37
37
  var theme = (0, quantum_product_1.useTheme)();
38
38
  if (active && payload && payload.length) {
39
39
  var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
40
40
  ? scaleType === 'datetime'
41
41
  ? "".concat((0, date_fns_1.format)(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
42
- : scaleType === 'label'
43
- ? labelProp
44
- : "".concat((0, date_fns_1.format)(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
42
+ : scaleType === 'monthyear'
43
+ ? "".concat((0, date_fns_1.format)(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL yyyy'))
44
+ : scaleType === 'label'
45
+ ? labelProp
46
+ : "".concat((0, date_fns_1.format)(new Date((_d = payload[0].payload) === null || _d === void 0 ? void 0 : _d.date), 'LLL d'))
45
47
  : labelProp;
46
- var totalValue = payload.reduce(function (total, item) { return total + (item.value || 0); }, 0);
48
+ var formatValue_1 = function (value) {
49
+ return value % 1 !== 0 ? parseFloat(value.toFixed(2)) : value;
50
+ };
51
+ var totalValue = formatValue_1(payload.reduce(function (total, item) { return total + (item.value || 0); }, 0));
47
52
  var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
53
+ var showTooltipFooter = payload.some(function (item) { return item.payload.isPartial !== false; });
48
54
  return (React.createElement(styles_1.CustomTooltip, null,
49
55
  (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipHeader) && (React.createElement(React.Fragment, null,
50
56
  tooltipProp.tooltipHeader,
@@ -59,12 +65,12 @@ var CustomTooltip = function (props) {
59
65
  .map(function (x, index) {
60
66
  return (React.createElement(quantum_product_1.StackLayout, { key: index, gutter: 0.5 },
61
67
  React.createElement(custom_color_status_dot_1.default, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + ' ' }),
62
- React.createElement(quantum_product_1.Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey || '']),
68
+ React.createElement(quantum_product_1.Text, { color: "text.secondary", alignItems: 'end' }, x.dataKey ? formatValue_1(x.payload[x.dataKey]) : ''),
63
69
  x.payload['evaluated_group'] === x.dataKey &&
64
70
  x.payload['breachedPoint'] !== 'none' &&
65
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 })))));
66
72
  }))),
67
- (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,
68
74
  React.createElement(quantum_product_1.Divider, null),
69
75
  tooltipProp.tooltipFooter))));
70
76
  }
@@ -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,26 +61,23 @@ export function BarChart(props) {
61
61
  var entries = {};
62
62
  data.forEach(function (entry) {
63
63
  var _a, _b;
64
- var entrytKey = entry[bottomAxisDataKey];
65
- if (entries[entrytKey]) {
66
- entries[entrytKey][entry.group] = entry[leftAxisDataKey];
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[entrytKey] = (_a = {},
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: {
81
79
  top: 24,
82
80
  right: 10,
83
- left: layout === 'vertical' ? -24 : 36,
84
81
  bottom: 0,
85
82
  } },
86
83
  React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
@@ -89,11 +86,11 @@ export function BarChart(props) {
89
86
  type: 'category',
90
87
  tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); },
91
88
  dataKey: bottomAxisDataKey,
92
- }), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
93
- React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
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 } })),
90
+ React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
94
91
  React.createElement(Legend, { align: "center", content: React.createElement(CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
95
92
  groups.map(function (group, index) {
96
- return (React.createElement(Bar, __assign({ key: group, dataKey: group }, (isStacked && { stackId: 'stack' }), { name: group, maxBarSize: 70, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
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
97
94
  ? getColorScale(theme)[color]['base'][index]
98
95
  : getColorScale(theme)[color]['muted'][index] })));
99
96
  }))) : (React.createElement("div", { style: {
@@ -22,6 +22,8 @@ export var tickFormatter = function (value, scaleType) {
22
22
  return format(new Date(value), 'LLL d');
23
23
  case 'datetime':
24
24
  return format(new Date(value), 'LLL d p');
25
+ case 'monthyear':
26
+ return format(new Date(value), 'LLL yyyy');
25
27
  default:
26
28
  break;
27
29
  }
@@ -4,19 +4,25 @@ import StatusDot from './custom-color-status-dot';
4
4
  import { format } from 'date-fns';
5
5
  import { CustomTooltip as CustomTooltipStyled } from '../styles';
6
6
  var CustomTooltip = function (props) {
7
- var _a, _b, _c;
7
+ var _a, _b, _c, _d;
8
8
  var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label, tooltipProp = props.tooltipProp, showTotalValue = props.showTotalValue;
9
9
  var theme = useTheme();
10
10
  if (active && payload && payload.length) {
11
11
  var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
12
12
  ? scaleType === 'datetime'
13
13
  ? "".concat(format(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
14
- : scaleType === 'label'
15
- ? labelProp
16
- : "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
14
+ : scaleType === 'monthyear'
15
+ ? "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL yyyy'))
16
+ : scaleType === 'label'
17
+ ? labelProp
18
+ : "".concat(format(new Date((_d = payload[0].payload) === null || _d === void 0 ? void 0 : _d.date), 'LLL d'))
17
19
  : labelProp;
18
- var totalValue = payload.reduce(function (total, item) { return total + (item.value || 0); }, 0);
20
+ var formatValue_1 = function (value) {
21
+ return value % 1 !== 0 ? parseFloat(value.toFixed(2)) : value;
22
+ };
23
+ var totalValue = formatValue_1(payload.reduce(function (total, item) { return total + (item.value || 0); }, 0));
19
24
  var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
25
+ var showTooltipFooter = payload.some(function (item) { return item.payload.isPartial !== false; });
20
26
  return (React.createElement(CustomTooltipStyled, null,
21
27
  (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipHeader) && (React.createElement(React.Fragment, null,
22
28
  tooltipProp.tooltipHeader,
@@ -31,12 +37,12 @@ var CustomTooltip = function (props) {
31
37
  .map(function (x, index) {
32
38
  return (React.createElement(StackLayout, { key: index, gutter: 0.5 },
33
39
  React.createElement(StatusDot, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + ' ' }),
34
- React.createElement(Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey || '']),
40
+ React.createElement(Text, { color: "text.secondary", alignItems: 'end' }, x.dataKey ? formatValue_1(x.payload[x.dataKey]) : ''),
35
41
  x.payload['evaluated_group'] === x.dataKey &&
36
42
  x.payload['breachedPoint'] !== 'none' &&
37
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 })))));
38
44
  }))),
39
- (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,
40
46
  React.createElement(Divider, null),
41
47
  tooltipProp.tooltipFooter))));
42
48
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.1.0",
3
+ "version": "1.1.2",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",