@auth0/quantum-charts 1.3.6 → 1.3.8

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, _g = _a.allowDownload, allowDownload = _g === void 0 ? true : _g, _h = _a.showChartTable, showChartTable = _h === void 0 ? true : _h, headerAction = _a.headerAction, customViewChartTable = _a.customViewChartTable, barSize = _a.barSize;
+    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, statusColorMapping = _a.statusColorMapping, additionalMenuItems = _a.additionalMenuItems, tooltipProp = _a.tooltipProp, _f = _a.showTotalValueInTooltip, showTotalValueInTooltip = _f === void 0 ? false : _f, _g = _a.allowDownload, allowDownload = _g === void 0 ? true : _g, _h = _a.showChartTable, showChartTable = _h === void 0 ? true : _h, headerAction = _a.headerAction, customViewChartTable = _a.customViewChartTable, barSize = _a.barSize;
     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; });
@@ -119,9 +119,17 @@ function BarChart(props) {
             React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { 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, barSize: barSize }, (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] })));
+                var isMuted = barVisibility.hover !== group && barVisibility.hover;
+                var fillColor;
+                if (color === 'status') {
+                    fillColor = (0, theme_1.getStatusColorForGroup)(group, groups, theme, statusColorMapping, isMuted);
+                }
+                else {
+                    fillColor = isMuted
+                        ? (0, theme_1.getColorScale)(theme)[color]['muted'][index]
+                        : (0, theme_1.getColorScale)(theme)[color]['base'][index];
+                }
+                return (React.createElement(recharts_1.Bar, __assign({ key: group, dataKey: group, barSize: barSize }, (isStacked && { stackId: 'stack' }), { name: group, hide: barVisibility[group] === true, fill: fillColor })));
             }))) : (React.createElement("div", { style: {
                 display: 'grid',
                 placeItems: 'center',

package/chart-card/index.js

@@ -29,7 +29,7 @@ var React = __importStar(require("react"));
 var chart_summary_1 = require("../chart-summary");
 function ChartCard(props) {
     var children = props.children, title = props.title, chartStatus = props.chartStatus, titleIcon = props.titleIcon, 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, triggerButtonSize = props.triggerButtonSize, isVertical = props.isVertical, finalMenuItem = props.finalMenuItem;
-    return (React.createElement(quantum_product_1.Card, { sx: { height: height, padding: 3, paddingBottom: isVertical ? 0.5 : 3 } },
+    return (React.createElement(quantum_product_1.Card, { sx: { height: height, padding: isVertical ? 2 : 3, paddingBottom: isVertical ? 2 : 3 } },
         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, triggerButtonSize: triggerButtonSize, chartStatus: chartStatus, titleIcon: titleIcon, finalMenuItem: finalMenuItem, isVertical: isVertical }),
         children));
 }

package/chart-summary/index.js

@@ -75,9 +75,22 @@ var Aggregate = (0, quantum_product_1.styled)('h4')(templateObject_1 || (templat
     var theme = _a.theme;
     return theme.typography.h4.fontSize;
 });
-var TitleIconWrapper = (0, quantum_product_1.styled)('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  & > svg {\n    font-size: ", ";\n    width: 1em;\n    height: 1em;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  & > svg {\n    font-size: ", ";\n    width: 1em;\n    height: 1em;\n  }\n"])), function (_a) {
+var TitleIconWrapper = (0, quantum_product_1.styled)('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  & > svg {\n    font-size: ", ";\n    color: ", ";\n    width: 1em;\n    height: 1em;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  & > svg {\n    font-size: ", ";\n    color: ", ";\n    width: 1em;\n    height: 1em;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.tokens.type_preset_section_subtitle.fontSize;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.tokens.color_fg_bold;
+});
+var TitleWrapper = (0, quantum_product_1.styled)(quantum_product_1.Text)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  font-weight: ", ";\n}"], ["\n  font-size: ", ";\n  color: ", ";\n  font-weight: ", ";\n}"])), function (_a) {
+    var theme = _a.theme;
+    return theme.tokens.type_preset_section_subtitle.fontSize;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.tokens.color_fg_bold;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.tokens.type_preset_section_subtitle.fontWeight;
 });
 function ChartSummary(props) {
     var title = props.title, chartStatus = props.chartStatus, 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, _a = props.triggerButtonSize, triggerButtonSize = _a === void 0 ? 'small' : _a, titleIcon = props.titleIcon, finalMenuItem = props.finalMenuItem, isVertical = props.isVertical;
@@ -137,12 +150,11 @@ function ChartSummary(props) {
         });
     }, [showChartTable, allowDownload, additionalMenuItems, dataTable, title, menuProps, finalMenuItem]);
     return (React.createElement("div", null,
-        React.createElement(quantum_product_1.DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+        React.createElement(quantum_product_1.DescriptionBlock, { sx: __assign({}, (isVertical && { gap: '16px' })), label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
                 React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
                     titleIcon && (React.createElement(quantum_product_1.StackLayoutItem, null,
                         React.createElement(TitleIconWrapper, null, titleIcon))),
-                    React.createElement(quantum_product_1.StackLayoutItem, null,
-                        React.createElement(quantum_product_1.Text, { fontWeight: 500 }, title)),
+                    React.createElement(quantum_product_1.StackLayoutItem, null, titleIcon ? React.createElement(TitleWrapper, null, title) : React.createElement(quantum_product_1.Text, { fontWeight: 500 }, title)),
                     chartStatus && (React.createElement(quantum_product_1.StackLayoutItem, { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
                         React.createElement(quantum_product_1.Label, { color: chartStatus.color },
                             React.createElement(quantum_product_1.StatusDot, __assign({}, chartStatus, { label: "", details: "" })),
@@ -166,4 +178,4 @@ function ChartSummary(props) {
         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, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/common/chart.d.ts

@@ -14,6 +14,12 @@ export interface ICustomTooltipProps extends TooltipProps<number, string> {
 export interface ILegendOptions {
     enabled?: boolean;
 }
+export type StatusType = 'success' | 'failed' | 'total';
+export interface IStatusColorMapping {
+    success?: string;
+    failed?: string;
+    total?: string;
+}
 export type IChartDataPoint<DataType = unknown> = {
     group: string;
     value?: number;
@@ -32,7 +38,8 @@ export interface IBaseChartProps<DataType = unknown> extends IChartCardProps {
     bottomAxis: IAxisOptions<DataType>;
     leftAxis: IAxisOptions<DataType>;
     legend?: ILegendOptions;
-    color?: 'categorical' | 'sequential';
+    color?: 'categorical' | 'sequential' | 'status';
+    statusColorMapping?: IStatusColorMapping;
     additionalMenuItems?: DropdownMenuListItemValue[];
     headerAction?: React.ReactElement;
 }

package/donut-chart/decoupled-legend.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { IDonutChartDataPoint } from '../common/chart';
+import { IDonutChartDataPoint, IStatusColorMapping } from '../common/chart';
 export type IDecoupledLegendProps<DataType = unknown> = {
     data: IDonutChartDataPoint<DataType>[];
     activeIndex?: number;
     setActiveIndex: (index: number | undefined) => void;
-    color?: 'categorical' | 'sequential';
+    color?: 'categorical' | 'sequential' | 'status';
+    statusColorMapping?: IStatusColorMapping;
     isStacked?: boolean;
 };
 declare function DecoupledLegend<DataType = unknown>(props: IDecoupledLegendProps<DataType>): React.JSX.Element;

package/donut-chart/decoupled-legend.js

@@ -38,14 +38,23 @@ var LegendText = (0, quantum_product_1.styled)('span')({
     cursor: 'default',
 });
 function DecoupledLegend(props) {
-    var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a, isStacked = props.isStacked;
+    var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a, statusColorMapping = props.statusColorMapping, isStacked = props.isStacked;
     var theme = (0, quantum_product_1.useTheme)();
     var BASE_COLORS = (0, theme_1.getColorScale)(theme)[color]['base'];
     var MUTED_COLORS = (0, theme_1.getColorScale)(theme)[color]['muted'];
+    var groups = data.map(function (item) { return item.name; });
     var content = data.map(function (datum, index) {
         var isActive = activeIndex !== undefined && activeIndex === index;
-        var color = BASE_COLORS[index % BASE_COLORS.length];
-        var mutedColor = MUTED_COLORS[index % MUTED_COLORS.length];
+        var itemColor;
+        var mutedColor;
+        if (color === 'status') {
+            itemColor = (0, theme_1.getStatusColorForGroup)(datum.name, groups, theme, statusColorMapping, false);
+            mutedColor = (0, theme_1.getStatusColorForGroup)(datum.name, groups, theme, statusColorMapping, true);
+        }
+        else {
+            itemColor = BASE_COLORS[index % BASE_COLORS.length];
+            mutedColor = MUTED_COLORS[index % MUTED_COLORS.length];
+        }
         return (React.createElement(React.Fragment, { key: index },
             React.createElement(quantum_product_1.StackLayout, { gutter: 1, onMouseEnter: function () {
                     setActiveIndex(index);
@@ -57,7 +66,7 @@ function DecoupledLegend(props) {
                 React.createElement(quantum_product_1.StackLayoutItem, { sx: {
                         alignSelf: 'center',
                     } },
-                    React.createElement(LegendDot, { style: { backgroundColor: activeIndex === undefined ? color : isActive ? color : mutedColor } })),
+                    React.createElement(LegendDot, { style: { backgroundColor: activeIndex === undefined ? itemColor : isActive ? itemColor : mutedColor } })),
                 React.createElement(quantum_product_1.StackLayoutItem, { sx: {
                         alignSelf: 'center',
                     } },

package/donut-chart/index.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { IChartCardProps } from '../chart-card';
-import { IDonutChartDataPoint } from '../common/chart';
+import { IDonutChartDataPoint, IStatusColorMapping } from '../common/chart';
 interface IDonutChartProps<DataType = unknown> extends IChartCardProps {
     data: IDonutChartDataPoint<DataType>[];
     displayType: 'absolute' | 'percent';
     layout?: 'horizontal' | 'vertical';
-    color?: 'categorical' | 'sequential';
+    color?: 'categorical' | 'sequential' | 'status';
+    statusColorMapping?: IStatusColorMapping;
     height?: number | string;
     isStacked?: boolean;
     centerLabel?: string;

package/donut-chart/index.js

@@ -71,11 +71,12 @@ 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, additionalMenuItems = props.additionalMenuItems, isStacked = props.isStacked, centerLabel = props.centerLabel;
+    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, statusColorMapping = props.statusColorMapping, _c = props.height, height = _c === void 0 ? '100%' : _c, additionalMenuItems = props.additionalMenuItems, isStacked = props.isStacked, centerLabel = props.centerLabel;
     var _d = __read(React.useState(undefined), 2), activeIndex = _d[0], setActiveIndex = _d[1];
     var donutHeight = isStacked ? 196 : 150;
     var theme = (0, quantum_product_1.useTheme)();
     var BASE_COLORS = (0, theme_1.getColorScale)(theme)[color]['base'];
+    var groups = data.map(function (item) { return item.name; });
     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: {
@@ -90,10 +91,17 @@ function DonutChart(props) {
                                 setActiveIndex(index);
                             }, onMouseLeave: function () {
                                 setActiveIndex(undefined);
-                            } }, data.map(function (_, index) {
-                            return (React.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: BASE_COLORS[index % BASE_COLORS.length], opacity: activeIndex === undefined ? 1 : activeIndex === index ? 1 : 0.5 }));
+                            } }, data.map(function (item, index) {
+                            var fillColor;
+                            if (color === 'status') {
+                                fillColor = (0, theme_1.getStatusColorForGroup)(item.name, groups, theme, statusColorMapping, false);
+                            }
+                            else {
+                                fillColor = BASE_COLORS[index % BASE_COLORS.length];
+                            }
+                            return (React.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: fillColor, opacity: activeIndex === undefined ? 1 : activeIndex === index ? 1 : 0.5 }));
                         }))))),
             React.createElement(quantum_product_1.StackLayoutItem, null,
-                React.createElement(decoupled_legend_1.default, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color, isStacked: isStacked })))));
+                React.createElement(decoupled_legend_1.default, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color, statusColorMapping: statusColorMapping, isStacked: isStacked })))));
 }
 exports.DonutChart = DonutChart;

package/esm/bar-chart/index.js

@@ -29,13 +29,13 @@ import _ from 'lodash';
 import * as React from 'react';
 import { BarChart as RechartsBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts';
 import { useTheme, Text } from '@auth0/quantum-product';
-import { getColorScale } from '../theme';
+import { getColorScale, getStatusColorForGroup } from '../theme';
 import CustomTooltip from '../common/custom-tooltip';
 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, _g = _a.allowDownload, allowDownload = _g === void 0 ? true : _g, _h = _a.showChartTable, showChartTable = _h === void 0 ? true : _h, headerAction = _a.headerAction, customViewChartTable = _a.customViewChartTable, barSize = _a.barSize;
+    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, statusColorMapping = _a.statusColorMapping, additionalMenuItems = _a.additionalMenuItems, tooltipProp = _a.tooltipProp, _f = _a.showTotalValueInTooltip, showTotalValueInTooltip = _f === void 0 ? false : _f, _g = _a.allowDownload, allowDownload = _g === void 0 ? true : _g, _h = _a.showChartTable, showChartTable = _h === void 0 ? true : _h, headerAction = _a.headerAction, customViewChartTable = _a.customViewChartTable, barSize = _a.barSize;
     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; });
@@ -90,9 +90,17 @@ export function BarChart(props) {
             React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { 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, barSize: barSize }, (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] })));
