@auth0/quantum-charts 1.2.0 → 1.2.2

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 (12) hide show
  1. package/README.md +1 -1
  2. package/chart-card/index.js +3 -3
  3. package/chart-summary/index.d.ts +7 -0
  4. package/chart-summary/index.js +26 -10
  5. package/common/custom-legend.js +26 -5
  6. package/esm/chart-card/index.js +3 -3
  7. package/esm/chart-summary/index.js +27 -11
  8. package/esm/common/custom-legend.js +27 -6
  9. package/esm/line-chart/index.js +14 -8
  10. package/line-chart/index.d.ts +6 -0
  11. package/line-chart/index.js +14 -8
  12. package/package.json +2 -2
package/README.md CHANGED
@@ -6,4 +6,4 @@ yarn add @auth0/quantum-charts
6
6
  ```
7
7
 
8
8
  ## Usage
9
- Detailed docs and example usage can be found [here](https://quantum.okta.design/?path=/story/quantum-charts-intro--page).
9
+ Detailed docs and example usage can be found [here](https://quantum.okta.design/?path=/story/quantum-charts-intro--docs).
package/chart-card/index.js CHANGED
@@ -28,9 +28,9 @@ var quantum_product_1 = require("@auth0/quantum-product");
28
28
  var React = __importStar(require("react"));
29
29
  var chart_summary_1 = require("../chart-summary");
30
30
  function ChartCard(props) {
31
- var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable, triggerButtonSize = props.triggerButtonSize;
32
- return (React.createElement(quantum_product_1.Card, { sx: { height: height, padding: 3 } },
33
- React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, showChartTable: showChartTable, allowDownload: allowDownload, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable, triggerButtonSize: triggerButtonSize }),
31
+ var children = props.children, title = props.title, chartStatus = props.chartStatus, titleIcon = props.titleIcon, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable, triggerButtonSize = props.triggerButtonSize, isVertical = props.isVertical, finalMenuItem = props.finalMenuItem;
32
+ return (React.createElement(quantum_product_1.Card, { sx: { height: height, padding: 3, paddingBottom: isVertical ? 0.5 : 3 } },
33
+ React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, showChartTable: showChartTable, allowDownload: allowDownload, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable, triggerButtonSize: triggerButtonSize, chartStatus: chartStatus, titleIcon: titleIcon, finalMenuItem: finalMenuItem, isVertical: isVertical }),
34
34
  children));
35
35
  }
36
36
  exports.ChartCard = ChartCard;
package/chart-summary/index.d.ts CHANGED
@@ -2,6 +2,10 @@ import * as React from 'react';
2
2
  import { DropdownMenuListItemValue, IIconButtonProps } from '@auth0/quantum-product';
3
3
  export interface IChartSummaryProps {
4
4
  title?: string;
5
+ chartStatus?: {
6
+ label: string;
7
+ color?: 'default' | 'warning' | 'danger' | 'success' | 'info';
8
+ };
5
9
  value?: string | number;
6
10
  label?: React.ReactNode;
7
11
  /** Renders help icon with tooltip as passed value **/
@@ -9,9 +13,12 @@ export interface IChartSummaryProps {
9
13
  dataTable?: any;
10
14
  headerAction?: React.ReactElement;
11
15
  additionalMenuItems?: DropdownMenuListItemValue[];
16
+ finalMenuItem?: DropdownMenuListItemValue;
12
17
  showChartTable?: boolean;
13
18
  allowDownload?: boolean;
14
19
  customViewChartTable?: React.ReactElement;
15
20
  triggerButtonSize?: IIconButtonProps['size'];
21
+ titleIcon?: React.ReactNode;
22
+ isVertical?: boolean;
16
23
  }
17
24
  export declare function ChartSummary(props: IChartSummaryProps): React.JSX.Element;
package/chart-summary/index.js CHANGED
@@ -75,8 +75,12 @@ var Aggregate = (0, quantum_product_1.styled)('h4')(templateObject_1 || (templat
75
75
  var theme = _a.theme;
76
76
  return theme.typography.h4.fontSize;
77
77
  });
78
+ var TitleIconWrapper = (0, quantum_product_1.styled)('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n & > svg {\n font-size: ", ";\n width: 1em;\n height: 1em;\n }\n"], ["\n display: flex;\n align-items: center;\n & > svg {\n font-size: ", ";\n width: 1em;\n height: 1em;\n }\n"])), function (_a) {
79
+ var theme = _a.theme;
80
+ return theme.tokens.type_preset_section_subtitle.fontSize;
81
+ });
78
82
  function ChartSummary(props) {
79
- var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable, _a = props.triggerButtonSize, triggerButtonSize = _a === void 0 ? 'small' : _a;
83
+ var title = props.title, chartStatus = props.chartStatus, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable, _a = props.triggerButtonSize, triggerButtonSize = _a === void 0 ? 'small' : _a, titleIcon = props.titleIcon, finalMenuItem = props.finalMenuItem, isVertical = props.isVertical;
80
84
  var _b = __read(React.useState(false), 2), isOpen = _b[0], setIsOpen = _b[1];
81
85
  var _c = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'chart-actions-menu' }), triggerProps = _c.triggerProps, menuProps = _c.menuProps;
82
86
  var toggleIsOpen = function () {
@@ -104,12 +108,18 @@ function ChartSummary(props) {
104
108
  title: 'Download CSV',
105
109
  });
106
110
  }
107
- var finalMenuItems = baseMenuItems;
111
+ var aggregatedMenuItems = baseMenuItems;
108
112
  if (additionalMenuItems) {
109
- if (finalMenuItems.length > 0) {
110
- finalMenuItems.unshift({ type: 'divider' });
113
+ if (aggregatedMenuItems.length > 0) {
114
+ aggregatedMenuItems.unshift({ type: 'divider' });
111
115
  }
112
- finalMenuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(finalMenuItems), false);
116
+ aggregatedMenuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(aggregatedMenuItems), false);
117
+ }
118
+ if (finalMenuItem) {
119
+ aggregatedMenuItems = __spreadArray(__spreadArray([], __read(aggregatedMenuItems.filter(function (item) { return item.type !== 'divider'; })), false), [
120
+ { type: 'divider' },
121
+ finalMenuItem,
122
+ ], false);
113
123
  }
114
124
  var handleClick = function (cb) {
115
125
  return function (event) {
@@ -119,19 +129,25 @@ function ChartSummary(props) {
119
129
  }
120
130
  };
121
131
  };
122
- return finalMenuItems.map(function (item) {
132
+ return aggregatedMenuItems.map(function (item) {
123
133
  if (item.type === 'item' && item.onClick) {
124
134
  item.onClick = handleClick(item.onClick);
125
135
  }
126
136
  return item;
127
137
  });
128
- }, [showChartTable, allowDownload, additionalMenuItems, dataTable, title, menuProps]);
138
+ }, [showChartTable, allowDownload, additionalMenuItems, dataTable, title, menuProps, finalMenuItem]);
129
139
  return (React.createElement("div", null,
130
- React.createElement(quantum_product_1.DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
140
+ React.createElement(quantum_product_1.DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
131
141
  React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
142
+ titleIcon && (React.createElement(quantum_product_1.StackLayoutItem, null,
143
+ React.createElement(TitleIconWrapper, null, titleIcon))),
132
144
  React.createElement(quantum_product_1.StackLayoutItem, null,
133
145
  React.createElement(quantum_product_1.Text, { fontWeight: 500 }, title)),
134
- helperText && (React.createElement(quantum_product_1.StackLayoutItem, null,
146
+ chartStatus && (React.createElement(quantum_product_1.StackLayoutItem, { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
147
+ React.createElement(quantum_product_1.Label, { color: chartStatus.color },
148
+ React.createElement(quantum_product_1.StatusDot, __assign({}, chartStatus, { label: "", details: "" })),
149
+ chartStatus.label))),
150
+ helperText && !isVertical && (React.createElement(quantum_product_1.StackLayoutItem, null,
135
151
  React.createElement(quantum_product_1.Tooltip, { placement: "top", title: helperText },
136
152
  React.createElement(quantum_product_1.Box, { sx: {
137
153
  display: 'grid',
@@ -150,4 +166,4 @@ function ChartSummary(props) {
150
166
  showChartTable && (React.createElement(data_table_chart_1.DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable, customViewChartTable: customViewChartTable, allowDownload: allowDownload }))));
151
167
  }
152
168
  exports.ChartSummary = ChartSummary;
153
- var templateObject_1;
169
+ var templateObject_1, templateObject_2;
package/common/custom-legend.js CHANGED
@@ -61,14 +61,35 @@ var LegendIcon = (0, quantum_product_1.styled)('div')(function (_a) {
61
61
  })));
62
62
  });
63
63
  var CustomLegend = function (props) {
64
- var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility;
64
+ var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility, title = props.title, helperText = props.helperText, isVertical = props.isVertical, theme = props.theme;
65
65
  var hiddenKeysPattern = /_hidden/;
66
66
  var customLegendPattern = /.*Control/;
67
- return (React.createElement(Root, { gutter: 1 },
68
- React.createElement(quantum_product_1.StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 }, payload
67
+ var getLegendIconColor = function (data, dataKey) {
68
+ var baseColor = theme.tokens.color_bg_selected_subtle;
69
+ if (data.hover === dataKey || !data.hover)
70
+ return baseColor;
71
+ return (0, quantum_product_1.alpha)(baseColor, 0.35);
72
+ };
73
+ var legendContent = (React.createElement(React.Fragment, null,
74
+ isVertical && title && (React.createElement(quantum_product_1.StackLayout, { gutter: 1, sx: { padding: '0 8px', cursor: 'pointer' } },
75
+ React.createElement(quantum_product_1.StackLayoutItem, null,
76
+ React.createElement(quantum_product_1.Text, { variant: "type_preset_caption_emphasis", color: 'color_fg_default' }, title)),
77
+ helperText && (React.createElement(quantum_product_1.StackLayoutItem, null,
78
+ React.createElement(quantum_product_1.Tooltip, { placement: "top", title: helperText },
79
+ React.createElement(quantum_product_1.Box, { sx: {
80
+ display: 'grid',
81
+ alignSelf: 'center',
82
+ color: 'textSecondary',
83
+ } },
84
+ React.createElement(quantum_product_1.HelpCircleIcon, { size: "16" }))))))),
85
+ payload
69
86
  .filter(function (item) { return !hiddenKeysPattern.test("".concat(item.dataKey)); })
70
87
  .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); } },
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 } })),
72
- React.createElement(quantum_product_1.Text, { variant: "body2" }, entry.value))); }))));
88
+ customLegendPattern.test(entry.dataKey) ? (isVertical ? (React.createElement(LegendIcon, { ownerState: {
89
+ isHide: dataVisibility[entry.dataKey],
90
+ color: getLegendIconColor(dataVisibility, entry.dataKey),
91
+ } })) : (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 } })),
92
+ React.createElement(quantum_product_1.Text, { variant: "body2" }, entry.value))); })));
93
+ return (React.createElement(Root, { gutter: 1 }, isVertical ? (React.createElement(quantum_product_1.RowLayout, { sx: { padding: '0 8px', cursor: 'pointer' }, gutter: 1 }, legendContent)) : (React.createElement(quantum_product_1.StackLayout, { gutter: 1, sx: { padding: '4px 8px', cursor: 'pointer' } }, legendContent))));
73
94
  };
74
95
  exports.CustomLegend = CustomLegend;
package/esm/chart-card/index.js CHANGED
@@ -2,8 +2,8 @@ import { Card } from '@auth0/quantum-product';
2
2
  import * as React from 'react';
3
3
  import { ChartSummary } from '../chart-summary';
4
4
  export function ChartCard(props) {
5
- var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable, triggerButtonSize = props.triggerButtonSize;
6
- return (React.createElement(Card, { sx: { height: height, padding: 3 } },
7
- React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, showChartTable: showChartTable, allowDownload: allowDownload, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable, triggerButtonSize: triggerButtonSize }),
5
+ var children = props.children, title = props.title, chartStatus = props.chartStatus, titleIcon = props.titleIcon, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable, triggerButtonSize = props.triggerButtonSize, isVertical = props.isVertical, finalMenuItem = props.finalMenuItem;
6
+ return (React.createElement(Card, { sx: { height: height, padding: 3, paddingBottom: isVertical ? 0.5 : 3 } },
7
+ React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction, showChartTable: showChartTable, allowDownload: allowDownload, additionalMenuItems: additionalMenuItems, customViewChartTable: customViewChartTable, triggerButtonSize: triggerButtonSize, chartStatus: chartStatus, titleIcon: titleIcon, finalMenuItem: finalMenuItem, isVertical: isVertical }),
8
8
  children));
9
9
  }
package/esm/chart-summary/index.js CHANGED
@@ -39,7 +39,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
39
39
  return to.concat(ar || Array.prototype.slice.call(from));
40
40
  };
41
41
  import * as React from 'react';
42
- import { Box, DescriptionBlock, DownloadCloudIcon, StackLayout, StackLayoutItem, Tooltip, HelpCircleIcon, styled, IconButton, TableIcon, Text, useDropdownMenuState, DropdownMenu, MoreVerticalIcon, } from '@auth0/quantum-product';
42
+ import { Box, DescriptionBlock, DownloadCloudIcon, StackLayout, StackLayoutItem, Tooltip, HelpCircleIcon, styled, IconButton, TableIcon, Text, useDropdownMenuState, DropdownMenu, MoreVerticalIcon, Label, StatusDot, } from '@auth0/quantum-product';
43
43
  import { downloadCSV } from '../helpers/downloadCsv';
44
44
  import { DataTableChart } from './data-table-chart';
45
45
  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) {
@@ -49,8 +49,12 @@ var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTempl
49
49
  var theme = _a.theme;
50
50
  return theme.typography.h4.fontSize;
51
51
  });
52
+ var TitleIconWrapper = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n & > svg {\n font-size: ", ";\n width: 1em;\n height: 1em;\n }\n"], ["\n display: flex;\n align-items: center;\n & > svg {\n font-size: ", ";\n width: 1em;\n height: 1em;\n }\n"])), function (_a) {
53
+ var theme = _a.theme;
54
+ return theme.tokens.type_preset_section_subtitle.fontSize;
55
+ });
52
56
  export function ChartSummary(props) {
53
- var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable, _a = props.triggerButtonSize, triggerButtonSize = _a === void 0 ? 'small' : _a;
57
+ var title = props.title, chartStatus = props.chartStatus, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction, additionalMenuItems = props.additionalMenuItems, showChartTable = props.showChartTable, allowDownload = props.allowDownload, customViewChartTable = props.customViewChartTable, _a = props.triggerButtonSize, triggerButtonSize = _a === void 0 ? 'small' : _a, titleIcon = props.titleIcon, finalMenuItem = props.finalMenuItem, isVertical = props.isVertical;
54
58
  var _b = __read(React.useState(false), 2), isOpen = _b[0], setIsOpen = _b[1];
55
59
  var _c = useDropdownMenuState({ baseId: 'chart-actions-menu' }), triggerProps = _c.triggerProps, menuProps = _c.menuProps;
56
60
  var toggleIsOpen = function () {
@@ -78,12 +82,18 @@ export function ChartSummary(props) {
78
82
  title: 'Download CSV',
79
83
  });
80
84
  }
81
- var finalMenuItems = baseMenuItems;
85
+ var aggregatedMenuItems = baseMenuItems;
82
86
  if (additionalMenuItems) {
83
- if (finalMenuItems.length > 0) {
84
- finalMenuItems.unshift({ type: 'divider' });
87
+ if (aggregatedMenuItems.length > 0) {
88
+ aggregatedMenuItems.unshift({ type: 'divider' });
85
89
  }
86
- finalMenuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(finalMenuItems), false);
90
+ aggregatedMenuItems = __spreadArray(__spreadArray([], __read(additionalMenuItems), false), __read(aggregatedMenuItems), false);
91
+ }
92
+ if (finalMenuItem) {
93
+ aggregatedMenuItems = __spreadArray(__spreadArray([], __read(aggregatedMenuItems.filter(function (item) { return item.type !== 'divider'; })), false), [
94
+ { type: 'divider' },
95
+ finalMenuItem,
96
+ ], false);
87
97
  }
88
98
  var handleClick = function (cb) {
89
99
  return function (event) {
@@ -93,19 +103,25 @@ export function ChartSummary(props) {
93
103
  }
94
104
  };
95
105
  };
96
- return finalMenuItems.map(function (item) {
106
+ return aggregatedMenuItems.map(function (item) {
97
107
  if (item.type === 'item' && item.onClick) {
98
108
  item.onClick = handleClick(item.onClick);
99
109
  }
100
110
  return item;
101
111
  });
102
- }, [showChartTable, allowDownload, additionalMenuItems, dataTable, title, menuProps]);
112
+ }, [showChartTable, allowDownload, additionalMenuItems, dataTable, title, menuProps, finalMenuItem]);
103
113
  return (React.createElement("div", null,
104
- React.createElement(DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
114
+ React.createElement(DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
105
115
  React.createElement(StackLayout, { gutter: 1 },
116
+ titleIcon && (React.createElement(StackLayoutItem, null,
117
+ React.createElement(TitleIconWrapper, null, titleIcon))),
106
118
  React.createElement(StackLayoutItem, null,
107
119
  React.createElement(Text, { fontWeight: 500 }, title)),
108
- helperText && (React.createElement(StackLayoutItem, null,
120
+ chartStatus && (React.createElement(StackLayoutItem, { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
121
+ React.createElement(Label, { color: chartStatus.color },
122
+ React.createElement(StatusDot, __assign({}, chartStatus, { label: "", details: "" })),
123
+ chartStatus.label))),
124
+ helperText && !isVertical && (React.createElement(StackLayoutItem, null,
109
125
  React.createElement(Tooltip, { placement: "top", title: helperText },
110
126
  React.createElement(Box, { sx: {
111
127
  display: 'grid',
@@ -123,4 +139,4 @@ export function ChartSummary(props) {
123
139
  label) }),
124
140
  showChartTable && (React.createElement(DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable, customViewChartTable: customViewChartTable, allowDownload: allowDownload }))));
125
141
  }
126
- var templateObject_1;
142
+ var templateObject_1, templateObject_2;
package/esm/common/custom-legend.js CHANGED
@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
- import { StackLayout, Text, styled } from '@auth0/quantum-product';
12
+ import { StackLayout, Text, styled, RowLayout, StackLayoutItem, HelpCircleIcon, Box, Tooltip, alpha, } from '@auth0/quantum-product';
13
13
  import * as React from 'react';
14
14
  import CustomThresholdLegend from '../line-chart/custom-threshold-legend';
15
15
  var Root = styled(StackLayout)({
@@ -32,13 +32,34 @@ var LegendIcon = styled('div')(function (_a) {
32
32
  })));
33
33
  });
34
34
  export var CustomLegend = function (props) {
35
- var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility;
35
+ var payload = props.payload, selectData = props.selectData, handleLegendMouseEnter = props.handleLegendMouseEnter, handleLegendMouseLeave = props.handleLegendMouseLeave, dataVisibility = props.dataVisibility, title = props.title, helperText = props.helperText, isVertical = props.isVertical, theme = props.theme;
36
36
  var hiddenKeysPattern = /_hidden/;
37
37
  var customLegendPattern = /.*Control/;
38
- return (React.createElement(Root, { gutter: 1 },
39
- React.createElement(StackLayout, { sx: { padding: '4px 8px', cursor: 'pointer' }, gutter: 1 }, payload
38
+ var getLegendIconColor = function (data, dataKey) {
39
+ var baseColor = theme.tokens.color_bg_selected_subtle;
40
+ if (data.hover === dataKey || !data.hover)
41
+ return baseColor;
42
+ return alpha(baseColor, 0.35);
43
+ };
44
+ var legendContent = (React.createElement(React.Fragment, null,
45
+ isVertical && title && (React.createElement(StackLayout, { gutter: 1, sx: { padding: '0 8px', cursor: 'pointer' } },
46
+ React.createElement(StackLayoutItem, null,
47
+ React.createElement(Text, { variant: "type_preset_caption_emphasis", color: 'color_fg_default' }, title)),
48
+ helperText && (React.createElement(StackLayoutItem, null,
49
+ React.createElement(Tooltip, { placement: "top", title: helperText },
50
+ React.createElement(Box, { sx: {
51
+ display: 'grid',
52
+ alignSelf: 'center',
53
+ color: 'textSecondary',
54
+ } },
55
+ React.createElement(HelpCircleIcon, { size: "16" }))))))),
56
+ payload
40
57
  .filter(function (item) { return !hiddenKeysPattern.test("".concat(item.dataKey)); })
41
58
  .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); } },
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 } })),
43
- React.createElement(Text, { variant: "body2" }, entry.value))); }))));
59
+ customLegendPattern.test(entry.dataKey) ? (isVertical ? (React.createElement(LegendIcon, { ownerState: {
60
+ isHide: dataVisibility[entry.dataKey],
61
+ color: getLegendIconColor(dataVisibility, entry.dataKey),
62
+ } })) : (React.createElement(CustomThresholdLegend, { color: entry.color, isSelected: !dataVisibility[entry.dataKey], data: dataVisibility }))) : (React.createElement(LegendIcon, { ownerState: { isHide: dataVisibility[entry.dataKey], color: entry.color } })),
63
+ React.createElement(Text, { variant: "body2" }, entry.value))); })));
64
+ return (React.createElement(Root, { gutter: 1 }, isVertical ? (React.createElement(RowLayout, { sx: { padding: '0 8px', cursor: 'pointer' }, gutter: 1 }, legendContent)) : (React.createElement(StackLayout, { gutter: 1, sx: { padding: '4px 8px', cursor: 'pointer' } }, legendContent))));
44
65
  };
package/esm/line-chart/index.js CHANGED
@@ -40,18 +40,18 @@ var getThresholdColor = function (data, baseColor) {
40
40
  return data.hover === 'thresholdControl' || !data.hover ? baseColor : alpha(baseColor, 0.35);
41
41
  };
42
42
  export function LineChart(props) {
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, _e = _a.allowDownload, allowDownload = _e === void 0 ? true : _e, _f = _a.showChartTable, showChartTable = _f === void 0 ? true : _f, _g = _a.showChartTableButtonInHeader, showChartTableButtonInHeader = _g === void 0 ? true : _g, _h = _a.showDividerInHeader, showDividerInHeader = _h === void 0 ? true : _h, _j = _a.headerButtonsSize, headerButtonsSize = _j === void 0 ? 'medium' : _j;
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, titleIcon = _a.titleIcon, chartStatus = _a.chartStatus, 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, finalMenuItem = _a.finalMenuItem, thresholds = _a.thresholds, breaches = _a.breaches, disableThresholdMenu = _a.disableThresholdMenu, _e = _a.allowDownload, allowDownload = _e === void 0 ? true : _e, _f = _a.showChartTable, showChartTable = _f === void 0 ? true : _f, _g = _a.showChartTableButtonInHeader, showChartTableButtonInHeader = _g === void 0 ? true : _g, _h = _a.showDividerInHeader, showDividerInHeader = _h === void 0 ? true : _h, _j = _a.headerButtonsSize, headerButtonsSize = _j === void 0 ? 'medium' : _j, _k = _a.isVertical, isVertical = _k === void 0 ? false : _k;
44
44
  var theme = useTheme();
45
- var _k = useDropdownMenuState({ baseId: 'threshold-menu' }), triggerProps = _k.triggerProps, menuProps = _k.menuProps;
45
+ var _l = useDropdownMenuState({ baseId: 'threshold-menu' }), triggerProps = _l.triggerProps, menuProps = _l.menuProps;
46
46
  // Function to know how many lines we need based of how much different group values are.
47
47
  var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
48
48
  var initialState = __assign({ hover: null }, groups.reduce(function (acc, group) {
49
49
  var _a;
50
50
  return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
51
51
  }, {}));
52
- var _l = __read(React.useState(initialState), 2), lineVisibility = _l[0], setLineVisibility = _l[1];
53
- var _m = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _m[0], setThreshold = _m[1];
54
- var _o = __read(React.useState(false), 2), isOpen = _o[0], setIsOpen = _o[1];
52
+ var _m = __read(React.useState(initialState), 2), lineVisibility = _m[0], setLineVisibility = _m[1];
53
+ var _o = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _o[0], setThreshold = _o[1];
54
+ var _p = __read(React.useState(false), 2), isOpen = _p[0], setIsOpen = _p[1];
55
55
  React.useEffect(function () {
56
56
  setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
57
57
  }, [thresholds]);
@@ -145,18 +145,24 @@ export function LineChart(props) {
145
145
  } },
146
146
  React.createElement(TableIcon, null)))));
147
147
  return (React.createElement(React.Fragment, null,
148
- React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: (groups === null || groups === void 0 ? void 0 : groups.length) > 1 ? headerActionWithThresholdDropdown : headerAction, additionalMenuItems: additionalMenuItems, allowDownload: allowDownload, showChartTable: showChartTable, triggerButtonSize: headerButtonsSize },
148
+ React.createElement(ChartCard, { title: title, chartStatus: chartStatus, value: value, dataTable: data, label: label, helperText: helperText, headerAction: (groups === null || groups === void 0 ? void 0 : groups.length) > 1 ? headerActionWithThresholdDropdown : headerAction, finalMenuItem: finalMenuItem, additionalMenuItems: additionalMenuItems, allowDownload: allowDownload, showChartTable: showChartTable, triggerButtonSize: headerButtonsSize, titleIcon: titleIcon, isVertical: isVertical },
149
149
  React.createElement(ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
150
150
  top: 24,
151
151
  right: 10,
152
152
  left: -24,
153
- bottom: 0,
153
+ bottom: 24,
154
154
  } },
155
155
  React.createElement(CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
156
156
  React.createElement(XAxis, { tickFormatter: function (value) { return 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 } }),
157
157
  React.createElement(YAxis, { tickFormatter: function (value) { return tickFormatter(value, leftAxis.scaleType); }, domain: ['auto', 'auto'], width: 78, axisLine: { stroke: theme.tokens.color_border_bold }, tickLine: { stroke: theme.tokens.color_border_bold } }),
158
158
  React.createElement(Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(CustomTooltip, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
159
- legend && (React.createElement(Legend, { align: "center", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(CustomLegend, { selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility }) })),
159
+ legend && isVertical ? (React.createElement(Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {
160
+ minWidth: '280px',
161
+ maxWidth: '320px',
162
+ justifyItems: 'start',
163
+ paddingLeft: '2em',
164
+ top: '15px',
165
+ }, content: React.createElement(CustomLegend, { title: title, helperText: helperText, selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, isVertical: isVertical, theme: theme }) })) : (React.createElement(Legend, { align: "center", iconSize: 14, wrapperStyle: { paddingTop: 16 }, content: React.createElement(CustomLegend, { selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, theme: theme }) })),
160
166
  groups.map(function (group, index) {
161
167
  return (React.createElement(Line, { key: group, dataKey: group, name: group, strokeWidth: 3, hide: lineVisibility[group] === true, stroke: lineVisibility.hover === group || !lineVisibility.hover
162
168
  ? getColorScale(theme)[color]['base'][index]
package/line-chart/index.d.ts CHANGED
@@ -11,5 +11,11 @@ export interface ILineChartProps<DataType = unknown> extends IBaseChartProps<Dat
11
11
  showChartTableButtonInHeader?: boolean;
12
12
  showDividerInHeader?: boolean;
13
13
  headerButtonsSize?: IIconButtonProps['size'];
14
+ chartStatus?: {
15
+ label: string;
16
+ color?: 'default' | 'warning' | 'danger' | 'success' | 'info';
17
+ };
18
+ titleIcon?: React.ReactNode;
19
+ isVertical?: boolean;
14
20
  }
15
21
  export declare function LineChart<DataType = unknown>(props: ILineChartProps<DataType>): React.JSX.Element;
package/line-chart/index.js CHANGED
@@ -69,18 +69,18 @@ var getThresholdColor = function (data, baseColor) {
69
69
  return data.hover === 'thresholdControl' || !data.hover ? baseColor : (0, quantum_product_1.alpha)(baseColor, 0.35);
70
70
  };
71
71
  function LineChart(props) {
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, _e = _a.allowDownload, allowDownload = _e === void 0 ? true : _e, _f = _a.showChartTable, showChartTable = _f === void 0 ? true : _f, _g = _a.showChartTableButtonInHeader, showChartTableButtonInHeader = _g === void 0 ? true : _g, _h = _a.showDividerInHeader, showDividerInHeader = _h === void 0 ? true : _h, _j = _a.headerButtonsSize, headerButtonsSize = _j === void 0 ? 'medium' : _j;
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, titleIcon = _a.titleIcon, chartStatus = _a.chartStatus, 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, finalMenuItem = _a.finalMenuItem, thresholds = _a.thresholds, breaches = _a.breaches, disableThresholdMenu = _a.disableThresholdMenu, _e = _a.allowDownload, allowDownload = _e === void 0 ? true : _e, _f = _a.showChartTable, showChartTable = _f === void 0 ? true : _f, _g = _a.showChartTableButtonInHeader, showChartTableButtonInHeader = _g === void 0 ? true : _g, _h = _a.showDividerInHeader, showDividerInHeader = _h === void 0 ? true : _h, _j = _a.headerButtonsSize, headerButtonsSize = _j === void 0 ? 'medium' : _j, _k = _a.isVertical, isVertical = _k === void 0 ? false : _k;
73
73
  var theme = (0, quantum_product_1.useTheme)();
74
- var _k = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'threshold-menu' }), triggerProps = _k.triggerProps, menuProps = _k.menuProps;
74
+ var _l = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'threshold-menu' }), triggerProps = _l.triggerProps, menuProps = _l.menuProps;
75
75
  // Function to know how many lines we need based of how much different group values are.
76
76
  var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
77
77
  var initialState = __assign({ hover: null }, groups.reduce(function (acc, group) {
78
78
  var _a;
79
79
  return (__assign(__assign({}, acc), (_a = {}, _a[group] = false, _a)));
80
80
  }, {}));
81
- var _l = __read(React.useState(initialState), 2), lineVisibility = _l[0], setLineVisibility = _l[1];
82
- var _m = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _m[0], setThreshold = _m[1];
83
- var _o = __read(React.useState(false), 2), isOpen = _o[0], setIsOpen = _o[1];
81
+ var _m = __read(React.useState(initialState), 2), lineVisibility = _m[0], setLineVisibility = _m[1];
82
+ var _o = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _o[0], setThreshold = _o[1];
83
+ var _p = __read(React.useState(false), 2), isOpen = _p[0], setIsOpen = _p[1];
84
84
  React.useEffect(function () {
85
85
  setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
86
86
  }, [thresholds]);
@@ -174,18 +174,24 @@ function LineChart(props) {
174
174
  } },
175
175
  React.createElement(quantum_product_1.TableIcon, null)))));
176
176
  return (React.createElement(React.Fragment, null,
177
- React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: (groups === null || groups === void 0 ? void 0 : groups.length) > 1 ? headerActionWithThresholdDropdown : headerAction, additionalMenuItems: additionalMenuItems, allowDownload: allowDownload, showChartTable: showChartTable, triggerButtonSize: headerButtonsSize },
177
+ React.createElement(chart_card_1.ChartCard, { title: title, chartStatus: chartStatus, value: value, dataTable: data, label: label, helperText: helperText, headerAction: (groups === null || groups === void 0 ? void 0 : groups.length) > 1 ? headerActionWithThresholdDropdown : headerAction, finalMenuItem: finalMenuItem, additionalMenuItems: additionalMenuItems, allowDownload: allowDownload, showChartTable: showChartTable, triggerButtonSize: headerButtonsSize, titleIcon: titleIcon, isVertical: isVertical },
178
178
  React.createElement(recharts_1.ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(recharts_1.ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
179
179
  top: 24,
180
180
  right: 10,
181
181
  left: -24,
182
- bottom: 0,
182
+ bottom: 24,
183
183
  } },
184
184
  React.createElement(recharts_1.CartesianGrid, { vertical: false, stroke: theme.tokens.color_border_default }),
185
185
  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 } }),
186
186
  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 } }),
187
187
  React.createElement(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, content: React.createElement(custom_tooltip_1.default, { active: undefined, payload: undefined, scaleType: bottomAxis.scaleType }) }),
188
- 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 }) })),
188
+ legend && isVertical ? (React.createElement(recharts_1.Legend, { align: "right", verticalAlign: "top", layout: "vertical", iconSize: 14, wrapperStyle: {
189
+ minWidth: '280px',
190
+ maxWidth: '320px',
191
+ justifyItems: 'start',
192
+ paddingLeft: '2em',
193
+ top: '15px',
194
+ }, content: React.createElement(custom_legend_1.CustomLegend, { title: title, helperText: helperText, selectData: selectLine, handleLegendMouseEnter: handleLegendMouseEnter, handleLegendMouseLeave: handleLegendMouseLeave, dataVisibility: lineVisibility, isVertical: isVertical, theme: theme }) })) : (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, theme: theme }) })),
189
195
  groups.map(function (group, index) {
190
196
  return (React.createElement(recharts_1.Line, { key: group, dataKey: group, name: group, strokeWidth: 3, hide: lineVisibility[group] === true, stroke: lineVisibility.hover === group || !lineVisibility.hover
191
197
  ? (0, theme_1.getColorScale)(theme)[color]['base'][index]
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@auth0/quantum-charts",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "sideEffects": false,
5
5
  "main": "./index.js",
6
6
  "types": "./index.d.ts",
7
7
  "license": "Apache-2.0",
8
8
  "author": "Okta, Inc.",
9
- "homepage": "https://main--62de9cdffb68e8a4ec657572.chromatic.com/?path=/story/quantum-charts-intro--page",
9
+ "homepage": "https://main--66a3d5d9a790a4817694c153.chromatic.com/?path=/story/quantum-charts-intro--docs",
10
10
  "repository": {
11
11
  "type": "git",
12
12
  "url": "https://github.com/auth0/quantum-product.git",