@auth0/quantum-charts 1.0.10 → 1.1.1

package/bar-chart/index.d.ts

@@ -8,5 +8,8 @@ export interface IBarChartProps<DataType = unknown> extends IBaseChartProps<Data
         tooltipHeader?: React.ReactElement;
         tooltipFooter?: React.ReactElement;
     };
+    allowDownload?: boolean;
+    showChartTable?: boolean;
+    customViewChartTable?: React.ReactElement;
 }
 export declare function BarChart<DataType = unknown>(props: IBarChartProps<DataType>): React.JSX.Element;

package/bar-chart/index.js

@@ -64,7 +64,7 @@ var chart_card_1 = require("../chart-card");
 var chart_1 = require("../common/chart");
 var custom_legend_1 = require("../common/custom-legend");
 function BarChart(props) {
-    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;
+    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;
     var theme = (0, quantum_product_1.useTheme)();
     // Function to know how many bars we need based of how much different group values are.
     var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -72,7 +72,7 @@ function BarChart(props) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
     }, {}));
-    var _g = __read(React.useState(initialState), 2), barVisibility = _g[0], setBarVisibility = _g[1];
+    var _j = __read(React.useState(initialState), 2), barVisibility = _j[0], setBarVisibility = _j[1];
     var handleLegendMouseEnter = function (e) {
         if (!barVisibility[e.dataKey]) {
             setBarVisibility(__assign(__assign({}, barVisibility), { hover: e.dataKey }));
@@ -105,11 +105,10 @@ function BarChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, additionalMenuItems: additionalMenuItems },
+    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 },
         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: {
                 top: 24,
                 right: 10,
-                left: layout === 'vertical' ? -24 : 36,
                 bottom: 0,
             } },
             React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
@@ -118,11 +117,11 @@ function BarChart(props) {
                 type: 'category',
                 tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); },
                 dataKey: bottomAxisDataKey,
