@auth0/quantum-charts 0.0.3 → 0.1.0

package/README.md

@@ -0,0 +1,9 @@
+# Quantum Charts
+
+## Installation
+```bash
+yarn add @auth0/quantum-charts
+```
+
+## Usage
+Detailed docs and example usage can be found [here](https://quantum.okta.design/?path=/story/quantum-charts-intro--page).

package/bar-chart/index.js

@@ -33,6 +33,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -43,14 +59,32 @@ var React = __importStar(require("react"));
 var recharts_1 = require("recharts");
 var quantum_product_1 = require("@auth0/quantum-product");
 var theme_1 = require("../theme");
-var custom_tooltip_1 = __importDefault(require("../line-chart/custom-tooltip"));
-var date_fns_1 = require("date-fns");
+var custom_tooltip_1 = __importDefault(require("../common/custom-tooltip"));
 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;
+    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 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; });
+    var initialState = __assign({ hover: null }, groups.reduce(function (acc, group) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
+    }, {}));
+    var _f = __read(React.useState(initialState), 2), barVisibility = _f[0], setBarVisibility = _f[1];
+    var handleLegendMouseEnter = function (e) {
+        if (!barVisibility[e.dataKey]) {
+            setBarVisibility(__assign(__assign({}, barVisibility), { hover: e.dataKey }));
+        }
+    };
+    var handleLegendMouseLeave = function () {
+        setBarVisibility(__assign(__assign({}, barVisibility), { hover: null }));
+    };
+    var selectBar = function (e) {
+        var _a;
+        setBarVisibility(__assign(__assign({}, barVisibility), (_a = {}, _a[e.dataKey] = !barVisibility[e.dataKey], _a.hover = null, _a)));
+    };
     var bottomAxisDataKey = bottomAxis.mapsTo || 'date';
     var leftAxisDataKey = leftAxis.mapsTo || 'value';
     var entries = {};
