@perses-dev/components 0.30.0 → 0.32.0

package/dist/cjs/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -20,10 +20,11 @@ Object.defineProperty(exports, "TimeSeriesTooltip", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _react = require("react");
 const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
 const _tooltipContent = require("./TooltipContent");
-const _focusedSeries = require("./focused-series");
+const _tooltipHeader = require("./TooltipHeader");
+const _nearbySeries = require("./nearby-series");
 const _tooltipModel = require("./tooltip-model");
 const _utils = require("./utils");
 function _interopRequireDefault(obj) {
@@ -31,73 +32,46 @@ function _interopRequireDefault(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 TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
-    const [pinnedPos, setPinnedPos] = (0, _react.useState)(null);
+const TimeSeriesTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+    const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
+    const isTooltipPinned = pinnedPos !== null;
     if (mousePos === null || mousePos.target === null) return null;
-    // ensure user is hovering over a chart before checking for nearby series
+    // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
-    const focusedSeries = (0, _focusedSeries.getFocusedSeriesData)(mousePos, chartData, pinnedPos, chart, unit);
     var ref;
-    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : 750;
-    const cursorTransform = (0, _utils.assembleTransform)(mousePos, focusedSeries.length, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
-    if (focusedSeries.length === 0) {
+    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : _tooltipModel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
+    const cursorTransform = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
+    // Get series nearby the cursor and pass into tooltip content children.
+    const nearbySeries = (0, _nearbySeries.getNearbySeriesData)({
+        mousePos,
+        chartData,
+        pinnedPos,
+        chart,
+        unit,
+        showAllSeries
+    });
+    if (nearbySeries.length === 0) {
         return null;
     }
-    if (pinTooltip === true && pinnedPos === null) {
-        setPinnedPos(mousePos);
-    }
+    const totalSeries = chartData.timeSeries.length;
+    var ref1;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             ref: tooltipRef,
-            sx: (theme)=>({
+            sx: (theme)=>{
+                var ref;
+                return {
+                    minWidth: _tooltipModel.TOOLTIP_MIN_WIDTH,
                     maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
                     maxHeight: _tooltipModel.TOOLTIP_MAX_HEIGHT,
+                    padding: 0,
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    backgroundColor: '#2E313E',
+                    backgroundColor: (ref1 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref1 !== void 0 ? ref1 : _tooltipModel.TOOLTIP_BG_COLOR_FALLBACK,
                     borderRadius: '6px',
                     color: '#fff',
                     fontSize: '11px',
@@ -109,13 +83,27 @@ const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesT
                     '&:hover': {
                         overflowY: 'auto'
                     }
-                }),
+                };
+            },
             style: {
                 transform: cursorTransform
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
-                focusedSeries: focusedSeries,
-                wrapLabels: wrapLabels
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipHeader.TooltipHeader, {
+                        nearbySeries: nearbySeries,
+                        totalSeries: totalSeries,
+                        isTooltipPinned: isTooltipPinned,
+                        showAllSeries: showAllSeries,
+                        onShowAllClick: (checked)=>setShowAllSeries(checked),
+                        onUnpinClick: onUnpinClick
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
+                        series: nearbySeries,
+                        wrapLabels: wrapLabels
+                    })
+                ]
             })
         })
     });

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js

@@ -21,75 +21,36 @@ Object.defineProperty(exports, "TooltipContent", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _seriesInfo = require("./SeriesInfo");
 function TooltipContent(props) {
-    const { focusedSeries , wrapLabels  } = props;
-    const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
-    const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;
-    const formatTimeSeriesHeader = (timeMs)=>{
-        const date = new Date(timeMs);
-        const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
-        const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
-        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                    variant: "caption",
-                    sx: (theme)=>({
-                            color: theme.palette.common.white
-                        }),
-                    children: formattedDate
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                    variant: "caption",
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("strong", {
-                        children: formattedTime
-                    })
-                })
-            ]
-        });
-    };
+    const { series , wrapLabels  } = props;
     const sortedFocusedSeries = (0, _react.useMemo)(()=>{
-        if (focusedSeries === null) return null;
-        return focusedSeries.sort((a, b)=>a.y > b.y ? -1 : 1);
+        if (series === null) return null;
+        return series.sort((a, b)=>a.y > b.y ? -1 : 1);
     }, [
-        focusedSeries
+        series
     ]);
