@perses-dev/components 0.29.1 → 0.31.0

package/dist/cjs/Table/VirtualizedTable.js

@@ -0,0 +1,155 @@
+// 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, "VirtualizedTable", {
+    enumerable: true,
+    get: ()=>VirtualizedTable
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _reactTable = require("@tanstack/react-table");
+const _material = require("@mui/material");
+const _reactVirtuoso = require("react-virtuoso");
+const _react = require("react");
+const _tableRow = require("./TableRow");
+const _tableBody = require("./TableBody");
+const _innerTable = require("./InnerTable");
+const _tableHead = require("./TableHead");
+const _tableCell = require("./TableCell");
+const _virtualizedTableContainer = require("./VirtualizedTableContainer");
+const _useVirtualizedTableKeyboardNav = require("./hooks/useVirtualizedTableKeyboardNav");
+function VirtualizedTable({ width , height , density , onRowClick , rows , columns , headers  }) {
+    const virtuosoRef = (0, _react.useRef)(null);
+    // Use a ref for these values because they are only needed for keyboard
+    // focus interactions and setting them on state will lead to a significant
+    // amount of unnecessary re-renders.
+    const visibleRange = (0, _react.useRef)({
+        startIndex: 0,
+        endIndex: 0
+    });
+    const setVisibleRange = (newVisibleRange)=>{
+        visibleRange.current = newVisibleRange;
+    };
+    const keyboardNav = (0, _useVirtualizedTableKeyboardNav.useVirtualizedTableKeyboardNav)({
+        visibleRange: visibleRange,
+        virtualTable: virtuosoRef,
+        // We add 1 here for the header.
+        maxRows: rows.length + 1,
+        maxColumns: columns.length
+    });
+    const getFocusState = (cellPosition)=>{
+        if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {
+            return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';
+        }
+        return 'none';
+    };
+    const VirtuosoTableComponents = (0, _react.useMemo)(()=>{
+        return {
+            Scroller: _virtualizedTableContainer.VirtualizedTableContainer,
+            Table: (props)=>{
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_innerTable.InnerTable, {
+                    ...props,
+                    width: width,
+                    density: density,
+                    onKeyDown: keyboardNav.onTableKeyDown
+                });
+            },
+            TableHead: _tableHead.TableHead,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            TableRow: ({ item , ...props })=>{
+                const index = props['data-index'];
+                const row = rows[index];
+                if (!row) {
+                    return null;
+                }
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableRow.TableRow, {
+                    ...props,
+                    onClick: ()=>onRowClick(row.id),
+                    density: density
+                });
+            },
+            TableBody: _tableBody.TableBody
+        };
+    }, [
+        density,
+        keyboardNav.onTableKeyDown,
+        onRowClick,
+        rows,
+        width
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+            width,
+            height
+        },
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactVirtuoso.TableVirtuoso, {
+            ref: virtuosoRef,
+            totalCount: rows.length,
+            components: VirtuosoTableComponents,
+            // Note: this value is impacted by overscan. See this issue if overscan
+            // is added.
+            // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138
+            rangeChanged: setVisibleRange,
+            fixedHeaderContent: ()=>{
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+                    children: headers.map((headerGroup)=>{
+                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableRow.TableRow, {
+                            density: density,
+                            children: headerGroup.headers.map((header, i)=>{
+                                const column = header.column;
+                                const position = {
+                                    row: 0,
+                                    column: i
+                                };
+                                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCell.TableCell, {
+                                    width: column.getSize() || 'auto',
+                                    variant: "head",
+                                    density: density,
+                                    focusState: getFocusState(position),
+                                    onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                                    children: (0, _reactTable.flexRender)(column.columnDef.header, header.getContext())
+                                }, header.id);
+                            })
+                        }, headerGroup.id);
+                    })
+                });
+            },
+            itemContent: (index)=>{
+                const row = rows[index];
+                if (!row) {
+                    return null;
+                }
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+                    children: row.getVisibleCells().map((cell, i)=>{
+                        const position = {
+                            // Add 1 to the row index because the header is row 0
+                            row: index + 1,
+                            column: i
+                        };
+                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCell.TableCell, {
+                            sx: {
+                                width: cell.column.getSize() || 'auto'
+                            },
+                            density: density,
+                            focusState: getFocusState(position),
+                            onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                            children: (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                        }, cell.id);
+                    })
+                });
+            }
+        })
+    });
+}

package/dist/cjs/Table/VirtualizedTableContainer.js