-            }), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
+            }), { 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 } })),
             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 }) }),
             React.createElement(recharts_1.Legend, { align: "center", content: React.createElement(custom_legend_1.CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
             groups.map(function (group, index) {
-                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
+                return (React.createElement(recharts_1.Bar, __assign({ key: group, dataKey: group, barCategoryGap: "2%" }, (isStacked && { stackId: 'stack' }), { name: group, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
                         ? (0, theme_1.getColorScale)(theme)[color]['base'][index]
                         : (0, theme_1.getColorScale)(theme)[color]['muted'][index] })));
             }))) : (React.createElement("div", { style: {

package/chart-card/index.js

@@ -28,9 +28,9 @@ var quantum_product_1 = require("@auth0/quantum-product");
 var React = __importStar(require("react"));
 var chart_summary_1 = require("../chart-summary");
 function ChartCard(props) {
-    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;
+    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;
     return (React.createElement(quantum_product_1.Card, { sx: { height: height, padding: 3 } },
-        React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, additionalMenuItems: additionalMenuItems }),
+        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 }),
         children));
 }
 exports.ChartCard = ChartCard;

package/chart-summary/data-table-chart.d.ts

@@ -4,5 +4,7 @@ export interface IDataTableChartProps {
     isOpen: boolean;
     toggleIsOpen: () => void;
     data: any;
+    customViewChartTable?: React.ReactElement;
+    allowDownload?: boolean;
 }
 export declare function DataTableChart(props: IDataTableChartProps): React.JSX.Element;

package/chart-summary/data-table-chart.js

@@ -49,43 +49,41 @@ var date_fns_1 = require("date-fns");
 var downloadCsv_1 = require("../helpers/downloadCsv");
 var quantum_product_1 = require("@auth0/quantum-product");
 function DataTableChart(props) {
-    var isOpen = props.isOpen, title = props.title, toggleIsOpen = props.toggleIsOpen, data = props.data;
+    var isOpen = props.isOpen, title = props.title, toggleIsOpen = props.toggleIsOpen, data = props.data, customViewChartTable = props.customViewChartTable, allowDownload = props.allowDownload;
     var isDonut = data[0] && data[0].name !== undefined;
     var groups = lodash_1.default.groupBy(data, 'group');
     var _a = __read(React.useState(Object.keys(groups)[0]), 2), selectedTab = _a[0], setSelectedTab = _a[1];
     var hasKey = data[0] && data[0].key !== undefined;
-    return (React.createElement(quantum_product_1.Dialog, { open: isOpen, fullWidth: true, title: title, onClose: toggleIsOpen, actions: React.createElement(React.Fragment, null,
-            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")) },
-        React.createElement(quantum_product_1.Box, null,
-            React.createElement(quantum_product_1.Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
-                React.createElement(quantum_product_1.TabList, { classes: { indicator: 'chromatic-ignore' }, style: isDonut ? { display: 'none' } : { display: 'block' } }, !isDonut &&
-                    Object.keys(groups).map(function (group, index) {
-                        return React.createElement(quantum_product_1.Tab, { key: index, label: group, value: group });
-                    })),
-                React.createElement(quantum_product_1.Box, null, isDonut ? (React.createElement(quantum_product_1.DataTable, { items: data, columns: [
-                        { field: 'name', title: 'Group' },
-                        { title: 'value', render: function (_a) {
-                                var _b;
-                                var item = _a.item;
-                                return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
-                            } },
-                    ] })) : (Object.values(groups).map(function (item, index) {
-                    return (React.createElement(quantum_product_1.TabPanel, { key: index, value: item[0].group },
-                        React.createElement(quantum_product_1.DataTable, { items: item, columns: [
-                                { field: 'group', title: 'Group' },
-                                { title: 'value', render: function (_a) {
-                                        var _b;
-                                        var item = _a.item;
-                                        return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
-                                    } },
-                                {
-                                    title: hasKey ? 'key' : 'date',
-                                    render: function (_a) {
-                                        var item = _a.item;
-                                        return (hasKey ? item.key : (0, date_fns_1.format)(new Date(item.date), 'LLL d p'));
-                                    },
+    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,
+        React.createElement(quantum_product_1.Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
+            React.createElement(quantum_product_1.TabList, { classes: { indicator: 'chromatic-ignore' }, style: isDonut ? { display: 'none' } : { display: 'block' } }, !isDonut &&
+                Object.keys(groups).map(function (group, index) {
+                    return React.createElement(quantum_product_1.Tab, { key: index, label: group, value: group });
+                })),
+            React.createElement(quantum_product_1.Box, null, isDonut ? (React.createElement(quantum_product_1.DataTable, { items: data, columns: [
+                    { field: 'name', title: 'Group' },
+                    { title: 'value', render: function (_a) {
+                            var _b;
+                            var item = _a.item;
+                            return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
+                        } },
+                ] })) : (Object.values(groups).map(function (item, index) {
+                return (React.createElement(quantum_product_1.TabPanel, { key: index, value: item[0].group },
+                    React.createElement(quantum_product_1.DataTable, { items: item, columns: [
+                            { field: 'group', title: 'Group' },
+                            { title: 'value', render: function (_a) {
+                                    var _b;
+                                    var item = _a.item;
+                                    return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
+                                } },
+                            {
+                                title: hasKey ? 'key' : 'date',
+                                render: function (_a) {
+                                    var item = _a.item;
+                                    return (hasKey ? item.key : (0, date_fns_1.format)(new Date(item.date), 'LLL d p'));
                                 },
-                            ] })));
-                })))))));
+                            },
+                        ] })));
+            }))))))));
 }
 exports.DataTableChart = DataTableChart;

package/chart-summary/index.d.ts

@@ -9,5 +9,8 @@ export interface IChartSummaryProps {
     dataTable?: any;
     headerAction?: React.ReactElement;
     additionalMenuItems?: DropdownMenuListItemValue[];
+    showChartTable?: boolean;
+    allowDownload?: boolean;
+    customViewChartTable?: React.ReactElement;
 }
 export declare function ChartSummary(props: IChartSummaryProps): React.JSX.Element;

package/chart-summary/index.js

