@auth0/quantum-charts 0.1.1 → 0.2.1

package/bar-chart/index.js

@@ -120,7 +120,7 @@ function BarChart(props) {
                 dataKey: bottomAxisDataKey,
             }), { 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 }) }),
+            React.createElement(recharts_1.Legend, { align: "center", content: React.createElement(custom_legend_1.CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
             groups.map(function (group, index) {
                 return (React.createElement(recharts_1.Bar, __assign({ key: group, dataKey: group }, (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]

package/chart-card/index.js

@@ -29,7 +29,7 @@ var React = __importStar(require("react"));
 var chart_summary_1 = require("../chart-summary");
 function ChartCard(props) {
     var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height;
-    return (React.createElement(quantum_product_1.Card, { sx: { height: height } },
+    return (React.createElement(quantum_product_1.Card, { sx: { height: height, padding: 3 } },
         React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label }),
         children));
 }

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

@@ -93,13 +93,13 @@ function DataTableChart(props) {
     };
     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", 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.Box, null,
             React.createElement(quantum_product_1.Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
-                React.createElement(quantum_product_1.TabList, { classes: { indicator: 'chromatic-ignore' } }, !isDonut &&
+                React.createElement(quantum_product_1.TabList, { classes: { indicator: 'chromatic-ignore' }, style: isDonut ? { display: 'none' } : { display: 'block' } }, !isDonut &&
                     Object.keys(groups).map(function (group, index) {
                         return React.createElement(quantum_product_1.Tab, { key: index, label: group, value: group });
                     })),
-                React.createElement(quantum_product_1.Box, { paddingY: 2 }, isDonut ? (React.createElement(quantum_product_1.DataTable, { items: data, columns: [
+                React.createElement(quantum_product_1.Box, null, isDonut ? (React.createElement(quantum_product_1.DataTable, { items: data, columns: [
                         { field: 'name', title: 'Group' },
                         { title: 'value', render: function (_a) {
                                 var item = _a.item;

package/chart-summary/index.js

@@ -73,7 +73,7 @@ function ChartSummary(props) {
                                     color: 'textSecondary',
                                 } },
                                 React.createElement(quantum_product_1.HelpCircleIcon, { size: "16" })))))),
-                dataTable && dataTable[0] && (React.createElement(quantum_product_1.IconButton, { onClick: function () { return setIsOpen(true); } },
+                dataTable && dataTable[0] && (React.createElement(quantum_product_1.IconButton, { label: "List button", onClick: function () { return setIsOpen(true); } },
                     React.createElement(quantum_product_1.ListIcon, null)))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
                 React.createElement(Aggregate, null, value),
                 label) }),

package/common/chart.d.ts

@@ -27,4 +27,8 @@ export interface IBaseChartProps<DataType = unknown> extends IChartCardProps {
     legend?: ILegendOptions;
     color?: 'categorical' | 'sequential';
 }
+export declare type IDonutChartDataPoint<DataType = unknown> = {
+    name: string;
+    value?: number;
+} & DataType;
 export declare const tickFormatter: (value: any, scaleType: any) => any;

package/common/custom-color-status-dot.d.ts

@@ -1,12 +1,6 @@
 import * as React from 'react';
-declare const CustomColorStatusDot: React.FC<{
-    label: React.ReactNode;
-    color?: "default" | "warning" | "danger" | "success" | "info" | undefined;
-    details?: React.ReactNode;
-    textVariant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | "code1" | "code2" | undefined;
-    textColor?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<import("csstype").Property.Color | import("csstype").Property.Color[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<import("csstype").Property.Color | import("csstype").Property.Color[] | undefined>);
-    classes?: Partial<Record<"dot" | "root", string>> | undefined;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "details" | "label" | "ref" | "color" | "classes" | "textColor" | "textVariant"> & import("@auth0/quantum-product").IStyledCommonProps & {
+import { IStatusDotProps } from '@auth0/quantum-product';
+declare const CustomColorStatusDot: React.FC<IStatusDotProps & {
     dotColor: string;
 }>;
 export default CustomColorStatusDot;

package/common/custom-legend.js

@@ -37,12 +37,8 @@ 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 Root = (0, quantum_product_1.styled)(quantum_product_1.StackLayout)({
+    justifyContent: 'center',
 });
 var LegendIcon = (0, quantum_product_1.styled)('div')(function (_a) {
     var theme = _a.theme, ownerState = _a.ownerState;

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

@@ -1,11 +1,10 @@
 /// <reference types="react" />
-import { IDonutChartDataPoint } from './';
+import { IDonutChartDataPoint } from '../common/chart';
 export declare type IDecoupledLegendProps<DataType = unknown> = {
     data: IDonutChartDataPoint<DataType>[];
     activeIndex?: number;
     setActiveIndex: (index: number | undefined) => void;
     color?: 'categorical' | 'sequential';
-    layout?: 'horizontal' | 'vertical';
 };
 declare function DecoupledLegend<DataType = unknown>(props: IDecoupledLegendProps<DataType>): JSX.Element;
 export default DecoupledLegend;

package/donut-chart/decoupled-legend.js

@@ -1,15 +1,4 @@
 "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);
@@ -37,23 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var quantum_product_1 = require("@auth0/quantum-product");
 var theme_1 = require("../theme");
-var Root = (0, quantum_product_1.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 = (0, quantum_product_1.styled)('div')({
     height: '14px',
     width: '14px',
@@ -66,11 +38,11 @@ var LegendText = (0, quantum_product_1.styled)('span')({
     cursor: 'default',
 });
 function DecoupledLegend(props) {
-    var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a, _b = props.layout, layout = _b === void 0 ? 'horizontal' : _b;
+    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.getColorScale)(theme)[color]['base'];
     var MUTED_COLORS = (0, theme_1.getColorScale)(theme)[color]['muted'];
-    return (React.createElement(Root, { ownerState: { layout: layout } }, data.map(function (datum, index) {
+    return (React.createElement(quantum_product_1.RowLayout, { gutter: 1 }, 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];

package/donut-chart/index.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 import { IChartCardProps } from '../chart-card';
-export declare type IDonutChartDataPoint<DataType = unknown> = {
-    name: string;
-    value?: number;
-} & DataType;
+import { IDonutChartDataPoint } from '../common/chart';
 interface IDonutChartProps<DataType = unknown> extends IChartCardProps {
     data: IDonutChartDataPoint<DataType>[];
     displayType: 'absolute' | 'percent';

package/donut-chart/index.js

@@ -66,7 +66,7 @@ var ResponsiveChartCard = (0, quantum_product_1.styled)(quantum_product_1.StackL
     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' && {
+    }, _b.flexWrap = 'nowrap', _b.justifyContent = 'space-around', _b.height = 'calc(100% - 40px)', _b), (ownerState.layout === 'vertical' && {
         flexDirection: 'column',
     })));
 });
@@ -93,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, color: color, layout: layout })))));
+                React.createElement(decoupled_legend_1.default, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color })))));
 }
 exports.DonutChart = DonutChart;

package/esm/bar-chart/index.js

@@ -91,7 +91,7 @@ export function BarChart(props) {
                 dataKey: bottomAxisDataKey,
             }), { 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 }) }),
+            React.createElement(Legend, { align: "center", content: React.createElement(CustomLegend, { selectData: selectBar, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: barVisibility }) }),
             groups.map(function (group, index) {
                 return (React.createElement(Bar, __assign({ key: group, dataKey: group }, (isStacked && { stackId: 'stack' }), { name: group, maxBarSize: 70, hide: barVisibility[group] === true, fill: barVisibility.hover === group || !barVisibility.hover
                         ? getColorScale(theme)[color]['base'][index]

package/esm/chart-card/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ChartSummary } from '../chart-summary';
 export function ChartCard(props) {
     var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height;
-    return (React.createElement(Card, { sx: { height: height } },
+    return (React.createElement(Card, { sx: { height: height, padding: 3 } },
         React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label }),
         children));
 }

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

@@ -64,13 +64,13 @@ export function DataTableChart(props) {
     };
     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", startIcon: React.createElement(DownloadIcon, null), onClick: function () { return downloadCSV(title); } }, "Download")) },
-        React.createElement(Box, { p: 2 },
+        React.createElement(Box, null,
             React.createElement(Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
-                React.createElement(TabList, { classes: { indicator: 'chromatic-ignore' } }, !isDonut &&
+                React.createElement(TabList, { classes: { indicator: 'chromatic-ignore' }, style: isDonut ? { display: 'none' } : { display: 'block' } }, !isDonut &&
                     Object.keys(groups).map(function (group, index) {
                         return React.createElement(Tab, { key: index, label: group, value: group });
                     })),
-                React.createElement(Box, { paddingY: 2 }, isDonut ? (React.createElement(DataTable, { items: data, columns: [
+                React.createElement(Box, null, isDonut ? (React.createElement(DataTable, { items: data, columns: [
                         { field: 'name', title: 'Group' },
                         { title: 'value', render: function (_a) {
                                 var item = _a.item;

package/esm/chart-summary/index.js

@@ -47,7 +47,7 @@ export function ChartSummary(props) {
                                     color: 'textSecondary',
                                 } },
                                 React.createElement(HelpCircleIcon, { size: "16" })))))),
-                dataTable && dataTable[0] && (React.createElement(IconButton, { onClick: function () { return setIsOpen(true); } },
+                dataTable && dataTable[0] && (React.createElement(IconButton, { label: "List button", onClick: function () { return setIsOpen(true); } },
                     React.createElement(ListIcon, null)))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(StackLayout, { gutter: 1 },
                 React.createElement(Aggregate, null, value),
                 label) }),

package/esm/common/custom-legend.js

@@ -11,12 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 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 Root = styled(StackLayout)({
+    justifyContent: 'center',
 });
 var LegendIcon = styled('div')(function (_a) {
     var theme = _a.theme, ownerState = _a.ownerState;

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

@@ -1,34 +1,6 @@
-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 { StackLayout, StackLayoutItem, styled, useTheme } from '@auth0/quantum-product';
+import { StackLayout, StackLayoutItem, RowLayout, 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',
@@ -41,11 +13,11 @@ var LegendText = styled('span')({
     cursor: 'default',
 });
 function DecoupledLegend(props) {
-    var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a, _b = props.layout, layout = _b === void 0 ? 'horizontal' : _b;
+    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 = getColorScale(theme)[color]['base'];
     var MUTED_COLORS = getColorScale(theme)[color]['muted'];
-    return (React.createElement(Root, { ownerState: { layout: layout } }, data.map(function (datum, index) {
+    return (React.createElement(RowLayout, { gutter: 1 }, 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];

package/esm/donut-chart/index.js

@@ -37,7 +37,7 @@ var ResponsiveChartCard = styled(StackLayout)(function (_a) {
     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' && {
+    }, _b.flexWrap = 'nowrap', _b.justifyContent = 'space-around', _b.height = 'calc(100% - 40px)', _b), (ownerState.layout === 'vertical' && {
         flexDirection: 'column',
     })));
 });
@@ -64,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, color: color, layout: layout })))));
+                React.createElement(DecoupledLegend, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color })))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-charts",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "sideEffects": false,
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -16,7 +16,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@auth0/quantum-product": "^1.5.3",
+    "@auth0/quantum-product": "^1.10.1",
     "@formatjs/intl": "^2.5.1",
     "date-fns": "^2.29.3",
     "recharts": "^2.0.7"
@@ -37,16 +37,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.10",
-    "@storybook/addon-actions": "^7.3.2",
-    "@storybook/addon-essentials": "^7.3.2",
-    "@storybook/addon-links": "^7.3.2",
-    "@storybook/react": "^7.3.2",
-    "@storybook/react-webpack5": "7.3.2",
-    "@storybook/theming": "^7.3.2",
+    "@storybook/addon-actions": "^7.6.1",
+    "@storybook/addon-essentials": "^7.6.1",
+    "@storybook/addon-links": "^7.6.1",
+    "@storybook/react": "^7.6.1",
+    "@storybook/react-webpack5": "7.6.1",
+    "@storybook/theming": "^7.6.1",
     "@types/md5": "^2.3.2",
     "@types/node": "^18.16.19",
     "babel-loader": "^9.1.3",
-    "storybook": "7.3.2"
+    "storybook": "7.6.1"
   },
   "module": "./esm/index.js"
 }

package/styles.d.ts

@@ -4,4 +4,4 @@ export declare type IChartContainerProps = {
 };
 export declare const ChartContainer: import("styled-components").StyledComponent<"div", import("@auth0/quantum-product").ITheme, import("@mui/system").MUIStyledCommonProps<import("@auth0/quantum-product").ITheme> & IChartContainerProps, never>;
 export declare const CustomTooltip: import("styled-components").StyledComponent<"div", import("@auth0/quantum-product").ITheme, import("@mui/system").MUIStyledCommonProps<import("@auth0/quantum-product").ITheme>, never>;
-export declare const DefaultCursorBox: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").BoxTypeMap<{}, "div">>, import("@auth0/quantum-product").ITheme, import("@mui/system").MUIStyledCommonProps<import("@auth0/quantum-product").ITheme>, never>;
+export declare const DefaultCursorBox: import("styled-components").StyledComponent<import("@mui/types").OverridableComponent<import("@mui/system").BoxTypeMap<{}, "div", import("@mui/material").Theme>>, import("@auth0/quantum-product").ITheme, import("@mui/system").MUIStyledCommonProps<import("@auth0/quantum-product").ITheme>, never>;