@auth0/quantum-charts 0.0.3 → 0.1.0

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,33 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 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')({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    height: '150px',
+    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;
     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, 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(StackLayout, { gutter: 1, onMouseEnter: function () {
                     setActiveIndex(index);
@@ -24,21 +39,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,22 +27,27 @@ 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.marginTop = theme.spacing(3), _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;
+    var _c = __read(React.useState(undefined), 2), activeIndex = _c[0], setActiveIndex = _c[1];
     var theme = useTheme();
-    var BASE_COLORS = getBaseColorScale(theme);
+    var BASE_COLORS = getColorScale(theme)[color]['base'];
     return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
-        React.createElement(StackLayout, { sx: {
-                height: '150px',
-                flexWrap: 'nowrap',
-                mt: '24px',
-            } },
+        React.createElement(ResponsiveChartCard, { ownerState: { layout: layout } },
             React.createElement(StackLayoutItem, { sx: {
                     height: '150px',
                     width: '150px',
@@ -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 })))));
 }

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/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;

package/esm/theme.js

@@ -1,22 +1,38 @@
-export var getBaseColorScale = function (_a) {
-    var palette = _a.palette;
-    return [
-        palette.purple[500],
-        palette.magenta[500],
-        palette.green[500],
-        palette.yellow[500],
-        palette.red[500],
-        palette.neutral[500],
-    ];
-};
-export var getBaseColorScaleMuted = function (_a) {
-    var palette = _a.palette;
-    return [
-        palette.purple[300],
-        palette.yellow[300],
-        palette.green[300],
-        palette.red[300],
-        palette.neutral[300],
-        palette.magenta[300],
-    ];
+import { alpha } from '@auth0/quantum-product';
+export var getColorScale = function (_a) {
+    var tokens = _a.tokens;
+    return {
+        categorical: {
+            base: [
+                tokens.color_chart_categorical_1,
+                tokens.color_chart_categorical_2,
+                tokens.color_chart_categorical_3,
+                tokens.color_chart_categorical_4,
+                tokens.color_chart_categorical_5,
+                tokens.color_chart_categorical_6,
+            ],
+            muted: [
+                alpha(tokens.color_chart_categorical_1, 0.35),
+                alpha(tokens.color_chart_categorical_2, 0.35),
+                alpha(tokens.color_chart_categorical_3, 0.35),
+                alpha(tokens.color_chart_categorical_4, 0.35),
+                alpha(tokens.color_chart_categorical_5, 0.35),
+                alpha(tokens.color_chart_categorical_6, 0.35),
+            ],
+        },
+        sequential: {
+            base: [
+                tokens.color_chart_sequential_1,
+                tokens.color_chart_sequential_2,
+                tokens.color_chart_sequential_3,
+                tokens.color_chart_sequential_4,
+            ],
+            muted: [
+                alpha(tokens.color_chart_sequential_1, 0.35),
+                alpha(tokens.color_chart_sequential_2, 0.35),
+                alpha(tokens.color_chart_sequential_3, 0.35),
+                alpha(tokens.color_chart_sequential_4, 0.35),
+            ],
+        },
+    };
 };

package/line-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);
@@ -22,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 };
 };
@@ -30,17 +57,35 @@ exports.LineChart = void 0;
 var lodash_1 = __importDefault(require("lodash"));
 var React = __importStar(require("react"));
 var recharts_1 = require("recharts");
-var date_fns_1 = require("date-fns");
 var quantum_product_1 = require("@auth0/quantum-product");
 var theme_1 = require("../theme");
 var custom_active_dot_1 = __importDefault(require("./custom-active-dot"));
-var custom_tooltip_1 = __importDefault(require("./custom-tooltip"));
+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 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 = (0, quantum_product_1.useTheme)();
     // Function to know how many lines we need based of how much different group values are.
     var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
+    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 = {};
@@ -61,15 +106,6 @@ function LineChart(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.LineChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
                 top: 24,
@@ -77,13 +113,15 @@ function LineChart(props) {
                 left: -24,
                 bottom: 0,
             } },
-            React.createElement(recharts_1.XAxis, { tickFormatter: formatBottomTick, dataKey: bottomAxisDataKey, height: 30, interval: "preserveStartEnd" }),
             React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
-            React.createElement(recharts_1.YAxis, { domain: ['auto', 'auto'] }),
-            React.createElement(recharts_1.Tooltip, { content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined }) }),
-            legend && React.createElement(recharts_1.Legend, { align: "center", iconType: "square", iconSize: 14, wrapperStyle: { paddingTop: 16 } }),
+            React.createElement(recharts_1.XAxis, { tickFormatter: function (value) { return (0, chart_1.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(recharts_1.YAxis, { tickFormatter: function (value) { return (0, chart_1.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(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
+            legend && (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 }) })),
             groups.map(function (group, index) {
-                return (React.createElement(recharts_1.Line, { key: group, dataKey: group, name: group, strokeWidth: 3, stroke: (0, theme_1.getBaseColorScale)(theme)[index], dot: false, activeDot: (0, custom_active_dot_1.default)() }));
+                return (React.createElement(recharts_1.Line, { key: group, dataKey: group, name: group, strokeWidth: 3, hide: lineVisibility[group] === true, stroke: lineVisibility.hover === group || !lineVisibility.hover
+                        ? (0, theme_1.getColorScale)(theme)[color]['base'][index]
+                        : (0, theme_1.getColorScale)(theme)[color]['muted'][index], dot: false, activeDot: (0, custom_active_dot_1.default)() }));
             }))) : (React.createElement("div", { style: {
                 display: 'grid',
                 placeItems: 'center',