-    if (sortedFocusedSeries !== null && seriesTime !== null) {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-            py: 1,
-            px: 1.5,
-            spacing: 0.5,
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                    variant: "caption",
-                    children: formatTimeSeriesHeader(seriesTime)
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {
-                    sx: (theme)=>({
-                            borderColor: theme.palette.grey['500']
-                        })
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                    sx: {
-                        display: 'table'
-                    },
-                    children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor  })=>{
-                        if (datumIdx === null || seriesIdx === null) return null;
-                        const key = seriesIdx.toString() + datumIdx.toString();
-                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesInfo.SeriesInfo, {
-                            seriesName: seriesName,
-                            y: y,
-                            formattedY: formattedY,
-                            markerColor: markerColor,
-                            totalSeries: sortedFocusedSeries.length,
-                            wrapLabels: wrapLabels
-                        }, key);
-                    })
-                })
-            ]
-        });
-    } else {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+    if (series === null || sortedFocusedSeries === null) {
+        return null;
     }
+    // TODO: use react-virtuoso to improve performance
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: (theme)=>({
+                display: 'table',
+                padding: theme.spacing(0.5, 2)
+            }),
+        children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor , isClosestToCursor  })=>{
+            if (datumIdx === null || seriesIdx === null) return null;
+            const key = seriesIdx.toString() + datumIdx.toString();
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesInfo.SeriesInfo, {
+                seriesName: seriesName,
+                y: y,
+                formattedY: formattedY,
+                markerColor: markerColor,
+                totalSeries: sortedFocusedSeries.length,
+                wrapLabels: wrapLabels,
+                emphasizeText: isClosestToCursor
+            }, key);
+        })
+    });
 }

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -0,0 +1,174 @@
+// 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, "TooltipHeader", {
+    enumerable: true,
+    get: ()=>TooltipHeader
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _pin = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pin"));
+const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
+const _react = require("react");
+const _timeZoneProvider = require("../context/TimeZoneProvider");
+const _tooltipModel = require("./tooltip-model");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , onShowAllClick , onUnpinClick  }) {
+    var ref;
+    const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    var ref1;
+    const seriesTimeMs = (ref1 = (ref = nearbySeries[0]) === null || ref === void 0 ? void 0 : ref.date) !== null && ref1 !== void 0 ? ref1 : null;
+    if (seriesTimeMs === null) {
+        return null;
+    }
+    const formatTimeSeriesHeader = (timeMs)=>{
+        const date = new Date(timeMs);
+        const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
+        const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
+        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                    variant: "caption",
+                    sx: (theme)=>({
+                            color: theme.palette.common.white
+                        }),
+                    children: formattedDate
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                    variant: "caption",
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("strong", {
+                        children: formattedTime
+                    })
+                })
+            ]
+        });
+    };
+    // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT
+    const showAllSeriesToggle = totalSeries > 5;
+    var ref2;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: (theme)=>{
+            var ref;
+            return {
+                width: '100%',
+                maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
+                padding: theme.spacing(1.5, 2, 0.5, 2),
+                backgroundColor: (ref2 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref2 !== void 0 ? ref2 : _tooltipModel.TOOLTIP_BG_COLOR_FALLBACK,
+                position: 'sticky',
+                top: 0,
+                left: 0
+            };
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'start',
+                    alignItems: 'center',
+                    paddingBottom: 0.5
+                },
+                children: [
+                    formatTimeSeriesHeader(seriesTimeMs),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        gap: 1,
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        children: [
+                            showAllSeriesToggle && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                                direction: "row",
+                                gap: 0.5,
+                                alignItems: "center",
+                                sx: {
+                                    textAlign: 'right'
+                                },
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                        sx: {
+                                            fontSize: 11
+                                        },
+                                        children: "Show All"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                        checked: showAllSeries,
+                                        size: "small",
+                                        onChange: (_, checked)=>{
+                                            if (onShowAllClick !== undefined) {
+                                                return onShowAllClick(checked);
+                                            }
+                                        },
+                                        sx: (theme)=>({
+                                                '& .MuiSwitch-switchBase': {
+                                                    color: theme.palette.common.white
+                                                },
+                                                '& .MuiSwitch-track': {
+                                                    backgroundColor: theme.palette.common.white
+                                                }
+                                            })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                                direction: "row",
+                                alignItems: "center",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
+                                        sx: {
+                                            marginRight: 0.5,
+                                            fontSize: 11,
+                                            verticalAlign: 'middle'
+                                        },
+                                        children: [
+                                            "Click to ",
+                                            isTooltipPinned ? 'Unpin' : 'Pin'
+                                        ]
+                                    }),
+                                    isTooltipPinned ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pin.default, {
+                                        onClick: ()=>{
+                                            if (onUnpinClick !== undefined) {
+                                                onUnpinClick();
+                                            }
+                                        },
+                                        sx: {
+                                            fontSize: 16,
+                                            cursor: 'pointer'
+                                        }
+                                    }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {
+                                        sx: {
+                                            fontSize: 16
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {
+                sx: (theme)=>({
+                        width: '100%',
+                        borderColor: theme.palette.grey['500']
+                    })
+            })
+        ]
+    });
+});

