@perses-dev/components 0.0.0-snapshot-test-internal-dep-dd238ac → 0.0.0-snapshot-color-palette-gen-test-bc1b508

package/dist/cjs/Legend/ListLegend.js

@@ -20,25 +20,118 @@ Object.defineProperty(exports, "ListLegend", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _reactWindow = require("react-window");
+const _react = require("react");
 const _listLegendItem = require("./ListLegendItem");
-function ListLegend({ items  }) {
+const DEFAULT_INITIAL_ROW_HEIGHT = 26;
+function ListLegend({ items , height , width , initialRowHeight =DEFAULT_INITIAL_ROW_HEIGHT  }) {
+    // Storing a ref to the react-window `VariableSizeList`, so we can call
+    // `resetAfterIndex` to resize the list after mouseover/out events to account
+    // for the change in list items on hover.
+    const listRef = (0, _react.useRef)(null);
+    // Storing row heights, so we can use dynamic heights, which enables the
+    // user the hover to show the full label, while still having a virtualized
+    // list.
+    const rowHeights = (0, _react.useRef)({});
+    const theme = (0, _material.useTheme)();
+    // Padding value used throughout to adjust the react-window virtual layouts
+    // to simulate padding per the guidance from:
+    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
+    const LIST_PADDING = parseInt(theme.spacing(1), 10);
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.List, {
-        children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
+    // Gets the row height for a given item to enable the virtualized list to
+    // render the row properly.
+    function getRowHeight(index) {
+        const currentHeight = rowHeights.current[index];
+        return currentHeight !== null && currentHeight !== void 0 ? currentHeight : initialRowHeight;
+    }
+    // Set the height for a given item to enable the virtualized list to
+    // adjust to size changes.
+    function setRowHeight(index, size) {
+        var // Tell the virtualized list that items changed size and need to be
+        // re-evaluated.
+        ref;
+        (ref = listRef.current) === null || ref === void 0 ? void 0 : ref.resetAfterIndex(0);
+        rowHeights.current = {
+            ...rowHeights.current,
+            [index]: size
+        };
+    }
+    // Renderer for virtualized rows in `VariableSizeList`.
+    function ListLegendRow({ index , style  }) {
+        // Storing a ref to the row's `ListLegendItem`, so we can get the "real"
+        // height and adjust the height of the row based on it, enabling the dynamic
+        // heights on hover.
+        const rowRef = (0, _react.useRef)(null);
+        // useCallback is important here to avoid constantly running the useEffect
+        // that calls this in `ListLegendItem`.
+        const handleRowLayoutChange = (0, _react.useCallback)(()=>{
+            // Handle size changes from hovering on a list item.
+            if (rowRef.current) {
+                setRowHeight(index, rowRef.current.clientHeight);
+            }
+        }, [
+            index
+        ]);
+        // Adjust row heights when the row being rendered changes.
+        (0, _react.useEffect)(()=>{
+            handleRowLayoutChange();
+        }, [
+            handleRowLayoutChange
+        ]);
+        const item = items[index];
+        if (!item) {
+            // This shouldn't happen if configured correctly, but covering
+            // the case to appease the type checking and to cover any edge
+            // cases.
+            return null;
+        }
+        const originalTop = parseFloat(`${style.top}`);
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+            style: {
+                ...style,
+                // Adjust the top position to simulate top padding on the list.
+                top: `${originalTop + LIST_PADDING}px`
+            },
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
+                ref: rowRef,
                 item: item,
+                truncateLabel: truncateLabels,
+                onLayoutChange: handleRowLayoutChange,
                 sx: {
-                    width: 190,
-                    textOverflow: 'ellipsis',
+                    // Having an explicit width is important for the ellipsizing to
+                    // work correctly. Subtract padding to simulate padding.
+                    width: width - LIST_PADDING,
                     wordBreak: 'break-word',
-                    overflow: truncateLabels ? 'hidden' : 'visible',
-                    whiteSpace: truncateLabels ? 'nowrap' : 'normal',
-                    // TODO: add optional hover effect to show unformatted label
-                    '&:hover': {
-                        overflow: 'visible',
-                        whiteSpace: 'normal'
-                    }
+                    overflow: 'hidden'
                 }
-            }, item.id))
+            }, item.id)
+        });
+    }
+    // Renderer for the inner container element of the `VariableSizeList` used
+    // to adjust styles to simulate padding on the list per:
+    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
+    const InnerElementType = /*#__PURE__*/ (0, _react.forwardRef)(function InnerElementType({ style , ...rest }, ref) {
+        const originalHeight = (style === null || style === void 0 ? void 0 : style.height) ? parseFloat(`${style === null || style === void 0 ? void 0 : style.height}`) : 0;
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+            ref: ref,
+            role: "list",
+            style: {
+                ...style,
+                // Adjust height to account for simulated padding.
+                height: `${originalHeight + LIST_PADDING * 2}px`
+            },
+            ...rest
+        });
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactWindow.VariableSizeList, {
+        height: height,
+        width: width,
+        itemCount: items.length,
+        itemSize: getRowHeight,
+        innerElementType: InnerElementType,
+        ref: listRef,
+        children: ListLegendRow
     });
 }