+                var isMuted = barVisibility.hover !== group && barVisibility.hover;
+                var fillColor;
+                if (color === 'status') {
+                    fillColor = getStatusColorForGroup(group, groups, theme, statusColorMapping, isMuted);
+                }
+                else {
+                    fillColor = isMuted
+                        ? getColorScale(theme)[color]['muted'][index]
+                        : getColorScale(theme)[color]['base'][index];
+                }
+                return (React.createElement(Bar, __assign({ key: group, dataKey: group, barSize: barSize }, (isStacked && { stackId: 'stack' }), { name: group, hide: barVisibility[group] === true, fill: fillColor })));
             }))) : (React.createElement("div", { style: {
                 display: 'grid',
                 placeItems: 'center',

package/esm/chart-card/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ChartSummary } from '../chart-summary';
 export function ChartCard(props) {
     var children = props.children, title = props.title, chartStatus = props.chartStatus, titleIcon = props.titleIcon, 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, triggerButtonSize = props.triggerButtonSize, isVertical = props.isVertical, finalMenuItem = props.finalMenuItem;
-    return (React.createElement(Card, { sx: { height: height, padding: 3, paddingBottom: isVertical ? 0.5 : 3 } },
+    return (React.createElement(Card, { sx: { height: height, padding: isVertical ? 2 : 3, paddingBottom: isVertical ? 2 : 3 } },
         React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, showChartTable: showChartTable, allowDownload: allowDownload, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable, triggerButtonSize: triggerButtonSize, chartStatus: chartStatus, titleIcon: titleIcon, finalMenuItem: finalMenuItem, isVertical: isVertical }),
         children));
 }

package/esm/chart-summary/index.js

@@ -49,9 +49,22 @@ var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTempl
     var theme = _a.theme;
     return theme.typography.h4.fontSize;
 });
-var TitleIconWrapper = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  & > svg {\n    font-size: ", ";\n    width: 1em;\n    height: 1em;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  & > svg {\n    font-size: ", ";\n    width: 1em;\n    height: 1em;\n  }\n"])), function (_a) {
+var TitleIconWrapper = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  & > svg {\n    font-size: ", ";\n    color: ", ";\n    width: 1em;\n    height: 1em;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  & > svg {\n    font-size: ", ";\n    color: ", ";\n    width: 1em;\n    height: 1em;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.tokens.type_preset_section_subtitle.fontSize;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.tokens.color_fg_bold;
+});
+var TitleWrapper = styled(Text)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  font-weight: ", ";\n}"], ["\n  font-size: ", ";\n  color: ", ";\n  font-weight: ", ";\n}"])), function (_a) {
+    var theme = _a.theme;
+    return theme.tokens.type_preset_section_subtitle.fontSize;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.tokens.color_fg_bold;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.tokens.type_preset_section_subtitle.fontWeight;
 });
 export function ChartSummary(props) {
     var title = props.title, chartStatus = props.chartStatus, 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, _a = props.triggerButtonSize, triggerButtonSize = _a === void 0 ? 'small' : _a, titleIcon = props.titleIcon, finalMenuItem = props.finalMenuItem, isVertical = props.isVertical;
@@ -111,12 +124,11 @@ export function ChartSummary(props) {
         });
     }, [showChartTable, allowDownload, additionalMenuItems, dataTable, title, menuProps, finalMenuItem]);
     return (React.createElement("div", null,
-        React.createElement(DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+        React.createElement(DescriptionBlock, { sx: __assign({}, (isVertical && { gap: '16px' })), label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
                 React.createElement(StackLayout, { gutter: 1 },
                     titleIcon && (React.createElement(StackLayoutItem, null,
                         React.createElement(TitleIconWrapper, null, titleIcon))),
-                    React.createElement(StackLayoutItem, null,
-                        React.createElement(Text, { fontWeight: 500 }, title)),
+                    React.createElement(StackLayoutItem, null, titleIcon ? React.createElement(TitleWrapper, null, title) : React.createElement(Text, { fontWeight: 500 }, title)),
                     chartStatus && (React.createElement(StackLayoutItem, { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
                         React.createElement(Label, { color: chartStatus.color },
                             React.createElement(StatusDot, __assign({}, chartStatus, { label: "", details: "" })),
@@ -139,4 +151,4 @@ export function ChartSummary(props) {
                 label) }),
         showChartTable && (React.createElement(DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable, customViewChartTable: customViewChartTable, allowDownload: allowDownload }))));
 }
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/esm/donut-chart/decoupled-legend.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StackLayout, StackLayoutItem, RowLayout, styled, useTheme } from '@auth0/quantum-product';
-import { getColorScale } from '../theme';
+import { getColorScale, getStatusColorForGroup } from '../theme';
 var LegendDot = styled('div')({
     height: '14px',
     width: '14px',
@@ -13,14 +13,23 @@ var LegendText = styled('span')({
     cursor: 'default',
 });
 function DecoupledLegend(props) {
-    var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a, isStacked = props.isStacked;
+    var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a, statusColorMapping = props.statusColorMapping, isStacked = props.isStacked;
     var theme = useTheme();
     var BASE_COLORS = getColorScale(theme)[color]['base'];
     var MUTED_COLORS = getColorScale(theme)[color]['muted'];
+    var groups = data.map(function (item) { return item.name; });
     var content = data.map(function (datum, index) {
         var isActive = activeIndex !== undefined && activeIndex === index;
-        var color = BASE_COLORS[index % BASE_COLORS.length];
-        var mutedColor = MUTED_COLORS[index % MUTED_COLORS.length];
+        var itemColor;
+        var mutedColor;
+        if (color === 'status') {
+            itemColor = getStatusColorForGroup(datum.name, groups, theme, statusColorMapping, false);
+            mutedColor = getStatusColorForGroup(datum.name, groups, theme, statusColorMapping, true);
+        }
+        else {
+            itemColor = BASE_COLORS[index % BASE_COLORS.length];
+            mutedColor = MUTED_COLORS[index % MUTED_COLORS.length];
+        }
         return (React.createElement(React.Fragment, { key: index },
             React.createElement(StackLayout, { gutter: 1, onMouseEnter: function () {
                     setActiveIndex(index);
@@ -32,7 +41,7 @@ function DecoupledLegend(props) {
                 React.createElement(StackLayoutItem, { sx: {
                         alignSelf: 'center',
                     } },
-                    React.createElement(LegendDot, { style: { backgroundColor: activeIndex === undefined ? color : isActive ? color : mutedColor } })),
+                    React.createElement(LegendDot, { style: { backgroundColor: activeIndex === undefined ? itemColor : isActive ? itemColor : mutedColor } })),
                 React.createElement(StackLayoutItem, { sx: {
                         alignSelf: 'center',
                     } },

package/esm/donut-chart/index.js

@@ -28,7 +28,7 @@ var __read = (this && this.__read) || function (o, n) {
 import * as React from 'react';
 import { Cell, Pie, PieChart as RechartsPieChart, ResponsiveContainer } from 'recharts';
 import { StackLayout, StackLayoutItem, styled, useTheme } from '@auth0/quantum-product';
-import { getColorScale } from '../theme';
+import { getColorScale, getStatusColorForGroup } from '../theme';
 import Center from './center';
 import DecoupledLegend from './decoupled-legend';
 import { ChartCard } from '../chart-card';
@@ -42,11 +42,12 @@ 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, additionalMenuItems = props.additionalMenuItems, isStacked = props.isStacked, centerLabel = props.centerLabel;
+    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, statusColorMapping = props.statusColorMapping, _c = props.height, height = _c === void 0 ? '100%' : _c, additionalMenuItems = props.additionalMenuItems, isStacked = props.isStacked, centerLabel = props.centerLabel;
     var _d = __read(React.useState(undefined), 2), activeIndex = _d[0], setActiveIndex = _d[1];
     var donutHeight = isStacked ? 196 : 150;
     var theme = useTheme();
     var BASE_COLORS = getColorScale(theme)[color]['base'];
+    var groups = data.map(function (item) { return item.name; });
     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: {
@@ -61,9 +62,16 @@ export function DonutChart(props) {
                                 setActiveIndex(index);
                             }, onMouseLeave: function () {
                                 setActiveIndex(undefined);
-                            } }, data.map(function (_, index) {
-                            return (React.createElement(Cell, { key: "cell-".concat(index), fill: BASE_COLORS[index % BASE_COLORS.length], opacity: activeIndex === undefined ? 1 : activeIndex === index ? 1 : 0.5 }));
+                            } }, data.map(function (item, index) {
+                            var fillColor;
+                            if (color === 'status') {
+                                fillColor = getStatusColorForGroup(item.name, groups, theme, statusColorMapping, false);
+                            }
+                            else {
+                                fillColor = BASE_COLORS[index % BASE_COLORS.length];
+                            }
+                            return (React.createElement(Cell, { key: "cell-".concat(index), fill: fillColor, opacity: activeIndex === undefined ? 1 : activeIndex === index ? 1 : 0.5 }));
                         }))))),
             React.createElement(StackLayoutItem, null,
-                React.createElement(DecoupledLegend, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color, isStacked: isStacked })))));
+                React.createElement(DecoupledLegend, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color, statusColorMapping: statusColorMapping, isStacked: isStacked })))));
 }

package/esm/line-chart/index.js

@@ -29,7 +29,7 @@ import _ from 'lodash';
 import * as React from 'react';
 import { Area, CartesianGrid, ComposedChart, Legend, Line, ReferenceArea, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import { useTheme, Text, DropdownMenu, useDropdownMenuState, Button, StackLayout, Divider, ChevronDownIcon, AlertDiamondIcon, IconButton, TableIcon, alpha, } from '@auth0/quantum-product';
-import { getColorScale } from '../theme';
+import { getColorScale, getStatusColorForGroup } from '../theme';
 import CustomActiveDot from './custom-active-dot';
 import CustomTooltip from '../common/custom-tooltip';
 import { ChartCard } from '../chart-card';
@@ -40,7 +40,7 @@ var getThresholdColor = function (data, baseColor) {
     return data.hover === 'thresholdControl' || !data.hover ? baseColor : alpha(baseColor, 0.35);
 };
 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, titleIcon = _a.titleIcon, chartStatus = _a.chartStatus, 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, finalMenuItem = _a.finalMenuItem, thresholds = _a.thresholds, breaches = _a.breaches, disableThresholdMenu = _a.disableThresholdMenu, _e = _a.allowDownload, allowDownload = _e === void 0 ? true : _e, _f = _a.showChartTable, showChartTable = _f === void 0 ? true : _f, _g = _a.showChartTableButtonInHeader, showChartTableButtonInHeader = _g === void 0 ? true : _g, _h = _a.showDividerInHeader, showDividerInHeader = _h === void 0 ? true : _h, _j = _a.headerButtonsSize, headerButtonsSize = _j === void 0 ? 'medium' : _j, _k = _a.isVertical, isVertical = _k === void 0 ? false : _k;
+    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, titleIcon = _a.titleIcon, chartStatus = _a.chartStatus, 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, statusColorMapping = _a.statusColorMapping, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, finalMenuItem = _a.finalMenuItem, thresholds = _a.thresholds, breaches = _a.breaches, disableThresholdMenu = _a.disableThresholdMenu, _e = _a.allowDownload, allowDownload = _e === void 0 ? true : _e, _f = _a.showChartTable, showChartTable = _f === void 0 ? true : _f, _g = _a.showChartTableButtonInHeader, showChartTableButtonInHeader = _g === void 0 ? true : _g, _h = _a.showDividerInHeader, showDividerInHeader = _h === void 0 ? true : _h, _j = _a.headerButtonsSize, headerButtonsSize = _j === void 0 ? 'medium' : _j, _k = _a.isVertical, isVertical = _k === void 0 ? false : _k;
     var theme = useTheme();
     var _l = useDropdownMenuState({ baseId: 'threshold-menu' }), triggerProps = _l.triggerProps, menuProps = _l.menuProps;
     // Function to know how many lines we need based of how much different group values are.
@@ -164,9 +164,17 @@ export function LineChart(props) {
                         top: '15px',
                     }, content: React.createElement(CustomLegend, { title: title, helperText: helperText, selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, isVertical: isVertical, theme: theme }) })) : (React.createElement(Legend, { align: "center", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(CustomLegend, { selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, theme: theme }) })),
                 groups.map(function (group, index) {
-                    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() }));
+                    var isMuted = lineVisibility.hover !== group && lineVisibility.hover;
+                    var strokeColor;
+                    if (color === 'status') {
+                        strokeColor = getStatusColorForGroup(group, groups, theme, statusColorMapping, isMuted);
+                    }
+                    else {
+                        strokeColor = isMuted
+                            ? getColorScale(theme)[color]['muted'][index]
+                            : getColorScale(theme)[color]['base'][index];
+                    }
+                    return (React.createElement(Line, { key: group, dataKey: group, name: group, strokeWidth: 3, hide: lineVisibility[group] === true, stroke: strokeColor, dot: false, activeDot: CustomActiveDot() }));
                 }),
                 threshold && (React.createElement(React.Fragment, null,
                     React.createElement(Area, { type: "monotone", dataKey: 'thresholdControl', name: "".concat(threshold.threshold_label), stroke: "none", fillOpacity: 0, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_info), isAnimationActive: false, dot: false, activeDot: false }),

package/esm/theme.js

@@ -34,5 +34,71 @@ export var getColorScale = function (_a) {
                 alpha(tokens.color_chart_sequential_4, 0.35),
             ],
         },