@@ -71,35 +105,26 @@ function BarChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    var formatBottomTick = function (value) {
-        if (bottomAxis.scaleType === 'date') {
-            return (0, date_fns_1.format)(new Date(value), 'LLL d');
-        }
-        if (bottomAxis.scaleType === 'datetime') {
-            return (0, date_fns_1.format)(new Date(value), 'LLL d p');
-        }
-        return value;
-    };
     return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
         React.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: height }, data.length ? (React.createElement(recharts_1.BarChart, { width: 500, layout: layout === 'horizontal' ? 'vertical' : 'horizontal', height: height, data: Object.values(entries), margin: {
                 top: 24,
                 right: 10,
-                left: layout === 'vertical' ? -24 : -6,
+                left: layout === 'vertical' ? -24 : 16,
                 bottom: 0,
             } },
             React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
-            React.createElement(recharts_1.XAxis, __assign({}, (layout === 'horizontal'
-                ? { type: 'number' }
-                : { tickFormatter: formatBottomTick, dataKey: bottomAxisDataKey }), { height: 30 })),
+            React.createElement(recharts_1.XAxis, __assign({}, (layout === 'horizontal' ? { type: 'number' } : { dataKey: bottomAxisDataKey }), { height: 30, tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, bottomAxis.scaleType); }, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
             React.createElement(recharts_1.YAxis, __assign({}, (layout === 'horizontal' && {
                 type: 'category',
-                tickFormatter: formatBottomTick,
+                tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); },
                 dataKey: bottomAxisDataKey,
-            }), { domain: ['auto', 'auto'] })),
-            React.createElement(recharts_1.Tooltip, { content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined }) }),
-            React.createElement(recharts_1.Legend, { align: "center", iconType: "square", iconSize: 14, wrapperStyle: { paddingTop: 16 } }),
+            }), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
+            React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
+            React.createElement(recharts_1.Legend, { align: "center", iconType: "square", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(custom_legend_1.CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
             groups.map(function (group, index) {
-                return (React.createElement(recharts_1.Bar, __assign({ key: group, dataKey: group }, (isStacked && { stackId: 'stack' }), { name: group, maxBarSize: 70, fill: (0, theme_1.getBaseColorScale)(theme)[index], radius: !isStacked || index == groups.length - 1
+                return (React.createElement(recharts_1.Bar, __assign({ key: group, dataKey: group }, (isStacked && { stackId: 'stack' }), { name: group, maxBarSize: 70, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
+                        ? (0, theme_1.getColorScale)(theme)[color]['base'][index]
+                        : (0, theme_1.getColorScale)(theme)[color]['muted'][index], radius: !isStacked || index == groups.length - 1
                         ? layout === 'vertical'
                             ? [4, 4, 0, 0]
                             : [0, 4, 4, 0]

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+/// <reference types="react" />
 export interface IDataTableChartProps {
-    title: React.ReactNode;
+    title?: string;
     isOpen: boolean;
     toggleIsOpen: () => void;
     data: any;

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

@@ -52,8 +52,47 @@ function DataTableChart(props) {
     var isDonut = data[0] && data[0].name !== undefined;
     var groups = lodash_1.default.groupBy(data, 'group');
     var _a = __read(React.useState(Object.keys(groups)[0]), 2), selectedTab = _a[0], setSelectedTab = _a[1];
+    var hasKey = data[0] && data[0].key !== undefined;
+    var downloadCSV = function (filename) {
+        if (filename === void 0) { filename = 'chart data'; }
+        var mappedData = data.map(function (row) {
+            if (row.date) {
+                row.date = (0, date_fns_1.format)(new Date(row.date), 'LLL d p');
+            }
+            return Object.values(row).map(function (column) { return "\"".concat(column === '–' ? '–' : column, "\""); });
+        });
+        mappedData.unshift(Object.keys(data[0]));
+        var content = '', csvData = '';
+        mappedData.forEach(function (d, i) {
+            csvData = d.join(',');
+            content += i < data.length ? csvData + '\n' : csvData;
+        });
+        var anchor = document.createElement('a');
+        var mimeType = 'text/csv;encoding:utf-8';
+        if (navigator['msSaveBlob']) {
+            // Internet Explorer 10
+            navigator['msSaveBlob'](new Blob([content], {
+                type: mimeType,
+            }), filename);
+        }
+        else if (URL && 'download' in anchor) {
+            // HTML5
+            var href = URL.createObjectURL(new Blob([content], {
+                type: mimeType,
+            }));
+            anchor.href = href;
+            anchor.setAttribute('download', filename);
+            document.body.appendChild(anchor);
+            anchor.click();
+            document.body.removeChild(anchor);
+            URL.revokeObjectURL(href);
+        }
+        else {
+            location.href = "data:application/octet-stream,".concat(encodeURIComponent(content));
+        }
+    };
     return (React.createElement(quantum_product_1.Dialog, { open: isOpen, fullWidth: true, title: title, onClose: toggleIsOpen, actions: React.createElement(React.Fragment, null,
-            React.createElement(quantum_product_1.Button, { color: "primary", variant: "contained" }, "Download CSV")) },
+            React.createElement(quantum_product_1.Button, { color: "primary", variant: "contained", startIcon: React.createElement(quantum_product_1.DownloadIcon, null), onClick: function () { return downloadCSV(title); } }, "Download")) },
         React.createElement(quantum_product_1.Box, { p: 2 },
             React.createElement(quantum_product_1.Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
                 React.createElement(quantum_product_1.TabList, { classes: { indicator: 'chromatic-ignore' } }, !isDonut &&
@@ -74,10 +113,13 @@ function DataTableChart(props) {
                                         var item = _a.item;
                                         return item.value || 'N/A';
                                     } },
-                                { title: 'date', render: function (_a) {
+                                {
+                                    title: hasKey ? 'key' : 'date',
+                                    render: function (_a) {
                                         var item = _a.item;
-                                        return (0, date_fns_1.format)(new Date(item.date), 'LLL d p');
-                                    } },
+                                        return (hasKey ? item.key : (0, date_fns_1.format)(new Date(item.date), 'LLL d p'));
+                                    },
+                                },
                             ] })));
                 })))))));
 }

package/chart-summary/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export interface IChartSummaryProps {
-    title?: React.ReactNode;
+    title?: string;
     value?: string | number;
     label?: React.ReactNode;
     /** Renders help icon with tooltip as passed value **/

package/common/chart.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
+import { TooltipProps } from 'recharts';
 import { IChartCardProps } from '../chart-card';
 export declare type ScaleType = 'date' | 'datetime' | 'label' | 'number';
+export interface ICustomTooltipProps extends TooltipProps<number, string> {
+    scaleType?: 'datetime' | 'date';
+}
 export interface ILegendOptions {
     enabled?: boolean;
 }
@@ -21,4 +25,6 @@ export interface IBaseChartProps<DataType = unknown> extends IChartCardProps {
     bottomAxis: IAxisOptions<DataType>;
     leftAxis: IAxisOptions<DataType>;
     legend?: ILegendOptions;
+    color?: 'categorical' | 'sequential';
 }
+export declare const tickFormatter: (value: any, scaleType: any) => any;

package/common/chart.js

@@ -1,2 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.tickFormatter = void 0;
+var date_fns_1 = require("date-fns");
+var tickFormatter = function (value, scaleType) {
+    switch (scaleType) {
+        case 'number':
+            if (value > 1000000000) {
+                return (value / 1000000000).toString() + 'B';
+            }
+            else if (value > 1000000) {
+                return (value / 1000000).toString() + 'M';
+            }
+            else if (value > 1000) {
+                return (value / 1000).toString() + 'K';
+            }
+            else {
+                return value.toString();
+            }
+        case 'label':
+            if (value.length <= 8)
+                return value;
+            return "".concat(value.substring(0, 8), "...");
+        case 'date':
+            return (0, date_fns_1.format)(new Date(value), 'LLL d');
+        case 'datetime':
+            return (0, date_fns_1.format)(new Date(value), 'LLL d p');
+        default:
+            break;
+    }
+};
+exports.tickFormatter = tickFormatter;

package/common/custom-legend.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CustomLegend: (props: any) => JSX.Element;

package/common/custom-legend.js

@@ -0,0 +1,69 @@
+"use strict";
+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);
+    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.CustomLegend = void 0;
+var quantum_product_1 = require("@auth0/quantum-product");
+var React = __importStar(require("react"));
+var Root = (0, quantum_product_1.styled)(quantum_product_1.StackLayout)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        justifyContent: 'center',
+        marginTop: theme.spacing(3),
+    });
+});
+var LegendIcon = (0, quantum_product_1.styled)('div')(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (__assign({}, (ownerState.isHide
+        ? {
+            borderRadius: theme.spacing(0.5),
+            border: "2px solid ".concat(ownerState.color),
+            width: '14px',
+            height: '14px',
+        }
+        : {
+            background: ownerState.color,
+            width: '14px',
+            height: '14px',
+            borderRadius: '4px',
+        })));
+});
+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))); })));
+};
+exports.CustomLegend = CustomLegend;

