@auth0/quantum-charts 0.0.4 → 0.1.1

package/esm/theme.js

@@ -1,22 +1,38 @@
-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],
-    ];
+import { alpha } from '@auth0/quantum-product';
+export var getColorScale = function (_a) {
+    var tokens = _a.tokens;
+    return {
+        categorical: {
+            base: [
+                tokens.color_chart_categorical_1,
+                tokens.color_chart_categorical_2,
+                tokens.color_chart_categorical_3,
+                tokens.color_chart_categorical_4,
+                tokens.color_chart_categorical_5,
+                tokens.color_chart_categorical_6,
+            ],
+            muted: [
+                alpha(tokens.color_chart_categorical_1, 0.35),
+                alpha(tokens.color_chart_categorical_2, 0.35),
+                alpha(tokens.color_chart_categorical_3, 0.35),
+                alpha(tokens.color_chart_categorical_4, 0.35),
+                alpha(tokens.color_chart_categorical_5, 0.35),
+                alpha(tokens.color_chart_categorical_6, 0.35),
+            ],
+        },
+        sequential: {
+            base: [
+                tokens.color_chart_sequential_1,
+                tokens.color_chart_sequential_2,
+                tokens.color_chart_sequential_3,
+                tokens.color_chart_sequential_4,
+            ],
+            muted: [
+                alpha(tokens.color_chart_sequential_1, 0.35),
+                alpha(tokens.color_chart_sequential_2, 0.35),
+                alpha(tokens.color_chart_sequential_3, 0.35),
+                alpha(tokens.color_chart_sequential_4, 0.35),
+            ],
+        },
+    };
 };

package/line-chart/index.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);
@@ -22,6 +33,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 };
 };
@@ -30,17 +57,35 @@ 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 custom_tooltip_1 = __importDefault(require("../common/custom-tooltip"));
 var chart_card_1 = require("../chart-card");
+var chart_1 = require("../common/chart");
+var custom_legend_1 = require("../common/custom-legend");
 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 _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, _d = _a.color, color = _d === void 0 ? 'categorical' : _d;
     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 initialState = __assign({ hover: null }, groups.reduce(function (acc, group) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
+    }, {}));
+    var _e = __read(React.useState(initialState), 2), lineVisibility = _e[0], setLineVisibility = _e[1];
+    var handleLegendMouseEnter = function (e) {
+        if (!lineVisibility[e.dataKey]) {
+            setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
+        }
+    };
+    var handleLegendMouseLeave = function () {
+        setLineVisibility(__assign(__assign({}, lineVisibility), { hover: null }));
+    };
+    var selectLine = function (e) {
+        var _a;
+        setLineVisibility(__assign(__assign({}, lineVisibility), (_a = {}, _a[e.dataKey] = !lineVisibility[e.dataKey], _a.hover = null, _a)));
+    };
     var bottomAxisDataKey = bottomAxis.mapsTo || 'date';
     var leftAxisDataKey = leftAxis.mapsTo || 'value';
     var entries = {};
@@ -61,15 +106,6 @@ function LineChart(props) {
             _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,
@@ -77,13 +113,15 @@ function LineChart(props) {
                 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 } }),
+            React.createElement(recharts_1.XAxis, { tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, bottomAxis.scaleType); }, dataKey: bottomAxisDataKey, height: 30, interval: "preserveStartEnd", minTickGap: theme.spacingPX(14), tickMargin: theme.spacingPX(3), axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } }),
+            React.createElement(recharts_1.YAxis, { tickFormatter: function (value) { return (0, chart_1.tickFormatter)(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], width: 78, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } }),
+            React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
+            legend && (React.createElement(recharts_1.Legend, { align: "center", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(custom_legend_1.CustomLegend, { selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility }) })),
             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)() }));
+                return (React.createElement(recharts_1.Line, { key: group, dataKey: group, name: group, strokeWidth: 3, hide: lineVisibility[group] === true, stroke: lineVisibility.hover === group || !lineVisibility.hover
+                        ? (0, theme_1.getColorScale)(theme)[color]['base'][index]
+                        : (0, theme_1.getColorScale)(theme)[color]['muted'][index], dot: false, activeDot: (0, custom_active_dot_1.default)() }));
             }))) : (React.createElement("div", { style: {
                 display: 'grid',
                 placeItems: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-charts",
-  "version": "0.0.4",
+  "version": "0.1.1",
   "sideEffects": false,
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -29,22 +29,24 @@
     "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",
+    "build:cjs": "node --max-old-space-size=4096 ../../node_modules/.bin/tsc --project ./tsconfig.publish.json",
+    "build:esm": "node --max-old-space-size=4096 ../../node_modules/.bin/tsc --project ./tsconfig.publish.esm.json",
     "copy:files": "node scripts/copy-files.js",
     "artifactory": "cd ./build && npm publish",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "storybook dev -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",
+    "@babel/core": "^7.22.10",
+    "@storybook/addon-actions": "^7.3.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/react": "^7.3.2",
+    "@storybook/react-webpack5": "7.3.2",
+    "@storybook/theming": "^7.3.2",
     "@types/md5": "^2.3.2",
-    "@types/node": "12.12.47",
-    "babel-loader": "^8.2.2"
+    "@types/node": "^18.16.19",
+    "babel-loader": "^9.1.3",
+    "storybook": "7.3.2"
   },
   "module": "./esm/index.js"
 }

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 })));
         }))));
 }

