@auth0/quantum-charts 1.0.9 → 1.1.0

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 (14) hide show
  1. package/bar-chart/index.d.ts +3 -0
  2. package/bar-chart/index.js +3 -3
  3. package/chart-card/index.js +2 -2
  4. package/chart-summary/data-table-chart.d.ts +2 -0
  5. package/chart-summary/data-table-chart.js +31 -33
  6. package/chart-summary/index.d.ts +3 -0
  7. package/chart-summary/index.js +28 -31
  8. package/common/custom-tooltip.js +1 -1
  9. package/esm/bar-chart/index.js +3 -3
  10. package/esm/chart-card/index.js +2 -2
  11. package/esm/chart-summary/data-table-chart.js +31 -33
  12. package/esm/chart-summary/index.js +28 -31
  13. package/esm/common/custom-tooltip.js +1 -1
  14. package/package.json +1 -1
package/bar-chart/index.d.ts CHANGED
@@ -8,5 +8,8 @@ export interface IBarChartProps<DataType = unknown> extends IBaseChartProps<Data
8
8
  tooltipHeader?: React.ReactElement;
9
9
  tooltipFooter?: React.ReactElement;
10
10
  };
11
+ allowDownload?: boolean;
12
+ showChartTable?: boolean;
13
+ customViewChartTable?: React.ReactElement;
11
14
  }
12
15
  export declare function BarChart<DataType = unknown>(props: IBarChartProps<DataType>): React.JSX.Element;
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;
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;
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; });
@@ -72,7 +72,7 @@ function BarChart(props) {
72
72
  var _a;
73
73
  return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
74
74
  }, {}));
75
- var _g = __read(React.useState(initialState), 2), barVisibility = _g[0], setBarVisibility = _g[1];
75
+ var _j = __read(React.useState(initialState), 2), barVisibility = _j[0], setBarVisibility = _j[1];
76
76
  var handleLegendMouseEnter = function (e) {
77
77
  if (!barVisibility[e.dataKey]) {
78
78
  setBarVisibility(__assign(__assign({}, barVisibility), { hover: e.dataKey }));
@@ -105,7 +105,7 @@ function BarChart(props) {
105
105
  _b[entry.group] = entry[leftAxisDataKey],
106
106
  _b;
107
107
  });
108
- return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, additionalMenuItems: additionalMenuItems },
108
+ 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
109
  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
110
  top: 24,
111
111
  right: 10,
package/chart-card/index.js CHANGED
@@ -28,9 +28,9 @@ var quantum_product_1 = require("@auth0/quantum-product");
28
28
  var React = __importStar(require("react"));
29
29
  var chart_summary_1 = require("../chart-summary");
30
30
  function ChartCard(props) {
31
- var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
31
+ var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable;
32
32
  return (React.createElement(quantum_product_1.Card, { sx: { height: height, padding: 3 } },
33
- React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, additionalMenuItems: additionalMenuItems }),
33
+ React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, showChartTable: showChartTable, allowDownload: allowDownload, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable }),
34
34
  children));
35
35
  }
36
36
  exports.ChartCard = ChartCard;
package/chart-summary/data-table-chart.d.ts CHANGED
@@ -4,5 +4,7 @@ export interface IDataTableChartProps {
4
4
  isOpen: boolean;
5
5
  toggleIsOpen: () => void;
6
6
  data: any;
7
+ customViewChartTable?: React.ReactElement;
8
+ allowDownload?: boolean;
7
9
  }
8
10
  export declare function DataTableChart(props: IDataTableChartProps): React.JSX.Element;
package/chart-summary/data-table-chart.js CHANGED
@@ -49,43 +49,41 @@ var date_fns_1 = require("date-fns");
49
49
  var downloadCsv_1 = require("../helpers/downloadCsv");
50
50
  var quantum_product_1 = require("@auth0/quantum-product");
