@auth0/quantum-charts 0.0.2

package/index.js

@@ -0,0 +1,26 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./bar-chart"), exports);
+__exportStar(require("./chart-card"), exports);
+__exportStar(require("./chart-summary"), exports);
+__exportStar(require("./common/chart"), exports);
+__exportStar(require("./compare-aggregate"), exports);
+__exportStar(require("./donut-chart"), exports);
+__exportStar(require("./helpers/format-number"), exports);
+__exportStar(require("./line-chart"), exports);
+__exportStar(require("./scorecard"), exports);
+__exportStar(require("./delta"), exports);

package/line-chart/custom-active-dot.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DotProps } from 'recharts';
+declare const CustomActiveDot: (onMouseOver?: DotProps['onMouseOver']) => (props: Omit<DotProps, 'ref'>) => JSX.Element;
+export default CustomActiveDot;

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

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

package/line-chart/custom-tooltip.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const CustomTooltip: ({ active, payload }: {
+    active: any;
+    payload: any;
+}) => JSX.Element | null;
+export default CustomTooltip;

package/line-chart/custom-tooltip.js

@@ -0,0 +1,48 @@
+"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 __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 quantum_product_1 = require("@auth0/quantum-product");
+var custom_color_status_dot_1 = __importDefault(require("../custom-color-status-dot"));
+var date_fns_1 = require("date-fns");
+var styles_1 = require("../styles");
+// -------------------------------- Component --------------------------------
+var CustomTooltip = function (_a) {
+    var _b;
+    var active = _a.active, payload = _a.payload;
+    if (!active || !payload.length) {
+        return null;
+    }
+    return (React.createElement(styles_1.CustomTooltip, null,
+        React.createElement(styles_1.CustomTooltipLabel, null, "".concat((0, date_fns_1.format)(new Date(payload && ((_b = payload[0].payload) === null || _b === void 0 ? void 0 : _b.date)), 'LLL d p'))),
+        React.createElement(quantum_product_1.Box, null,
+            React.createElement(quantum_product_1.RowLayout, { gutter: 1 }, payload.map(function (x, index) {
+                return React.createElement(custom_color_status_dot_1.default, { key: index, dotColor: 'grey', label: "".concat(x.name, ": ").concat(x.payload[x.name]) });
+            })))));
+};
+exports.default = CustomTooltip;

package/line-chart/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IBaseChartProps } from '../common/chart';
+export interface ILineChartProps<DataType = unknown> extends IBaseChartProps<DataType> {
+    syncId?: number | string;
+}
+export declare function LineChart<DataType = unknown>(props: ILineChartProps<DataType>): JSX.Element;

package/line-chart/index.js

