@auth0/quantum-charts 0.1.0 → 0.1.1

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 }),
@@ -124,11 +124,7 @@ function BarChart(props) {
             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 } },
         React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label }),
         children));
 }

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

@@ -5,6 +5,7 @@ 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,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);
@@ -26,12 +37,22 @@ 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 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',
@@ -45,11 +66,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;
+    var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a, _b = props.layout, layout = _b === void 0 ? 'horizontal' : _b;
     var theme = (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(Root, { ownerState: { layout: layout } }, data.map(function (datum, index) {
         var isActive = activeIndex !== undefined && activeIndex === index;
         var color = BASE_COLORS[index % BASE_COLORS.length];
         var mutedColor = MUTED_COLORS[index % MUTED_COLORS.length];

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.paddingTop = theme.spacing(3), _b.paddingBottom = theme.spacing(4), _b.height = 'calc(100% - 44px)', _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) {
@@ -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 })))));
+                React.createElement(decoupled_legend_1.default, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color, layout: layout })))));
 }
 exports.DonutChart = DonutChart;

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 }),
@@ -95,11 +95,7 @@ export function BarChart(props) {
             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 } },
         React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label }),
         children));
 }

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

@@ -1,12 +1,33 @@
+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 { getColorScale } from '../theme';
-var Root = styled('div')({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '8px',
-    height: '150px',
-    flexWrap: 'wrap',
+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',
@@ -20,11 +41,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;
+    var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex, _a = props.color, color = _a === void 0 ? 'categorical' : _a, _b = props.layout, layout = _b === void 0 ? 'horizontal' : _b;
     var theme = useTheme();
     var BASE_COLORS = getColorScale(theme)[color]['base'];
     var MUTED_COLORS = getColorScale(theme)[color]['muted'];
-    return (React.createElement(Root, null, data.map(function (datum, index) {
+    return (React.createElement(Root, { ownerState: { layout: layout } }, data.map(function (datum, index) {
         var isActive = activeIndex !== undefined && activeIndex === index;
         var color = BASE_COLORS[index % BASE_COLORS.length];
         var mutedColor = MUTED_COLORS[index % MUTED_COLORS.length];

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.paddingTop = theme.spacing(3), _b.paddingBottom = theme.spacing(4), _b.height = 'calc(100% - 44px)', _b), (ownerState.layout === 'vertical' && {
         flexDirection: 'column',
     })));
 });
 export function DonutChart(props) {
-    var data = props.data, displayType = props.displayType, title = props.title, value = props.value, label = props.label, helperText = props.helperText, _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) {
@@ -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 })))));
+                React.createElement(DecoupledLegend, { activeIndex: activeIndex, setActiveIndex: setActiveIndex, data: data, color: color, layout: layout })))));
 }

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.1",
   "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 })));
         }))));
 }