51
51
  function DataTableChart(props) {
52
- var isOpen = props.isOpen, title = props.title, toggleIsOpen = props.toggleIsOpen, data = props.data;
52
+ var isOpen = props.isOpen, title = props.title, toggleIsOpen = props.toggleIsOpen, data = props.data, customViewChartTable = props.customViewChartTable, allowDownload = props.allowDownload;
53
53
  var isDonut = data[0] && data[0].name !== undefined;
54
54
  var groups = lodash_1.default.groupBy(data, 'group');
55
55
  var _a = __read(React.useState(Object.keys(groups)[0]), 2), selectedTab = _a[0], setSelectedTab = _a[1];
56
56
  var hasKey = data[0] && data[0].key !== undefined;
57
- return (React.createElement(quantum_product_1.Dialog, { open: isOpen, fullWidth: true, title: title, onClose: toggleIsOpen, actions: React.createElement(React.Fragment, null,
58
- React.createElement(quantum_product_1.Button, { color: "primary", variant: "contained", startIcon: React.createElement(quantum_product_1.DownloadIcon, null), onClick: function () { return (0, downloadCsv_1.downloadCSV)(data, title); } }, "Download")) },
59
- React.createElement(quantum_product_1.Box, null,
60
- React.createElement(quantum_product_1.Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
61
- React.createElement(quantum_product_1.TabList, { classes: { indicator: 'chromatic-ignore' }, style: isDonut ? { display: 'none' } : { display: 'block' } }, !isDonut &&
62
- Object.keys(groups).map(function (group, index) {
63
- return React.createElement(quantum_product_1.Tab, { key: index, label: group, value: group });
64
- })),
65
- React.createElement(quantum_product_1.Box, null, isDonut ? (React.createElement(quantum_product_1.DataTable, { items: data, columns: [
66
- { field: 'name', title: 'Group' },
67
- { title: 'value', render: function (_a) {
68
- var _b;
69
- var item = _a.item;
70
- return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
71
- } },
72
- ] })) : (Object.values(groups).map(function (item, index) {
73
- return (React.createElement(quantum_product_1.TabPanel, { key: index, value: item[0].group },
74
- React.createElement(quantum_product_1.DataTable, { items: item, columns: [
75
- { field: 'group', title: 'Group' },
76
- { title: 'value', render: function (_a) {
77
- var _b;
78
- var item = _a.item;
79
- return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
80
- } },
81
- {
82
- title: hasKey ? 'key' : 'date',
83
- render: function (_a) {
84
- var item = _a.item;
85
- return (hasKey ? item.key : (0, date_fns_1.format)(new Date(item.date), 'LLL d p'));
86
- },
57
+ return (React.createElement(quantum_product_1.Dialog, { open: isOpen, fullWidth: true, title: title, onClose: toggleIsOpen, actions: allowDownload && (React.createElement(quantum_product_1.Button, { color: "primary", variant: "contained", startIcon: React.createElement(quantum_product_1.DownloadIcon, null), onClick: function () { return (0, downloadCsv_1.downloadCSV)(data, title); } }, "Download")) }, customViewChartTable ? (customViewChartTable) : (React.createElement(quantum_product_1.Box, null,
58
+ React.createElement(quantum_product_1.Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
59
+ React.createElement(quantum_product_1.TabList, { classes: { indicator: 'chromatic-ignore' }, style: isDonut ? { display: 'none' } : { display: 'block' } }, !isDonut &&
60
+ Object.keys(groups).map(function (group, index) {
61
+ return React.createElement(quantum_product_1.Tab, { key: index, label: group, value: group });
62
+ })),
63
+ React.createElement(quantum_product_1.Box, null, isDonut ? (React.createElement(quantum_product_1.DataTable, { items: data, columns: [
64
+ { field: 'name', title: 'Group' },
65
+ { title: 'value', render: function (_a) {
66
+ var _b;
67
+ var item = _a.item;
68
+ return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
69
+ } },
70
+ ] })) : (Object.values(groups).map(function (item, index) {
71
+ return (React.createElement(quantum_product_1.TabPanel, { key: index, value: item[0].group },
72
+ React.createElement(quantum_product_1.DataTable, { items: item, columns: [
73
+ { field: 'group', title: 'Group' },
74
+ { title: 'value', render: function (_a) {
75
+ var _b;
76
+ var item = _a.item;
77
+ return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
78
+ } },
79
+ {
80
+ title: hasKey ? 'key' : 'date',
81
+ render: function (_a) {
82
+ var item = _a.item;
83
+ return (hasKey ? item.key : (0, date_fns_1.format)(new Date(item.date), 'LLL d p'));
87
84
  },
88
- ] })));
89
- })))))));
85
+ },
86
+ ] })));
87
+ }))))))));
90
88
  }
91
89
  exports.DataTableChart = DataTableChart;
package/chart-summary/index.d.ts CHANGED
@@ -9,5 +9,8 @@ export interface IChartSummaryProps {
9
9
  dataTable?: any;
10
10
  headerAction?: React.ReactElement;
11
11
  additionalMenuItems?: DropdownMenuListItemValue[];
12
+ showChartTable?: boolean;
13
+ allowDownload?: boolean;
14
+ customViewChartTable?: React.ReactElement;
12
15
  }
13
16
  export declare function ChartSummary(props: IChartSummaryProps): React.JSX.Element;
package/chart-summary/index.js CHANGED
@@ -76,42 +76,40 @@ var Aggregate = (0, quantum_product_1.styled)('h4')(templateObject_1 || (templat
76
76
  return theme.typography.h4.fontSize;
77
77
  });
78
78
  function ChartSummary(props) {
79
- var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
79
+ var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable;
80
80
  var _a = __read(React.useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
81
81
  var _b = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'chart-actions-menu' }), triggerProps = _b.triggerProps, menuProps = _b.menuProps;
82
82
  var toggleIsOpen = function () {
83
83
  setIsOpen(function (prev) { return !prev; });
84
84
  };
85
85
  var menuItems = React.useMemo(function () {
86
- var menuItems = [];
87
- if (dataTable && dataTable[0]) {
88
- menuItems = [
89
- {
90
- type: 'item',
91
- endIcon: React.createElement(quantum_product_1.TableIcon, null),
92
- onClick: function () {
93
- setIsOpen(true);
94
- },
95
- title: 'View table',
86
+ var baseMenuItems = [
87
+ {
88
+ type: 'item',
89
+ endIcon: React.createElement(quantum_product_1.TableIcon, null),
90
+ onClick: function () {
91
+ setIsOpen(true);
96
92
  },
97
- {
98
- type: 'divider',
93
+ title: 'View table',
94
+ },
95
+ ];
96
+ if (showChartTable && allowDownload) {
97
+ baseMenuItems.push({ type: 'divider' }, {
98
+ type: 'item',
99
+ endIcon: React.createElement(quantum_product_1.DownloadCloudIcon, null),
100
+ onClick: function () {
101
+ setIsOpen(true);
102
+ (0, downloadCsv_1.downloadCSV)(dataTable, title);
99
103
  },
100
- {
101
- type: 'item',
102
- endIcon: React.createElement(quantum_product_1.DownloadCloudIcon, null),
103
- onClick: function () {
104
- setIsOpen(true);
105
- (0, downloadCsv_1.downloadCSV)(dataTable, title);
106
- },
107
- title: 'Download CSV',
108
- },
109
- ];
104
+ title: 'Download CSV',
105
+ });
110
106
  }
107
+ var finalMenuItems = baseMenuItems;
111
108
  if (additionalMenuItems) {
112
- if (menuItems.length > 0)
113
- menuItems.unshift({ type: 'divider' });
114
- menuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(menuItems), false);
109
+ if (finalMenuItems.length > 0) {
110
+ finalMenuItems.unshift({ type: 'divider' });
111
+ }
112
+ finalMenuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(finalMenuItems), false);
115
113
  }
116
114
  var handleClick = function (cb) {
117
115
  return function (event) {
@@ -121,14 +119,13 @@ function ChartSummary(props) {
121
119
  }
122
120
  };
123
121
  };
124
- menuItems = menuItems.map(function (item) {
122
+ return finalMenuItems.map(function (item) {
125
123
  if (item.type === 'item' && item.onClick) {
126
124
  item.onClick = handleClick(item.onClick);
127
125
  }
128
126
  return item;
129
127
  });
130
- return menuItems;
131
- }, [dataTable, additionalMenuItems, menuProps, title]);
128
+ }, [showChartTable, allowDownload, additionalMenuItems, dataTable, title, menuProps]);
132
129
  return (React.createElement("div", null,
133
130
  React.createElement(quantum_product_1.DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
134
131
  React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
@@ -144,13 +141,13 @@ function ChartSummary(props) {
144
141
  React.createElement(quantum_product_1.HelpCircleIcon, { size: "16" })))))),
145
142
  React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
146
143
  headerAction && (React.createElement(quantum_product_1.StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)),
147
- menuItems.length > 0 && (React.createElement(React.Fragment, null,
144
+ menuItems.length > 0 && showChartTable && (React.createElement(React.Fragment, null,
148
145
  React.createElement(quantum_product_1.IconButton, __assign({ size: "small" }, triggerProps, { label: "More actions" }),
149
146
  React.createElement(quantum_product_1.MoreVerticalIcon, null)),
150
147
  React.createElement(quantum_product_1.DropdownMenu, __assign({}, menuProps, { items: menuItems })))))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
151
148
  React.createElement(Aggregate, null, value),
152
149
  label) }),
