@auth0/quantum-charts 0.3.2 → 0.3.4

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;
+    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;
     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; });
@@ -105,7 +105,7 @@ 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 },
+    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, additionalMenuItems: additionalMenuItems },
         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,

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;
+    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;
     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 }),
+        React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, additionalMenuItems: additionalMenuItems }),
         children));
 }
 exports.ChartCard = ChartCard;

package/chart-summary/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { DropdownMenuListItemValue } from '@auth0/quantum-product';
 export interface IChartSummaryProps {
     title?: string;
     value?: string | number;
@@ -7,5 +8,6 @@ export interface IChartSummaryProps {
     helperText?: React.ReactNode;
     dataTable?: any;
     headerAction?: React.ReactElement;
+    additionalMenuItems?: DropdownMenuListItemValue[];
 }
 export declare function ChartSummary(props: IChartSummaryProps): React.JSX.Element;

package/chart-summary/index.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -42,6 +53,15 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartSummary = void 0;
 var React = __importStar(require("react"));
@@ -55,11 +75,47 @@ 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;
+    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
     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.ListIcon, null),
+                    onClick: function () {
+                        setIsOpen(true);
+                    },
+                    title: 'View list',
+                },
+            ];
+        }
+        if (additionalMenuItems) {
+            if (menuItems.length > 0)
+                menuItems.unshift({ type: 'divider' });
+            menuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(menuItems), false);
+        }
+        var handleClick = function (cb) {
+            return function (event) {
+                cb(event);
+                if (menuProps.onClose) {
+                    menuProps.onClose(event, 'itemSelect');
+                }
+            };
+        };
+        menuItems = menuItems.map(function (item) {
+            if (item.type === 'item' && item.onClick) {
+                item.onClick = handleClick(item.onClick);
+            }
+            return item;
+        });
+        return menuItems;
+    }, [dataTable, additionalMenuItems, 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 },
@@ -74,10 +130,11 @@ function ChartSummary(props) {
                                 } },
                                 React.createElement(quantum_product_1.HelpCircleIcon, { size: "16" })))))),
                 React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
-                    dataTable && dataTable[0] && (React.createElement(quantum_product_1.StackLayoutItem, null,
-                        React.createElement(quantum_product_1.IconButton, { label: "List button", onClick: function () { return setIsOpen(true); } },
-                            React.createElement(quantum_product_1.ListIcon, null)))),
-                    headerAction && (React.createElement(quantum_product_1.StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)))), labelTypographyProps: { variant: 'subtitle1' }, description: 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,
+                        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 }))));

package/common/chart.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TooltipProps } from 'recharts';
 import { IChartCardProps } from '../chart-card';
+import { DropdownMenuListItemValue } from '@auth0/quantum-product';
 export type ScaleType = 'date' | 'datetime' | 'label' | 'number';
 export interface ICustomTooltipProps extends TooltipProps<number, string> {
     scaleType?: 'datetime' | 'date';
@@ -26,6 +27,8 @@ export interface IBaseChartProps<DataType = unknown> extends IChartCardProps {
     leftAxis: IAxisOptions<DataType>;
     legend?: ILegendOptions;
     color?: 'categorical' | 'sequential';
+    additionalMenuItems?: DropdownMenuListItemValue[];
+    headerAction?: React.ReactElement;
 }
 export type IDonutChartDataPoint<DataType = unknown> = {
     name: string;

package/common/custom-legend.js

@@ -33,10 +33,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomLegend = void 0;
 var quantum_product_1 = require("@auth0/quantum-product");
 var React = __importStar(require("react"));
+var custom_threshold_legend_1 = __importDefault(require("../line-chart/custom-threshold-legend"));
 var Root = (0, quantum_product_1.styled)(quantum_product_1.StackLayout)({
     justifyContent: 'center',
 });
@@ -57,9 +61,12 @@ var LegendIcon = (0, quantum_product_1.styled)('div')(function (_a) {
         })));
 });
 var CustomLegend = function (props) {
-    var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility;
-    return (React.createElement(Root, { gutter: 1 }, payload.map(function (entry, index) { return (React.createElement(quantum_product_1.StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, key: index, gutter: 1, onClick: function () { return selectData(entry); }, onMouseEnter: function () { return handleLegendMouseEnter(entry); }, onMouseLeave: function () { return handleLegendMouseLeave(entry); } },
-        React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } }),
-        React.createElement(quantum_product_1.Text, { variant: "body2" }, entry.value))); })));
+    var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility, alertThresholdValue = props.alertThresholdValue, warnThresholdValue = props.warnThresholdValue;
+    return (React.createElement(Root, { gutter: 1 },
+        React.createElement(quantum_product_1.StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 },
+            payload.map(function (entry, index) { return (React.createElement(quantum_product_1.StackLayout, { key: index, sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1, onClick: function () { return selectData(entry); }, onMouseEnter: function () { return handleLegendMouseEnter(entry); }, onMouseLeave: function () { return handleLegendMouseLeave(entry); } },
+                React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } }),
+                React.createElement(quantum_product_1.Text, { variant: "body2" }, entry.value))); }),
+            (warnThresholdValue || alertThresholdValue) && React.createElement(custom_threshold_legend_1.default, null))));
 };
 exports.CustomLegend = CustomLegend;