@@ -0,0 +1,30 @@
+// 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, "VirtualizedTableContainer", {
+    enumerable: true,
+    get: ()=>VirtualizedTableContainer
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const VirtualizedTableContainer = /*#__PURE__*/ (0, _react.forwardRef)(function VirtualizedTableContainer(props, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
+        ...props,
+        tabIndex: -1,
+        ref: ref
+    });
+});

package/dist/cjs/Table/hooks/useTableKeyboardNav.js

@@ -0,0 +1,99 @@
+// 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, "useTableKeyboardNav", {
+    enumerable: true,
+    get: ()=>useTableKeyboardNav
+});
+const _react = require("react");
+const DEFAULT_ACTIVE_CELL = {
+    row: 0,
+    column: 0
+};
+const ARROW_KEYS = [
+    'ArrowRight',
+    'ArrowLeft',
+    'ArrowUp',
+    'ArrowDown'
+];
+function isArrowKey(key) {
+    return ARROW_KEYS.includes(key);
+}
+function useTableKeyboardNav({ maxRows , maxColumns , onActiveCellChange  }) {
+    const [activeCell, setActiveCell] = (0, _react.useState)(DEFAULT_ACTIVE_CELL);
+    const [isActive, setIsActive] = (0, _react.useState)(false);
+    const handleCellFocus = (cellPosition)=>{
+        if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {
+            return;
+        }
+        setIsActive(true);
+        setActiveCell(cellPosition);
+    };
+    const handleKeyDown = (0, _react.useCallback)((e)=>{
+        // Including some of the basic a11y keyboard interaction patterns from:
+        // https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+        // TODO: add other keyboard combos.
+        const key = e.key;
+        if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {
+            setActiveCell((curActiveCell)=>{
+                let nextRow = curActiveCell.row;
+                let nextColumn = curActiveCell.column;
+                if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {
+                    e.preventDefault();
+                    nextColumn += 1;
+                } else if (key === 'ArrowLeft' && nextColumn > 0) {
+                    e.preventDefault();
+                    nextColumn -= 1;
+                } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {
+                    e.preventDefault();
+                    nextRow += 1;
+                } else if (key === 'ArrowUp' && nextRow > 0) {
+                    e.preventDefault();
+                    nextRow -= 1;
+                } else if (key === 'Home') {
+                    e.preventDefault();
+                    nextRow = 0;
+                    nextColumn = 0;
+                } else if (key === 'End') {
+                    e.preventDefault();
+                    nextRow = maxRows - 1;
+                    nextColumn = maxColumns - 1;
+                }
+                const defaultNewPosition = {
+                    column: nextColumn,
+                    row: nextRow
+                };
+                const newPosition = (onActiveCellChange === null || onActiveCellChange === void 0 ? void 0 : onActiveCellChange(e, curActiveCell, defaultNewPosition)) || defaultNewPosition;
+                if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {
+                    // Return original to avoid creating a new object if nothing
+                    // changed.
+                    return curActiveCell;
+                }
+                return newPosition;
+            });
+        }
+    }, [
+        maxColumns,
+        maxRows,
+        onActiveCellChange
+    ]);
+    return {
+        activeCell,
+        isActive,
+        onTableKeyDown: handleKeyDown,
+        onCellFocus: handleCellFocus
+    };
+}

package/dist/cjs/Table/hooks/useVirtualizedTableKeyboardNav.js

