@auth0/quantum-charts 0.0.2

package/esm/custom-color-status-dot.js

@@ -0,0 +1,15 @@
+import { get } from 'lodash';
+import { rootShouldForwardProp, StatusDot, statusDotClasses, styled } from '@auth0/quantum-product';
+var CustomColorStatusDot = styled(StatusDot, {
+    shouldForwardProp: function (prop) { return rootShouldForwardProp(prop) && prop !== 'dotColor'; },
+})(function (_a) {
+    var _b;
+    var theme = _a.theme, dotColor = _a.dotColor;
+    var backgroundColor = get(theme.palette, dotColor, dotColor);
+    return _b = {},
+        _b["& .".concat(statusDotClasses.dot)] = {
+            backgroundColor: typeof backgroundColor === 'object' ? backgroundColor[500] : backgroundColor,
+        },
+        _b;
+});
+export default CustomColorStatusDot;

package/esm/delta/delta.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { inRange } from 'lodash';
+import { toPercentage, toPercentageAdaptive } from '../helpers/format-number';
+import { Label } from '@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 ||
+        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';
+};
+export 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 ? toPercentageAdaptive : toPercentage;
+    var finalDelta = symbol + percentFormatter(Math.abs(usableDelta));
+    return { emphasis: emphasis, delta: finalDelta };
+};
+export var Delta = function (props) {
+    var delta = computeDelta(props).delta;
+    return (React.createElement(Label, { color: props.direction === 'upIsGood' ? 'success' : props.direction === 'upIsBad' ? 'danger' : 'default' }, delta));
+};

package/esm/delta/index.js

@@ -0,0 +1 @@
+export { Delta, computeDelta } from './delta';

package/esm/donut-chart/center.js

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import { Box, styled } from '@auth0/quantum-product';
+import { toPercentageAdaptive, toShortCompactNotation } from '../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 = 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 = styled(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(Box, null,
+            React.createElement(Aggregate, null, hasNoData
+                ? 'No data'
+                : displayType === 'absolute'
+                    ? toShortCompactNotation(aggregate)
+                    : toPercentageAdaptive(percentage(aggregate, sumValues(data)) / 100)))));
+};
+export default Center;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,44 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { StackLayout, StackLayoutItem, useTheme } from '@auth0/quantum-product';
+import { getBaseColorScale } from '../theme';
+function DecoupledLegend(props) {
+    var data = props.data, activeIndex = props.activeIndex, setActiveIndex = props.setActiveIndex;
+    var theme = useTheme();
+    var BASE_COLORS = 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(StackLayout, { gutter: 1, onMouseEnter: function () {
+                    setActiveIndex(index);
+                }, onMouseLeave: function () {
+                    setActiveIndex(undefined);
+                }, sx: {
+                    flexWrap: 'nowrap',
+                } },
+                React.createElement(StackLayoutItem, { sx: {
+                        alignSelf: 'center',
+                    } },
+                    React.createElement(LegendDotWrapper, { style: {
+                            border: '2px solid ' + (isActive ? color : 'white'),
+                        } },
+                        React.createElement(LegendDot, { style: { backgroundColor: color } }))),
+                React.createElement(StackLayoutItem, { sx: {
+                        alignSelf: 'center',
+                    } },
+                    React.createElement(LegendText, { color: isActive ? 'primary' : 'secondary' }, datum.name)))));
+    })));
+}
+var LegendDot = styled.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.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 4px;\n"], ["\n  border-radius: 4px;\n"])));
+var LegendText = styled.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'];
+});
+export default DecoupledLegend;
+var templateObject_1, templateObject_2, templateObject_3;

package/esm/donut-chart/index.js

@@ -0,0 +1,52 @@
+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 { Cell, Pie, PieChart as RechartsPieChart, ResponsiveContainer } from 'recharts';
+import { StackLayout, StackLayoutItem, useTheme } from '@auth0/quantum-product';
+import { getBaseColorScale } from '../theme';
+import Center from './center';
+import DecoupledLegend from './decoupled-legend';
+import { ChartCard } from '../chart-card';
+export 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 = useTheme();
+    var BASE_COLORS = getBaseColorScale(theme);
+    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
+        React.createElement(StackLayout, { sx: {
+                height: '150px',
+                flexWrap: 'nowrap',
+                mt: '24px',
+            } },
+            React.createElement(StackLayoutItem, { sx: {
+                    height: '150px',
+                    width: '150px',
+                } },
+                React.createElement(ResponsiveContainer, { width: '100%', height: 150 },
+                    React.createElement(RechartsPieChart, { height: 150, width: 150 },
+                        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) {
+                                setActiveIndex(index);
+                            }, onMouseLeave: function () {
+                                setActiveIndex(undefined);
+                            } }, data.map(function (_, index) {
+                            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 })))));
+}