package/dist/cjs/TimeSeriesTooltip/index.js

@@ -19,7 +19,8 @@ _exportStar(require("./SeriesInfo"), exports);
 _exportStar(require("./SeriesLabelsStack"), exports);
 _exportStar(require("./SeriesMarker"), exports);
 _exportStar(require("./TooltipContent"), exports);
-_exportStar(require("./focused-series"), exports);
+_exportStar(require("./TooltipHeader"), exports);
+_exportStar(require("./nearby-series"), exports);
 _exportStar(require("./tooltip-model"), exports);
 _exportStar(require("./utils"), exports);
 function _exportStar(from, to) {

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

@@ -0,0 +1,206 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    INCREASE_NEARBY_SERIES_MULTIPLIER: ()=>INCREASE_NEARBY_SERIES_MULTIPLIER,
+    DYNAMIC_NEARBY_SERIES_MULTIPLIER: ()=>DYNAMIC_NEARBY_SERIES_MULTIPLIER,
+    SHOW_FEWER_SERIES_LIMIT: ()=>SHOW_FEWER_SERIES_LIMIT,
+    checkforNearbySeries: ()=>checkforNearbySeries,
+    getNearbySeriesData: ()=>getNearbySeriesData,
+    isWithinPercentageRange: ()=>isWithinPercentageRange,
+    getYBuffer: ()=>getYBuffer
+});
+const _model = require("../model");
+const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show in tooltip (higher == more series shown)
+const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor
+const SHOW_FEWER_SERIES_LIMIT = 5;
+function checkforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
+    const currentNearbySeriesData = [];
+    var ref;
+    const cursorX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
+    var ref1;
+    const cursorY = (ref1 = pointInGrid[1]) !== null && ref1 !== void 0 ? ref1 : null;
+    if (cursorX === null || cursorY === null) {
+        return currentNearbySeriesData;
+    }
+    const nearbySeriesIndexes = [];
+    const emphasizedSeriesIndexes = [];
+    const nonEmphasizedSeriesIndexes = [];
+    const totalSeries = data.timeSeries.length;
+    if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {
+        for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
+            const currentSeries = data.timeSeries[seriesIdx];
+            if (currentNearbySeriesData.length >= _model.OPTIMIZED_MODE_SERIES_LIMIT) break;
+            if (currentSeries !== undefined) {
+                const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';
+                var _color;
+                const markerColor = (_color = currentSeries.color) !== null && _color !== void 0 ? _color : '#000';
+                if (Array.isArray(currentSeries.data)) {
+                    for(let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++){
+                        var _datumIdx;
+                        const xValue = (_datumIdx = data.xAxis[datumIdx]) !== null && _datumIdx !== void 0 ? _datumIdx : 0;
+                        const yValue = currentSeries.data[datumIdx];
+                        // ensure null values not displayed in tooltip
+                        if (yValue !== undefined && yValue !== null && cursorX === datumIdx) {
+                            if (yValue !== '-' && cursorY <= yValue + yBuffer && cursorY >= yValue - yBuffer) {
+                                // show fewer bold series in tooltip when many total series
+                                const minPercentRange = totalSeries > SHOW_FEWER_SERIES_LIMIT ? 2 : 5;
+                                const percentRangeToCheck = Math.max(minPercentRange, 100 / totalSeries);
+                                const isClosestToCursor = isWithinPercentageRange({
+                                    valueToCheck: cursorY,
+                                    baseValue: yValue,
+                                    percentage: percentRangeToCheck
+                                });
+                                if (isClosestToCursor) {
+                                    emphasizedSeriesIndexes.push(seriesIdx);
+                                } else {
+                                    nonEmphasizedSeriesIndexes.push(seriesIdx);
+                                    // ensure series not close to cursor are not highlighted
+                                    if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+                                        chart.dispatchAction({
+                                            type: 'downplay',
+                                            seriesIndex: seriesIdx
+                                        });
+                                    }
+                                }
+                                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
+                                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
+                                const formattedY = (0, _model.formatValue)(yValue, unit);
+                                currentNearbySeriesData.push({
+                                    seriesIdx: seriesIdx,
+                                    datumIdx: datumIdx,
+                                    seriesName: currentSeriesName,
+                                    date: xValueMilliSeconds,
+                                    x: xValue,
+                                    y: yValue,
+                                    formattedY: formattedY,
+                                    markerColor: markerColor.toString(),
+                                    isClosestToCursor
+                                });
+                                nearbySeriesIndexes.push(seriesIdx);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+        // Clears emphasis state of all lines that are not emphasized.
+        // Emphasized is a subset of just the nearby series that are closest to cursor.
+        chart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: nonEmphasizedSeriesIndexes
+        });
+        // https://echarts.apache.org/en/api.html#action.highlight
+        if (emphasizedSeriesIndexes.length > 0) {
+            // Fadeout opacity of all series not closest to cursor.
+            chart.dispatchAction({
+                type: 'highlight',
+                seriesIndex: emphasizedSeriesIndexes,
+                notBlur: false
+            });
+        } else {
+            // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.
+            chart.dispatchAction({
+                type: 'highlight',
+                seriesIndex: nearbySeriesIndexes,
+                notBlur: true
+            });
+        }
+    }
+    return currentNearbySeriesData;
+}
+function getNearbySeriesData({ mousePos , pinnedPos , chartData , chart , unit , showAllSeries =false  }) {
+    if (chart === undefined || mousePos === null) return [];
+    // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
+    let cursorTargetMatchesChart = false;
+    if (mousePos.target !== null) {
+        const currentParent = mousePos.target.parentElement;
+        if (currentParent !== null) {
+            const currentGrandparent = currentParent.parentElement;
+            if (currentGrandparent !== null) {
+                const chartDom = chart.getDom();
+                if (chartDom === currentGrandparent) {
+                    cursorTargetMatchesChart = true;
+                }
+            }
+        }
+    }
+    // allows moving cursor inside tooltip without it fading away
+    if (pinnedPos !== null) {
+        mousePos = pinnedPos;
+        cursorTargetMatchesChart = true;
+    }
+    if (cursorTargetMatchesChart === false) return [];
+    if (chart['_model'] === undefined) return [];
+    const chartModel = chart['_model'];
+    const yInterval = chartModel.getComponent('yAxis').axis.scale._interval;
+    const totalSeries = chartData.timeSeries.length;
+    const yBuffer = getYBuffer({
+        yInterval,
+        totalSeries,
+        showAllSeries
+    });
+    var _x, _y;
+    const pointInPixel = [
+        (_x = mousePos.plotCanvas.x) !== null && _x !== void 0 ? _x : 0,
+        (_y = mousePos.plotCanvas.y) !== null && _y !== void 0 ? _y : 0
+    ];
+    if (chart.containPixel('grid', pointInPixel)) {
+        const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
+        if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
+            return checkforNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);
+        }
+    }
+    // clear all highlighted series when cursor exits canvas
+    // https://echarts.apache.org/en/api.html#action.downplay
+    for(let i = 0; i < totalSeries; i++){
+        if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+            chart.dispatchAction({
+                type: 'downplay',
+                seriesIndex: i
+            });
+        }
+    }
+    return [];
+}
+function isWithinPercentageRange({ valueToCheck , baseValue , percentage  }) {
+    const range = percentage / 100 * baseValue;
+    const lowerBound = baseValue - range;
+    const upperBound = baseValue + range;
+    return valueToCheck >= lowerBound && valueToCheck <= upperBound;
+}
+function getYBuffer({ yInterval , totalSeries , showAllSeries =false  }) {
+    if (showAllSeries) {
+        return yInterval * 10; // roughly correlates with grid so entire canvas is searched
+    }
+    // never let nearby series range be less than roughly the size of a single tick
+    const yBufferMin = yInterval * 0.3;
+    // tooltip trigger area gets smaller with more series
+    if (totalSeries > SHOW_FEWER_SERIES_LIMIT) {
+        const adjustedBuffer = yInterval * DYNAMIC_NEARBY_SERIES_MULTIPLIER / totalSeries;
+        return Math.max(yBufferMin, adjustedBuffer);
+    }
+    // increase multiplier to expand nearby series range
+    return Math.max(yBufferMin, yInterval * INCREASE_NEARBY_SERIES_MULTIPLIER);
+}