package/styles.d.ts

@@ -2,7 +2,6 @@ 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>;
+export declare const ChartContainer: import("styled-components").StyledComponent<"div", import("@auth0/quantum-product").ITheme, import("@mui/system").MUIStyledCommonProps<import("@auth0/quantum-product").ITheme> & IChartContainerProps, never>;
+export declare const CustomTooltip: import("styled-components").StyledComponent<"div", import("@auth0/quantum-product").ITheme, import("@mui/system").MUIStyledCommonProps<import("@auth0/quantum-product").ITheme>, never>;
+export declare const DefaultCursorBox: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").BoxTypeMap<{}, "div">>, import("@auth0/quantum-product").ITheme, import("@mui/system").MUIStyledCommonProps<import("@auth0/quantum-product").ITheme>, never>;

package/styles.js

@@ -3,14 +3,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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"));
+exports.DefaultCursorBox = exports.CustomTooltip = exports.ChartContainer = void 0;
 var quantum_product_1 = require("@auth0/quantum-product");
-exports.ChartContainer = styled_components_1.default.div(function (_a) {
+exports.ChartContainer = (0, quantum_product_1.styled)('div')(function (_a) {
     var theme = _a.theme, height = _a.height, marginTop = _a.marginTop;
     var props = {
         marginTop: theme.spacing(3),
@@ -24,20 +20,21 @@ exports.ChartContainer = styled_components_1.default.div(function (_a) {
     }
     return props;
 });
-exports.CustomTooltip = styled_components_1.default.div(function (_a) {
+exports.CustomTooltip = (0, quantum_product_1.styled)('div')(function (_a) {
     var theme = _a.theme;
     return ({
-        backgroundColor: theme.tokens.color_bg_layer_boldest,
+        display: 'grid',
+        gap: theme.spacing(1),
+        backgroundColor: theme.tokens.color_bg_layer_elevated,
+        border: "1px solid ".concat(theme.tokens.color_border_bold),
         borderRadius: theme.shape.borderRadius,
-        padding: theme.spacing(1, 3),
-        color: theme.tokens.color_fg_inverse,
+        padding: theme.spacing(1, 2),
+        color: theme.tokens.color_fg_bold,
         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;
+exports.DefaultCursorBox = (0, quantum_product_1.styled)(quantum_product_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+var templateObject_1;

package/theme.d.ts

@@ -1,3 +1,11 @@
 import { ITheme } from '@auth0/quantum-product';
-export declare const getBaseColorScale: ({ palette }: ITheme) => string[];
-export declare const getBaseColorScaleMuted: ({ palette }: ITheme) => string[];
+export declare const getColorScale: ({ tokens }: ITheme) => {
+    categorical: {
+        base: string[];
+        muted: string[];
+    };
+    sequential: {
+        base: string[];
+        muted: string[];
+    };
+};

package/theme.js

@@ -1,27 +1,42 @@
 "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.getColorScale = void 0;
+var quantum_product_1 = require("@auth0/quantum-product");
+var getColorScale = function (_a) {
+    var tokens = _a.tokens;
+    return {
+        categorical: {
+            base: [
+                tokens.color_chart_categorical_1,
+                tokens.color_chart_categorical_2,
+                tokens.color_chart_categorical_3,
+                tokens.color_chart_categorical_4,
+                tokens.color_chart_categorical_5,
+                tokens.color_chart_categorical_6,
+            ],
+            muted: [
+                (0, quantum_product_1.alpha)(tokens.color_chart_categorical_1, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_categorical_2, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_categorical_3, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_categorical_4, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_categorical_5, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_categorical_6, 0.35),
+            ],
+        },
+        sequential: {
+            base: [
+                tokens.color_chart_sequential_1,
+                tokens.color_chart_sequential_2,
+                tokens.color_chart_sequential_3,
+                tokens.color_chart_sequential_4,
+            ],
+            muted: [
+                (0, quantum_product_1.alpha)(tokens.color_chart_sequential_1, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_sequential_2, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_sequential_3, 0.35),
+                (0, quantum_product_1.alpha)(tokens.color_chart_sequential_4, 0.35),
+            ],
+        },
+    };
 };
-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;
+exports.getColorScale = getColorScale;

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

@@ -1,20 +0,0 @@
-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/line-chart/custom-tooltip.d.ts

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

package/line-chart/custom-tooltip.js

@@ -1,48 +0,0 @@
-"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;