+        status: {
+            base: [tokens.color_fg_state_success, tokens.color_fg_state_danger, tokens.color_fg_state_neutral],
+            muted: [
+                alpha(tokens.color_fg_state_success, 0.35),
+                alpha(tokens.color_fg_state_danger, 0.35),
+                alpha(tokens.color_fg_state_neutral, 0.35),
+            ],
+        },
     };
 };
+/**
+ * Auto-detects status type based on common group names
+ */
+var autoDetectStatusType = function (groupName) {
+    var name = groupName.toLowerCase();
+    if (name.includes('success') ||
+        name.includes('passed') ||
+        name.includes('completed') ||
+        name.includes('ok') ||
+        name.includes('approved')) {
+        return 'success';
+    }
+    if (name.includes('fail') ||
+        name.includes('error') ||
+        name.includes('reject') ||
+        name.includes('denied') ||
+        name.includes('blocked')) {
+        return 'failed';
+    }
+    if (name.includes('total') || name.includes('all') || name.includes('overall')) {
+        return 'total';
+    }
+    return null;
+};
+/**
+ * Maps groups to status colors with explicit mapping support and auto-detection fallback
+ */
+export var getStatusColorForGroup = function (group, groups, theme, statusColorMapping, isMuted) {
+    if (isMuted === void 0) { isMuted = false; }
+    var colorScale = getColorScale(theme);
+    var statusColors = isMuted ? colorScale.status.muted : colorScale.status.base;
+    // First, try explicit mapping if provided
+    if (statusColorMapping) {
+        if (statusColorMapping.success === group) {
+            return statusColors[0];
+        }
+        if (statusColorMapping.failed === group) {
+            return statusColors[1];
+        }
+        if (statusColorMapping.total === group) {
+            return statusColors[2];
+        }
+    }
+    // Second, try auto-detection based on group name
+    var detectedType = autoDetectStatusType(group);
+    if (detectedType === 'success') {
+        return statusColors[0];
+    }
+    if (detectedType === 'failed') {
+        return statusColors[1];
+    }
+    if (detectedType === 'total') {
+        return statusColors[2];
+    }
+    // Fallback to positional mapping (current behavior)
+    var groupIndex = groups.indexOf(group);
+    return statusColors[groupIndex % statusColors.length];
+};