package/dist/cjs/Legend/ListLegendItem.js

@@ -62,9 +62,30 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem({ item , sx , ...others }) {
+const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onLayoutChange , ...others }, ref) {
+    const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
+    function handleMouseOver() {
+        if (truncateLabel) {
+            setNoWrap(false);
+        }
+    }
+    function handleMouseOut() {
+        if (truncateLabel) {
+            setNoWrap(true);
+        }
+    }
+    (0, _react.useEffect)(()=>{
+        // When `noWrap` changes, so does the layout of the component. Notifies the
+        // parent, so it can handle those changes.
+        onLayoutChange === null || onLayoutChange === void 0 ? void 0 : onLayoutChange();
+    }, [
+        noWrap,
+        onLayoutChange
+    ]);
     return /*#__PURE__*/ (0, _react.createElement)(_material.ListItem, {
         ...others,
+        component: "div",
+        role: "listitem",
         sx: (0, _utils.combineSx)({
             padding: 0,
             cursor: 'pointer'
@@ -73,6 +94,7 @@ const ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem
         key: item.id,
         onClick: item.onClick,
         selected: item.isSelected,
+        ref: ref,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
                 sx: {
@@ -84,8 +106,14 @@ const ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ListItemText, {
-                primary: item.label
+                primary: item.label,
+                primaryTypographyProps: {
+                    noWrap: noWrap
+                },
+                onMouseOver: handleMouseOver,
+                onMouseOut: handleMouseOut
             })
         ]
     });
 });
+const ListLegendItem = /*#__PURE__*/ _react.default.memo(ListLegendItemBase);

package/dist/cjs/LineChart/LineChart.js

@@ -83,7 +83,10 @@ function _interopRequireWildcard(obj, nodeInterop) {
     _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom , onDoubleClick  }) {
+function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
+    wrapLabels: true
+} , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
+    var ref;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -177,6 +180,9 @@ function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom ,
             grid,
             legend
         };