package/esm/helpers/dataSampleFactory.js

@@ -0,0 +1,55 @@
+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 __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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+export var dataSampleFactory = function (numberOfGroups, numberOfTicks) {
+    var count = numberOfTicks;
+    var precision = 60 * 60 * 24 * 30.4;
+    var dates = Array.from(Array(count).keys()).map(function (x) { return ({
+        date: new Date(1412969747858 - precision * x * 1000), // only last timestamp is constant, generate toward past
+    }); });
+    var groups = ['y1', 'y2', 'y3', 'y4', 'y5'];
+    var graphs = [];
+    var _loop_1 = function (index) {
+        var graph = dates.map(function (x) {
+            return __assign(__assign({}, x), { group: groups[index], value: Math.ceil(Math.random() * 100 + 100) });
+        });
+        graphs.push.apply(graphs, __spreadArray([], __read(graph), false));
+    };
+    for (var index = 0; index < numberOfGroups; index++) {
+        _loop_1(index);
+    }
+    return graphs;
+};

package/esm/helpers/format-number.js

@@ -0,0 +1,30 @@
+/*
+  If you're unclear about which to use, take a look at the tests
+  and see if something fits the kind of formating you're looking for!
+
+  The shortCompactNotation uses ES2020 and is not yet available everywhere,
+  so we have to use "@formatjs/intl's polyfill or build it ourselve.
+  Since the raw Intl is assumed faster (being native and all),
+  things that do not require the polyfill should use it (percent, longForm, etc.)
+*/
+import { createIntl, createIntlCache } from '@formatjs/intl';
+var percent = Intl.NumberFormat('en-US', { style: 'percent' });
+var percentTwoDecimals = Intl.NumberFormat('en-US', {
+    style: 'percent',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+export var toPercentage = function (s) { return percent.format(s); };
+export var toPercentageAdaptive = function (s) {
+    var n = Math.abs(s);
+    return n > 0.1 || n < 0.00005 ? toPercentage(s) : percentTwoDecimals.format(s);
+};
+var longForm = Intl.NumberFormat('en-US');
+export var toLongForm = function (s) { return longForm.format(s); };
+export var toLongFormRounded = function (s) { return toLongForm(Math.round(s)); };
+var cache = createIntlCache();
+export var polyfill = createIntl({ locale: 'en-US' }, cache);
+export var toShortCompactNotation = function (s) {
+    return polyfill.formatNumber(s, { notation: 'compact', compactDisplay: 'short' });
+};
+export var toBasicNotation = function (s) { return polyfill.formatNumber(s); };

package/esm/index.js

@@ -0,0 +1,10 @@
+export * from './bar-chart';
+export * from './chart-card';
+export * from './chart-summary';
+export * from './common/chart';
+export * from './compare-aggregate';
+export * from './donut-chart';
+export * from './helpers/format-number';
+export * from './line-chart';
+export * from './scorecard';
+export * from './delta';

package/esm/line-chart/custom-active-dot.js

@@ -0,0 +1,19 @@
+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 { Dot } from 'recharts';
+var CustomActiveDot = function (onMouseOver) { return function (props) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Dot, __assign({}, props, { key: "outerDot", r: 10, strokeWidth: 0 }, (onMouseOver ? { onMouseOver: onMouseOver } : {}))),
+        React.createElement(Dot, __assign({}, props, { key: "innerDot", r: 4, style: { fill: 'white' } }, (onMouseOver ? { onMouseOver: onMouseOver } : {})))));
+}; };
+export default CustomActiveDot;

