@auth0/quantum-charts 0.1.0 → 0.1.2

package/bar-chart/index.js

@@ -109,7 +109,7 @@ function BarChart(props) {
         React.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: height }, data.length ? (React.createElement(recharts_1.BarChart, { width: 500, layout: layout === 'horizontal' ? 'vertical' : 'horizontal', height: height, data: Object.values(entries), margin: {
                 top: 24,
                 right: 10,
-                left: layout === 'vertical' ? -24 : 16,
+                left: layout === 'vertical' ? -24 : 36,
                 bottom: 0,
             } },
             React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
@@ -120,15 +120,11 @@ 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]
-                        : (0, theme_1.getColorScale)(theme)[color]['muted'][index], radius: !isStacked || index == groups.length - 1
-                        ? layout === 'vertical'
-                            ? [4, 4, 0, 0]
-                            : [0, 4, 4, 0]
-                        : [0, 0, 0, 0] })));
+                        : (0, theme_1.getColorScale)(theme)[color]['muted'][index] })));
             }))) : (React.createElement("div", { style: {
                 display: 'grid',
                 placeItems: 'center',

package/chart-card/index.d.ts

@@ -2,5 +2,6 @@ import * as React from 'react';
 import { IChartSummaryProps } from '../chart-summary';
 export interface IChartCardProps extends IChartSummaryProps {
     children?: React.ReactChild;
+    height?: number | string;
 }
 export declare function ChartCard(props: IChartCardProps): JSX.Element;

package/chart-card/index.js

@@ -28,8 +28,8 @@ var quantum_product_1 = require("@auth0/quantum-product");
 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;
-    return (React.createElement(quantum_product_1.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(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.js

@@ -26,13 +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')({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '8px',
-    height: '150px',
-    flexWrap: 'wrap',
-});
 var LegendDot = (0, quantum_product_1.styled)('div')({
     height: '14px',
     width: '14px',
@@ -49,7 +42,7 @@ function DecoupledLegend(props) {
     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, null, 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

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

package/donut-chart/index.js

@@ -66,23 +66,23 @@ 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.marginTop = theme.spacing(3), _b), (ownerState.layout === 'vertical' && {
+    }, _b.flexWrap = 'nowrap', _b.justifyContent = 'space-around', _b.height = 'calc(100% - 40px)', _b), (ownerState.layout === 'vertical' && {
         flexDirection: 'column',
     })));
 });
 function DonutChart(props) {
-    var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _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 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 = (0, quantum_product_1.useTheme)();
     var BASE_COLORS = (0, theme_1.getColorScale)(theme)[color]['base'];
-    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
+    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, height: height },
         React.createElement(ResponsiveChartCard, { ownerState: { layout: layout } },
             React.createElement(quantum_product_1.StackLayoutItem, { sx: {
                     height: '150px',
                     width: '150px',
                 } },
                 React.createElement(recharts_1.ResponsiveContainer, { width: '100%', height: 150 },
-                    React.createElement(recharts_1.PieChart, { height: 150, width: 150 },
+                    React.createElement(recharts_1.PieChart, { style: { minWidth: '150px', minHeight: '150px' } },
                         React.createElement("foreignObject", { x: 0, y: 0, width: '100%', height: '100%' },
                             React.createElement(center_1.default, { activeIndex: activeIndex, data: data, displayType: displayType })),
                         React.createElement(recharts_1.Pie, { dataKey: 'value', data: data, innerRadius: 55, outerRadius: 75, paddingAngle: 2, animationDuration: 750, animationBegin: 0, activeIndex: activeIndex, onMouseEnter: function (_, index) {

package/esm/bar-chart/index.js

@@ -80,7 +80,7 @@ export function BarChart(props) {
         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 : 16,
+                left: layout === 'vertical' ? -24 : 36,
                 bottom: 0,
             } },
             React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
@@ -91,15 +91,11 @@ 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]
-                        : getColorScale(theme)[color]['muted'][index], radius: !isStacked || index == groups.length - 1
-                        ? layout === 'vertical'
-                            ? [4, 4, 0, 0]
-                            : [0, 4, 4, 0]
-                        : [0, 0, 0, 0] })));
+                        : 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, 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,13 +1,6 @@
 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')({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '8px',
-    height: '150px',
-    flexWrap: 'wrap',
-});
 var LegendDot = styled('div')({
     height: '14px',
     width: '14px',
@@ -24,7 +17,7 @@ function DecoupledLegend(props) {
     var theme = useTheme();
     var BASE_COLORS = getColorScale(theme)[color]['base'];
     var MUTED_COLORS = getColorScale(theme)[color]['muted'];
-    return (React.createElement(Root, null, 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,23 +37,23 @@ 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.marginTop = theme.spacing(3), _b), (ownerState.layout === 'vertical' && {
+    }, _b.flexWrap = 'nowrap', _b.justifyContent = 'space-around', _b.height = 'calc(100% - 40px)', _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, _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 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 = getColorScale(theme)[color]['base'];
-    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
+    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) {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-charts",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "sideEffects": false,
   "main": "./index.js",
   "types": "./index.d.ts",

package/scorecard/index.js

@@ -31,8 +31,14 @@ var quantum_product_1 = require("@auth0/quantum-product");
 function ScoreCard(props) {
     var data = props.data;
     return (React.createElement(chart_card_1.ChartCard, null,
-        React.createElement(quantum_product_1.GalleryLayout, null, data.map(function (summary, index) {
-            return (React.createElement(quantum_product_1.GalleryLayoutItem, { key: index },
+        React.createElement(quantum_product_1.StackLayout, { sx: {
+                justifyContent: 'space-between',
+                alignContent: ['initial', 'center'],
+                alignItems: ['initial', 'center'],
+                flexWrap: 'wrap',
+                flexDirection: ['column', 'row'],
+            } }, data.map(function (summary, index) {
+            return (React.createElement(quantum_product_1.StackLayoutItem, { key: index, sx: { flex: 1, mr: 2 } },
                 React.createElement(chart_summary_1.ChartSummary, { title: summary.title, value: summary.value, helperText: summary.helperText, label: summary.label })));
         }))));
 }