@auth0/quantum-charts 0.0.2

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

@@ -0,0 +1,12 @@
+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 & {
+    dotColor: string;
+}>;
+export default CustomColorStatusDot;

package/custom-color-status-dot.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var lodash_1 = require("lodash");
+var quantum_product_1 = require("@auth0/quantum-product");
+var CustomColorStatusDot = (0, quantum_product_1.styled)(quantum_product_1.StatusDot, {
+    shouldForwardProp: function (prop) { return (0, quantum_product_1.rootShouldForwardProp)(prop) && prop !== 'dotColor'; },
+})(function (_a) {
+    var _b;
+    var theme = _a.theme, dotColor = _a.dotColor;
+    var backgroundColor = (0, lodash_1.get)(theme.palette, dotColor, dotColor);
+    return _b = {},
+        _b["& .".concat(quantum_product_1.statusDotClasses.dot)] = {
+            backgroundColor: typeof backgroundColor === 'object' ? backgroundColor[500] : backgroundColor,
+        },
+        _b;
+});
+exports.default = CustomColorStatusDot;

package/delta/delta.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export declare type DeltaDirection = 'upIsGood' | 'upIsBad' | 'neutral';
+export declare type DeltaDisplayType = 'percent' | 'number';
+export declare type DeltaEmphasis = 'bad' | 'good' | 'neutral';
+export interface IDeltaProps {
+    value: number;
+    comparedValue: number;
+    direction: DeltaDirection;
+    displayType: DeltaDisplayType;
+    darkBackground?: boolean;
+    useAdaptivePercentage?: boolean;
+}
+export interface IComputeDeltaReturn {
+    emphasis: DeltaEmphasis;
+    delta: string;
+}
+export declare const computeDelta: (props: IDeltaProps) => IComputeDeltaReturn;
+export declare const Delta: React.FC<IDeltaProps>;