package/line-chart/index.js

@@ -69,7 +69,7 @@ var getThresholdColor = function (data, baseColor) {
     return data.hover === 'thresholdControl' || !data.hover ? baseColor : (0, quantum_product_1.alpha)(baseColor, 0.35);
 };
 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, titleIcon = _a.titleIcon, chartStatus = _a.chartStatus, 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, finalMenuItem = _a.finalMenuItem, thresholds = _a.thresholds, breaches = _a.breaches, disableThresholdMenu = _a.disableThresholdMenu, _e = _a.allowDownload, allowDownload = _e === void 0 ? true : _e, _f = _a.showChartTable, showChartTable = _f === void 0 ? true : _f, _g = _a.showChartTableButtonInHeader, showChartTableButtonInHeader = _g === void 0 ? true : _g, _h = _a.showDividerInHeader, showDividerInHeader = _h === void 0 ? true : _h, _j = _a.headerButtonsSize, headerButtonsSize = _j === void 0 ? 'medium' : _j, _k = _a.isVertical, isVertical = _k === void 0 ? false : _k;
+    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, titleIcon = _a.titleIcon, chartStatus = _a.chartStatus, 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, statusColorMapping = _a.statusColorMapping, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, finalMenuItem = _a.finalMenuItem, thresholds = _a.thresholds, breaches = _a.breaches, disableThresholdMenu = _a.disableThresholdMenu, _e = _a.allowDownload, allowDownload = _e === void 0 ? true : _e, _f = _a.showChartTable, showChartTable = _f === void 0 ? true : _f, _g = _a.showChartTableButtonInHeader, showChartTableButtonInHeader = _g === void 0 ? true : _g, _h = _a.showDividerInHeader, showDividerInHeader = _h === void 0 ? true : _h, _j = _a.headerButtonsSize, headerButtonsSize = _j === void 0 ? 'medium' : _j, _k = _a.isVertical, isVertical = _k === void 0 ? false : _k;
     var theme = (0, quantum_product_1.useTheme)();
     var _l = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'threshold-menu' }), triggerProps = _l.triggerProps, menuProps = _l.menuProps;
     // Function to know how many lines we need based of how much different group values are.