@@ -76,42 +76,40 @@ var Aggregate = (0, quantum_product_1.styled)('h4')(templateObject_1 || (templat
     return theme.typography.h4.fontSize;
 });
 function ChartSummary(props) {
-    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
+    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;
     var _a = __read(React.useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
     var _b = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'chart-actions-menu' }), triggerProps = _b.triggerProps, menuProps = _b.menuProps;
     var toggleIsOpen = function () {
         setIsOpen(function (prev) { return !prev; });
     };
     var menuItems = React.useMemo(function () {
-        var menuItems = [];
-        if (dataTable && dataTable[0]) {
-            menuItems = [
-                {
-                    type: 'item',
-                    endIcon: React.createElement(quantum_product_1.TableIcon, null),
-                    onClick: function () {
-                        setIsOpen(true);
-                    },
-                    title: 'View table',
+        var baseMenuItems = [
+            {
+                type: 'item',
+                endIcon: React.createElement(quantum_product_1.TableIcon, null),
+                onClick: function () {
+                    setIsOpen(true);
                 },
-                {
-                    type: 'divider',
+                title: 'View table',
+            },
+        ];
+        if (showChartTable && allowDownload) {
+            baseMenuItems.push({ type: 'divider' }, {
+                type: 'item',
+                endIcon: React.createElement(quantum_product_1.DownloadCloudIcon, null),
+                onClick: function () {
+                    setIsOpen(true);
+                    (0, downloadCsv_1.downloadCSV)(dataTable, title);
                 },
-                {
-                    type: 'item',
-                    endIcon: React.createElement(quantum_product_1.DownloadCloudIcon, null),
-                    onClick: function () {
-                        setIsOpen(true);
-                        (0, downloadCsv_1.downloadCSV)(dataTable, title);
-                    },
-                    title: 'Download CSV',
-                },
-            ];
+                title: 'Download CSV',
+            });
         }
+        var finalMenuItems = baseMenuItems;
         if (additionalMenuItems) {
-            if (menuItems.length > 0)
-                menuItems.unshift({ type: 'divider' });
-            menuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(menuItems), false);
+            if (finalMenuItems.length > 0) {
+                finalMenuItems.unshift({ type: 'divider' });
+            }
+            finalMenuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(finalMenuItems), false);
         }
         var handleClick = function (cb) {
             return function (event) {
@@ -121,14 +119,13 @@ function ChartSummary(props) {
                 }
             };
         };
-        menuItems = menuItems.map(function (item) {
+        return finalMenuItems.map(function (item) {
             if (item.type === 'item' && item.onClick) {
                 item.onClick = handleClick(item.onClick);
             }
             return item;
         });
-        return menuItems;
-    }, [dataTable, additionalMenuItems, menuProps, title]);
+    }, [showChartTable, allowDownload, additionalMenuItems, dataTable, title, menuProps]);
     return (React.createElement("div", null,
         React.createElement(quantum_product_1.DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
                 React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
@@ -144,13 +141,13 @@ function ChartSummary(props) {
                                 React.createElement(quantum_product_1.HelpCircleIcon, { size: "16" })))))),
                 React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
                     headerAction && (React.createElement(quantum_product_1.StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)),
-                    menuItems.length > 0 && (React.createElement(React.Fragment, null,
+                    menuItems.length > 0 && showChartTable && (React.createElement(React.Fragment, null,
                         React.createElement(quantum_product_1.IconButton, __assign({ size: "small" }, triggerProps, { label: "More actions" }),
                             React.createElement(quantum_product_1.MoreVerticalIcon, null)),
                         React.createElement(quantum_product_1.DropdownMenu, __assign({}, menuProps, { items: menuItems })))))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
                 React.createElement(Aggregate, null, value),
                 label) }),
-        dataTable && dataTable[0] && (React.createElement(data_table_chart_1.DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable }))));
+        showChartTable && (React.createElement(data_table_chart_1.DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable, customViewChartTable: customViewChartTable, allowDownload: allowDownload }))));
 }
 exports.ChartSummary = ChartSummary;
 var templateObject_1;

package/common/chart.d.ts

