@auth0/quantum-charts 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/common/custom-legend.js +2 -1
  2. package/esm/common/custom-legend.js +2 -1
  3. package/esm/line-chart/custom-threshold-legend.js +13 -4
  4. package/esm/line-chart/index.js +10 -7
  5. package/line-chart/custom-threshold-legend.d.ts +1 -1
  6. package/line-chart/custom-threshold-legend.js +13 -4
  7. package/line-chart/index.js +9 -6
  8. package/package.json +1 -1
package/common/custom-legend.js CHANGED
@@ -63,11 +63,12 @@ var LegendIcon = (0, quantum_product_1.styled)('div')(function (_a) {
63
63
  var CustomLegend = function (props) {
64
64
  var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility;
65
65
  var hiddenKeysPattern = /_hidden/;
66
+ var customLegendPattern = /.*Control/;
66
67
  return (React.createElement(Root, { gutter: 1 },
67
68
  React.createElement(quantum_product_1.StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 }, payload
68
69
  .filter(function (item) { return !hiddenKeysPattern.test("".concat(item.dataKey)); })
69
70
  .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); } },
70
- entry.dataKey === 'thresholdControl' ? (React.createElement(custom_threshold_legend_1.default, null)) : (React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } })),
71
+ customLegendPattern.test(entry.dataKey) ? (React.createElement(custom_threshold_legend_1.default, { color: entry.color, isSelected: !dataVisibility[entry.dataKey], data: dataVisibility })) : (React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } })),
71
72
  React.createElement(quantum_product_1.Text, { variant: "body2" }, entry.value))); }))));
72
73
  };
73
74
  exports.CustomLegend = CustomLegend;
package/esm/common/custom-legend.js CHANGED
@@ -34,10 +34,11 @@ var LegendIcon = styled('div')(function (_a) {
34
34
  export var CustomLegend = function (props) {
35
35
  var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility;
36
36
  var hiddenKeysPattern = /_hidden/;
37
+ var customLegendPattern = /.*Control/;
37
38
  return (React.createElement(Root, { gutter: 1 },
38
39
  React.createElement(StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 }, payload
39
40
  .filter(function (item) { return !hiddenKeysPattern.test("".concat(item.dataKey)); })
40
41
  .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); } },
41
- entry.dataKey === 'thresholdControl' ? (React.createElement(CustomThresholdLegend, null)) : (React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } })),
42
+ customLegendPattern.test(entry.dataKey) ? (React.createElement(CustomThresholdLegend, { color: entry.color, isSelected: !dataVisibility[entry.dataKey], data: dataVisibility })) : (React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } })),
42
43
  React.createElement(Text, { variant: "body2" }, entry.value))); }))));
43
44
  };
package/esm/line-chart/custom-threshold-legend.js CHANGED
@@ -1,8 +1,17 @@
1
+ import { alpha, useTheme } from '@auth0/quantum-product';
1
2
  import * as React from 'react';
2
- var CustomThresholdLegend = function () {
3
+ var CustomThresholdLegend = function (props) {
4
+ var color = props.color, data = props.data, isSelected = props.isSelected;
5
+ var theme = useTheme();
6
+ var fill = data.hover === 'thresholdControl' || !data.hover
7
+ ? theme.tokens.color_bg_state_neutral
8
+ : alpha(theme.tokens.color_bg_state_neutral, 0.35);
9
+ var stroke = data.hover === 'thresholdControl' || !data.hover
10
+ ? theme.tokens.color_border_state_neutral
11
+ : alpha(theme.tokens.color_border_state_neutral, 0.35);
3
12
  return (React.createElement(React.Fragment, null,
4
- React.createElement("svg", { width: "14", height: "2", viewBox: "0 0 14 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
5
- React.createElement("rect", { width: "6", height: "2", rx: "1", fill: "#191919" }),
6
- React.createElement("rect", { x: "8", width: "6", height: "2", rx: "1", fill: "#191919" }))));
13
+ React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
14
+ React.createElement("rect", { width: "14", height: "14", rx: isSelected ? 4 : theme.spacing(0.5), z: -1, fill: isSelected ? fill : 'none', strokeWidth: 2, stroke: stroke, strokeDasharray: '2 2', fillOpacity: 0.3 }),
15
+ React.createElement("rect", { z: 1, width: "6", height: "3", rx: "0", x: '50%', y: '50%', transform: "translate(-3 -1)", fill: color }))));
7
16
  };