package/delta/delta.js

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Delta = exports.computeDelta = void 0;
+var React = __importStar(require("react"));
+var lodash_1 = require("lodash");
+var format_number_1 = require("../helpers/format-number");
+var quantum_product_1 = require("@auth0/quantum-product");
+var deltaFromAggregates = function (displayType, value, comparedValue) {
+    /*
+      - When absolute, (50 becoming 75) is 1.5 (meaning 150%, which is +50% when displayed)
+      - When percent, (0.50 becoming 0.75) is 0.25 (meaning +25%)
+      This function returns the 1.5 and 0.25 of those examples.
+      Note that when dealing with percentages we use `static percentage`,
+      but when dealing with absolutes we use `relative percentage`.
+    */
+    return displayType === 'percent' ? value - comparedValue : value / comparedValue;
+};
+var isDeltaUp = function (displayType, delta) {
+    return Number.isNaN(delta) || delta > (displayType === 'percent' ? 0 : 1);
+};
+var cleanUpDelta = function (displayType, deltaIsUp, delta) {
+    if (displayType === 'percent') {
+        return delta;
+    }
+    /*
+      Following up on our example in deltaFromAggregates:
+      - When absolute, (50 becoming 75) is 1.5 (meaning 150%, which is +50% when displayed)
+      - When percent, (0.50 becoming 0.75) is 0.25 (meaning +25%)
+      Since the logic for finding the delta of and absolute metric includes a division,
+      we need to be prepared for NaN and infinite values.
+      If it's NaN or infinite, we fallback to some reasonnable defaults:
+        - NaN is 0%
+        - Infinite -> -100% or +100% depending on whether deltaIsUp
+      For all other happy-path cases, we want to go from this 150% result to +50% displayed value,
+      so we add or remove 100% to adjust properly:
+        - 150% is up so we remove 100%, which gives us our 50%
+        - 75% is down so we remove it from 100%, which gives us our 25%.
+      The + or - symbol is handled later, we don't need to care about it here.
+    */
+    var adjustedDelta = deltaIsUp ? delta - 1 : 1 - delta;
+    if (Number.isNaN(adjustedDelta)) {
+        return 0;
+    }
+    if (Number.isFinite(adjustedDelta)) {
+        return adjustedDelta;
+    }
+    return deltaIsUp ? 1 : -1;
+};
+var hasNoSignificantChanges = function (aggregate, comparedAggregate) {
+    return (aggregate === comparedAggregate ||
+        (0, lodash_1.inRange)(aggregate, comparedAggregate - 0.001 * comparedAggregate, comparedAggregate + 0.001 * comparedAggregate));
+};
+var findEmphasis = function (direction, deltaIsUp, noSignificantChanges) {
+    if (direction === 'neutral' || noSignificantChanges) {
+        return 'neutral';
+    }
+    return (deltaIsUp && direction === 'upIsGood') || (!deltaIsUp && direction === 'upIsBad') ? 'good' : 'bad';
+};
+var computeDelta = function (props) {
+    var displayType = props.displayType, value = props.value, comparedValue = props.comparedValue;
+    var delta = deltaFromAggregates(displayType, value, comparedValue);
+    var deltaIsUp = isDeltaUp(displayType, delta);
+    var usableDelta = cleanUpDelta(displayType, deltaIsUp, delta);
+    var noSignificantChanges = hasNoSignificantChanges(value, comparedValue);
+    var emphasis = findEmphasis(props.direction, deltaIsUp, noSignificantChanges);
+    var symbol = noSignificantChanges ? '' : deltaIsUp ? '+' : '-';
+    var percentFormatter = props.useAdaptivePercentage ? format_number_1.toPercentageAdaptive : format_number_1.toPercentage;
+    var finalDelta = symbol + percentFormatter(Math.abs(usableDelta));
+    return { emphasis: emphasis, delta: finalDelta };
+};
+exports.computeDelta = computeDelta;
+var Delta = function (props) {
+    var delta = (0, exports.computeDelta)(props).delta;
+    return (React.createElement(quantum_product_1.Label, { color: props.direction === 'upIsGood' ? 'success' : props.direction === 'upIsBad' ? 'danger' : 'default' }, delta));
+};
+exports.Delta = Delta;

package/delta/index.d.ts

@@ -0,0 +1,2 @@
+export { Delta, computeDelta } from './delta';
+export type { IDeltaProps, IComputeDeltaReturn, DeltaDirection, DeltaDisplayType, DeltaEmphasis } from './delta';

package/delta/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeDelta = exports.Delta = void 0;
+var delta_1 = require("./delta");
+Object.defineProperty(exports, "Delta", { enumerable: true, get: function () { return delta_1.Delta; } });
+Object.defineProperty(exports, "computeDelta", { enumerable: true, get: function () { return delta_1.computeDelta; } });

package/donut-chart/center.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare type CenterProps = {
+    data: any;
+    activeIndex?: number;
+    displayType: 'absolute' | 'percent';
+};
+declare const Center: React.FC<CenterProps>;
+export default Center;

package/donut-chart/center.js