package/common/custom-tooltip.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ICustomTooltipProps } from './chart';
+declare const CustomTooltip: (props: ICustomTooltipProps) => JSX.Element | null;
+export default CustomTooltip;

package/common/custom-tooltip.js

@@ -0,0 +1,54 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var quantum_product_1 = require("@auth0/quantum-product");
+var custom_color_status_dot_1 = __importDefault(require("./custom-color-status-dot"));
+var date_fns_1 = require("date-fns");
+var styles_1 = require("../styles");
+var CustomTooltip = function (props) {
+    var _a, _b, _c;
+    var active = props.active, payload = props.payload, scaleType = props.scaleType, labelProp = props.label;
+    if (active && payload && payload.length) {
+        var label = ((_a = payload[0].payload) === null || _a === void 0 ? void 0 : _a.date)
+            ? scaleType === 'datetime'
+                ? "".concat((0, date_fns_1.format)(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
+                : "".concat((0, date_fns_1.format)(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
+            : labelProp;
+        return (React.createElement(styles_1.CustomTooltip, null,
+            React.createElement(quantum_product_1.Text, { color: "text.secondary" }, label),
+            React.createElement(quantum_product_1.Box, null,
+                React.createElement(quantum_product_1.RowLayout, { gutter: 1 }, payload.map(function (x, index) {
+                    return (React.createElement(quantum_product_1.StackLayout, { key: index, gutter: 0.5 },
+                        React.createElement(custom_color_status_dot_1.default, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + '  ' }),
+                        React.createElement(quantum_product_1.Text, { color: "text.secondary" }, x.payload[x.name || ''])));
+                })))));
+    }
+    return null;
+};
+exports.default = CustomTooltip;

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

@@ -4,6 +4,7 @@ export declare type IDecoupledLegendProps<DataType = unknown> = {
     data: IDonutChartDataPoint<DataType>[];
     activeIndex?: number;
     setActiveIndex: (index: number | undefined) => void;
+    color?: 'categorical' | 'sequential';
 };
 declare function DecoupledLegend<DataType = unknown>(props: IDecoupledLegendProps<DataType>): JSX.Element;
 export default DecoupledLegend;

package/donut-chart/decoupled-legend.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -26,21 +22,37 @@ 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 });
 var React = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
 var quantum_product_1 = require("@auth0/quantum-product");
 var theme_1 = require("../theme");
+var Root = (0, quantum_product_1.styled)('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    height: '150px',
+    flexWrap: 'wrap',
+});
+var LegendDot = (0, quantum_product_1.styled)('div')({
+    height: '14px',
+    width: '14px',
+    borderRadius: '4px',
+});
+var LegendText = (0, quantum_product_1.styled)('span')({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    cursor: 'default',
+});
 function DecoupledLegend(props) {
-    var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex;
+    var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a;
     var theme = (0, quantum_product_1.useTheme)();
-    var BASE_COLORS = (0, theme_1.getBaseColorScale)(theme);
-    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', height: '150px', flexWrap: 'wrap' } }, data.map(function (datum, index) {
+    var BASE_COLORS = (0, theme_1.getColorScale)(theme)[color]['base'];
+    var MUTED_COLORS = (0, theme_1.getColorScale)(theme)[color]['muted'];
+    return (React.createElement(Root, null, 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];
         return (React.createElement(React.Fragment, { key: index },
             React.createElement(quantum_product_1.StackLayout, { gutter: 1, onMouseEnter: function () {
                     setActiveIndex(index);
@@ -52,21 +64,11 @@ function DecoupledLegend(props) {
                 React.createElement(quantum_product_1.StackLayoutItem, { sx: {
                         alignSelf: 'center',
                     } },
-                    React.createElement(LegendDotWrapper, { style: {
-                            border: '2px solid ' + (isActive ? color : 'white'),
-                        } },
-                        React.createElement(LegendDot, { style: { backgroundColor: color } }))),
+                    React.createElement(LegendDot, { style: { backgroundColor: activeIndex === undefined ? color : isActive ? color : mutedColor } })),
                 React.createElement(quantum_product_1.StackLayoutItem, { sx: {
                         alignSelf: 'center',
                     } },
                     React.createElement(LegendText, { color: isActive ? 'primary' : 'secondary' }, datum.name)))));
     })));
 }