153
- dataTable && dataTable[0] && (React.createElement(data_table_chart_1.DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable }))));
150
+ showChartTable && (React.createElement(data_table_chart_1.DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable, customViewChartTable: customViewChartTable, allowDownload: allowDownload }))));
154
151
  }
155
152
  exports.ChartSummary = ChartSummary;
156
153
  var templateObject_1;
package/common/custom-tooltip.js CHANGED
@@ -46,7 +46,7 @@ var CustomTooltip = function (props) {
46
46
  var totalValue = payload.reduce(function (total, item) { return total + (item.value || 0); }, 0);
47
47
  var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
48
48
  return (React.createElement(styles_1.CustomTooltip, null,
49
- (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
49
+ (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipHeader) && (React.createElement(React.Fragment, null,
50
50
  tooltipProp.tooltipHeader,
51
51
  React.createElement(quantum_product_1.Divider, null))),
52
52
  React.createElement(quantum_product_1.Text, { color: "text.secondary" }, label),
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;
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;
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; });
@@ -43,7 +43,7 @@ export function BarChart(props) {
43
43
  var _a;
44
44
  return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
45
45
  }, {}));
46
- var _g = __read(React.useState(initialState), 2), barVisibility = _g[0], setBarVisibility = _g[1];
46
+ var _j = __read(React.useState(initialState), 2), barVisibility = _j[0], setBarVisibility = _j[1];
47
47
  var handleLegendMouseEnter = function (e) {
48
48
  if (!barVisibility[e.dataKey]) {
49
49
  setBarVisibility(__assign(__assign({}, barVisibility), { hover: e.dataKey }));
@@ -76,7 +76,7 @@ export function BarChart(props) {
76
76
  _b[entry.group] = entry[leftAxisDataKey],
77
77
  _b;
78
78
  });
79
- return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, additionalMenuItems: additionalMenuItems },
79
+ 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
80
  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