@@ -0,0 +1,61 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var quantum_product_1 = require("@auth0/quantum-product");
+var format_number_1 = require("../helpers/format-number");
+var sumValues = function (data) {
+    return data.reduce(function (accum, item) { return accum + item.value; }, 0);
+};
+var findAggregate = function (data, isTotal, activeIndex) { var _a; return (isTotal ? sumValues(data) : (_a = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _a === void 0 ? void 0 : _a.value); };
+var Aggregate = (0, quantum_product_1.styled)('h4')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.typography.fontWeightRegular;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.typography.h4.fontSize;
+});
+var CenterPositioning = (0, quantum_product_1.styled)(quantum_product_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  place-items: center;\n  height: 100%;\n  text-align: center;\n"], ["\n  display: grid;\n  place-items: center;\n  height: 100%;\n  text-align: center;\n"])));
+var Center = function (props) {
+    var activeIndex = props.activeIndex, data = props.data, displayType = props.displayType;
+    var hasNoData = data.length === 0;
+    var aggregate = findAggregate(data, activeIndex === undefined, activeIndex);
+    var percentage = function (partialValue, totalValue) {
+        return (100 * partialValue) / totalValue;
+    };
+    return (React.createElement(CenterPositioning, null,
+        React.createElement(quantum_product_1.Box, null,
+            React.createElement(Aggregate, null, hasNoData
+                ? 'No data'
+                : displayType === 'absolute'
+                    ? (0, format_number_1.toShortCompactNotation)(aggregate)
+                    : (0, format_number_1.toPercentageAdaptive)(percentage(aggregate, sumValues(data)) / 100)))));
+};
+exports.default = Center;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { IDonutChartDataPoint } from './';
+export declare type IDecoupledLegendProps<DataType = unknown> = {
+    data: IDonutChartDataPoint<DataType>[];
+    activeIndex?: number;
+    setActiveIndex: (index: number | undefined) => void;
+};
+declare function DecoupledLegend<DataType = unknown>(props: IDecoupledLegendProps<DataType>): JSX.Element;
+export default DecoupledLegend;

package/donut-chart/decoupled-legend.js

@@ -0,0 +1,72 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var quantum_product_1 = require("@auth0/quantum-product");
+var theme_1 = require("../theme");
+function DecoupledLegend(props) {
+    var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex;
+    var theme = (0, quantum_product_1.useTheme)();
+    var BASE_COLORS = (0, theme_1.getBaseColorScale)(theme);
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', height: '150px', flexWrap: 'wrap' } }, data.map(function (datum, index) {
+        var isActive = activeIndex !== undefined && activeIndex === index;
+        var color = BASE_COLORS[index % BASE_COLORS.length];
+        return (React.createElement(React.Fragment, { key: index },
+            React.createElement(quantum_product_1.StackLayout, { gutter: 1, onMouseEnter: function () {
+                    setActiveIndex(index);
+                }, onMouseLeave: function () {
+                    setActiveIndex(undefined);
+                }, sx: {
+                    flexWrap: 'nowrap',
+                } },
+                React.createElement(quantum_product_1.StackLayoutItem, { sx: {
+                        alignSelf: 'center',
+                    } },
+                    React.createElement(LegendDotWrapper, { style: {
+                            border: '2px solid ' + (isActive ? color : 'white'),
+                        } },
+                        React.createElement(LegendDot, { style: { backgroundColor: color } }))),
+                React.createElement(quantum_product_1.StackLayoutItem, { sx: {
+                        alignSelf: 'center',
+                    } },
+                    React.createElement(LegendText, { color: isActive ? 'primary' : 'secondary' }, datum.name)))));
+    })));
+}
+var LegendDot = styled_components_1.default.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_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 4px;\n"], ["\n  border-radius: 4px;\n"])));
+var LegendText = styled_components_1.default.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'];
+});
+exports.default = DecoupledLegend;
+var templateObject_1, templateObject_2, templateObject_3;

package/donut-chart/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IChartCardProps } from '../chart-card';
+export declare type IDonutChartDataPoint<DataType = unknown> = {
+    name: string;
+    value?: number;
+} & DataType;
+interface IDonutChartProps<DataType = unknown> extends IChartCardProps {
+    data: IDonutChartDataPoint<DataType>[];
+    displayType: 'absolute' | 'percent';
+}
+export declare function DonutChart(props: IDonutChartProps): JSX.Element;
+export {};