@@ -193,9 +193,17 @@ function LineChart(props) {
                         top: '15px',
                     }, content: React.createElement(custom_legend_1.CustomLegend, { title: title, helperText: helperText, selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, isVertical: isVertical, theme: theme }) })) : (React.createElement(recharts_1.Legend, { align: "center", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(custom_legend_1.CustomLegend, { selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, theme: theme }) })),
                 groups.map(function (group, index) {
-                    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)() }));
+                    var isMuted = lineVisibility.hover !== group && lineVisibility.hover;
+                    var strokeColor;
+                    if (color === 'status') {
+                        strokeColor = (0, theme_1.getStatusColorForGroup)(group, groups, theme, statusColorMapping, isMuted);
+                    }
+                    else {
+                        strokeColor = isMuted
+                            ? (0, theme_1.getColorScale)(theme)[color]['muted'][index]
+                            : (0, theme_1.getColorScale)(theme)[color]['base'][index];
+                    }
+                    return (React.createElement(recharts_1.Line, { key: group, dataKey: group, name: group, strokeWidth: 3, hide: lineVisibility[group] === true, stroke: strokeColor, dot: false, activeDot: (0, custom_active_dot_1.default)() }));
                 }),
                 threshold && (React.createElement(React.Fragment, null,
                     React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'thresholdControl', name: "".concat(threshold.threshold_label), stroke: "none", fillOpacity: 0, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_info), isAnimationActive: false, dot: false, activeDot: false }),

