@perses-dev/components 0.23.1 → 0.25.0

package/dist/cjs/LineChart/LineChart.js

@@ -19,7 +19,7 @@ Object.defineProperty(exports, "LineChart", {
     get: ()=>LineChart
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
 const _core = require("echarts/core");
 const _charts = require("echarts/charts");
@@ -31,6 +31,45 @@ const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _timeSeriesTooltip = require("../TimeSeriesTooltip");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("./utils");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 (0, _core.use)([
     _charts.LineChart,
     _components.GridComponent,

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -47,7 +47,7 @@ const OptionsEditorControl = ({ label , control  })=>{
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     sx: {
-                        width: '160px',
+                        width: '150px',
                         textAlign: 'right'
                     },
                     children: [

package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.js

@@ -20,16 +20,33 @@ Object.defineProperty(exports, "OptionsEditorGroup", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const OptionsEditorGroup = ({ title , children  })=>{
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const OptionsEditorGroup = ({ title , children , icon  })=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                variant: "overline",
-                component: "h4",
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                display: "flex",
                 borderBottom: 1,
                 borderColor: "grey.300",
                 marginBottom: (theme)=>theme.spacing(1),
-                children: title
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "overline",
+                        component: "h4",
+                        children: title
+                    }),
+                    icon && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        children: icon
+                    })
+                ]
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
                 spacing: 1,

package/dist/cjs/StatChart/StatChart.js

@@ -19,7 +19,7 @@ Object.defineProperty(exports, "StatChart", {
     get: ()=>StatChart
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
 const _lodashEs = require("lodash-es");
 const _core = require("echarts/core");
@@ -29,47 +29,7 @@ const _renderers = require("echarts/renderers");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _units = require("../model/units");
 const _echart = require("../EChart");
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interopRequireWildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
 (0, _core.use)([
-    _charts.GaugeChart,
     _charts.LineChart,
     _components.GridComponent,
     _components.DatasetComponent,

package/dist/cjs/ThresholdsEditor/ThresholdColorPicker.js

@@ -0,0 +1,87 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ThresholdColorPicker", {
+    enumerable: true,
+    get: ()=>ThresholdColorPicker
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _material = require("@mui/material");
+const _circle = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Circle"));
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _colorPicker = require("../ColorPicker");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function ThresholdColorPicker({ color , onColorChange , label  }) {
+    const [anchorEl, setAnchorEl] = _react.default.useState(null);
+    const isOpen = Boolean(anchorEl);
+    const openColorPicker = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const closeColorPicker = ()=>{
+        setAnchorEl(null);
+    };
+    const { thresholds: { defaultColor , palette  } ,  } = (0, _chartsThemeProvider.useChartsTheme)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(ColorIconButton, {
+                size: "small",
+                "aria-label": `change threshold ${label} color`,
+                isSelected: isOpen,
+                iconColor: color,
+                onClick: openColorPicker,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_circle.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Popover, {
+                "data-testid": "threshold color picker",
+                open: isOpen,
+                anchorEl: anchorEl,
+                onClose: closeColorPicker,
+                PaperProps: {
+                    sx: {
+                        padding: (theme)=>theme.spacing(2)
+                    }
+                },
+                anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left'
+                },
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_colorPicker.ColorPicker, {
+                    color: color,
+                    onChange: onColorChange,
+                    palette: [
+                        defaultColor,
+                        ...palette
+                    ]
+                })
+            })
+        ]
+    });
+}
+const ColorIconButton = (0, _material.styled)(_material.IconButton, {
+    shouldForwardProp: (props)=>props !== 'isSelected' && props !== 'iconColor'
+})(({ iconColor , isSelected  })=>({
+        backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined',
+        color: iconColor
+    }));

package/dist/cjs/ThresholdsEditor/ThresholdInput.js

@@ -0,0 +1,72 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ThresholdInput", {
+    enumerable: true,
+    get: ()=>ThresholdInput
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
+const _thresholdColorPicker = require("./ThresholdColorPicker");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function ThresholdInput({ inputRef , label , color , value , onChange , onColorChange , onBlur , onDelete  }) {
+    const [key, setKey] = (0, _react.useState)(0); // use key to cause input to lose focus when pressing enter
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        flex: 1,
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_thresholdColorPicker.ThresholdColorPicker, {
+                label: label,
+                color: color,
+                onColorChange: onColorChange
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormLabel, {
+                htmlFor: label,
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                id: label,
+                inputRef: inputRef,
+                type: "number",
+                value: value === 0 ? undefined : value,
+                placeholder: "0",
+                onChange: onChange,
+                onBlur: onBlur,
+                onKeyDown: (e)=>{
+                    if (e.key === 'Enter') {
+                        onBlur();
+                        setKey(key + 1);
+                    }
+                }
+            }, key),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                "aria-label": `delete threshold ${label}`,
+                size: "small",
+                onClick: onDelete,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+            })
+        ]
+    });
+}

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -0,0 +1,265 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ThresholdsEditor", {
+    enumerable: true,
+    get: ()=>ThresholdsEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _immer = /*#__PURE__*/ _interopRequireDefault(require("immer"));
+const _material = require("@mui/material");
+const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
+const _system = require("@mui/system");
+const _infoTooltip = require("../InfoTooltip");
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _optionsEditorLayout = require("../OptionsEditorLayout");
+const _thresholdColorPicker = require("./ThresholdColorPicker");
+const _thresholdInput = require("./ThresholdInput");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const DEFAULT_STEP = 10;
+function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercentMode  }) {
+    const { thresholds: { defaultColor , palette  } ,  } = (0, _chartsThemeProvider.useChartsTheme)();
+    var ref;
+    const defaultThresholdColor = (ref = thresholds === null || thresholds === void 0 ? void 0 : thresholds.default_color) !== null && ref !== void 0 ? ref : defaultColor;
+    const [steps, setSteps] = (0, _react.useState)(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
+    (0, _react.useEffect)(()=>{
+        setSteps(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
+    }, [
+        thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps
+    ]);
+    // every time a new threshold is added, we want to focus the recently added input
+    const recentlyAddedInputRef = (0, _react.useRef)(null);
+    const focusRef = (0, _react.useRef)(false);
+    (0, _react.useEffect)(()=>{
+        var ref;
+        if (!recentlyAddedInputRef.current || !focusRef.current) return;
+        (ref = recentlyAddedInputRef.current) === null || ref === void 0 ? void 0 : ref.focus();
+        focusRef.current = false;
+    }, [
+        steps === null || steps === void 0 ? void 0 : steps.length
+    ]);
+    const handleThresholdValueChange = (e, i)=>{
+        setSteps((0, _immer.default)(steps, (draft)=>{
+            const step = draft === null || draft === void 0 ? void 0 : draft[i];
+            if (step) {
+                step.value = Number(e.target.value);
+            }
+        }));
+    };
+    const handleThresholdColorChange = (color, i)=>{
+        if (thresholds !== undefined) {
+            onChange((0, _immer.default)(thresholds, (draft)=>{
+                if (draft.steps !== undefined) {
+                    const step = draft.steps[i];
+                    if (step) {
+                        step.color = color;
+                    }
+                }
+            }));
+        }
+    };
+    const handleDefaultColorChange = (color)=>{
+        if (thresholds !== undefined) {
+            onChange((0, _immer.default)(thresholds, (draft)=>{
+                draft.default_color = color;
+            }));
+        }
+    };
+    // sort thresholds in ascending order every time an input blurs
+    const handleThresholdBlur = ()=>{
+        if (steps !== undefined) {
+            const sortedSteps = [
+                ...steps
+            ];
+            sortedSteps.sort((a, b)=>a.value - b.value);
+            if (thresholds !== undefined) {
+                onChange((0, _immer.default)(thresholds, (draft)=>{
+                    draft.steps = sortedSteps;
+                }));
+            }
+        }
+    };
+    const deleteThreshold = (i)=>{
+        if (thresholds !== undefined) {
+            const updatedThresholds = (0, _immer.default)(thresholds, (draft)=>{
+                if (draft.steps) {
+                    draft.steps.splice(i, 1);
+                }
+            });
+            onChange(updatedThresholds);
+        }
+    };
+    const addThresholdInput = ()=>{
+        focusRef.current = true;
+        if (thresholds === undefined) {
+            onChange({
+                steps: [
+                    {
+                        value: DEFAULT_STEP
+                    }
+                ]
+            });
+        } else {
+            onChange((0, _immer.default)(thresholds, (draft)=>{
+                const steps = draft.steps;
+                if (steps === null || steps === void 0 ? void 0 : steps.length) {
+                    const lastStep = steps[steps.length - 1];
+                    var _length;
+                    const color = (_length = palette[steps.length]) !== null && _length !== void 0 ? _length : getRandomColor(); // we will assign color from the palette first, then generate random color
+                    var ref;
+                    steps.push({
+                        color,
+                        value: ((ref = lastStep === null || lastStep === void 0 ? void 0 : lastStep.value) !== null && ref !== void 0 ? ref : 0) + DEFAULT_STEP
+                    }); // set new threshold value to last step value + 10
+                } else if (steps) {
+                    steps.push({
+                        value: DEFAULT_STEP
+                    });
+                }
+            }));
+        }
+    };
+    const handleModeChange = (event, value)=>{
+        const mode = value === 'Percent' ? 'Percent' : undefined;
+        if (thresholds !== undefined) {
+            onChange((0, _immer.default)(thresholds, (draft)=>{
+                draft.mode = mode;
+            }));
+        } else {
+            onChange({
+                mode
+            });
+        }
+    };
+    var ref1, _color, ref2;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_optionsEditorLayout.OptionsEditorGroup, {
+        title: "Thresholds",
+        icon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            "aria-label": "add threshold",
+            onClick: addThresholdInput,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {})
+        }),
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.ToggleButtonGroup, {
+                exclusive: true,
+                disabled: disablePercentMode,
+                value: (ref1 = thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode) !== null && ref1 !== void 0 ? ref1 : 'Absolute',
+                onChange: handleModeChange,
+                sx: {
+                    height: '36px',
+                    marginLeft: 'auto'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ToggleButton, {
+                        "aria-label": "absolute",
+                        value: "Absolute",
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_infoTooltip.InfoTooltip, {
+                            description: "Absolute",
+                            children: "#"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ToggleButton, {
+                        "aria-label": "percent",
+                        value: "Percent",
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_infoTooltip.InfoTooltip, {
+                            description: "Percentage means thresholds relative to min & max",
+                            children: "%"
+                        })
+                    })
+                ]
+            }),
+            steps && steps.map((step, i)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_thresholdInput.ThresholdInput, {
+                    inputRef: i === steps.length - 1 ? recentlyAddedInputRef : undefined,
+                    label: `T${i + 1}`,
+                    color: (ref2 = (_color = step.color) !== null && _color !== void 0 ? _color : palette[i]) !== null && ref2 !== void 0 ? ref2 : defaultThresholdColor,
+                    value: step.value,
+                    onColorChange: (color)=>handleThresholdColorChange(color, i),
+                    onChange: (e)=>{
+                        handleThresholdValueChange(e, i);
+                    },
+                    onDelete: ()=>{
+                        deleteThreshold(i);
+                    },
+                    onBlur: handleThresholdBlur
+                }, i)).reverse(),
+            !hideDefault && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_system.Stack, {
+                flex: 1,
+                direction: "row",
+                alignItems: "center",
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_thresholdColorPicker.ThresholdColorPicker, {
+                        label: "default",
+                        color: defaultThresholdColor,
+                        onColorChange: handleDefaultColorChange
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        children: "Default"
+                    })
+                ]
+            })
+        ]
+    });
+}
+// https://www.paulirish.com/2009/random-hex-color-code-snippets/
+const getRandomColor = ()=>{
+    return '#' + Math.floor(Math.random() * 16777216).toString(16).padStart(6, '0');
+};