81
  top: 24,
82
82
  right: 10,
package/esm/chart-card/index.js CHANGED
@@ -2,8 +2,8 @@ import { Card } from '@auth0/quantum-product';
2
2
  import * as React from 'react';
3
3
  import { ChartSummary } from '../chart-summary';
4
4
  export function ChartCard(props) {
5
- var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
5
+ var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable;
6
6
  return (React.createElement(Card, { sx: { height: height, padding: 3 } },
7
- React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, additionalMenuItems: additionalMenuItems }),
7
+ React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, showChartTable: showChartTable, allowDownload: allowDownload, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable }),
8
8
  children));
9
9
  }
package/esm/chart-summary/data-table-chart.js CHANGED
@@ -20,42 +20,40 @@ import { format } from 'date-fns';
20
20
  import { downloadCSV } from '../helpers/downloadCsv';
21
21
  import { Box, Button, DataTable, Dialog, DownloadIcon, Tab, TabList, TabPanel, Tabs } from '@auth0/quantum-product';
22
22
  export function DataTableChart(props) {
23
- var isOpen = props.isOpen, title = props.title, toggleIsOpen = props.toggleIsOpen, data = props.data;
23
+ var isOpen = props.isOpen, title = props.title, toggleIsOpen = props.toggleIsOpen, data = props.data, customViewChartTable = props.customViewChartTable, allowDownload = props.allowDownload;
24
24
  var isDonut = data[0] && data[0].name !== undefined;
25
25
  var groups = _.groupBy(data, 'group');
26
26
  var _a = __read(React.useState(Object.keys(groups)[0]), 2), selectedTab = _a[0], setSelectedTab = _a[1];
27
27
  var hasKey = data[0] && data[0].key !== undefined;
28
- return (React.createElement(Dialog, { open: isOpen, fullWidth: true, title: title, onClose: toggleIsOpen, actions: React.createElement(React.Fragment, null,
29
- React.createElement(Button, { color: "primary", variant: "contained", startIcon: React.createElement(DownloadIcon, null), onClick: function () { return downloadCSV(data, title); } }, "Download")) },
30
- React.createElement(Box, null,
31
- React.createElement(Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
32
- React.createElement(TabList, { classes: { indicator: 'chromatic-ignore' }, style: isDonut ? { display: 'none' } : { display: 'block' } }, !isDonut &&
33
- Object.keys(groups).map(function (group, index) {
34
- return React.createElement(Tab, { key: index, label: group, value: group });
35
- })),
36
- React.createElement(Box, null, isDonut ? (React.createElement(DataTable, { items: data, columns: [
37
- { field: 'name', title: 'Group' },
38
- { title: 'value', render: function (_a) {
39
- var _b;
40
- var item = _a.item;
41
- return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
42
- } },
43
- ] })) : (Object.values(groups).map(function (item, index) {
44
- return (React.createElement(TabPanel, { key: index, value: item[0].group },
45
- React.createElement(DataTable, { items: item, columns: [
46
- { field: 'group', title: 'Group' },
47
- { title: 'value', render: function (_a) {
48
- var _b;
49
- var item = _a.item;
50
- return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
51
- } },
52
- {
53
- title: hasKey ? 'key' : 'date',
54
- render: function (_a) {
55
- var item = _a.item;
56
- return (hasKey ? item.key : format(new Date(item.date), 'LLL d p'));
57
- },
28
+ return (React.createElement(Dialog, { open: isOpen, fullWidth: true, title: title, onClose: toggleIsOpen, actions: allowDownload && (React.createElement(Button, { color: "primary", variant: "contained", startIcon: React.createElement(DownloadIcon, null), onClick: function () { return downloadCSV(data, title); } }, "Download")) }, customViewChartTable ? (customViewChartTable) : (React.createElement(Box, null,
29
+ React.createElement(Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
30
+ React.createElement(TabList, { classes: { indicator: 'chromatic-ignore' }, style: isDonut ? { display: 'none' } : { display: 'block' } }, !isDonut &&
31
+ Object.keys(groups).map(function (group, index) {
32
+ return React.createElement(Tab, { key: index, label: group, value: group });
33
+ })),
34
+ React.createElement(Box, null, isDonut ? (React.createElement(DataTable, { items: data, columns: [
35
+ { field: 'name', title: 'Group' },
36
+ { title: 'value', render: function (_a) {
37
+ var _b;
38
+ var item = _a.item;
39
+ return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
40
+ } },
41
+ ] })) : (Object.values(groups).map(function (item, index) {
42
+ return (React.createElement(TabPanel, { key: index, value: item[0].group },
43
+ React.createElement(DataTable, { items: item, columns: [
44
+ { field: 'group', title: 'Group' },
45
+ { title: 'value', render: function (_a) {
46
+ var _b;
47
+ var item = _a.item;
48
+ return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
49
+ } },
50
+ {
51
+ title: hasKey ? 'key' : 'date',
52
+ render: function (_a) {
53
+ var item = _a.item;
54
+ return (hasKey ? item.key : format(new Date(item.date), 'LLL d p'));
58
55
  },
59
- ] })));
60
- })))))));
56
+ },
57
+ ] })));
58
+ }))))))));
61
59
  }
package/esm/chart-summary/index.js CHANGED
@@ -50,42 +50,40 @@ var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTempl
50
50
  return theme.typography.h4.fontSize;
51
51
  });