package/package.json

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

package/theme.d.ts

@@ -1,4 +1,5 @@
 import { ITheme } from '@auth0/quantum-product';
+import { IStatusColorMapping } from './common/chart';
 export declare const getColorScale: ({ tokens }: ITheme) => {
     categorical: {
         base: string[];
@@ -8,4 +9,12 @@ export declare const getColorScale: ({ tokens }: ITheme) => {
         base: string[];
         muted: string[];
     };
+    status: {
+        base: string[];
+        muted: string[];
+    };
 };
+/**
+ * Maps groups to status colors with explicit mapping support and auto-detection fallback
+ */
+export declare const getStatusColorForGroup: (group: string, groups: string[], theme: ITheme, statusColorMapping?: IStatusColorMapping, isMuted?: boolean) => string;

package/theme.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColorScale = void 0;
+exports.getStatusColorForGroup = exports.getColorScale = void 0;
 var quantum_product_1 = require("@auth0/quantum-product");
 var getColorScale = function (_a) {
     var tokens = _a.tokens;
@@ -37,6 +37,73 @@ var getColorScale = function (_a) {
                 (0, quantum_product_1.alpha)(tokens.color_chart_sequential_4, 0.35),
             ],
         },
+        status: {
+            base: [tokens.color_fg_state_success, tokens.color_fg_state_danger, tokens.color_fg_state_neutral],
+            muted: [
+                (0, quantum_product_1.alpha)(tokens.color_fg_state_success, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_fg_state_danger, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_fg_state_neutral, 0.35),
+            ],
+        },
     };
 };
 exports.getColorScale = getColorScale;
