@auth0/quantum-charts 1.0.5 → 1.0.6
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.
- package/esm/line-chart/index.js +8 -4
- package/line-chart/index.d.ts +3 -2
- package/line-chart/index.js +8 -4
- package/package.json +1 -1
package/esm/line-chart/index.js
CHANGED
|
@@ -37,7 +37,7 @@ import { tickFormatter } from '../common/chart';
|
|
|
37
37
|
import { CustomLegend } from '../common/custom-legend';
|
|
38
38
|
import { DataTableChart } from '../chart-summary/data-table-chart';
|
|
39
39
|
export function LineChart(props) {
|
|
40
|
-
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;
|
|
40
|
+
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
41
|
var theme = useTheme();
|
|
42
42
|
var _e = useDropdownMenuState({ baseId: 'threshold-menu' }), triggerProps = _e.triggerProps, menuProps = _e.menuProps;
|
|
43
43
|
// Function to know how many lines we need based of how much different group values are.
|
|
@@ -49,6 +49,9 @@ export function LineChart(props) {
|
|
|
49
49
|
var _f = __read(React.useState(initialState), 2), lineVisibility = _f[0], setLineVisibility = _f[1];
|
|
50
50
|
var _g = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _g[0], setThreshold = _g[1];
|
|
51
51
|
var _h = __read(React.useState(false), 2), isOpen = _h[0], setIsOpen = _h[1];
|
|
52
|
+
React.useEffect(function () {
|
|
53
|
+
setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
|
|
54
|
+
}, [thresholds]);
|
|
52
55
|
var handleLegendMouseEnter = function (e) {
|
|
53
56
|
if (!lineVisibility[e.dataKey]) {
|
|
54
57
|
setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
|
|
@@ -129,9 +132,10 @@ export function LineChart(props) {
|
|
|
129
132
|
return menuItems;
|
|
130
133
|
}, [thresholds, menuProps]);
|
|
131
134
|
var headerActionWithThresholdDropdown = (React.createElement(StackLayout, { gutter: 1 },
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
+
!disableThresholdMenu && (React.createElement(React.Fragment, null,
|
|
136
|
+
React.createElement(Button, __assign({}, triggerProps, { startIcon: React.createElement(AlertDiamondIcon, null), endIcon: React.createElement(ChevronDownIcon, null), disabled: !threshold, variant: 'outlined', label: threshold ? threshold.threshold_label : 'No threshold' })),
|
|
137
|
+
React.createElement(DropdownMenu, __assign({}, menuProps, { items: menuItems })),
|
|
138
|
+
React.createElement(Divider, { orientation: "vertical" }))),
|
|
135
139
|
headerAction,
|
|
136
140
|
React.createElement(IconButton, { size: "small", label: "View table", onClick: function () {
|
|
137
141
|
setIsOpen(true);
|
package/line-chart/index.d.ts
CHANGED
|
@@ -2,7 +2,8 @@ import * as React from 'react';
|
|
|
2
2
|
import { IBaseChartProps } from '../common/chart';
|
|
3
3
|
export interface ILineChartProps<DataType = unknown> extends IBaseChartProps<DataType> {
|
|
4
4
|
syncId?: number | string;
|
|
5
|
-
thresholds?: object[];
|
|
6
|
-
breaches?: object[];
|
|
5
|
+
thresholds?: object[] | null;
|
|
6
|
+
breaches?: object[] | null;
|
|
7
|
+
disableThresholdMenu?: boolean;
|
|
7
8
|
}
|
|
8
9
|
export declare function LineChart<DataType = unknown>(props: ILineChartProps<DataType>): React.JSX.Element;
|
package/line-chart/index.js
CHANGED
|
@@ -66,7 +66,7 @@ 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
68
|
function LineChart(props) {
|
|
69
|
-
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;
|
|
69
|
+
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
70
|
var theme = (0, quantum_product_1.useTheme)();
|
|
71
71
|
var _e = (0, quantum_product_1.useDropdownMenuState)({ baseId: 'threshold-menu' }), triggerProps = _e.triggerProps, menuProps = _e.menuProps;
|
|
72
72
|
// Function to know how many lines we need based of how much different group values are.
|
|
@@ -78,6 +78,9 @@ function LineChart(props) {
|
|
|
78
78
|
var _f = __read(React.useState(initialState), 2), lineVisibility = _f[0], setLineVisibility = _f[1];
|
|
79
79
|
var _g = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _g[0], setThreshold = _g[1];
|
|
80
80
|
var _h = __read(React.useState(false), 2), isOpen = _h[0], setIsOpen = _h[1];
|
|
81
|
+
React.useEffect(function () {
|
|
82
|
+
setThreshold(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]);
|
|
83
|
+
}, [thresholds]);
|
|
81
84
|
var handleLegendMouseEnter = function (e) {
|
|
82
85
|
if (!lineVisibility[e.dataKey]) {
|
|
83
86
|
setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
|
|
@@ -158,9 +161,10 @@ function LineChart(props) {
|
|
|
158
161
|
return menuItems;
|
|
159
162
|
}, [thresholds, menuProps]);
|
|
160
163
|
var headerActionWithThresholdDropdown = (React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
+
!disableThresholdMenu && (React.createElement(React.Fragment, null,
|
|
165
|
+
React.createElement(quantum_product_1.Button, __assign({}, triggerProps, { startIcon: React.createElement(quantum_product_1.AlertDiamondIcon, null), endIcon: React.createElement(quantum_product_1.ChevronDownIcon, null), disabled: !threshold, variant: 'outlined', label: threshold ? threshold.threshold_label : 'No threshold' })),
|
|
166
|
+
React.createElement(quantum_product_1.DropdownMenu, __assign({}, menuProps, { items: menuItems })),
|
|
167
|
+
React.createElement(quantum_product_1.Divider, { orientation: "vertical" }))),
|
|
164
168
|
headerAction,
|
|
165
169
|
React.createElement(quantum_product_1.IconButton, { size: "small", label: "View table", onClick: function () {
|
|
166
170
|
setIsOpen(true);
|