@auth0/quantum-charts 0.1.1 → 0.1.2

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

@@ -5,7 +5,6 @@ export declare type IDecoupledLegendProps<DataType = unknown> = {
     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.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/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.1.2",
   "sideEffects": false,
   "main": "./index.js",
   "types": "./index.d.ts",