+/**
+ * Auto-detects status type based on common group names
+ */
+var autoDetectStatusType = function (groupName) {
+    var name = groupName.toLowerCase();
+    if (name.includes('success') ||
+        name.includes('passed') ||
+        name.includes('completed') ||
+        name.includes('ok') ||
+        name.includes('approved')) {
+        return 'success';
+    }
+    if (name.includes('fail') ||
+        name.includes('error') ||
+        name.includes('reject') ||
+        name.includes('denied') ||
+        name.includes('blocked')) {
+        return 'failed';
+    }
+    if (name.includes('total') || name.includes('all') || name.includes('overall')) {
+        return 'total';
+    }
+    return null;
+};
+/**
+ * Maps groups to status colors with explicit mapping support and auto-detection fallback
+ */
+var getStatusColorForGroup = function (group, groups, theme, statusColorMapping, isMuted) {
+    if (isMuted === void 0) { isMuted = false; }
+    var colorScale = (0, exports.getColorScale)(theme);
+    var statusColors = isMuted ? colorScale.status.muted : colorScale.status.base;
+    // First, try explicit mapping if provided
+    if (statusColorMapping) {
+        if (statusColorMapping.success === group) {
+            return statusColors[0];
+        }
+        if (statusColorMapping.failed === group) {
+            return statusColors[1];
+        }
+        if (statusColorMapping.total === group) {
+            return statusColors[2];
+        }
+    }
+    // Second, try auto-detection based on group name
+    var detectedType = autoDetectStatusType(group);
+    if (detectedType === 'success') {
+        return statusColors[0];
+    }
+    if (detectedType === 'failed') {
+        return statusColors[1];
+    }
+    if (detectedType === 'total') {
+        return statusColors[2];
+    }
+    // Fallback to positional mapping (current behavior)
+    var groupIndex = groups.indexOf(group);
+    return statusColors[groupIndex % statusColors.length];
+};
+exports.getStatusColorForGroup = getStatusColorForGroup;