package/dist/cjs/TimeSeriesTooltip/tooltip-model.js

@@ -21,20 +21,30 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    TOOLTIP_MIN_WIDTH: ()=>TOOLTIP_MIN_WIDTH,
     TOOLTIP_MAX_WIDTH: ()=>TOOLTIP_MAX_WIDTH,
     TOOLTIP_MAX_HEIGHT: ()=>TOOLTIP_MAX_HEIGHT,
     TOOLTIP_LABELS_MAX_WIDTH: ()=>TOOLTIP_LABELS_MAX_WIDTH,
-    TOOLTIP_MAX_ITEMS: ()=>TOOLTIP_MAX_ITEMS,
+    TOOLTIP_ADJUST_Y_POS_MULTIPLIER: ()=>TOOLTIP_ADJUST_Y_POS_MULTIPLIER,
+    FALLBACK_CHART_WIDTH: ()=>FALLBACK_CHART_WIDTH,
+    NEARBY_SERIES_DESCRIPTION: ()=>NEARBY_SERIES_DESCRIPTION,
+    EMPHASIZED_SERIES_DESCRIPTION: ()=>EMPHASIZED_SERIES_DESCRIPTION,
+    TOOLTIP_BG_COLOR_FALLBACK: ()=>TOOLTIP_BG_COLOR_FALLBACK,
     TOOLTIP_DATE_FORMAT: ()=>TOOLTIP_DATE_FORMAT,
     defaultCursorData: ()=>defaultCursorData,
     emptyTooltipData: ()=>emptyTooltipData,
     useMousePosition: ()=>useMousePosition
 });
 const _react = require("react");
+const TOOLTIP_MIN_WIDTH = 375;
 const TOOLTIP_MAX_WIDTH = 650;
-const TOOLTIP_MAX_HEIGHT = 400;
+const TOOLTIP_MAX_HEIGHT = 650;
 const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;
-const TOOLTIP_MAX_ITEMS = 50;
+const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;
+const FALLBACK_CHART_WIDTH = 750;
+const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';
+const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';
+const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';
 const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
     year: 'numeric',
     month: 'short',