@auth0/quantum-charts 0.0.4 → 0.1.1

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,39 +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 : 36,
                 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
-                        ? layout === 'vertical'
-                            ? [4, 4, 0, 0]
-                            : [0, 4, 4, 0]
-                        : [0, 0, 0, 0] })));
+                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] })));
             }))) : (React.createElement("div", { style: {
                 display: 'grid',
                 placeItems: 'center',

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;
-    return (React.createElement(Card, null,
+    var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height;
+    return (React.createElement(Card, { sx: { height: height } },
         React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label }),
         children));
 }

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

@@ -17,14 +17,53 @@ var __read = (this && this.__read) || function (o, n) {
 import _ from 'lodash';
 import * as React from 'react';
 import { format } from 'date-fns';
-import { Box, Button, DataTable, Dialog, Tab, TabList, TabPanel, Tabs } from '@auth0/quantum-product';
+import { Box, Button, DataTable, Dialog, DownloadIcon, Tab, TabList, TabPanel, Tabs } from '@auth0/quantum-product';
 export function DataTableChart(props) {
     var isOpen = props.isOpen, title = props.title, toggleIsOpen = props.toggleIsOpen, data = props.data;
     var isDonut = data[0] && data[0].name !== undefined;
     var groups = _.groupBy(data, 'group');
     var _a = __read(React.useState(Object.keys(groups)[0]), 2), selectedTab = _a[0], setSelectedTab = _a[1];
+    var hasKey = data[0] && data[0].key !== undefined;
+    var downloadCSV = function (filename) {
+        if (filename === void 0) { filename = 'chart data'; }
+        var mappedData = data.map(function (row) {
+            if (row.date) {
+                row.date = 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(Dialog, { open: isOpen, fullWidth: true, title: title, onClose: toggleIsOpen, actions: React.createElement(React.Fragment, null,
-            React.createElement(Button, { color: "primary", variant: "contained" }, "Download CSV")) },
+            React.createElement(Button, { color: "primary", variant: "contained", startIcon: React.createElement(DownloadIcon, null), onClick: function () { return downloadCSV(title); } }, "Download")) },
         React.createElement(Box, { p: 2 },
             React.createElement(Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
                 React.createElement(TabList, { classes: { indicator: 'chromatic-ignore' } }, !isDonut &&
@@ -45,10 +84,13 @@ export 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 format(new Date(item.date), 'LLL d p');
-                                    } },
+                                        return (hasKey ? item.key : format(new Date(item.date), 'LLL d p'));
+                                    },
+                                },
                             ] })));
                 })))))));
 }

package/esm/common/chart.js

@@ -1 +1,28 @@
-export {};
+import { format } from 'date-fns';
+export 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 format(new Date(value), 'LLL d');
+        case 'datetime':
+            return format(new Date(value), 'LLL d p');
+        default:
+            break;
+    }
+};

package/esm/common/custom-legend.js

@@ -0,0 +1,42 @@
+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);
+};
+import { StackLayout, Text, styled } from '@auth0/quantum-product';
+import * as React from 'react';
+var Root = styled(StackLayout)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        justifyContent: 'center',
+        marginTop: theme.spacing(3),
+    });
+});
+var LegendIcon = 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',
+        })));
+});
+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))); })));
+};

package/esm/common/custom-tooltip.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Box, RowLayout, StackLayout, Text } from '@auth0/quantum-product';
+import StatusDot from './custom-color-status-dot';
+import { format } from 'date-fns';
+import { CustomTooltip as CustomTooltipStyled } from '../styles';
+var CustomTooltip = function (props) {
+    var _a, _b, _c;
+    var 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(format(new Date((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date), 'LLL d HH:mm'))
+                : "".concat(format(new Date((_c = payload[0].payload) === null || _c === void 0 ? void 0 : _c.date), 'LLL d'))
+            : labelProp;
+        return (React.createElement(CustomTooltipStyled, null,
+            React.createElement(Text, { color: "text.secondary" }, label),
+            React.createElement(Box, null,
+                React.createElement(RowLayout, { gutter: 1 }, payload.map(function (x, index) {
+                    return (React.createElement(StackLayout, { key: index, gutter: 0.5 },
+                        React.createElement(StatusDot, { key: index, dotColor: x.color || 'grey', label: "".concat(x.name, ":") + '  ' }),
+                        React.createElement(Text, { color: "text.secondary" }, x.payload[x.name || ''])));
+                })))));
+    }
+    return null;
+};
+export default CustomTooltip;

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

@@ -1,18 +1,54 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    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);
 };
 import * as React from 'react';