@@ -2,9 +2,9 @@
 import { TooltipProps } from 'recharts';
 import { IChartCardProps } from '../chart-card';
 import { DropdownMenuListItemValue } from '@auth0/quantum-product';
-export type ScaleType = 'date' | 'datetime' | 'label' | 'number';
+export type ScaleType = 'date' | 'datetime' | 'label' | 'number' | 'monthyear';
 export interface ICustomTooltipProps extends TooltipProps<number, string> {
-    scaleType?: 'datetime' | 'date' | 'label';
+    scaleType?: 'datetime' | 'date' | 'label' | 'monthyear';
     showTotalValue?: boolean;
     tooltipProp?: {
         tooltipHeader?: React.ReactElement;

package/common/chart.js

@@ -25,6 +25,8 @@ var tickFormatter = function (value, scaleType) {
             return (0, date_fns_1.format)(new Date(value), 'LLL d');
         case 'datetime':
             return (0, date_fns_1.format)(new Date(value), 'LLL d p');
+        case 'monthyear':
+            return (0, date_fns_1.format)(new Date(value), 'LLL yyyy');
         default:
             break;
     }

package/common/custom-tooltip.js

@@ -32,18 +32,23 @@ var custom_color_status_dot_1 = __importDefault(require("./custom-color-status-d
 var date_fns_1 = require("date-fns");
 var styles_1 = require("../styles");
 var CustomTooltip = function (props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label, tooltipProp = props.tooltipProp, showTotalValue = props.showTotalValue;
     var theme = (0, quantum_product_1.useTheme)();
     if (active && payload && payload.length) {
         var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
             ? scaleType === 'datetime'
                 ? "".concat((0, date_fns_1.format)(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
-                : scaleType === 'label'
-                    ? labelProp
-                    : "".concat((0, date_fns_1.format)(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
+                : scaleType === 'monthyear'
+                    ? "".concat((0, date_fns_1.format)(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL yyyy'))
+                    : scaleType === 'label'
+                        ? labelProp
+                        : "".concat((0, date_fns_1.format)(new Date((_d = payload[0].payload) === null || _d === void 0 ? void 0 : _d.date), 'LLL d'))
             : labelProp;
-        var totalValue = payload.reduce(function (total, item) { return total + (item.value || 0); }, 0);
+        var formatValue_1 = function (value) {
+            return value % 1 !== 0 ? parseFloat(value.toFixed(2)) : value;
+        };
+        var totalValue = formatValue_1(payload.reduce(function (total, item) { return total + (item.value || 0); }, 0));
         var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
         return (React.createElement(styles_1.CustomTooltip, null,
             (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipHeader) && (React.createElement(React.Fragment, null,
@@ -59,7 +64,7 @@ var CustomTooltip = function (props) {
                     .map(function (x, index) {
                     return (React.createElement(quantum_product_1.StackLayout, { key: index, gutter: 0.5 },
                         React.createElement(custom_color_status_dot_1.default, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + '  ' }),
-                        React.createElement(quantum_product_1.Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey || '']),
+                        React.createElement(quantum_product_1.Text, { color: "text.secondary", alignItems: 'end' }, x.dataKey ? formatValue_1(x.payload[x.dataKey]) : ''),
                         x.payload['evaluated_group'] === x.dataKey &&
                             x.payload['breachedPoint'] !== 'none' &&
                             (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 })))));

package/esm/bar-chart/index.js

@@ -35,7 +35,7 @@ import { ChartCard } from '../chart-card';
 import { tickFormatter } from '../common/chart';
 import { CustomLegend } from '../common/custom-legend';
 export function BarChart(props) {
-    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;
+    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;
     var theme = useTheme();
     // Function to know how many bars we need based of how much different group values are.
     var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -43,7 +43,7 @@ export function BarChart(props) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
     }, {}));
-    var _g = __read(React.useState(initialState), 2), barVisibility = _g[0], setBarVisibility = _g[1];
+    var _j = __read(React.useState(initialState), 2), barVisibility = _j[0], setBarVisibility = _j[1];
     var handleLegendMouseEnter = function (e) {
         if (!barVisibility[e.dataKey]) {
             setBarVisibility(__assign(__assign({}, barVisibility), { hover: e.dataKey }));
@@ -76,11 +76,10 @@ export function BarChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, additionalMenuItems: additionalMenuItems },
+    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, headerAction: headerAction, helperText: helperText, allowDownload: allowDownload, showChartTable: showChartTable, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable },
         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: {
                 top: 24,
                 right: 10,
-                left: layout === 'vertical' ? -24 : 36,
                 bottom: 0,
             } },
             React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
@@ -89,11 +88,11 @@ export function BarChart(props) {
                 type: 'category',
                 tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); },
                 dataKey: bottomAxisDataKey,
-            }), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
+            }), { 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 } })),
             React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType, tooltipProp: tooltipProp, showTotalValue: showTotalValueInTooltip }) }),
             React.createElement(Legend, { align: "center", content: React.createElement(CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
             groups.map(function (group, index) {
-                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
+                return (React.createElement(Bar, __assign({ key: group, dataKey: group, barCategoryGap: "2%" }, (isStacked && { stackId: 'stack' }), { name: group, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
                         ? getColorScale(theme)[color]['base'][index]
                         : getColorScale(theme)[color]['muted'][index] })));
             }))) : (React.createElement("div", { style: {

package/esm/chart-card/index.js

@@ -2,8 +2,8 @@ import { Card } from '@auth0/quantum-product';
 import * as React from 'react';
 import { ChartSummary } from '../chart-summary';
 export function ChartCard(props) {
-    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;
+    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;
     return (React.createElement(Card, { sx: { height: height, padding: 3 } },
-        React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, additionalMenuItems: additionalMenuItems }),
+        React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, showChartTable: showChartTable, allowDownload: allowDownload, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable }),
         children));
 }

package/esm/chart-summary/data-table-chart.js

@@ -20,42 +20,40 @@ import { format } from 'date-fns';
 import { downloadCSV } from '../helpers/downloadCsv';
 import { Box, Button, DataTable, Dialog, DownloadIcon, Tab, TabList, TabPanel, Tabs } from '@auth0/quantum-product';
 export function DataTableChart(props) {
-    var isOpen = props.isOpen, title = props.title, toggleIsOpen = props.toggleIsOpen, data = props.data;
+    var isOpen = props.isOpen, title = props.title, toggleIsOpen = props.toggleIsOpen, data = props.data, customViewChartTable = props.customViewChartTable, allowDownload = props.allowDownload;
     var isDonut = data[0] && data[0].name !== undefined;
     var groups = _.groupBy(data, 'group');
     var _a = __read(React.useState(Object.keys(groups)[0]), 2), selectedTab = _a[0], setSelectedTab = _a[1];
     var hasKey = data[0] && data[0].key !== undefined;
-    return (React.createElement(Dialog, { open: isOpen, fullWidth: true, title: title, onClose: toggleIsOpen, actions: React.createElement(React.Fragment, null,
-            React.createElement(Button, { color: "primary", variant: "contained", startIcon: React.createElement(DownloadIcon, null), onClick: function () { return downloadCSV(data, title); } }, "Download")) },
-        React.createElement(Box, null,
-            React.createElement(Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
-                React.createElement(TabList, { classes: { indicator: 'chromatic-ignore' }, style: isDonut ? { display: 'none' } : { display: 'block' } }, !isDonut &&
-                    Object.keys(groups).map(function (group, index) {
-                        return React.createElement(Tab, { key: index, label: group, value: group });
-                    })),
-                React.createElement(Box, null, isDonut ? (React.createElement(DataTable, { items: data, columns: [
-                        { field: 'name', title: 'Group' },
-                        { title: 'value', render: function (_a) {
-                                var _b;
-                                var item = _a.item;
-                                return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
-                            } },
-                    ] })) : (Object.values(groups).map(function (item, index) {
-                    return (React.createElement(TabPanel, { key: index, value: item[0].group },
-                        React.createElement(DataTable, { items: item, columns: [
-                                { field: 'group', title: 'Group' },
-                                { title: 'value', render: function (_a) {
-                                        var _b;
-                                        var item = _a.item;
-                                        return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
-                                    } },
-                                {
-                                    title: hasKey ? 'key' : 'date',
-                                    render: function (_a) {
-                                        var item = _a.item;
-                                        return (hasKey ? item.key : format(new Date(item.date), 'LLL d p'));
-                                    },
+    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,
+        React.createElement(Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
+            React.createElement(TabList, { classes: { indicator: 'chromatic-ignore' }, style: isDonut ? { display: 'none' } : { display: 'block' } }, !isDonut &&
+                Object.keys(groups).map(function (group, index) {
+                    return React.createElement(Tab, { key: index, label: group, value: group });
+                })),
+            React.createElement(Box, null, isDonut ? (React.createElement(DataTable, { items: data, columns: [
+                    { field: 'name', title: 'Group' },
+                    { title: 'value', render: function (_a) {
+                            var _b;
+                            var item = _a.item;
+                            return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
+                        } },
+                ] })) : (Object.values(groups).map(function (item, index) {
+                return (React.createElement(TabPanel, { key: index, value: item[0].group },
+                    React.createElement(DataTable, { items: item, columns: [
+                            { field: 'group', title: 'Group' },
+                            { title: 'value', render: function (_a) {
+                                    var _b;
+                                    var item = _a.item;
+                                    return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
+                                } },
+                            {
+                                title: hasKey ? 'key' : 'date',
+                                render: function (_a) {
+                                    var item = _a.item;
+                                    return (hasKey ? item.key : format(new Date(item.date), 'LLL d p'));
                                 },
-                            ] })));
-                })))))));
+                            },
+                        ] })));
+            }))))))));
 }