-var LegendDot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 12px;\n  width: 12px;\n  border: 2px solid white;\n  border-radius: 2px;\n"], ["\n  height: 12px;\n  width: 12px;\n  border: 2px solid white;\n  border-radius: 2px;\n"])));
-var LegendDotWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 4px;\n"], ["\n  border-radius: 4px;\n"])));
-var LegendText = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: default;\n"], ["\n  color: ", ";\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: default;\n"])), function (_a) {
-    var theme = _a.theme, color = _a.color;
-    return theme.palette.text[color !== null && color !== void 0 ? color : 'secondary'];
-});
 exports.default = DecoupledLegend;
-var templateObject_1, templateObject_2, templateObject_3;

package/donut-chart/index.d.ts

@@ -7,6 +7,8 @@ export declare type IDonutChartDataPoint<DataType = unknown> = {
 interface IDonutChartProps<DataType = unknown> extends IChartCardProps {
     data: IDonutChartDataPoint<DataType>[];
     displayType: 'absolute' | 'percent';
+    layout?: 'horizontal' | 'vertical';
+    color?: 'categorical' | 'sequential';
 }
 export declare function DonutChart(props: IDonutChartProps): JSX.Element;
 export {};

package/donut-chart/index.js

@@ -1,4 +1,15 @@
 "use strict";
+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);
@@ -50,17 +61,22 @@ var theme_1 = require("../theme");
 var center_1 = __importDefault(require("./center"));
 var decoupled_legend_1 = __importDefault(require("./decoupled-legend"));
 var chart_card_1 = require("../chart-card");
+var ResponsiveChartCard = (0, quantum_product_1.styled)(quantum_product_1.StackLayout)(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (__assign((_b = {}, _b[theme.breakpoints.down('sm')] = {
+        flexDirection: 'column',
+    }, _b.flexWrap = 'nowrap', _b.marginTop = theme.spacing(3), _b), (ownerState.layout === 'vertical' && {
+        flexDirection: 'column',
+    })));
+});
 function DonutChart(props) {
-    var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText;
-    var _a = __read(React.useState(undefined), 2), activeIndex = _a[0], setActiveIndex = _a[1];
+    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;
+    var _c = __read(React.useState(undefined), 2), activeIndex = _c[0], setActiveIndex = _c[1];
     var theme = (0, quantum_product_1.useTheme)();
-    var BASE_COLORS = (0, theme_1.getBaseColorScale)(theme);
+    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 },
-        React.createElement(quantum_product_1.StackLayout, { sx: {
-                height: '150px',
-                flexWrap: 'nowrap',
-                mt: '24px',
-            } },
+        React.createElement(ResponsiveChartCard, { ownerState: { layout: layout } },
             React.createElement(quantum_product_1.StackLayoutItem, { sx: {
                     height: '150px',
                     width: '150px',
@@ -77,6 +93,6 @@ function DonutChart(props) {
                             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 }));
                         }))))),
             React.createElement(quantum_product_1.StackLayoutItem, null,
-                React.createElement(decoupled_legend_1.default, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data })))));
+                React.createElement(decoupled_legend_1.default, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color })))));
 }
 exports.DonutChart = DonutChart;