-import styled from 'styled-components';
-import { StackLayout, StackLayoutItem, useTheme } from '@auth0/quantum-product';
-import { getBaseColorScale } from '../theme';
+import { StackLayout, StackLayoutItem, styled, useTheme } from '@auth0/quantum-product';
+import { getColorScale } from '../theme';
+var Root = styled('div')(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (__assign((_b = { display: 'flex', flexDirection: 'column' }, _b[theme.breakpoints.down('sm')] = {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: theme.spacing(2),
+        maxWidth: '300px',
+        flexWrap: 'wrap',
+    }, _b), (ownerState.layout === 'vertical' && {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: theme.spacing(2),
+        maxWidth: '300px',
+        flexWrap: 'wrap',
+    })));
+});
+var LegendDot = styled('div')({
+    height: '14px',
+    width: '14px',
+    borderRadius: '4px',
+});
+var LegendText = 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, _b = props.layout, layout = _b === void 0 ? 'horizontal' : _b;
     var theme = useTheme();
-    var BASE_COLORS = 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 = getColorScale(theme)[color]['base'];
+    var MUTED_COLORS = getColorScale(theme)[color]['muted'];
+    return (React.createElement(Root, { ownerState: { layout: layout } }, 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(StackLayout, { gutter: 1, onMouseEnter: function () {
                     setActiveIndex(index);
@@ -24,21 +60,11 @@ function DecoupledLegend(props) {
                 React.createElement(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(StackLayoutItem, { sx: {
                         alignSelf: 'center',
                     } },
                     React.createElement(LegendText, { color: isActive ? 'primary' : 'secondary' }, datum.name)))));
     })));
 }
-var LegendDot = styled.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.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 4px;\n"], ["\n  border-radius: 4px;\n"])));
-var LegendText = styled.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'];
-});
 export default DecoupledLegend;
-var templateObject_1, templateObject_2, templateObject_3;

package/esm/donut-chart/index.js

@@ -1,3 +1,14 @@
+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;
@@ -16,28 +27,33 @@ 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, useTheme } from '@auth0/quantum-product';
-import { getBaseColorScale } from '../theme';
+import { StackLayout, StackLayoutItem, styled, useTheme } from '@auth0/quantum-product';
+import { getColorScale } from '../theme';
 import Center from './center';
 import DecoupledLegend from './decoupled-legend';
 import { ChartCard } from '../chart-card';
+var ResponsiveChartCard = styled(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.justifyContent = 'space-around', _b.paddingTop = theme.spacing(3), _b.paddingBottom = theme.spacing(4), _b.height = 'calc(100% - 44px)', _b), (ownerState.layout === 'vertical' && {
+        flexDirection: 'column',
+    })));
+});
 export 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, _c = props.height, height = _c === void 0 ? '100%' : _c;
+    var _d = __read(React.useState(undefined), 2), activeIndex = _d[0], setActiveIndex = _d[1];
     var theme = useTheme();
-    var BASE_COLORS = getBaseColorScale(theme);
-    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
-        React.createElement(StackLayout, { sx: {
-                height: '150px',
-                flexWrap: 'nowrap',
-                mt: '24px',
-            } },
+    var BASE_COLORS = getColorScale(theme)[color]['base'];
+    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height },
+        React.createElement(ResponsiveChartCard, { ownerState: { layout: layout } },
             React.createElement(StackLayoutItem, { sx: {
                     height: '150px',
                     width: '150px',
                 } },
                 React.createElement(ResponsiveContainer, { width: '100%', height: 150 },
-                    React.createElement(RechartsPieChart, { height: 150, width: 150 },
+                    React.createElement(RechartsPieChart, { style: { minWidth: '150px', minHeight: '150px' } },
                         React.createElement("foreignObject", { x: 0, y: 0, width: '100%', height: '100%' },
                             React.createElement(Center, { activeIndex: activeIndex, data: data, displayType: displayType })),
                         React.createElement(Pie, { dataKey: 'value', data: data, innerRadius: 55, outerRadius: 75, paddingAngle: 2, animationDuration: 750, animationBegin: 0, activeIndex: activeIndex, onMouseEnter: function (_, index) {
@@ -48,5 +64,5 @@ export function DonutChart(props) {
                             return (React.createElement(Cell, { key: "cell-".concat(index), fill: BASE_COLORS[index % BASE_COLORS.length], opacity: activeIndex === undefined ? 1 : activeIndex === index ? 1 : 0.5 }));
                         }))))),
             React.createElement(StackLayoutItem, null,
-                React.createElement(DecoupledLegend, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data })))));
+                React.createElement(DecoupledLegend, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color, layout: layout })))));
 }

package/esm/line-chart/index.js

@@ -1,17 +1,62 @@
+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;
+    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 { CartesianGrid, Legend, Line, LineChart as RechartsLineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
-import { format } from 'date-fns';
 import { useTheme, Text } from '@auth0/quantum-product';
-import { getBaseColorScale } from '../theme';
+import { getColorScale } from '../theme';
 import CustomActiveDot from './custom-active-dot';
-import CustomTooltip from './custom-tooltip';
+import CustomTooltip from '../common/custom-tooltip';
 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;
+    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;
     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; });