package/esm/chart-summary/index.js

@@ -50,42 +50,40 @@ var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTempl
     return theme.typography.h4.fontSize;
 });
 export function ChartSummary(props) {
-    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
+    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;
     var _a = __read(React.useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
     var _b = useDropdownMenuState({ baseId: 'chart-actions-menu' }), triggerProps = _b.triggerProps, menuProps = _b.menuProps;
     var toggleIsOpen = function () {
         setIsOpen(function (prev) { return !prev; });
     };
     var menuItems = React.useMemo(function () {
-        var menuItems = [];
-        if (dataTable && dataTable[0]) {
-            menuItems = [
-                {
-                    type: 'item',
-                    endIcon: React.createElement(TableIcon, null),
-                    onClick: function () {
-                        setIsOpen(true);
-                    },
-                    title: 'View table',
+        var baseMenuItems = [
+            {
+                type: 'item',
+                endIcon: React.createElement(TableIcon, null),
+                onClick: function () {
+                    setIsOpen(true);
                 },
-                {
-                    type: 'divider',
+                title: 'View table',
+            },
+        ];
+        if (showChartTable && allowDownload) {
+            baseMenuItems.push({ type: 'divider' }, {
+                type: 'item',
+                endIcon: React.createElement(DownloadCloudIcon, null),
+                onClick: function () {
+                    setIsOpen(true);
+                    downloadCSV(dataTable, title);
                 },
-                {
-                    type: 'item',
-                    endIcon: React.createElement(DownloadCloudIcon, null),
-                    onClick: function () {
-                        setIsOpen(true);
-                        downloadCSV(dataTable, title);
-                    },
-                    title: 'Download CSV',
-                },
-            ];
+                title: 'Download CSV',
+            });
         }
+        var finalMenuItems = baseMenuItems;
         if (additionalMenuItems) {
-            if (menuItems.length > 0)
-                menuItems.unshift({ type: 'divider' });
-            menuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(menuItems), false);
+            if (finalMenuItems.length > 0) {
+                finalMenuItems.unshift({ type: 'divider' });
+            }
+            finalMenuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(finalMenuItems), false);
         }
         var handleClick = function (cb) {
             return function (event) {
@@ -95,14 +93,13 @@ export function ChartSummary(props) {
                 }
             };
         };
-        menuItems = menuItems.map(function (item) {
+        return finalMenuItems.map(function (item) {
             if (item.type === 'item' && item.onClick) {
                 item.onClick = handleClick(item.onClick);
             }
             return item;
         });
-        return menuItems;
-    }, [dataTable, additionalMenuItems, menuProps, title]);
+    }, [showChartTable, allowDownload, additionalMenuItems, dataTable, title, menuProps]);
     return (React.createElement("div", null,
         React.createElement(DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
                 React.createElement(StackLayout, { gutter: 1 },
@@ -118,12 +115,12 @@ export function ChartSummary(props) {
                                 React.createElement(HelpCircleIcon, { size: "16" })))))),
                 React.createElement(StackLayout, { gutter: 1 },
                     headerAction && (React.createElement(StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)),
-                    menuItems.length > 0 && (React.createElement(React.Fragment, null,
+                    menuItems.length > 0 && showChartTable && (React.createElement(React.Fragment, null,
                         React.createElement(IconButton, __assign({ size: "small" }, triggerProps, { label: "More actions" }),
                             React.createElement(MoreVerticalIcon, null)),
                         React.createElement(DropdownMenu, __assign({}, menuProps, { items: menuItems })))))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(StackLayout, { gutter: 1 },
                 React.createElement(Aggregate, null, value),
                 label) }),
-        dataTable && dataTable[0] && (React.createElement(DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable }))));
+        showChartTable && (React.createElement(DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable, customViewChartTable: customViewChartTable, allowDownload: allowDownload }))));
 }
 var templateObject_1;