@@ -0,0 +1,93 @@
+// 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, "useVirtualizedTableKeyboardNav", {
+    enumerable: true,
+    get: ()=>useVirtualizedTableKeyboardNav
+});
+const _useTableKeyboardNav = require("./useTableKeyboardNav");
+function useVirtualizedTableKeyboardNav({ visibleRange , virtualTable , maxRows , maxColumns  }) {
+    const baseKeyboard = (0, _useTableKeyboardNav.useTableKeyboardNav)({
+        maxRows,
+        maxColumns,
+        onActiveCellChange: (e, currentPosition, defaultNewPosition)=>{
+            const key = e.key;
+            const defaultValueChanged = defaultNewPosition && (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);
+            var ref;
+            const nextRow = (ref = defaultNewPosition === null || defaultNewPosition === void 0 ? void 0 : defaultNewPosition.row) !== null && ref !== void 0 ? ref : currentPosition.row;
+            if (key === 'ArrowDown' && defaultValueChanged) {
+                // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
+                    var ref1;
+                    (ref1 = virtualTable.current) === null || ref1 === void 0 ? void 0 : ref1.scrollToIndex({
+                        index: nextRow - 1,
+                        align: 'end'
+                    });
+                }
+            } else if (key === 'ArrowUp' && defaultValueChanged) {
+                // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
+                    var ref2;
+                    (ref2 = virtualTable.current) === null || ref2 === void 0 ? void 0 : ref2.scrollToIndex({
+                        index: nextRow - 1,
+                        align: 'start'
+                    });
+                }
+            } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {
+                var // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                ref3;
+                (ref3 = virtualTable.current) === null || ref3 === void 0 ? void 0 : ref3.scrollToIndex({
+                    index: Math.max(nextRow - 1, 0),
+                    align: 'start'
+                });
+            } else if (key === 'PageDown') {
+                var ref4;
+                // Full handling of logic for `PageDown` because there is no default.
+                e.preventDefault();
+                let nextRow1 = currentPosition.row;
+                // Add 1 to account for header
+                nextRow1 = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);
+                (ref4 = virtualTable.current) === null || ref4 === void 0 ? void 0 : ref4.scrollToIndex({
+                    index: nextRow1 - 1,
+                    align: 'start'
+                });
+                return {
+                    row: nextRow1,
+                    column: currentPosition.column
+                };
+            } else if (key === 'PageUp') {
+                var ref5;
+                // Full handling of logic for `PageUp` because there is no default.
+                let nextRow2 = currentPosition.row;
+                // Minus 1 to account for header
+                nextRow2 = Math.max(0, visibleRange.current.startIndex - 1);
+                (ref5 = virtualTable.current) === null || ref5 === void 0 ? void 0 : ref5.scrollToIndex({
+                    index: nextRow2 - 1,
+                    align: 'end'
+                });
+                return {
+                    row: nextRow2,
+                    column: currentPosition.column
+                };
+            }
+            return defaultNewPosition;
+        }
+    });
+    return baseKeyboard;
+}

package/dist/cjs/Table/index.js

@@ -0,0 +1,33 @@
+// 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, "getTableCellLayout", {
+    enumerable: true,
+    get: ()=>_tableModel.getTableCellLayout
+});
+_exportStar(require("./Table"), exports);
+const _tableModel = require("./model/table-model");
+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/Table/model/table-model.js

@@ -0,0 +1,80 @@
+// 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, {
+    getTableCellLayout: ()=>getTableCellLayout,
+    persesColumnsToTanstackColumns: ()=>persesColumnsToTanstackColumns
+});
+function calculateTableCellHeight(lineHeight, paddingY) {
+    // Doing a bunch of math to enforce height to avoid weirdness with mismatched
+    // heights based on customization of cell contents.
+    const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight !== null && lineHeight !== void 0 ? lineHeight : 0;
+    const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;
+    return lineHeightNum + verticalPaddingNum * 2;
+}
+function getTableCellLayout(theme, density) {
+    if (density === 'compact') {
+        const paddingY = theme.spacing(0.5);
+        const paddingX = theme.spacing(0.25);
+        const lineHeight = theme.typography.body2.lineHeight;
+        return {
+            padding: `${paddingY} ${paddingX}`,
+            height: calculateTableCellHeight(lineHeight, paddingY),
+            fontSize: theme.typography.body2.fontSize,
+            lineHeight: lineHeight
+        };
+    }
+    // standard density
+    const paddingY1 = theme.spacing(1);
+    const paddingX1 = theme.spacing(1.25);
+    const lineHeight1 = theme.typography.body1.lineHeight;
+    return {
+        padding: `${paddingY1} ${paddingX1}`,
+        height: calculateTableCellHeight(lineHeight1, paddingY1),
+        fontSize: theme.typography.body1.fontSize,
+        lineHeight: lineHeight1
+    };
+}
+function persesColumnsToTanstackColumns(columns) {
+    const tableCols = columns.map(({ width , ...otherProps })=>{
+        // Tanstack Table does not support an "auto" value to naturally size to fit
+        // the space in a table. We translate our custom "auto" setting to 0 size
+        // for these columns, so it is easy to fall back to auto when rendering.
+        // Taking from a recommendation in this github discussion:
+        // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326
+        const sizeProps = width === 'auto' || width === undefined ? {
+            // All zero values are used as shorthand for "auto" when rendering
+            // because it makes it easy to fall back. (e.g. `row.size || "auto"`)
+            size: 0,
+            minSize: 0,
+            maxSize: 0
+        } : {
+            size: width
+        };
+        const result = {
+            ...otherProps,
+            ...sizeProps
+        };
+        return result;
+    });
+    return tableCols;
+}

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js