+    var initialState = __assign({ hover: null }, groups.reduce(function (acc, group) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
+    }, {}));
+    var _e = __read(React.useState(initialState), 2), lineVisibility = _e[0], setLineVisibility = _e[1];
+    var handleLegendMouseEnter = function (e) {
+        if (!lineVisibility[e.dataKey]) {
+            setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
+        }
+    };
+    var handleLegendMouseLeave = function () {
+        setLineVisibility(__assign(__assign({}, lineVisibility), { hover: null }));
+    };
+    var selectLine = function (e) {
+        var _a;
+        setLineVisibility(__assign(__assign({}, lineVisibility), (_a = {}, _a[e.dataKey] = !lineVisibility[e.dataKey], _a.hover = null, _a)));
+    };
     var bottomAxisDataKey = bottomAxis.mapsTo || 'date';
     var leftAxisDataKey = leftAxis.mapsTo || 'value';
     var entries = {};
@@ -32,15 +77,6 @@ export function LineChart(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(RechartsLineChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
                 top: 24,
@@ -48,13 +84,15 @@ export function LineChart(props) {
                 left: -24,
                 bottom: 0,
             } },
-            React.createElement(XAxis, { tickFormatter: formatBottomTick, dataKey: bottomAxisDataKey, height: 30, interval: "preserveStartEnd" }),
             React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
-            React.createElement(YAxis, { domain: ['auto', 'auto'] }),
-            React.createElement(Tooltip, { content: React.createElement(CustomTooltip, { active: undefined, payload: undefined }) }),
-            legend && React.createElement(Legend, { align: "center", iconType: "square", iconSize: 14, wrapperStyle: { paddingTop: 16 } }),
+            React.createElement(XAxis, { tickFormatter: function (value) { return tickFormatter(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "preserveStartEnd", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(3), axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } }),
+            React.createElement(YAxis, { tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], width: 78, 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 }) }),
+            legend && (React.createElement(Legend, { align: "center", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(CustomLegend, { selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility }) })),
             groups.map(function (group, index) {
-                return (React.createElement(Line, { key: group, dataKey: group, name: group, strokeWidth: 3, stroke: getBaseColorScale(theme)[index], dot: false, activeDot: CustomActiveDot() }));
+                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: {
                 display: 'grid',
                 placeItems: 'center',

package/esm/scorecard/index.js

@@ -1,12 +1,18 @@
 import * as React from 'react';
 import { ChartSummary } from '../chart-summary';
 import { ChartCard } from '../chart-card';
-import { GalleryLayout, GalleryLayoutItem } from '@auth0/quantum-product';
+import { StackLayout, StackLayoutItem } from '@auth0/quantum-product';
 export function ScoreCard(props) {
     var data = props.data;
     return (React.createElement(ChartCard, null,
-        React.createElement(GalleryLayout, null, data.map(function (summary, index) {
-            return (React.createElement(GalleryLayoutItem, { key: index },
+        React.createElement(StackLayout, { sx: {
+                justifyContent: 'space-between',
+                alignContent: ['initial', 'center'],
+                alignItems: ['initial', 'center'],
+                flexWrap: 'wrap',
+                flexDirection: ['column', 'row'],
+            } }, data.map(function (summary, index) {
+            return (React.createElement(StackLayoutItem, { key: index, sx: { flex: 1, mr: 2 } },
                 React.createElement(ChartSummary, { title: summary.title, value: summary.value, helperText: summary.helperText, label: summary.label })));
         }))));
 }

package/esm/styles.js

@@ -2,9 +2,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from 'styled-components';
-import { Box } from '@auth0/quantum-product';
-export var ChartContainer = styled.div(function (_a) {
+import { Box, styled } from '@auth0/quantum-product';
+export var ChartContainer = styled('div')(function (_a) {
     var theme = _a.theme, height = _a.height, marginTop = _a.marginTop;
     var props = {
         marginTop: theme.spacing(3),
@@ -18,20 +17,21 @@ export var ChartContainer = styled.div(function (_a) {
     }
     return props;
 });
-export var CustomTooltip = styled.div(function (_a) {
+export var CustomTooltip = styled('div')(function (_a) {
     var theme = _a.theme;
     return ({
-        backgroundColor: theme.tokens.color_bg_layer_boldest,
+        display: 'grid',
+        gap: theme.spacing(1),
+        backgroundColor: theme.tokens.color_bg_layer_elevated,
+        border: "1px solid ".concat(theme.tokens.color_border_bold),
         borderRadius: theme.shape.borderRadius,
-        padding: theme.spacing(1, 3),
-        color: theme.tokens.color_fg_inverse,
+        padding: theme.spacing(1, 2),
+        color: theme.tokens.color_fg_bold,
         fontSize: theme.typography.caption.fontSize,
         fontWeight: theme.typography.caption.fontWeight,
         lineHeight: theme.typography.caption.lineHeight,
         letterSpacing: theme.typography.caption.letterSpacing,
     });
 });
-// `textSecondary` doesn't have enough contrast for the black background of the tooltip
-export var CustomTooltipLabel = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: lightgrey;\n"], ["\n  color: lightgrey;\n"])));
-export var DefaultCursorBox = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
-var templateObject_1, templateObject_2;
+export var DefaultCursorBox = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+var templateObject_1;