52
52
  export function ChartSummary(props) {
53
- var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
53
+ var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable;
54
54
  var _a = __read(React.useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
55
55
  var _b = useDropdownMenuState({ baseId: 'chart-actions-menu' }), triggerProps = _b.triggerProps, menuProps = _b.menuProps;
56
56
  var toggleIsOpen = function () {
57
57
  setIsOpen(function (prev) { return !prev; });
58
58
  };
59
59
  var menuItems = React.useMemo(function () {
60
- var menuItems = [];
61
- if (dataTable && dataTable[0]) {
62
- menuItems = [
63
- {
64
- type: 'item',
65
- endIcon: React.createElement(TableIcon, null),
66
- onClick: function () {
67
- setIsOpen(true);
68
- },
69
- title: 'View table',
60
+ var baseMenuItems = [
61
+ {
62
+ type: 'item',
63
+ endIcon: React.createElement(TableIcon, null),
64
+ onClick: function () {
65
+ setIsOpen(true);
70
66
  },
71
- {
72
- type: 'divider',
67
+ title: 'View table',
68
+ },
69
+ ];
70
+ if (showChartTable && allowDownload) {
71
+ baseMenuItems.push({ type: 'divider' }, {
72
+ type: 'item',
73
+ endIcon: React.createElement(DownloadCloudIcon, null),
74
+ onClick: function () {
75
+ setIsOpen(true);
76
+ downloadCSV(dataTable, title);
73
77
  },
74
- {
75
- type: 'item',
76
- endIcon: React.createElement(DownloadCloudIcon, null),
77
- onClick: function () {
78
- setIsOpen(true);
79
- downloadCSV(dataTable, title);
80
- },
81
- title: 'Download CSV',
82
- },
83
- ];
78
+ title: 'Download CSV',
79
+ });
84
80
  }
81
+ var finalMenuItems = baseMenuItems;
85
82
  if (additionalMenuItems) {
86
- if (menuItems.length > 0)
87
- menuItems.unshift({ type: 'divider' });
88
- menuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(menuItems), false);
83
+ if (finalMenuItems.length > 0) {
84
+ finalMenuItems.unshift({ type: 'divider' });
85
+ }
86
+ finalMenuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(finalMenuItems), false);
89
87
  }
90
88
  var handleClick = function (cb) {
91
89
  return function (event) {
@@ -95,14 +93,13 @@ export function ChartSummary(props) {
95
93
  }
96
94
  };
97
95
  };
98
- menuItems = menuItems.map(function (item) {
96
+ return finalMenuItems.map(function (item) {
99
97
  if (item.type === 'item' && item.onClick) {
100
98
  item.onClick = handleClick(item.onClick);
101
99
  }
102
100
  return item;
103
101
  });
104
- return menuItems;
105
- }, [dataTable, additionalMenuItems, menuProps, title]);
102
+ }, [showChartTable, allowDownload, additionalMenuItems, dataTable, title, menuProps]);
106
103
  return (React.createElement("div", null,
107
104
  React.createElement(DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
108
105
  React.createElement(StackLayout, { gutter: 1 },
@@ -118,12 +115,12 @@ export function ChartSummary(props) {
118
115
  React.createElement(HelpCircleIcon, { size: "16" })))))),
119
116
  React.createElement(StackLayout, { gutter: 1 },
120
117
  headerAction && (React.createElement(StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)),
121
- menuItems.length > 0 && (React.createElement(React.Fragment, null,
118
+ menuItems.length > 0 && showChartTable && (React.createElement(React.Fragment, null,
122
119
  React.createElement(IconButton, __assign({ size: "small" }, triggerProps, { label: "More actions" }),
123
120
  React.createElement(MoreVerticalIcon, null)),
124
121
  React.createElement(DropdownMenu, __assign({}, menuProps, { items: menuItems })))))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(StackLayout, { gutter: 1 },
125
122
  React.createElement(Aggregate, null, value),
126
123
  label) }),
127
- dataTable && dataTable[0] && (React.createElement(DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable }))));
124
+ showChartTable && (React.createElement(DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable, customViewChartTable: customViewChartTable, allowDownload: allowDownload }))));
128
125
  }
129
126
  var templateObject_1;
package/esm/common/custom-tooltip.js CHANGED
@@ -18,7 +18,7 @@ var CustomTooltip = function (props) {
18
18
  var totalValue = payload.reduce(function (total, item) { return total + (item.value || 0); }, 0);
19
19
  var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
20
20
  return (React.createElement(CustomTooltipStyled, null,
21
- (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipFooter) && (React.createElement(React.Fragment, null,
21
+ (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipHeader) && (React.createElement(React.Fragment, null,
22
22
  tooltipProp.tooltipHeader,
23
23
  React.createElement(Divider, null))),
24
24
  React.createElement(Text, { color: "text.secondary" }, label),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.0.9",
3
+ "version": "1.1.0",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",