@@ -24,7 +24,7 @@ const _seriesMarker = require("./SeriesMarker");
 const _seriesLabelsStack = require("./SeriesLabelsStack");
 const _tooltipModel = require("./tooltip-model");
 function SeriesInfo(props) {
-    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels =true  } = props;
+    const { seriesName , formattedY , markerColor , totalSeries , emphasizeText =false , wrapLabels =true  } = 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"}
@@ -73,21 +73,23 @@ function SeriesInfo(props) {
                                 maxWidth: _tooltipModel.TOOLTIP_LABELS_MAX_WIDTH,
                                 overflow: 'hidden',
                                 color: theme.palette.common.white,
+                                fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,
                                 textOverflow: 'ellipsis',
                                 whiteSpace: wrapLabels ? 'normal' : 'nowrap'
                             }),
+                        "aria-label": emphasizeText ? _tooltipModel.EMPHASIZED_SERIES_DESCRIPTION : _tooltipModel.NEARBY_SERIES_DESCRIPTION,
                         children: formattedSeriesInfo
                     })
                 ]
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                sx: {
-                    display: 'table-cell',
-                    paddingLeft: 1.5,
-                    textAlign: 'right',
-                    verticalAlign: 'top',
-                    fontWeight: '700'
-                },
+                sx: (theme)=>({
+                        display: 'table-cell',
+                        paddingLeft: 1.5,
+                        textAlign: 'right',
+                        verticalAlign: 'top',
+                        fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular
+                    }),
                 children: formattedY
             })
         ]

package/dist/cjs/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -19,12 +19,18 @@ Object.defineProperty(exports, "TimeSeriesTooltip", {
     get: ()=>TimeSeriesTooltip
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
-const _focusedSeries = require("./focused-series");
-const _tooltipModel = require("./tooltip-model");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
 const _tooltipContent = require("./TooltipContent");
+const _nearbySeries = require("./nearby-series");
+const _tooltipModel = require("./tooltip-model");
 const _utils = require("./utils");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -64,30 +70,44 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
+const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , isTooltipPinned , unit , onUnpinClick  }) {
+    const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const [pinnedPos, setPinnedPos] = (0, _react.useState)(null);
     const mousePos = (0, _tooltipModel.useMousePosition)();
+    const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
     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;
-    var ref1;
-    const chartHeight = (ref1 = chart === null || chart === void 0 ? void 0 : chart.getHeight()) !== null && ref1 !== void 0 ? ref1 : 230;
-    const cursorTransform = (0, _utils.assembleTransform)(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
+    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 every 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 focusedSeries = (0, _nearbySeries.getNearbySeriesData)({
+        mousePos,
+        chartData,
+        pinnedPos,
+        chart,
+        unit,
+        showAllSeries
+    });
     if (focusedSeries.length === 0) {
         return null;
     }
-    if (pinTooltip === true && pinnedPos === null) {
+    if (isTooltipPinned === true && pinnedPos === null) {
         setPinnedPos(mousePos);
     }
+    // Option for user to see all series instead of only the nearby focused series.
+    // Only relevant when there are more total series than are visible.
+    const showAllSeriesToggle = isTooltipPinned === true && showAllSeries === false && chartData.timeSeries.length > 1 && focusedSeries.length !== chartData.timeSeries.length;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+            ref: tooltipRef,
             sx: (theme)=>({
+                    minWidth: _tooltipModel.TOOLTIP_MIN_WIDTH,
                     maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
                     maxHeight: _tooltipModel.TOOLTIP_MAX_HEIGHT,
+                    padding: theme.spacing(0.5, 2),
                     position: 'absolute',
                     top: 0,
                     left: 0,
@@ -107,10 +127,41 @@ const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesT
             style: {
                 transform: cursorTransform
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
-                focusedSeries: focusedSeries,
-                wrapLabels: wrapLabels
-            })
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
+                    series: focusedSeries,
+                    wrapLabels: wrapLabels,
+                    isTooltipPinned: isTooltipPinned,
+                    onUnpinClick: ()=>{
+                        setPinnedPos(null);
+                        if (onUnpinClick !== undefined) {
+                            onUnpinClick();
+                        }
+                    }
+                }),
+                showAllSeriesToggle && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    gap: 1,
+                    alignItems: "center",
+                    sx: {
+                        textAlign: 'right'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            children: "Show All?"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                            checked: showAllSeries,
+                            onChange: (_, checked)=>setShowAllSeries(checked),
+                            sx: (theme)=>({
+                                    '& .MuiSwitch-switchBase': {
+                                        color: theme.palette.common.white
+                                    }
+                                })
+                        })
+                    ]
+                })
+            ]
         })
     });
 });