package/donut-chart/index.js

@@ -71,11 +71,11 @@ var ResponsiveChartCard = (0, quantum_product_1.styled)(quantum_product_1.StackL
     })));
 });
 function DonutChart(props) {
-    var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c;
+    var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c, additionalMenuItems = props.additionalMenuItems;
     var _d = __read(React.useState(undefined), 2), activeIndex = _d[0], setActiveIndex = _d[1];
     var theme = (0, quantum_product_1.useTheme)();
     var BASE_COLORS = (0, theme_1.getColorScale)(theme)[color]['base'];
-    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height },
+    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height, additionalMenuItems: additionalMenuItems },
         React.createElement(ResponsiveChartCard, { ownerState: { layout: layout } },
             React.createElement(quantum_product_1.StackLayoutItem, { sx: {
                     height: '150px',

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;
+    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;
     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; });
@@ -76,7 +76,7 @@ export function BarChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
+    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, additionalMenuItems: additionalMenuItems },
         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,

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;
+    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;
     return (React.createElement(Card, { sx: { height: height, padding: 3 } },
-        React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction }),
+        React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, additionalMenuItems: additionalMenuItems }),
         children));
 }

package/esm/chart-summary/index.js

@@ -2,6 +2,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -18,8 +29,17 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import * as React from 'react';
-import { Box, DescriptionBlock, StackLayout, StackLayoutItem, Tooltip, HelpCircleIcon, styled, IconButton, ListIcon, Text, } from '@auth0/quantum-product';
+import { Box, DescriptionBlock, StackLayout, StackLayoutItem, Tooltip, HelpCircleIcon, styled, IconButton, ListIcon, Text, useDropdownMenuState, DropdownMenu, MoreVerticalIcon, } from '@auth0/quantum-product';
 import { DataTableChart } from './data-table-chart';
 var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -29,11 +49,47 @@ 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;
+    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems;
     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(ListIcon, null),
+                    onClick: function () {
+                        setIsOpen(true);
+                    },
+                    title: 'View list',
+                },
+            ];
+        }
+        if (additionalMenuItems) {
+            if (menuItems.length > 0)
+                menuItems.unshift({ type: 'divider' });
+            menuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(menuItems), false);
+        }
+        var handleClick = function (cb) {
+            return function (event) {
+                cb(event);
+                if (menuProps.onClose) {
+                    menuProps.onClose(event, 'itemSelect');
+                }
+            };
+        };
+        menuItems = menuItems.map(function (item) {
+            if (item.type === 'item' && item.onClick) {
+                item.onClick = handleClick(item.onClick);
+            }
+            return item;
+        });
+        return menuItems;
+    }, [dataTable, additionalMenuItems, menuProps]);
     return (React.createElement("div", null,
         React.createElement(DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
                 React.createElement(StackLayout, { gutter: 1 },
@@ -48,10 +104,11 @@ export function ChartSummary(props) {
                                 } },
                                 React.createElement(HelpCircleIcon, { size: "16" })))))),
                 React.createElement(StackLayout, { gutter: 1 },
-                    dataTable && dataTable[0] && (React.createElement(StackLayoutItem, null,
-                        React.createElement(IconButton, { label: "List button", onClick: function () { return setIsOpen(true); } },
-                            React.createElement(ListIcon, null)))),
-                    headerAction && (React.createElement(StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)))), labelTypographyProps: { variant: 'subtitle1' }, description: 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,
+                        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 }))));