package/esm/common/chart.js

@@ -22,6 +22,8 @@ export var tickFormatter = function (value, scaleType) {
             return format(new Date(value), 'LLL d');
         case 'datetime':
             return format(new Date(value), 'LLL d p');
+        case 'monthyear':
+            return format(new Date(value), 'LLL yyyy');
         default:
             break;
     }

package/esm/common/custom-tooltip.js

@@ -4,18 +4,23 @@ import StatusDot from './custom-color-status-dot';
 import { format } from 'date-fns';
 import { CustomTooltip as CustomTooltipStyled } from '../styles';
 var CustomTooltip = function (props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label, tooltipProp = props.tooltipProp, showTotalValue = props.showTotalValue;
     var theme = useTheme();
     if (active && payload && payload.length) {
         var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
             ? scaleType === 'datetime'
                 ? "".concat(format(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
-                : scaleType === 'label'
-                    ? labelProp
-                    : "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
+                : scaleType === 'monthyear'
+                    ? "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL yyyy'))
+                    : scaleType === 'label'
+                        ? labelProp
+                        : "".concat(format(new Date((_d = payload[0].payload) === null || _d === void 0 ? void 0 : _d.date), 'LLL d'))
             : labelProp;
-        var totalValue = payload.reduce(function (total, item) { return total + (item.value || 0); }, 0);
+        var formatValue_1 = function (value) {
+            return value % 1 !== 0 ? parseFloat(value.toFixed(2)) : value;
+        };
+        var totalValue = formatValue_1(payload.reduce(function (total, item) { return total + (item.value || 0); }, 0));
         var hiddenKeysPattern_1 = /_hidden|thresholdControl/;
         return (React.createElement(CustomTooltipStyled, null,
             (tooltipProp === null || tooltipProp === void 0 ? void 0 : tooltipProp.tooltipHeader) && (React.createElement(React.Fragment, null,
@@ -31,7 +36,7 @@ var CustomTooltip = function (props) {
                     .map(function (x, index) {
                     return (React.createElement(StackLayout, { key: index, gutter: 0.5 },
                         React.createElement(StatusDot, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + '  ' }),
-                        React.createElement(Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey || '']),
+                        React.createElement(Text, { color: "text.secondary", alignItems: 'end' }, x.dataKey ? formatValue_1(x.payload[x.dataKey]) : ''),
                         x.payload['evaluated_group'] === x.dataKey &&
                             x.payload['breachedPoint'] !== 'none' &&
                             (x.payload['breachedPoint'] === 'alert' ? (React.createElement(AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-charts",
-  "version": "1.0.10",
+  "version": "1.1.1",
   "sideEffects": false,
   "main": "./index.js",
   "types": "./index.d.ts",