@@ -0,0 +1,95 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChart = void 0;
+var lodash_1 = __importDefault(require("lodash"));
+var React = __importStar(require("react"));
+var recharts_1 = require("recharts");
+var date_fns_1 = require("date-fns");
+var quantum_product_1 = require("@auth0/quantum-product");
+var theme_1 = require("../theme");
+var custom_active_dot_1 = __importDefault(require("./custom-active-dot"));
+var custom_tooltip_1 = __importDefault(require("./custom-tooltip"));
+var chart_card_1 = require("../chart-card");
+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 = (0, quantum_product_1.useTheme)();
+    // Function to know how many lines we need based of how much different group values are.
+    var groups = lodash_1.default.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 (0, date_fns_1.format)(new Date(value), 'LLL d');
+        }
+        if (bottomAxis.scaleType === 'datetime') {
+            return (0, date_fns_1.format)(new Date(value), 'LLL d p');
+        }
+        return value;
+    };
+    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
+        React.createElement(recharts_1.ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(recharts_1.LineChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
+                top: 24,
+                right: 10,
+                left: -24,
+                bottom: 0,
+            } },
+            React.createElement(recharts_1.XAxis, { tickFormatter: formatBottomTick, dataKey: bottomAxisDataKey, height: 30, interval: "preserveStartEnd" }),
+            React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
+            React.createElement(recharts_1.YAxis, { domain: ['auto', 'auto'] }),
+            React.createElement(recharts_1.Tooltip, { content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined }) }),
+            legend && React.createElement(recharts_1.Legend, { align: "center", iconType: "square", iconSize: 14, wrapperStyle: { paddingTop: 16 } }),
+            groups.map(function (group, index) {
+                return (React.createElement(recharts_1.Line, { key: group, dataKey: group, name: group, strokeWidth: 3, stroke: (0, theme_1.getBaseColorScale)(theme)[index], dot: false, activeDot: (0, custom_active_dot_1.default)() }));
+            }))) : (React.createElement("div", { style: {
+                display: 'grid',
+                placeItems: 'center',
+                height: '100%',
+                textAlign: 'center',
+            } },
+            React.createElement(quantum_product_1.Text, { variant: "subtitle1" }, "No data"))))));
+}
+exports.LineChart = LineChart;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@auth0/quantum-charts",
+  "version": "0.0.2",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "license": "Apache-2.0",
+  "author": "Okta, Inc.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/auth0/quantum-product.git",
+    "directory": "packages/quantum-charts"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@auth0/quantum-product": "^1.5.1",
+    "@formatjs/intl": "^2.5.1",
+    "date-fns": "^2.29.3",
+    "recharts": "^2.0.7"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "scripts": {
+    "build": "yarn clean && yarn build:cjs && yarn build:esm && yarn copy:files",
+    "clean": "rm -rf ./build",
+    "watch": "tsc --watch --project ./tsconfig.publish.esm.json & tsc --watch --project ./tsconfig.publish.json",
+    "build:cjs": "tsc --project ./tsconfig.publish.json",
+    "build:esm": "tsc --project ./tsconfig.publish.esm.json",
+    "copy:files": "node scripts/copy-files.js",
+    "artifactory": "cd ./build && npm publish --access public",
+    "storybook": "start-storybook -p 6006"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@storybook/addon-actions": "6.5.10",
+    "@storybook/addon-essentials": "6.5.10",
+    "@storybook/addon-links": "6.5.10",
+    "@storybook/react": "6.5.10",
+    "@storybook/theming": "6.5.10",
+    "@types/md5": "^2.3.2",
+    "@types/node": "12.12.47",
+    "babel-loader": "^8.2.2"
+  },
+  "module": "./esm/index.js"
+}

package/scorecard/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IChartSummaryProps } from '../chart-summary';
+interface IScoreCardProps {
+    data: IChartSummaryProps[];
+}
+export declare function ScoreCard(props: IScoreCardProps): JSX.Element;
+export {};

package/scorecard/index.js

@@ -0,0 +1,39 @@
+"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.ScoreCard = void 0;
+var React = __importStar(require("react"));
+var chart_summary_1 = require("../chart-summary");
+var chart_card_1 = require("../chart-card");
+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(chart_summary_1.ChartSummary, { title: summary.title, value: summary.value, helperText: summary.helperText, label: summary.label })));
+        }))));
+}
+exports.ScoreCard = ScoreCard;

package/styles.d.ts

@@ -0,0 +1,8 @@
+export declare type IChartContainerProps = {
+    height?: number | 'initial';
+    marginTop?: number;
+};
+export declare const ChartContainer: import("styled-components").StyledComponent<"div", any, IChartContainerProps, never>;
+export declare const CustomTooltip: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CustomTooltipLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const DefaultCursorBox: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").BoxTypeMap<{}, "div">>, any, {}, never>;

package/styles.js

@@ -0,0 +1,43 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultCursorBox = exports.CustomTooltipLabel = exports.CustomTooltip = exports.ChartContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var quantum_product_1 = require("@auth0/quantum-product");
+exports.ChartContainer = styled_components_1.default.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;
+});
+exports.CustomTooltip = styled_components_1.default.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
+exports.CustomTooltipLabel = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: lightgrey;\n"], ["\n  color: lightgrey;\n"])));
+exports.DefaultCursorBox = (0, styled_components_1.default)(quantum_product_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+var templateObject_1, templateObject_2;

package/theme.d.ts

@@ -0,0 +1,3 @@
+import { ITheme } from '@auth0/quantum-product';
+export declare const getBaseColorScale: ({ palette }: ITheme) => string[];
+export declare const getBaseColorScaleMuted: ({ palette }: ITheme) => string[];

package/theme.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBaseColorScaleMuted = exports.getBaseColorScale = void 0;
+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],
+    ];
+};
+exports.getBaseColorScale = getBaseColorScale;
+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],
+    ];
+};
+exports.getBaseColorScaleMuted = getBaseColorScaleMuted;