package/esm/bar-chart/index.js

@@ -9,19 +9,53 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 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 { getBaseColorScale } from '../theme';
-import CustomTooltip from '../line-chart/custom-tooltip';
-import { format } from 'date-fns';
+import { getColorScale } 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;
+    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 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; });
+    var initialState = __assign({ hover: null }, groups.reduce(function (acc, group) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
+    }, {}));
+    var _f = __read(React.useState(initialState), 2), barVisibility = _f[0], setBarVisibility = _f[1];
+    var handleLegendMouseEnter = function (e) {
+        if (!barVisibility[e.dataKey]) {
+            setBarVisibility(__assign(__assign({}, barVisibility), { hover: e.dataKey }));
+        }
+    };
+    var handleLegendMouseLeave = function () {
+        setBarVisibility(__assign(__assign({}, barVisibility), { hover: null }));
+    };
+    var selectBar = function (e) {
+        var _a;
+        setBarVisibility(__assign(__assign({}, barVisibility), (_a = {}, _a[e.dataKey] = !barVisibility[e.dataKey], _a.hover = null, _a)));
+    };
     var bottomAxisDataKey = bottomAxis.mapsTo || 'date';
     var leftAxisDataKey = leftAxis.mapsTo || 'value';
     var entries = {};
@@ -42,35 +76,26 @@ export function BarChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    var formatBottomTick = function (value) {
-        if (bottomAxis.scaleType === 'date') {
-            return format(new Date(value), 'LLL d');
-        }
-        if (bottomAxis.scaleType === 'datetime') {
-            return format(new Date(value), 'LLL d p');
-        }
-        return value;
-    };
     return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
         React.createElement(ResponsiveContainer, { width: "100%", height: height }, data.length ? (React.createElement(RechartsBarChart, { width: 500, layout: layout === 'horizontal' ? 'vertical' : 'horizontal', height: height, data: Object.values(entries), margin: {
                 top: 24,
                 right: 10,
-                left: layout === 'vertical' ? -24 : -6,
+                left: layout === 'vertical' ? -24 : 16,
                 bottom: 0,
             } },
             React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
-            React.createElement(XAxis, __assign({}, (layout === 'horizontal'
-                ? { type: 'number' }
-                : { tickFormatter: formatBottomTick, dataKey: bottomAxisDataKey }), { height: 30 })),
+            React.createElement(XAxis, __assign({}, (layout === 'horizontal' ? { type: 'number' } : { dataKey: bottomAxisDataKey }), { height: 30, tickFormatter: function (value) { return tickFormatter(value, bottomAxis.scaleType); }, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
             React.createElement(YAxis, __assign({}, (layout === 'horizontal' && {
                 type: 'category',
-                tickFormatter: formatBottomTick,
+                tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); },
                 dataKey: bottomAxisDataKey,
-            }), { domain: ['auto', 'auto'] })),
-            React.createElement(Tooltip, { content: React.createElement(CustomTooltip, { active: undefined, payload: undefined }) }),
-            React.createElement(Legend, { align: "center", iconType: "square", iconSize: 14, wrapperStyle: { paddingTop: 16 } }),
+            }), { domain: ['auto', 'auto'], axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } })),
+            React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
+            React.createElement(Legend, { align: "center", iconType: "square", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
             groups.map(function (group, index) {
-                return (React.createElement(Bar, __assign({ key: group, dataKey: group }, (isStacked && { stackId: 'stack' }), { name: group, maxBarSize: 70, fill: getBaseColorScale(theme)[index], radius: !isStacked || index == groups.length - 1
+                return (React.createElement(Bar, __assign({ key: group, dataKey: group }, (isStacked && { stackId: 'stack' }), { name: group, maxBarSize: 70, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
+                        ? getColorScale(theme)[color]['base'][index]
+                        : getColorScale(theme)[color]['muted'][index], radius: !isStacked || index == groups.length - 1
                         ? layout === 'vertical'
                             ? [4, 4, 0, 0]
                             : [0, 4, 4, 0]