@auth0/quantum-charts 0.3.3 → 1.0.0

package/common/custom-legend.js

@@ -33,10 +33,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.CustomLegend = void 0;
 var quantum_product_1 = require("@auth0/quantum-product");
 var React = __importStar(require("react"));
+var custom_threshold_legend_1 = __importDefault(require("../line-chart/custom-threshold-legend"));
 var Root = (0, quantum_product_1.styled)(quantum_product_1.StackLayout)({
     justifyContent: 'center',
 });
@@ -57,9 +61,12 @@ var LegendIcon = (0, quantum_product_1.styled)('div')(function (_a) {
         })));
 });
 var CustomLegend = function (props) {
-    var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility;
-    return (React.createElement(Root, { gutter: 1 }, payload.map(function (entry, index) { return (React.createElement(quantum_product_1.StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, key: index, gutter: 1, onClick: function () { return selectData(entry); }, onMouseEnter: function () { return handleLegendMouseEnter(entry); }, onMouseLeave: function () { return handleLegendMouseLeave(entry); } },
-        React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } }),
-        React.createElement(quantum_product_1.Text, { variant: "body2" }, entry.value))); })));
+    var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility, alertThresholdValue = props.alertThresholdValue, warnThresholdValue = props.warnThresholdValue;
+    return (React.createElement(Root, { gutter: 1 },
+        React.createElement(quantum_product_1.StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 },
+            payload.map(function (entry, index) { return (React.createElement(quantum_product_1.StackLayout, { key: index, sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1, onClick: function () { return selectData(entry); }, onMouseEnter: function () { return handleLegendMouseEnter(entry); }, onMouseLeave: function () { return handleLegendMouseLeave(entry); } },
+                React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } }),
+                React.createElement(quantum_product_1.Text, { variant: "body2" }, entry.value))); }),
+            (warnThresholdValue || alertThresholdValue) && React.createElement(custom_threshold_legend_1.default, null))));
 };
 exports.CustomLegend = CustomLegend;

package/esm/common/custom-legend.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { StackLayout, Text, styled } from '@auth0/quantum-product';
 import * as React from 'react';
+import CustomThresholdLegend from '../line-chart/custom-threshold-legend';
 var Root = styled(StackLayout)({
     justifyContent: 'center',
 });
@@ -31,8 +32,11 @@ var LegendIcon = styled('div')(function (_a) {
         })));
 });
 export var CustomLegend = function (props) {
-    var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility;
-    return (React.createElement(Root, { gutter: 1 }, payload.map(function (entry, index) { return (React.createElement(StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, key: index, gutter: 1, onClick: function () { return selectData(entry); }, onMouseEnter: function () { return handleLegendMouseEnter(entry); }, onMouseLeave: function () { return handleLegendMouseLeave(entry); } },
-        React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } }),
-        React.createElement(Text, { variant: "body2" }, entry.value))); })));
+    var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility, alertThresholdValue = props.alertThresholdValue, warnThresholdValue = props.warnThresholdValue;
+    return (React.createElement(Root, { gutter: 1 },
+        React.createElement(StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 },
+            payload.map(function (entry, index) { return (React.createElement(StackLayout, { key: index, sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1, onClick: function () { return selectData(entry); }, onMouseEnter: function () { return handleLegendMouseEnter(entry); }, onMouseLeave: function () { return handleLegendMouseLeave(entry); } },
+                React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } }),
+                React.createElement(Text, { variant: "body2" }, entry.value))); }),
+            (warnThresholdValue || alertThresholdValue) && React.createElement(CustomThresholdLegend, null))));
 };