package/esm/line-chart/custom-tooltip.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Box, RowLayout } from '@auth0/quantum-product';
+import StatusDot from '../custom-color-status-dot';
+import { format } from 'date-fns';
+import { CustomTooltip as CustomTooltipStyled, CustomTooltipLabel } from '../styles';
+// -------------------------------- Component --------------------------------
+var CustomTooltip = function (_a) {
+    var _b;
+    var active = _a.active, payload = _a.payload;
+    if (!active || !payload.length) {
+        return null;
+    }
+    return (React.createElement(CustomTooltipStyled, null,
+        React.createElement(CustomTooltipLabel, null, "".concat(format(new Date(payload && ((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date)), 'LLL d p'))),
+        React.createElement(Box, null,
+            React.createElement(RowLayout, { gutter: 1 }, payload.map(function (x, index) {
+                return React.createElement(StatusDot, { key: index, dotColor: 'grey', label: "".concat(x.name, ": ").concat(x.payload[x.name]) });
+            })))));
+};
+export default CustomTooltip;

package/esm/line-chart/index.js

@@ -0,0 +1,65 @@
+import _ from 'lodash';
+import * as React from 'react';
+import { CartesianGrid, Legend, Line, LineChart as RechartsLineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { format } from 'date-fns';
+import { useTheme, Text } from '@auth0/quantum-product';
+import { getBaseColorScale } from '../theme';
+import CustomActiveDot from './custom-active-dot';
+import CustomTooltip from './custom-tooltip';
+import { ChartCard } from '../chart-card';
+export function LineChart(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.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId;
+    var theme = useTheme();
+    // Function to know how many lines 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(RechartsLineChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
+                top: 24,
+                right: 10,
+                left: -24,
+                bottom: 0,
+            } },
+            React.createElement(XAxis, { tickFormatter: formatBottomTick, dataKey: bottomAxisDataKey, height: 30, interval: "preserveStartEnd" }),
+            React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
+            React.createElement(YAxis, { domain: ['auto', 'auto'] }),
+            React.createElement(Tooltip, { content: React.createElement(CustomTooltip, { active: undefined, payload: undefined }) }),
+            legend && React.createElement(Legend, { align: "center", iconType: "square", iconSize: 14, wrapperStyle: { paddingTop: 16 } }),
+            groups.map(function (group, index) {
+                return (React.createElement(Line, { key: group, dataKey: group, name: group, strokeWidth: 3, stroke: getBaseColorScale(theme)[index], dot: false, activeDot: CustomActiveDot() }));
+            }))) : (React.createElement("div", { style: {
+                display: 'grid',
+                placeItems: 'center',
+                height: '100%',
+                textAlign: 'center',
+            } },
+            React.createElement(Text, { variant: "subtitle1" }, "No data"))))));
+}

package/esm/scorecard/index.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ChartSummary } from '../chart-summary';
+import { ChartCard } from '../chart-card';
+import { GalleryLayout, GalleryLayoutItem } 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(ChartSummary, { title: summary.title, value: summary.value, helperText: summary.helperText, label: summary.label })));
+        }))));
+}

package/esm/styles.js

@@ -0,0 +1,37 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { Box } from '@auth0/quantum-product';
+export var ChartContainer = styled.div(function (_a) {
+    var theme = _a.theme, height = _a.height, marginTop = _a.marginTop;
+    var props = {
+        marginTop: theme.spacing(3),
+        height: 'initial',
+    };
+    if (height !== 'initial') {
+        props.height = "".concat(height !== null && height !== void 0 ? height : 220, "px");
+    }
+    if (marginTop !== undefined) {
+        props.marginTop = "".concat(marginTop, "px");
+    }
+    return props;
+});
+export var CustomTooltip = styled.div(function (_a) {
+    var theme = _a.theme;
+    return ({
+        backgroundColor: theme.tokens.color_bg_layer_boldest,
+        borderRadius: theme.shape.borderRadius,
+        padding: theme.spacing(1, 3),
+        color: theme.tokens.color_fg_inverse,
+        fontSize: theme.typography.caption.fontSize,
+        fontWeight: theme.typography.caption.fontWeight,
+        lineHeight: theme.typography.caption.lineHeight,
+        letterSpacing: theme.typography.caption.letterSpacing,
+    });
+});
+// `textSecondary` doesn't have enough contrast for the black background of the tooltip
+export var CustomTooltipLabel = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: lightgrey;\n"], ["\n  color: lightgrey;\n"])));
+export var DefaultCursorBox = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+var templateObject_1, templateObject_2;

package/esm/theme.js

@@ -0,0 +1,22 @@
+export var getBaseColorScale = function (_a) {
+    var palette = _a.palette;
+    return [
+        palette.purple[500],
+        palette.magenta[500],
+        palette.green[500],
+        palette.yellow[500],
+        palette.red[500],
+        palette.neutral[500],
+    ];
+};
+export var getBaseColorScaleMuted = function (_a) {
+    var palette = _a.palette;
+    return [
+        palette.purple[300],
+        palette.yellow[300],
+        palette.green[300],
+        palette.red[300],
+        palette.neutral[300],
+        palette.magenta[300],
+    ];
+};