+        if (__experimentalEChartsOptionsOverride) {
+            return __experimentalEChartsOptionsOverride(option);
+        }
         return option;
     }, [
         data,
@@ -185,7 +191,8 @@ function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom ,
         grid,
         legend,
         noDataOption,
-        timeZone
+        timeZone,
+        __experimentalEChartsOptionsOverride
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
@@ -215,10 +222,10 @@ function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom ,
         },
         onDoubleClick: handleOnDoubleClick,
         children: [
-            showTooltip === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
+            showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
-                wrapLabels: true,
+                wrapLabels: tooltipConfig.wrapLabels,
                 pinTooltip: pinTooltip,
                 unit: unit
             }),

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -21,13 +21,15 @@ Object.defineProperty(exports, "OptionsEditorControl", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _informationOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/InformationOutline"));
 const _utils = require("../utils");
+const _infoTooltip = require("../InfoTooltip");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const OptionsEditorControl = ({ label , control  })=>{
+const OptionsEditorControl = ({ label , control , description  })=>{
     // Make sure we have a unique ID we can use for associating labels and
     // controls for a11y.
     const generatedControlId = (0, _utils.useId)('EditorSectionControl');
@@ -41,9 +43,36 @@ const OptionsEditorControl = ({ label , control  })=>{
             alignItems: "center",
             justifyContent: "space-between",
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormLabel, {
-                    htmlFor: controlId,
-                    children: label
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormLabel, {
+                            htmlFor: controlId,
+                            children: label
+                        }),
+                        description && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_infoTooltip.InfoTooltip, {
+                            description: description,
+                            enterDelay: 100,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                size: "small",
+                                sx: (theme)=>({
+                                        borderRadius: theme.shape.borderRadius,
+                                        padding: '4x',
+                                        margin: '0 2px'
+                                    }),
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
+                                    "aria-describedby": "info-tooltip",
+                                    "aria-hidden": false,
+                                    fontSize: "inherit",
+                                    sx: {
+                                        color: (theme)=>theme.palette.grey[700]
+                                    }
+                                })
+                            })
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     sx: {

package/dist/cjs/StatChart/StatChart.js

@@ -40,7 +40,7 @@ const _echart = require("../EChart");
 const MIN_VALUE_SIZE = 12;
 const MAX_VALUE_SIZE = 36;
 function StatChart(props) {
-    const { width , height , data , unit , sparkline  } = props;
+    const { width , height , data , unit , color , sparkline  } = props;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const formattedValue = data.calculatedValue === undefined ? '' : (0, _units.formatValue)(data.calculatedValue, unit);
     const option = (0, _react.useMemo)(()=>{
@@ -109,7 +109,7 @@ function StatChart(props) {
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
                 variant: "h3",
                 sx: (theme)=>({
-                        color: theme.palette.text.primary,
+                        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
                         fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
                         padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`
                     }),

package/dist/cjs/ThresholdsEditor/ThresholdInput.js

@@ -28,7 +28,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function ThresholdInput({ inputRef , label , color , value , onChange , onColorChange , onBlur , onDelete  }) {
+function ThresholdInput({ inputRef , label , color , value , mode , onChange , onColorChange , onBlur , onDelete  }) {
     const [key, setKey] = (0, _react.useState)(0); // use key to cause input to lose focus when pressing enter
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
         flex: 1,
@@ -50,7 +50,7 @@ function ThresholdInput({ inputRef , label , color , value , onChange , onColorC
                 id: label,
                 inputRef: inputRef,
                 type: "number",
-                value: value === 0 ? undefined : value,
+                value: value === 0 ? '' : value,
                 placeholder: "0",
                 onChange: onChange,
                 onBlur: onBlur,
@@ -59,6 +59,12 @@ function ThresholdInput({ inputRef , label , color , value , onChange , onColorC
                         onBlur();
                         setKey(key + 1);
                     }
+                },
+                InputProps: {
+                    endAdornment: mode === 'Percent' ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                        paddingX: 1,
+                        children: "%"
+                    }) : undefined
                 }
             }, key),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -24,9 +24,9 @@ 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 _infoTooltip = require("../InfoTooltip");
 const _thresholdColorPicker = require("./ThresholdColorPicker");
 const _thresholdInput = require("./ThresholdInput");
 function _interopRequireDefault(obj) {
@@ -120,6 +120,10 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
             onChange((0, _immer.default)(thresholds, (draft)=>{
                 draft.default_color = color;
             }));
+        } else {
+            onChange({
+                default_color: color
+            });
         }
     };
     // sort thresholds in ascending order every time an input blurs
@@ -156,6 +160,14 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
                     }
                 ]
             });
+        } else if (thresholds && thresholds.steps === undefined) {
+            onChange((0, _immer.default)(thresholds, (draft)=>{
+                draft.steps = [
+                    {
+                        value: DEFAULT_STEP
+                    }
+                ];
+            }));
         } else {
             onChange((0, _immer.default)(thresholds, (draft)=>{
                 const steps = draft.steps;
@@ -191,46 +203,55 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
     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, {})
+        icon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_infoTooltip.InfoTooltip, {
+            description: 'Add threshold',
+            children: /*#__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: "%"
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+                label: "Mode",
+                description: "Percentage means thresholds relative to min & max",
+                control: /*#__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",
+                            sx: {
+                                fontWeight: 500
+                            },
+                            children: "Absolute"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ToggleButton, {
+                            "aria-label": "percent",
+                            value: "Percent",
+                            sx: {
+                                fontWeight: 500
+                            },
+                            children: "Percent"
                         })
-                    })
-                ]
+                    ]
+                })
             }),
-            steps && steps.map((step, i)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_thresholdInput.ThresholdInput, {
+            steps && steps.map((step, i)=>{
+                /*#__PURE__*/ return (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,
+                    mode: thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode,
                     onColorChange: (color)=>handleThresholdColorChange(color, i),
                     onChange: (e)=>{
                         handleThresholdValueChange(e, i);
@@ -239,7 +260,8 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
                         deleteThreshold(i);
                     },
                     onBlur: handleThresholdBlur
-                }, i)).reverse(),
+                }, i);
+            }).reverse(),
             !hideDefault && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_system.Stack, {
                 flex: 1,
                 direction: "row",

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  } = props;
+    const { seriesName , formattedY , markerColor , totalSeries , 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"}
@@ -44,8 +44,8 @@ function SeriesInfo(props) {
             markerColor: markerColor
         });
     }
-    // add space after commas when more than one focused series
-    const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ');
+    // add space after commas so wrapLabels works
+    const formattedSeriesInfo = seriesName.replace(/[,]/g, ', ');
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             display: 'table-row',
@@ -76,7 +76,7 @@ function SeriesInfo(props) {
                                 textOverflow: 'ellipsis',
                                 whiteSpace: wrapLabels ? 'normal' : 'nowrap'
                             }),
-                        children: inlineSeriesLabels
+                        children: formattedSeriesInfo
                     })
                 ]
             }),

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

@@ -46,10 +46,6 @@ const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
 });
 const defaultCursorData = {
     coords: {
-        viewport: {
-            x: 0,
-            y: 0
-        },
         plotCanvas: {
             x: 0,
             y: 0
@@ -71,9 +67,9 @@ const useMousePosition = ()=>{
     (0, _react.useEffect)(()=>{
         const setFromEvent = (e)=>{
             return setCoords({
-                viewport: {
-                    x: e.clientX,
-                    y: e.clientY
+                page: {
+                    x: e.pageX,
+                    y: e.pageY
                 },
                 plotCanvas: {
                     x: e.offsetX,

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -28,19 +28,22 @@ function assembleTransform(mousePos, seriesNum, chartWidth, chartHeight, pinnedP
     }
     const cursorPaddingX = 32;
     const cursorPaddingY = 16;
-    const x = mousePos.viewport.x;
-    let y = mousePos.viewport.y + cursorPaddingY;
-    const isCloseToBottom = mousePos.viewport.y > window.innerHeight * 0.8;
+    // Tooltip is located in a Portal attached to the body.
+    // Using page coordinates instead of viewport ensures the tooltip is
+    // absolutely positioned correctly as the user scrolls
+    const x = mousePos.page.x;
+    let y = mousePos.page.y + cursorPaddingY;
+    const isCloseToBottom = mousePos.page.y > window.innerHeight * 0.8;
     const yPosAdjustThreshold = chartHeight * 0.75;
     // adjust so tooltip does not get cut off at bottom of chart, reduce multiplier to move up
     if (isCloseToBottom === true) {
         if (seriesNum > 6) {
-            y = mousePos.viewport.y * 0.65;
+            y = mousePos.page.y * 0.75;
         } else {
-            y = mousePos.viewport.y * 0.75;
+            y = mousePos.page.y * 0.9;
         }
     } else if (mousePos.plotCanvas.y > yPosAdjustThreshold) {
-        y = mousePos.viewport.y * 0.85;
+        y = mousePos.page.y * 0.95;
     }
     // use tooltip width to determine when to repos from right to left (width is narrower when only 1 focused series since labels wrap)
     const tooltipWidth = seriesNum > 1 ? _tooltipModel.TOOLTIP_MAX_WIDTH : _tooltipModel.TOOLTIP_MAX_WIDTH / 2;

package/dist/cjs/model/units/bytes.js

@@ -25,7 +25,13 @@ _export(exports, {
     BYTES_UNIT_CONFIG: ()=>BYTES_UNIT_CONFIG,
     formatBytes: ()=>formatBytes
 });
+const _numbro = /*#__PURE__*/ _interopRequireDefault(require("numbro"));
 const _constants = require("./constants");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 const bytesUnitKinds = [
     'Bytes'
 ];
@@ -35,52 +41,40 @@ const BYTES_GROUP_CONFIG = {
     abbreviate: true
 };
 const BYTES_UNIT_CONFIG = {
+    // This uses units that are powers of 1000.
+    // In other words, 1KB = 1000 bytes.
     Bytes: {
         group: 'Bytes',
         label: 'Bytes'
     }
 };
-function formatBytes(bytes, unitOptions) {
+function formatBytes(bytes, { abbreviate , decimal_places  }) {
     if (bytes === 0) return '0 bytes';
-    // default to full 'Bytes' formatting
-    const options = unitOptions.abbreviate === undefined ? {
-        ...unitOptions,
-        abbreviate: false
-    } : unitOptions;
-    var _decimal_places;
-    let decimals = (_decimal_places = options.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
-    // avoids minimumFractionDigits value is out of range error, possible values are 0 to 20
+    decimal_places = decimal_places !== null && decimal_places !== void 0 ? decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
+    // Avoids maximumFractionDigits value is out of range error. Possible values are 0 to 20.
     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits
-    if (decimals < 0) {
-        decimals = 0;
-    } else if (decimals > 20) {
-        decimals = 20;
+    if (decimal_places < 0) {
+        decimal_places = 0;
+    } else if (decimal_places > 20) {
+        decimal_places = 20;
     }
-    const formatParams = {
-        style: 'decimal',
-        minimumFractionDigits: decimals,
-        maximumFractionDigits: decimals,
-        useGrouping: true
-    };
-    const formatter = new Intl.NumberFormat('en-US', formatParams);
-    if (options.abbreviate === false) {
-        return `${formatter.format(bytes)} bytes`;
+    const showFullNumber = abbreviate == false || bytes < 1000;
+    if (showFullNumber) {
+        const formatter = new Intl.NumberFormat('en-US', {
+            style: 'unit',
+            unit: 'byte',
+            unitDisplay: 'long',
+            maximumFractionDigits: decimal_places,
+            useGrouping: true
+        });
+        return formatter.format(bytes);
     }
-    const k = 1024;
-    const sizes = [
-        'bytes',
-        'KB',
-        'MB',
-        'GB',
-        'TB',
-        'PB',
-        'EB',
-        'ZB',
-        'YB'
-    ];
-    // Math.max(0, ...) ensures that we don't return -1 as a value for the index.
-    // Why? When the number of bytes are between -1 and 1, Math.floor(Math.log(bytes)/Math.log(1024)) returns -1.
-    const i = Math.max(0, Math.floor(Math.log(bytes) / Math.log(k)));
-    const abbreviatedValue = bytes / Math.pow(k, i);
-    return `${formatter.format(abbreviatedValue)} ${sizes[i]}`;
+    return (0, _numbro.default)(bytes).format({
+        output: 'byte',
+        base: 'decimal',
+        spaceSeparated: true,
+        mantissa: decimal_places,
+        trimMantissa: true,
+        optionalMantissa: true
+    });
 }