package/esm/line-chart/custom-threshold-label.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export var CustomThresholdLabel = function (_a) {
+    var label = _a.label, thresholdType = _a.thresholdType, theme = _a.theme, viewBox = _a.viewBox;
+    return (React.createElement("g", { transform: "translate(".concat(viewBox.width - 30, ",-10)") },
+        React.createElement("rect", { x: viewBox.x, y: viewBox.y, width: 38, height: 20, fill: thresholdType === 'alert' ? theme.tokens.color_bg_state_danger : theme.tokens.color_bg_state_caution, rx: "4" }),
+        React.createElement("text", { x: viewBox.x, y: viewBox.y, fill: thresholdType === 'alert'
+                ? theme.tokens.color_global_functional_static_neutral_white
+                : theme.tokens.color_global_functional_static_neutral_black, textAnchor: "middle", dominantBaseline: "middle", dy: 11, dx: 19, fontWeight: 500 }, label)));
+};

package/esm/line-chart/custom-threshold-legend.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Text } from '@auth0/quantum-product';
+var CustomThresholdLegend = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("svg", { width: "14", height: "2", viewBox: "0 0 14 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("rect", { width: "6", height: "2", rx: "1", fill: "#191919" }),
+            React.createElement("rect", { x: "8", width: "6", height: "2", rx: "1", fill: "#191919" })),
+        React.createElement(Text, { variant: "body2" }, "Threshold")));
+};
+export default CustomThresholdLegend;

package/esm/line-chart/index.js

@@ -27,16 +27,17 @@ var __read = (this && this.__read) || function (o, n) {
 };
 import _ from 'lodash';
 import * as React from 'react';
-import { CartesianGrid, Legend, Line, LineChart as RechartsLineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { CartesianGrid, Label, Legend, Line, LineChart as RechartsLineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import { useTheme, Text } from '@auth0/quantum-product';
 import { getColorScale } from '../theme';
 import CustomActiveDot from './custom-active-dot';
 import CustomTooltip from '../common/custom-tooltip';
+import { CustomThresholdLabel } from './custom-threshold-label';
 import { ChartCard } from '../chart-card';
 import { tickFormatter } from '../common/chart';
 import { CustomLegend } from '../common/custom-legend';
 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, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems;
+    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, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, alertThreshold = _a.alertThreshold, warnThreshold = _a.warnThreshold;
     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; });