package/helpers/dataSampleFactory.d.ts

@@ -0,0 +1 @@
+export declare const dataSampleFactory: (numberOfGroups: any, numberOfTicks: any) => any;

package/helpers/dataSampleFactory.js

@@ -0,0 +1,59 @@
+"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 __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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataSampleFactory = void 0;
+var dataSampleFactory = function (numberOfGroups, numberOfTicks) {
+    var count = numberOfTicks;
+    var precision = 60 * 60 * 24 * 30.4;
+    var dates = Array.from(Array(count).keys()).map(function (x) { return ({
+        date: new Date(1412969747858 - precision * x * 1000), // only last timestamp is constant, generate toward past
+    }); });
+    var groups = ['y1', 'y2', 'y3', 'y4', 'y5'];
+    var graphs = [];
+    var _loop_1 = function (index) {
+        var graph = dates.map(function (x) {
+            return __assign(__assign({}, x), { group: groups[index], value: Math.ceil(Math.random() * 100 + 100) });
+        });
+        graphs.push.apply(graphs, __spreadArray([], __read(graph), false));
+    };
+    for (var index = 0; index < numberOfGroups; index++) {
+        _loop_1(index);
+    }
+    return graphs;
+};
+exports.dataSampleFactory = dataSampleFactory;

package/helpers/format-number.d.ts

@@ -0,0 +1,7 @@
+export declare const toPercentage: (s: number) => string;
+export declare const toPercentageAdaptive: (s: number) => string;
+export declare const toLongForm: (s: number) => string;
+export declare const toLongFormRounded: (s: number) => string;
+export declare const polyfill: import("@formatjs/intl").IntlShape<string>;
+export declare const toShortCompactNotation: (s: number) => string;
+export declare const toBasicNotation: (s: number) => string;

package/helpers/format-number.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toBasicNotation = exports.toShortCompactNotation = exports.polyfill = exports.toLongFormRounded = exports.toLongForm = exports.toPercentageAdaptive = exports.toPercentage = void 0;
+/*
+  If you're unclear about which to use, take a look at the tests
+  and see if something fits the kind of formating you're looking for!
+
+  The shortCompactNotation uses ES2020 and is not yet available everywhere,
+  so we have to use "@formatjs/intl's polyfill or build it ourselve.
+  Since the raw Intl is assumed faster (being native and all),
+  things that do not require the polyfill should use it (percent, longForm, etc.)
+*/
+var intl_1 = require("@formatjs/intl");
+var percent = Intl.NumberFormat('en-US', { style: 'percent' });
+var percentTwoDecimals = Intl.NumberFormat('en-US', {
+    style: 'percent',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+var toPercentage = function (s) { return percent.format(s); };
+exports.toPercentage = toPercentage;
+var toPercentageAdaptive = function (s) {
+    var n = Math.abs(s);
+    return n > 0.1 || n < 0.00005 ? (0, exports.toPercentage)(s) : percentTwoDecimals.format(s);
+};
+exports.toPercentageAdaptive = toPercentageAdaptive;
+var longForm = Intl.NumberFormat('en-US');
+var toLongForm = function (s) { return longForm.format(s); };
+exports.toLongForm = toLongForm;
+var toLongFormRounded = function (s) { return (0, exports.toLongForm)(Math.round(s)); };
+exports.toLongFormRounded = toLongFormRounded;
+var cache = (0, intl_1.createIntlCache)();
+exports.polyfill = (0, intl_1.createIntl)({ locale: 'en-US' }, cache);
+var toShortCompactNotation = function (s) {
+    return exports.polyfill.formatNumber(s, { notation: 'compact', compactDisplay: 'short' });
+};
+exports.toShortCompactNotation = toShortCompactNotation;
+var toBasicNotation = function (s) { return exports.polyfill.formatNumber(s); };
+exports.toBasicNotation = toBasicNotation;

package/index.d.ts

@@ -0,0 +1,10 @@
+export * from './bar-chart';
+export * from './chart-card';
+export * from './chart-summary';
+export * from './common/chart';
+export * from './compare-aggregate';
+export * from './donut-chart';
+export * from './helpers/format-number';
+export * from './line-chart';
+export * from './scorecard';
+export * from './delta';