package/esm/common/custom-legend.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { StackLayout, Text, styled } from '@auth0/quantum-product';
 import * as React from 'react';
+import CustomThresholdLegend from '../line-chart/custom-threshold-legend';
 var Root = styled(StackLayout)({
     justifyContent: 'center',
 });
@@ -31,8 +32,11 @@ var LegendIcon = styled('div')(function (_a) {
         })));
 });
 export var CustomLegend = function (props) {
-    var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility;
-    return (React.createElement(Root, { gutter: 1 }, payload.map(function (entry, index) { return (React.createElement(StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, key: index, gutter: 1, onClick: function () { return selectData(entry); }, onMouseEnter: function () { return handleLegendMouseEnter(entry); }, onMouseLeave: function () { return handleLegendMouseLeave(entry); } },
-        React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } }),
-        React.createElement(Text, { variant: "body2" }, entry.value))); })));
+    var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility, alertThresholdValue = props.alertThresholdValue, warnThresholdValue = props.warnThresholdValue;
+    return (React.createElement(Root, { gutter: 1 },
+        React.createElement(StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 },
+            payload.map(function (entry, index) { return (React.createElement(StackLayout, { key: index, sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1, onClick: function () { return selectData(entry); }, onMouseEnter: function () { return handleLegendMouseEnter(entry); }, onMouseLeave: function () { return handleLegendMouseLeave(entry); } },
+                React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } }),
+                React.createElement(Text, { variant: "body2" }, entry.value))); }),
+            (warnThresholdValue || alertThresholdValue) && React.createElement(CustomThresholdLegend, null))));
 };

package/esm/donut-chart/index.js