@@ -93,7 +94,9 @@ export function LineChart(props) {
                 return (React.createElement(Line, { key: group, dataKey: group, name: group, strokeWidth: 3, hide: lineVisibility[group] === true, stroke: lineVisibility.hover === group || !lineVisibility.hover
                         ? getColorScale(theme)[color]['base'][index]
                         : getColorScale(theme)[color]['muted'][index], dot: false, activeDot: CustomActiveDot() }));
-            }))) : (React.createElement("div", { style: {
+            }),
+            alertThreshold && (React.createElement(ReferenceLine, { y: alertThreshold.value, stroke: theme.tokens.color_bg_state_danger, strokeDasharray: "8", strokeWidth: "2", label: React.createElement(Label, { value: alertThreshold.value, content: React.createElement(CustomThresholdLabel, { viewBox: true, label: alertThreshold.label, thresholdType: 'alert', theme: theme }) }) })),
+            warnThreshold && (React.createElement(ReferenceLine, { y: warnThreshold.value, stroke: theme.tokens.color_bg_state_caution, strokeDasharray: "8", strokeWidth: "2", label: React.createElement(Label, { value: warnThreshold.value, content: React.createElement(CustomThresholdLabel, { viewBox: true, label: warnThreshold.label, thresholdType: 'warn', theme: theme }) }) })))) : (React.createElement("div", { style: {
                 display: 'grid',
                 placeItems: 'center',
                 height: '100%',

package/line-chart/custom-threshold-label.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare const CustomThresholdLabel: ({ label, thresholdType, theme, viewBox }: {
+    label: any;
+    thresholdType: any;
+    theme: any;
+    viewBox: any;
+}) => React.JSX.Element;

package/line-chart/custom-threshold-label.js

@@ -0,0 +1,36 @@
+"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.CustomThresholdLabel = void 0;
+var React = __importStar(require("react"));
+var CustomThresholdLabel = function (_a) {
+    var label = _a.label, thresholdType = _a.thresholdType, theme = _a.theme, viewBox = _a.viewBox;
+    return (React.createElement("g", { transform: "translate(".concat(viewBox.width - 30, ",-10)") },
+        React.createElement("rect", { x: viewBox.x, y: viewBox.y, width: 38, height: 20, fill: thresholdType === 'alert' ? theme.tokens.color_bg_state_danger : theme.tokens.color_bg_state_caution, rx: "4" }),
+        React.createElement("text", { x: viewBox.x, y: viewBox.y, fill: thresholdType === 'alert'
+                ? theme.tokens.color_global_functional_static_neutral_white
+                : theme.tokens.color_global_functional_static_neutral_black, textAnchor: "middle", dominantBaseline: "middle", dy: 11, dx: 19, fontWeight: 500 }, label)));
+};
+exports.CustomThresholdLabel = CustomThresholdLabel;

package/line-chart/custom-threshold-legend.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const CustomThresholdLegend: () => React.JSX.Element;
+export default CustomThresholdLegend;

package/line-chart/custom-threshold-legend.js

@@ -0,0 +1,35 @@
+"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 });
+var React = __importStar(require("react"));
+var quantum_product_1 = require("@auth0/quantum-product");
+var CustomThresholdLegend = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("svg", { width: "14", height: "2", viewBox: "0 0 14 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("rect", { width: "6", height: "2", rx: "1", fill: "#191919" }),
+            React.createElement("rect", { x: "8", width: "6", height: "2", rx: "1", fill: "#191919" })),
+        React.createElement(quantum_product_1.Text, { variant: "body2" }, "Threshold")));
+};
+exports.default = CustomThresholdLegend;

package/line-chart/index.d.ts

@@ -2,5 +2,7 @@ import * as React from 'react';
 import { IBaseChartProps } from '../common/chart';
 export interface ILineChartProps<DataType = unknown> extends IBaseChartProps<DataType> {
     syncId?: number | string;
+    alertThreshold?: object;
+    warnThreshold?: object;
 }
 export declare function LineChart<DataType = unknown>(props: ILineChartProps<DataType>): React.JSX.Element;

package/line-chart/index.js

@@ -61,11 +61,12 @@ 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("../common/custom-tooltip"));
+var custom_threshold_label_1 = require("./custom-threshold-label");
 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, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems;
+    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, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, alertThreshold = _a.alertThreshold, warnThreshold = _a.warnThreshold;
     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; });
@@ -122,7 +123,9 @@ function LineChart(props) {
                 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: {
+            }),
+            alertThreshold && (React.createElement(recharts_1.ReferenceLine, { y: alertThreshold.value, stroke: theme.tokens.color_bg_state_danger, strokeDasharray: "8", strokeWidth: "2", label: React.createElement(recharts_1.Label, { value: alertThreshold.value, content: React.createElement(custom_threshold_label_1.CustomThresholdLabel, { viewBox: true, label: alertThreshold.label, thresholdType: 'alert', theme: theme }) }) })),
+            warnThreshold && (React.createElement(recharts_1.ReferenceLine, { y: warnThreshold.value, stroke: theme.tokens.color_bg_state_caution, strokeDasharray: "8", strokeWidth: "2", label: React.createElement(recharts_1.Label, { value: warnThreshold.value, content: React.createElement(custom_threshold_label_1.CustomThresholdLabel, { viewBox: true, label: warnThreshold.label, thresholdType: 'warn', theme: theme }) }) })))) : (React.createElement("div", { style: {
                 display: 'grid',
                 placeItems: 'center',
                 height: '100%',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-charts",
-  "version": "0.3.3",
+  "version": "1.0.0",
   "sideEffects": false,
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -16,7 +16,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@auth0/quantum-product": "^2.0.0",
+    "@auth0/quantum-product": "^2.1.0",
     "@formatjs/intl": "^2.5.1",
     "date-fns": "^2.29.3",
     "recharts": "^2.0.7"