package/donut-chart/index.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DonutChart = void 0;
+var React = __importStar(require("react"));
+var recharts_1 = require("recharts");
+var quantum_product_1 = require("@auth0/quantum-product");
+var theme_1 = require("../theme");
+var center_1 = __importDefault(require("./center"));
+var decoupled_legend_1 = __importDefault(require("./decoupled-legend"));
+var chart_card_1 = require("../chart-card");
+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 theme = (0, quantum_product_1.useTheme)();
+    var BASE_COLORS = (0, theme_1.getBaseColorScale)(theme);
+    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
+        React.createElement(quantum_product_1.StackLayout, { sx: {
+                height: '150px',
+                flexWrap: 'nowrap',
+                mt: '24px',
+            } },
+            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("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) {
+                                setActiveIndex(index);
+                            }, onMouseLeave: function () {
+                                setActiveIndex(undefined);
+                            } }, data.map(function (_, index) {
+                            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 })))));
+}
+exports.DonutChart = DonutChart;

package/esm/bar-chart/index.js

@@ -0,0 +1,85 @@
+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 _ from 'lodash';
+import * as React from 'react';
+import { BarChart as RechartsBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts';
+import { useTheme, Text } from '@auth0/quantum-product';
+import { getBaseColorScale } from '../theme';
+import CustomTooltip from '../line-chart/custom-tooltip';
+import { format } from 'date-fns';
+import { ChartCard } from '../chart-card';
+export function BarChart(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.layout, layout = _c === void 0 ? 'vertical' : _c, _d = _a.isStacked, isStacked = _d === void 0 ? false : _d;
+    var theme = useTheme();
+    // Function to know how many bars we need based of how much different group values are.
+    var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
+    var bottomAxisDataKey = bottomAxis.mapsTo || 'date';
+    var leftAxisDataKey = leftAxis.mapsTo || 'value';
+    var entries = {};
+    data.forEach(function (entry) {
+        var _a, _b;
+        var entrytKey = entry[bottomAxisDataKey];
+        if (entries[entrytKey]) {
+            entries[entrytKey][entry.group] = entry[leftAxisDataKey];
+        }
+        else {
+            entries[entrytKey] = (_a = {},
+                _a[bottomAxisDataKey] = entry[bottomAxisDataKey],
+                _a[entry.group] = entry[leftAxisDataKey],
+                _a);
+        }
+        return _b = {},
+            _b[bottomAxisDataKey] = entry[bottomAxisDataKey],
+            _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(RechartsBarChart, { width: 500, layout: layout === 'horizontal' ? 'vertical' : 'horizontal', height: height, data: Object.values(entries), margin: {
+                top: 24,
+                right: 10,
+                left: layout === 'vertical' ? -24 : -6,
+                bottom: 0,
+            } },
+            React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
+            React.createElement(XAxis, __assign({}, (layout === 'horizontal'
+                ? { type: 'number' }
+                : { tickFormatter: formatBottomTick, dataKey: bottomAxisDataKey }), { height: 30 })),
+            React.createElement(YAxis, __assign({}, (layout === 'horizontal' && {
+                type: 'category',
+                tickFormatter: formatBottomTick,
+                dataKey: bottomAxisDataKey,
+            }), { domain: ['auto', 'auto'] })),
+            React.createElement(Tooltip, { content: React.createElement(CustomTooltip, { active: undefined, payload: undefined }) }),
+            React.createElement(Legend, { align: "center", iconType: "square", iconSize: 14, wrapperStyle: { paddingTop: 16 } }),
+            groups.map(function (group, index) {
+                return (React.createElement(Bar, __assign({ key: group, dataKey: group }, (isStacked && { stackId: 'stack' }), { name: group, maxBarSize: 70, fill: getBaseColorScale(theme)[index], radius: !isStacked || index == groups.length - 1
+                        ? layout === 'vertical'
+                            ? [4, 4, 0, 0]
+                            : [0, 4, 4, 0]
+                        : [0, 0, 0, 0] })));
+            }))) : (React.createElement("div", { style: {
+                display: 'grid',
+                placeItems: 'center',
+                height: '100%',
+                textAlign: 'center',
+            } },
+            React.createElement(Text, { variant: "subtitle1" }, "No data"))))));
+}

package/esm/chart-card/index.js

@@ -0,0 +1,9 @@
+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,
+        React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label }),
+        children));
+}

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