8
17
  export default CustomThresholdLegend;
package/esm/line-chart/index.js CHANGED
@@ -28,7 +28,7 @@ var __read = (this && this.__read) || function (o, n) {
28
28
  import _ from 'lodash';
29
29
  import * as React from 'react';
30
30
  import { Area, CartesianGrid, ComposedChart, Legend, Line, ReferenceArea, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
31
- import { useTheme, Text, DropdownMenu, useDropdownMenuState, Button, StackLayout, Divider, ChevronDownIcon, AlertDiamondIcon, IconButton, TableIcon, } from '@auth0/quantum-product';
31
+ import { useTheme, Text, DropdownMenu, useDropdownMenuState, Button, StackLayout, Divider, ChevronDownIcon, AlertDiamondIcon, IconButton, TableIcon, alpha, } from '@auth0/quantum-product';
32
32
  import { getColorScale } from '../theme';
33
33
  import CustomActiveDot from './custom-active-dot';
34
34
  import CustomTooltip from '../common/custom-tooltip';
@@ -36,6 +36,9 @@ import { ChartCard } from '../chart-card';
36
36
  import { tickFormatter } from '../common/chart';
37
37
  import { CustomLegend } from '../common/custom-legend';
38
38
  import { DataTableChart } from '../chart-summary/data-table-chart';
39
+ var getThresholdColor = function (data, baseColor) {
40
+ return data.hover === 'thresholdControl' || !data.hover ? baseColor : alpha(baseColor, 0.35);
41
+ };
39
42
  export function LineChart(props) {
40
43
  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, thresholds = _a.thresholds, breaches = _a.breaches, disableThresholdMenu = _a.disableThresholdMenu;
41
44
  var theme = useTheme();
@@ -160,20 +163,20 @@ export function LineChart(props) {
160
163
  : getColorScale(theme)[color]['muted'][index], dot: false, activeDot: CustomActiveDot() }));
161
164
  }),
162
165
  threshold && (React.createElement(React.Fragment, null,
163
- React.createElement(Area, { type: "monotone", dataKey: 'thresholdControl', name: "".concat(threshold.threshold_label), stroke: "none", fill: "none", isAnimationActive: false, dot: false, activeDot: false }),
166
+ React.createElement(Area, { type: "monotone", dataKey: 'thresholdControl', name: "".concat(threshold.threshold_label), stroke: "none", fillOpacity: 0, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_info), isAnimationActive: false, dot: false, activeDot: false }),
164
167
  React.createElement(Area, { type: "monotone", dataKey: 'ewma_hidden', name: "Exponential Weighted Moving Average", stroke: "none", fill: "none", isAnimationActive: false, stackId: 1, dot: false, activeDot: false }),
165
- React.createElement(Area, { type: "monotone", dataKey: "alertThreshold_hidden", name: "Alert Threshold", fill: theme.tokens.color_bg_state_info, fillOpacity: 0.2, stroke: "none", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 1 }),
168
+ React.createElement(Area, { type: "monotone", dataKey: "alertThreshold_hidden", name: "Alert Threshold", fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_info), fillOpacity: 0.2, stroke: "none", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 1 }),
166
169
  threshold.warn_threshold_value && (React.createElement(React.Fragment, null,
167
170
  React.createElement(Area, { type: "monotone", dataKey: 'ewma_hidden', name: "Exponential Weighted Moving Average", stroke: "none", fill: "none", isAnimationActive: false, stackId: 2, dot: false, activeDot: false }),
168
171
  React.createElement(Area, { type: "monotone", dataKey: 'warnBuffer_hidden', stroke: "none", fill: "none", isAnimationActive: false, stackId: 2, dot: false, activeDot: false }),
169
- React.createElement(Area, { type: "monotone", dataKey: "warnThreshold_hidden", name: "Warn Threshold", fill: 'none', fillOpacity: 0.2, stroke: theme.tokens.color_fg_state_caution, strokeWidth: 2, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 2 }))))),
172
+ React.createElement(Area, { type: "monotone", dataKey: "warnThreshold_hidden", name: "Warn Threshold", fill: 'none', fillOpacity: 0.2, stroke: getThresholdColor(lineVisibility, theme.tokens.color_fg_state_caution), strokeWidth: 2, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 2 }))))),
170
173
  breaches &&