package/dist/cjs/ThresholdsEditor/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./ThresholdsEditor"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/TimeSeriesTooltip/focused-series.js

@@ -47,9 +47,9 @@ function getNearbySeries(data, pointInGrid, yBuffer, unit) {
                     for(let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++){
                         var _datumIdx;
                         const xValue = (_datumIdx = data.xAxis[datumIdx]) !== null && _datumIdx !== void 0 ? _datumIdx : 0;
-                        var _datumIdx1;
-                        const yValue = (_datumIdx1 = currentSeries.data[datumIdx]) !== null && _datumIdx1 !== void 0 ? _datumIdx1 : 0;
-                        if (focusedX === datumIdx) {
+                        const yValue = currentSeries.data[datumIdx];
+                        // ensure null values not displayed in tooltip
+                        if (yValue !== undefined && yValue !== null && focusedX === datumIdx) {
                             if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {
                                 // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
                                 const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;

package/dist/cjs/index.js

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_exportStar(require("./ColorPicker"), exports);
 _exportStar(require("./DateTimeRangePicker"), exports);
 _exportStar(require("./Dialog"), exports);
 _exportStar(require("./Drawer"), exports);
@@ -28,6 +29,7 @@ _exportStar(require("./LegendOptionsEditor"), exports);
 _exportStar(require("./LineChart"), exports);
 _exportStar(require("./OptionsEditorLayout"), exports);
 _exportStar(require("./StatChart"), exports);
+_exportStar(require("./ThresholdsEditor"), exports);
 _exportStar(require("./TimeSeriesTooltip"), exports);
 _exportStar(require("./UnitSelector"), exports);
 _exportStar(require("./YAxisLabel"), exports);

package/dist/cjs/test-utils/theme.js

@@ -29,5 +29,13 @@ const testChartsTheme = {
         padding: {
             default: 12
         }
+    },
+    thresholds: {
+        defaultColor: '#59CC8D',
+        palette: [
+            '#438FEB',
+            '#FFB249',
+            '#EE6C6C'
+        ]
     }
 };