@@ -0,0 +1,54 @@
+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 { format } from 'date-fns';
+import { Box, Button, DataTable, Dialog, 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];
+    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(Box, { p: 2 },
+            React.createElement(Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
+                React.createElement(TabList, { classes: { indicator: 'chromatic-ignore' } }, !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: [
+                        { field: 'name', title: 'Group' },
+                        { title: 'value', render: function (_a) {
+                                var item = _a.item;
+                                return item.value || 'N/A';
+                            } },
+                    ] })) : (Object.values(groups).map(function (item, index) {
+                    return (React.createElement(TabPanel, { key: index, value: item[index].group },
+                        React.createElement(DataTable, { items: item, columns: [
+                                { field: 'group', title: 'Group' },
+                                { title: 'value', render: function (_a) {
+                                        var item = _a.item;
+                                        return item.value || 'N/A';
+                                    } },
+                                { title: 'date', render: function (_a) {
+                                        var item = _a.item;
+                                        return format(new Date(item.date), 'LLL d p');
+                                    } },
+                            ] })));
+                })))))));
+}

package/esm/chart-summary/index.js

@@ -0,0 +1,56 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 * as React from 'react';
+import { Box, DescriptionBlock, StackLayout, StackLayoutItem, Tooltip, HelpCircleIcon, styled, IconButton, ListIcon, Text, } from '@auth0/quantum-product';
+import { DataTableChart } from './data-table-chart';
+var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.typography.fontWeightRegular;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.typography.h4.fontSize;
+});
+export function ChartSummary(props) {
+    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable;
+    var _a = __read(React.useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
+    var toggleIsOpen = function () {
+        setIsOpen(function (prev) { return !prev; });
+    };
+    return (React.createElement("div", null,
+        React.createElement(DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
+                React.createElement(StackLayout, { gutter: 1 },
+                    React.createElement(StackLayoutItem, null,
+                        React.createElement(Text, { fontWeight: 500 }, title)),
+                    helperText && (React.createElement(StackLayoutItem, null,
+                        React.createElement(Tooltip, { placement: "top", title: helperText },
+                            React.createElement(Box, { sx: {
+                                    display: 'grid',
+                                    alignSelf: 'center',
+                                    color: 'textSecondary',
+                                } },
+                                React.createElement(HelpCircleIcon, { size: "16" })))))),
+                dataTable && dataTable[0] && (React.createElement(IconButton, { onClick: function () { return setIsOpen(true); } },
+                    React.createElement(ListIcon, null)))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(StackLayout, { gutter: 1 },
+                React.createElement(Aggregate, null, value),
+                label) }),
+        dataTable && dataTable[0] && (React.createElement(DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable }))));
+}
+var templateObject_1;

package/esm/common/chart.js

@@ -0,0 +1 @@
+export {};

package/esm/compare-aggregate/compare-aggregate.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { DefaultCursorBox } from '../styles';
+import { Delta } from '../delta';
+import { StackLayoutItem, Tooltip } from '@auth0/quantum-product';
+import { toLongFormRounded, toPercentageAdaptive } from '../helpers/format-number';
+export function CompareAggregate(props) {
+    var value = props.value, comparedValue = props.comparedValue, _a = props.displayType, displayType = _a === void 0 ? 'percent' : _a, _b = props.direction, direction = _b === void 0 ? 'upIsGood' : _b;
+    var aggregateFormatter = displayType === 'percent' ? toPercentageAdaptive : toLongFormRounded;
+    return (React.createElement(StackLayoutItem, null,
+        React.createElement(Tooltip, { placement: "top", title: "From ".concat(aggregateFormatter(comparedValue), " to ").concat(aggregateFormatter(value)) },
+            React.createElement(DefaultCursorBox, null,
+                React.createElement(Delta, { value: value, comparedValue: comparedValue, displayType: displayType, direction: direction })))));
+}

package/esm/compare-aggregate/index.js

@@ -0,0 +1 @@
+export { CompareAggregate } from './compare-aggregate';