171
174
  threshold &&
172
175
  breaches[threshold.evaluated_metric].map(function (breach, index) {
173
176
  return (React.createElement(React.Fragment, null,
174
- React.createElement(ReferenceLine, { key: index, x: breach.start, stroke: theme.tokens.color_border_state_neutral, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
175
- React.createElement(ReferenceArea, { key: index, x1: breach.start, x2: breach.end, fill: theme.tokens.color_bg_state_neutral, fillOpacity: 0.1, visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
176
- React.createElement(ReferenceLine, { key: index, x: breach.end, stroke: theme.tokens.color_border_state_neutral, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
177
+ React.createElement(ReferenceLine, { key: index, x: breach.start, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
178
+ React.createElement(ReferenceArea, { key: index, x1: breach.start, x2: breach.end, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_neutral), fillOpacity: 0.1, visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
179
+ React.createElement(ReferenceLine, { key: index, x: breach.end, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
177
180
  }))) : (React.createElement("div", { style: {
178
181
  display: 'grid',
179
182
  placeItems: 'center',
package/line-chart/custom-threshold-legend.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import * as React from 'react';
2
- declare const CustomThresholdLegend: () => React.JSX.Element;
2
+ declare const CustomThresholdLegend: (props: any) => React.JSX.Element;
3
3
  export default CustomThresholdLegend;
package/line-chart/custom-threshold-legend.js CHANGED
@@ -23,11 +23,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
23
23
  return result;
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
+ var quantum_product_1 = require("@auth0/quantum-product");
26
27
  var React = __importStar(require("react"));
27
- var CustomThresholdLegend = function () {
28
+ var CustomThresholdLegend = function (props) {
29
+ var color = props.color, data = props.data, isSelected = props.isSelected;
30
+ var theme = (0, quantum_product_1.useTheme)();
31
+ var fill = data.hover === 'thresholdControl' || !data.hover
32
+ ? theme.tokens.color_bg_state_neutral
33
+ : (0, quantum_product_1.alpha)(theme.tokens.color_bg_state_neutral, 0.35);
34
+ var stroke = data.hover === 'thresholdControl' || !data.hover
35
+ ? theme.tokens.color_border_state_neutral
36
+ : (0, quantum_product_1.alpha)(theme.tokens.color_border_state_neutral, 0.35);
28
37
  return (React.createElement(React.Fragment, null,
29
- React.createElement("svg", { width: "14", height: "2", viewBox: "0 0 14 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
30
- React.createElement("rect", { width: "6", height: "2", rx: "1", fill: "#191919" }),
31
- React.createElement("rect", { x: "8", width: "6", height: "2", rx: "1", fill: "#191919" }))));
38
+ React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
39
+ React.createElement("rect", { width: "14", height: "14", rx: isSelected ? 4 : theme.spacing(0.5), z: -1, fill: isSelected ? fill : 'none', strokeWidth: 2, stroke: stroke, strokeDasharray: '2 2', fillOpacity: 0.3 }),
40
+ React.createElement("rect", { z: 1, width: "6", height: "3", rx: "0", x: '50%', y: '50%', transform: "translate(-3 -1)", fill: color }))));
32
41
  };
33
42
  exports.default = CustomThresholdLegend;
package/line-chart/index.js CHANGED
@@ -65,6 +65,9 @@ var chart_card_1 = require("../chart-card");
65
65
  var chart_1 = require("../common/chart");
66
66
  var custom_legend_1 = require("../common/custom-legend");
67
67
  var data_table_chart_1 = require("../chart-summary/data-table-chart");
68
+ var getThresholdColor = function (data, baseColor) {
69
+ return data.hover === 'thresholdControl' || !data.hover ? baseColor : (0, quantum_product_1.alpha)(baseColor, 0.35);
70
+ };
68
71
  function LineChart(props) {
69
72
  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, thresholds = _a.thresholds, breaches = _a.breaches, disableThresholdMenu = _a.disableThresholdMenu;
70
73
  var theme = (0, quantum_product_1.useTheme)();
@@ -189,20 +192,20 @@ function LineChart(props) {
189
192
  : (0, theme_1.getColorScale)(theme)[color]['muted'][index], dot: false, activeDot: (0, custom_active_dot_1.default)() }));
190
193
  }),
191
194
  threshold && (React.createElement(React.Fragment, null,
192
- React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'thresholdControl', name: "".concat(threshold.threshold_label), stroke: "none", fill: "none", isAnimationActive: false, dot: false, activeDot: false }),
195
+ React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'thresholdControl', name: "".concat(threshold.threshold_label), stroke: "none", fillOpacity: 0, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_info), isAnimationActive: false, dot: false, activeDot: false }),
193
196
  React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'ewma_hidden', name: "Exponential Weighted Moving Average", stroke: "none", fill: "none", isAnimationActive: false, stackId: 1, dot: false, activeDot: false }),
194
- React.createElement(recharts_1.Area, { type: "monotone", dataKey: "alertThreshold_hidden", name: "Alert Threshold", fill: theme.tokens.color_bg_state_info, fillOpacity: 0.2, stroke: "none", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 1 }),
197
+ React.createElement(recharts_1.Area, { type: "monotone", dataKey: "alertThreshold_hidden", name: "Alert Threshold", fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_info), fillOpacity: 0.2, stroke: "none", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 1 }),
195
198
  threshold.warn_threshold_value && (React.createElement(React.Fragment, null,
196
199
  React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'ewma_hidden', name: "Exponential Weighted Moving Average", stroke: "none", fill: "none", isAnimationActive: false, stackId: 2, dot: false, activeDot: false }),
197
200
  React.createElement(recharts_1.Area, { type: "monotone", dataKey: 'warnBuffer_hidden', stroke: "none", fill: "none", isAnimationActive: false, stackId: 2, dot: false, activeDot: false }),
198
- React.createElement(recharts_1.Area, { type: "monotone", dataKey: "warnThreshold_hidden", name: "Warn Threshold", fill: 'none', fillOpacity: 0.2, stroke: theme.tokens.color_fg_state_caution, strokeWidth: 2, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 2 }))))),
201
+ React.createElement(recharts_1.Area, { type: "monotone", dataKey: "warnThreshold_hidden", name: "Warn Threshold", fill: 'none', fillOpacity: 0.2, stroke: getThresholdColor(lineVisibility, theme.tokens.color_fg_state_caution), strokeWidth: 2, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden', isAnimationActive: false, activeDot: false, dot: false, stackId: 2 }))))),
199
202
  breaches &&
200
203
  threshold &&
201
204
  breaches[threshold.evaluated_metric].map(function (breach, index) {
202
205
  return (React.createElement(React.Fragment, null,
203
- React.createElement(recharts_1.ReferenceLine, { key: index, x: breach.start, stroke: theme.tokens.color_border_state_neutral, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
204
- React.createElement(recharts_1.ReferenceArea, { key: index, x1: breach.start, x2: breach.end, fill: theme.tokens.color_bg_state_neutral, fillOpacity: 0.1, visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
205
- React.createElement(recharts_1.ReferenceLine, { key: index, x: breach.end, stroke: theme.tokens.color_border_state_neutral, strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
206
+ React.createElement(recharts_1.ReferenceLine, { key: index, x: breach.start, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
207
+ React.createElement(recharts_1.ReferenceArea, { key: index, x1: breach.start, x2: breach.end, fill: getThresholdColor(lineVisibility, theme.tokens.color_bg_state_neutral), fillOpacity: 0.1, visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' }),
208
+ React.createElement(recharts_1.ReferenceLine, { key: index, x: breach.end, stroke: getThresholdColor(lineVisibility, theme.tokens.color_border_state_neutral), strokeDasharray: "3 3", visibility: !lineVisibility['thresholdControl'] ? 'visible' : 'hidden' })));
206
209
  }))) : (React.createElement("div", { style: {
207
210
  display: 'grid',
208
211
  placeItems: 'center',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",