@@ -42,11 +42,11 @@ var ResponsiveChartCard = styled(StackLayout)(function (_a) {
     })));
 });
 export function DonutChart(props) {
-    var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c;
+    var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _a = props.layout, layout = _a === void 0 ? 'horizontal' : _a, _b = props.color, color = _b === void 0 ? 'categorical' : _b, _c = props.height, height = _c === void 0 ? '100%' : _c, additionalMenuItems = props.additionalMenuItems;
     var _d = __read(React.useState(undefined), 2), activeIndex = _d[0], setActiveIndex = _d[1];
     var theme = useTheme();
     var BASE_COLORS = getColorScale(theme)[color]['base'];
-    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height },
+    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height, additionalMenuItems: additionalMenuItems },
         React.createElement(ResponsiveChartCard, { ownerState: { layout: layout } },
             React.createElement(StackLayoutItem, { sx: {
                     height: '150px',

package/esm/line-chart/custom-threshold-label.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export var CustomThresholdLabel = function (_a) {
+    var label = _a.label, thresholdType = _a.thresholdType, theme = _a.theme, viewBox = _a.viewBox;
+    return (React.createElement("g", { transform: "translate(".concat(viewBox.width - 30, ",-10)") },
+        React.createElement("rect", { x: viewBox.x, y: viewBox.y, width: 38, height: 20, fill: thresholdType === 'alert' ? theme.tokens.color_bg_state_danger : theme.tokens.color_bg_state_caution, rx: "4" }),
+        React.createElement("text", { x: viewBox.x, y: viewBox.y, fill: thresholdType === 'alert'
+                ? theme.tokens.color_global_functional_static_neutral_white
+                : theme.tokens.color_global_functional_static_neutral_black, textAnchor: "middle", dominantBaseline: "middle", dy: 11, dx: 19, fontWeight: 500 }, label)));
+};

package/esm/line-chart/custom-threshold-legend.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Text } from '@auth0/quantum-product';
+var CustomThresholdLegend = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("svg", { width: "14", height: "2", viewBox: "0 0 14 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("rect", { width: "6", height: "2", rx: "1", fill: "#191919" }),
+            React.createElement("rect", { x: "8", width: "6", height: "2", rx: "1", fill: "#191919" })),
+        React.createElement(Text, { variant: "body2" }, "Threshold")));
+};
+export default CustomThresholdLegend;

package/esm/line-chart/index.js

@@ -27,16 +27,17 @@ var __read = (this && this.__read) || function (o, n) {
 };
 import _ from 'lodash';
 import * as React from 'react';
-import { CartesianGrid, Legend, Line, LineChart as RechartsLineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { CartesianGrid, Label, Legend, Line, LineChart as RechartsLineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import { useTheme, Text } from '@auth0/quantum-product';
 import { getColorScale } from '../theme';
 import CustomActiveDot from './custom-active-dot';
 import CustomTooltip from '../common/custom-tooltip';
+import { CustomThresholdLabel } from './custom-threshold-label';
 import { ChartCard } from '../chart-card';
 import { tickFormatter } from '../common/chart';
 import { CustomLegend } from '../common/custom-legend';
 export function LineChart(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.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction;
+    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.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, alertThreshold = _a.alertThreshold, warnThreshold = _a.warnThreshold;
     var theme = useTheme();
     // Function to know how many lines we need based of how much different group values are.
     var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -77,7 +78,7 @@ export function LineChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: headerAction },
+    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: headerAction, additionalMenuItems: additionalMenuItems },
         React.createElement(ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(RechartsLineChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
                 top: 24,
                 right: 10,
@@ -93,7 +94,9 @@ export function LineChart(props) {
                 return (React.createElement(Line, { key: group, dataKey: group, name: group, strokeWidth: 3, hide: lineVisibility[group] === true, stroke: lineVisibility.hover === group || !lineVisibility.hover
                         ? getColorScale(theme)[color]['base'][index]
                         : getColorScale(theme)[color]['muted'][index], dot: false, activeDot: CustomActiveDot() }));
-            }))) : (React.createElement("div", { style: {
+            }),
+            alertThreshold && (React.createElement(ReferenceLine, { y: alertThreshold.value, stroke: theme.tokens.color_bg_state_danger, strokeDasharray: "8", strokeWidth: "2", label: React.createElement(Label, { value: alertThreshold.value, content: React.createElement(CustomThresholdLabel, { viewBox: true, label: alertThreshold.label, thresholdType: 'alert', theme: theme }) }) })),
+            warnThreshold && (React.createElement(ReferenceLine, { y: warnThreshold.value, stroke: theme.tokens.color_bg_state_caution, strokeDasharray: "8", strokeWidth: "2", label: React.createElement(Label, { value: warnThreshold.value, content: React.createElement(CustomThresholdLabel, { viewBox: true, label: warnThreshold.label, thresholdType: 'warn', theme: theme }) }) })))) : (React.createElement("div", { style: {
                 display: 'grid',
                 placeItems: 'center',
                 height: '100%',

package/line-chart/custom-threshold-label.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare const CustomThresholdLabel: ({ label, thresholdType, theme, viewBox }: {
+    label: any;
+    thresholdType: any;
+    theme: any;
+    viewBox: any;
+}) => React.JSX.Element;

package/line-chart/custom-threshold-label.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomThresholdLabel = void 0;
+var React = __importStar(require("react"));
+var CustomThresholdLabel = function (_a) {
+    var label = _a.label, thresholdType = _a.thresholdType, theme = _a.theme, viewBox = _a.viewBox;
+    return (React.createElement("g", { transform: "translate(".concat(viewBox.width - 30, ",-10)") },
+        React.createElement("rect", { x: viewBox.x, y: viewBox.y, width: 38, height: 20, fill: thresholdType === 'alert' ? theme.tokens.color_bg_state_danger : theme.tokens.color_bg_state_caution, rx: "4" }),
+        React.createElement("text", { x: viewBox.x, y: viewBox.y, fill: thresholdType === 'alert'
+                ? theme.tokens.color_global_functional_static_neutral_white
+                : theme.tokens.color_global_functional_static_neutral_black, textAnchor: "middle", dominantBaseline: "middle", dy: 11, dx: 19, fontWeight: 500 }, label)));
+};
+exports.CustomThresholdLabel = CustomThresholdLabel;

package/line-chart/custom-threshold-legend.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const CustomThresholdLegend: () => React.JSX.Element;
+export default CustomThresholdLegend;

package/line-chart/custom-threshold-legend.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var quantum_product_1 = require("@auth0/quantum-product");
+var CustomThresholdLegend = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("svg", { width: "14", height: "2", viewBox: "0 0 14 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("rect", { width: "6", height: "2", rx: "1", fill: "#191919" }),
+            React.createElement("rect", { x: "8", width: "6", height: "2", rx: "1", fill: "#191919" })),
+        React.createElement(quantum_product_1.Text, { variant: "body2" }, "Threshold")));
+};
+exports.default = CustomThresholdLegend;

package/line-chart/index.d.ts

@@ -2,5 +2,7 @@ import * as React from 'react';
 import { IBaseChartProps } from '../common/chart';
 export interface ILineChartProps<DataType = unknown> extends IBaseChartProps<DataType> {
     syncId?: number | string;
+    alertThreshold?: object;
+    warnThreshold?: object;
 }
 export declare function LineChart<DataType = unknown>(props: ILineChartProps<DataType>): React.JSX.Element;

package/line-chart/index.js

@@ -61,11 +61,12 @@ var quantum_product_1 = require("@auth0/quantum-product");
 var theme_1 = require("../theme");
 var custom_active_dot_1 = __importDefault(require("./custom-active-dot"));
 var custom_tooltip_1 = __importDefault(require("../common/custom-tooltip"));
+var custom_threshold_label_1 = require("./custom-threshold-label");
 var chart_card_1 = require("../chart-card");
 var chart_1 = require("../common/chart");
 var custom_legend_1 = require("../common/custom-legend");
 function LineChart(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.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction;
+    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.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, alertThreshold = _a.alertThreshold, warnThreshold = _a.warnThreshold;
     var theme = (0, quantum_product_1.useTheme)();
     // Function to know how many lines we need based of how much different group values are.
     var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -106,7 +107,7 @@ function LineChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: headerAction },
+    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: headerAction, additionalMenuItems: additionalMenuItems },
         React.createElement(recharts_1.ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(recharts_1.LineChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
                 top: 24,
                 right: 10,
@@ -122,7 +123,9 @@ function LineChart(props) {
                 return (React.createElement(recharts_1.Line, { key: group, dataKey: group, name: group, strokeWidth: 3, hide: lineVisibility[group] === true, stroke: lineVisibility.hover === group || !lineVisibility.hover
                         ? (0, theme_1.getColorScale)(theme)[color]['base'][index]
                         : (0, theme_1.getColorScale)(theme)[color]['muted'][index], dot: false, activeDot: (0, custom_active_dot_1.default)() }));
-            }))) : (React.createElement("div", { style: {
+            }),
+            alertThreshold && (React.createElement(recharts_1.ReferenceLine, { y: alertThreshold.value, stroke: theme.tokens.color_bg_state_danger, strokeDasharray: "8", strokeWidth: "2", label: React.createElement(recharts_1.Label, { value: alertThreshold.value, content: React.createElement(custom_threshold_label_1.CustomThresholdLabel, { viewBox: true, label: alertThreshold.label, thresholdType: 'alert', theme: theme }) }) })),
+            warnThreshold && (React.createElement(recharts_1.ReferenceLine, { y: warnThreshold.value, stroke: theme.tokens.color_bg_state_caution, strokeDasharray: "8", strokeWidth: "2", label: React.createElement(recharts_1.Label, { value: warnThreshold.value, content: React.createElement(custom_threshold_label_1.CustomThresholdLabel, { viewBox: true, label: warnThreshold.label, thresholdType: 'warn', theme: theme }) }) })))) : (React.createElement("div", { style: {
                 display: 'grid',
                 placeItems: 'center',
                 height: '100%',

package/package.json

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