@perses-dev/components 0.0.0-snapshot-embed-import-errors-8906900 → 0.0.0-snapshot-test-internal-dep-dd238ac

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/SeriesInfo.js

@@ -0,0 +1,95 @@
+// 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, "SeriesInfo", {
+    enumerable: true,
+    get: ()=>SeriesInfo
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _seriesMarker = require("./SeriesMarker");
+const _seriesLabelsStack = require("./SeriesLabelsStack");
+const _tooltipModel = require("./tooltip-model");
+function SeriesInfo(props) {
+    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels  } = props;
+    // metric __name__ comes before opening curly brace, ignore if not populated
+    // ex with metric name: node_load15{env="demo",job="node"}
+    // ex without metric name: {env="demo",job="node"}
+    const splitName = seriesName.split('{');
+    var ref;
+    const seriesLabels = (ref = splitName[1]) !== null && ref !== void 0 ? ref : seriesName;
+    // remove curly braces that wrap labels
+    const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');
+    // determine whether to show labels on separate lines
+    const splitLabels = formattedSeriesLabels.split(',');
+    if (totalSeries === 1 && splitLabels.length > 1) {
+        const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesLabelsStack.SeriesLabelsStack, {
+            formattedY: formattedY,
+            metricName: metricName,
+            metricLabels: splitLabels,
+            markerColor: markerColor
+        });
+    }
+    // add space after commas when more than one focused series
+    const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ');
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+            display: 'table-row',
+            paddingTop: 0.5
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                    display: 'table-cell',
+                    maxWidth: '520px'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesMarker.SeriesMarker, {
+                        markerColor: markerColor,
+                        sx: {
+                            marginTop: 0.5
+                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                        component: "span",
+                        sx: (theme)=>({
+                                display: 'inline-block',
+                                width: 'calc(100% - 20px)',
+                                minWidth: 150,
+                                maxWidth: _tooltipModel.TOOLTIP_LABELS_MAX_WIDTH,
+                                overflow: 'hidden',
+                                color: theme.palette.common.white,
+                                textOverflow: 'ellipsis',
+                                whiteSpace: wrapLabels ? 'normal' : 'nowrap'
+                            }),
+                        children: inlineSeriesLabels
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                    display: 'table-cell',
+                    paddingLeft: 1.5,
+                    textAlign: 'right',
+                    verticalAlign: 'top',
+                    fontWeight: '700'
+                },
+                children: formattedY
+            })
+        ]
+    });
+}

package/dist/cjs/TimeSeriesTooltip/SeriesLabelsStack.js

@@ -0,0 +1,105 @@
+// 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, "SeriesLabelsStack", {
+    enumerable: true,
+    get: ()=>SeriesLabelsStack
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _seriesMarker = require("./SeriesMarker");
+function SeriesLabelsStack(props) {
+    const { formattedY , markerColor , metricName , metricLabels  } = props;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 0.5,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: (theme)=>({
+                        display: 'flex',
+                        height: '16px',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'left',
+                        color: theme.palette.common.white,
+                        fontSize: '11px'
+                    }),
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesMarker.SeriesMarker, {
+                        markerColor: markerColor,
+                        sx: {
+                            marginTop: 0.25
+                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                        component: "span",
+                        children: [
+                            metricName,
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                                component: "span",
+                                sx: (theme)=>({
+                                        color: theme.palette.common.white,
+                                        fontWeight: 700,
+                                        paddingLeft: '2px'
+                                    }),
+                                children: formattedY
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {
+                sx: (theme)=>({
+                        borderColor: theme.palette.grey['500']
+                    })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                sx: (theme)=>({
+                        color: theme.palette.common.white
+                    }),
+                children: metricLabels.map((label)=>{
+                    // show labels on separate lines when many labels and only one focused series
+                    if (label) {
+                        const [name, value] = label.split('=');
+                        const formattedName = value !== undefined ? `${name}: ` : name;
+                        const formattedValue = value !== undefined ? value.replace(/(^"|"$)/g, '') : value;
+                        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                            sx: {
+                                display: 'flex',
+                                gap: '4px'
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                    sx: {
+                                        fontSize: '11px'
+                                    },
+                                    children: formattedName
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                    sx: (theme)=>({
+                                            color: theme.palette.common.white,
+                                            fontWeight: 700,
+                                            fontSize: '11px'
+                                        }),
+                                    children: formattedValue
+                                })
+                            ]
+                        }, label);
+                    }
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/{Tooltip → TimeSeriesTooltip}/SeriesMarker.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -20,18 +20,18 @@ Object.defineProperty(exports, "SeriesMarker", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _utils = require("../utils");
 function SeriesMarker(props) {
-    const { markerColor  } = props;
+    const { markerColor , sx  } = props;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
+        sx: (0, _utils.combineSx)({
             display: 'inline-block',
-            width: '12px',
+            width: '11px',
+            height: '11px',
             borderRadius: '2px',
-            height: '12px',
-            marginTop: 0.25,
             marginRight: 1,
             verticalAlign: 'top'
-        },
+        }, sx),
         style: {
             backgroundColor: markerColor
         }

package/dist/cjs/{Tooltip/Tooltip.js → TimeSeriesTooltip/TimeSeriesTooltip.js}

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -14,9 +14,9 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "Tooltip", {
+Object.defineProperty(exports, "TimeSeriesTooltip", {
     enumerable: true,
-    get: ()=>Tooltip
+    get: ()=>TimeSeriesTooltip
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -64,7 +64,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const Tooltip = /*#__PURE__*/ _react.default.memo(function Tooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
+const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
     const [pinnedPos, setPinnedPos] = (0, _react.useState)(null);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     if (mousePos === null || mousePos.target === null) return null;

package/dist/cjs/{Tooltip → TimeSeriesTooltip}/TooltipContent.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/{Tooltip → TimeSeriesTooltip}/focused-series.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -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;
@@ -99,9 +99,9 @@ function getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit) {
     if (chart['_model'] === undefined) return [];
     const chartModel = chart['_model'];
     const yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;
+    // tooltip trigger area gets smaller with more series, increase yAxisInterval multiplier to expand nearby series range
     const seriesNum = chartData.timeSeries.length;
-    // tooltip trigger area gets smaller with more series
-    const yBuffer = seriesNum > _tooltipModel.TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 2;
+    const yBuffer = seriesNum > _tooltipModel.TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 5;
     var _x, _y;
     const pointInPixel = [
         (_x = mousePos.plotCanvas.x) !== null && _x !== void 0 ? _x : 0,

package/dist/cjs/TimeSeriesTooltip/index.js

@@ -0,0 +1,35 @@
+// 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("./TimeSeriesTooltip"), exports);
+_exportStar(require("./SeriesInfo"), exports);
+_exportStar(require("./SeriesLabelsStack"), exports);
+_exportStar(require("./SeriesMarker"), exports);
+_exportStar(require("./TooltipContent"), exports);
+_exportStar(require("./focused-series"), exports);
+_exportStar(require("./tooltip-model"), exports);
+_exportStar(require("./utils"), 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/{Tooltip → TimeSeriesTooltip}/tooltip-model.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/{Tooltip → TimeSeriesTooltip}/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/UnitSelector/UnitSelector.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/UnitSelector/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/YAxisLabel.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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