@perses-dev/components 0.0.0-snapshot-time-range-height-80d08fc

package/dist/cjs/Tooltip/SeriesInfo.js

@@ -0,0 +1,149 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SeriesInfo", {
+    enumerable: true,
+    get: ()=>SeriesInfo
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _seriesMarker = require("./SeriesMarker");
+const _tooltipModel = require("./tooltip-model");
+function SeriesInfo(props) {
+    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels  } = props;
+    // TODO (sjcobb): regex to remove __name__, improve series labels
+    const formattedSeriesLabels = seriesName.replace(/[{}"]/g, '');
+    if (totalSeries === 1) {
+        const jsonFormattedSeries = seriesName[0] === '{' ? true : false;
+        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 0.5,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: (theme)=>({
+                            height: '16px',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'left',
+                            color: theme.palette.common.white,
+                            fontSize: '11px'
+                        }),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesMarker.SeriesMarker, {
+                            markerColor: markerColor
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                            component: "span",
+                            children: [
+                                "value:",
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                                    component: "span",
+                                    sx: (theme)=>({
+                                            color: theme.palette.common.white,
+                                            fontWeight: 700,
+                                            paddingLeft: '2px'
+                                        }),
+                                    children: formattedY
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {
+                    sx: (theme)=>({
+                            borderColor: theme.palette.grey['500']
+                        })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    sx: (theme)=>({
+                            color: theme.palette.common.white
+                        }),
+                    children: formattedSeriesLabels.split(',').map((name)=>{
+                        if (name) {
+                            const [key, value] = jsonFormattedSeries ? name.split(':') : name.split('=');
+                            const formattedKey = value !== undefined ? `${key}: ` : key;
+                            return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                                sx: {
+                                    display: 'flex',
+                                    gap: '4px'
+                                },
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                        sx: {
+                                            fontSize: '11px'
+                                        },
+                                        children: formattedKey
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                        sx: (theme)=>({
+                                                color: theme.palette.common.white,
+                                                fontWeight: 700,
+                                                fontSize: '11px'
+                                            }),
+                                        children: value
+                                    })
+                                ]
+                            }, name);
+                        }
+                    })
+                })
+            ]
+        });
+    }
+    const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ').replace(/[:=]/g, ': ');
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+            display: 'table-row',
+            paddingTop: 0.5
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                    display: 'table-cell',
+                    maxWidth: '520px'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesMarker.SeriesMarker, {
+                        markerColor: markerColor
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                        component: "span",
+                        sx: (theme)=>({
+                                color: theme.palette.common.white,
+                                display: 'inline-block',
+                                maxWidth: _tooltipModel.TOOLTIP_LABELS_MAX_WIDTH,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: wrapLabels ? 'normal' : 'nowrap',
+                                width: 'calc(100% - 20px)'
+                            }),
+                        children: inlineSeriesLabels
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                    display: 'table-cell',
+                    fontWeight: '700',
+                    paddingLeft: 1.5,
+                    textAlign: 'right',
+                    verticalAlign: 'top'
+                },
+                children: formattedY
+            })
+        ]
+    });
+}

package/dist/cjs/Tooltip/SeriesMarker.js

@@ -0,0 +1,39 @@
+// Copyright 2022 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, "SeriesMarker", {
+    enumerable: true,
+    get: ()=>SeriesMarker
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function SeriesMarker(props) {
+    const { markerColor  } = props;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+            display: 'inline-block',
+            width: '12px',
+            borderRadius: '2px',
+            height: '12px',
+            marginTop: 0.25,
+            marginRight: 1,
+            verticalAlign: 'top'
+        },
+        style: {
+            backgroundColor: markerColor
+        }
+    });
+}

package/dist/cjs/Tooltip/Tooltip.js

@@ -0,0 +1,116 @@
+// Copyright 2022 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, "Tooltip", {
+    enumerable: true,
+    get: ()=>Tooltip
+});
+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 _tooltipContent = require("./TooltipContent");
+const _utils = require("./utils");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const Tooltip = /*#__PURE__*/ _react.default.memo(function Tooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
+    const [pinnedPos, setPinnedPos] = (0, _react.useState)(null);
+    const mousePos = (0, _tooltipModel.useMousePosition)();
+    if (mousePos === null || mousePos.target === null) return null;
+    // 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);
+    if (focusedSeries.length === 0) {
+        return null;
+    }
+    if (pinTooltip === true && pinnedPos === null) {
+        setPinnedPos(mousePos);
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            sx: (theme)=>({
+                    maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
+                    maxHeight: _tooltipModel.TOOLTIP_MAX_HEIGHT,
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    backgroundColor: '#2E313E',
+                    borderRadius: '6px',
+                    color: '#fff',
+                    fontSize: '11px',
+                    visibility: 'visible',
+                    opacity: 1,
+                    transition: 'all 0.1s ease-out',
+                    zIndex: theme.zIndex.tooltip,
+                    overflow: 'hidden',
+                    '&:hover': {
+                        overflowY: 'auto'
+                    }
+                }),
+            style: {
+                transform: cursorTransform
+            },
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
+                focusedSeries: focusedSeries,
+                wrapLabels: wrapLabels
+            })
+        })
+    });
+});

package/dist/cjs/Tooltip/TooltipContent.js

@@ -0,0 +1,95 @@
+// Copyright 2022 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, "TooltipContent", {
+    enumerable: true,
+    get: ()=>TooltipContent
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _seriesInfo = require("./SeriesInfo");
+const _timeZoneProvider = require("../context/TimeZoneProvider");
+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 = (timeString)=>{
+        const date = new Date(timeString);
+        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 sortedFocusedSeries = (0, _react.useMemo)(()=>{
+        if (focusedSeries === null) return null;
+        return focusedSeries.sort((a, b)=>a.y > b.y ? -1 : 1);
+    }, [
+        focusedSeries
+    ]);
+    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, {});
+    }
+}

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

@@ -0,0 +1,117 @@
+// Copyright 2022 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, {
+    getNearbySeries: ()=>getNearbySeries,
+    getFocusedSeriesData: ()=>getFocusedSeriesData
+});
+const _model = require("../model");
+const _tooltipModel = require("./tooltip-model");
+function getNearbySeries(data, pointInGrid, yBuffer, unit) {
+    const currentFocusedData = [];
+    var ref;
+    const focusedX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
+    var ref1;
+    const focusedY = (ref1 = pointInGrid[1]) !== null && ref1 !== void 0 ? ref1 : null;
+    if (focusedX === null || focusedY === null) {
+        return currentFocusedData;
+    }
+    if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {
+        for(let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++){
+            const currentSeries = data.timeSeries[seriesIdx];
+            if (currentFocusedData.length >= _tooltipModel.TOOLTIP_MAX_ITEMS) 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;
+                        var _datumIdx1;
+                        const yValue = (_datumIdx1 = currentSeries.data[datumIdx]) !== null && _datumIdx1 !== void 0 ? _datumIdx1 : 0;
+                        if (focusedX === datumIdx) {
+                            if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {
+                                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
+                                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
+                                const formattedDate = _tooltipModel.TOOLTIP_DATE_FORMAT.format(xValueMilliSeconds);
+                                const formattedY = (0, _model.formatValue)(yValue, unit);
+                                currentFocusedData.push({
+                                    seriesIdx: seriesIdx,
+                                    datumIdx: datumIdx,
+                                    seriesName: currentSeriesName,
+                                    date: formattedDate,
+                                    x: xValue,
+                                    y: yValue,
+                                    formattedY: formattedY,
+                                    markerColor: markerColor.toString()
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return currentFocusedData;
+}
+function getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit) {
+    if (chart === undefined || mousePos === null) return [];
+    // prevents multiple tooltips showing from adjacent charts
+    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
+    if (pinnedPos !== null) {
+        mousePos = pinnedPos;
+        cursorTargetMatchesChart = true;
+    }
+    if (cursorTargetMatchesChart === false) return [];
+    if (chart['_model'] === undefined) return [];
+    const chartModel = chart['_model'];
+    const yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;
+    const seriesNum = chartData.timeSeries.length;
+    // tooltip trigger area gets smaller with more series
+    const yBuffer = seriesNum > _tooltipModel.TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 2;
+    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 getNearbySeries(chartData, pointInGrid, yBuffer, unit);
+        }
+    }
+    return [];
+}

package/dist/cjs/Tooltip/focused-series.test.js

@@ -0,0 +1,95 @@
+// Copyright 2022 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
+});
+const _focusedSeries = require("./focused-series");
+describe('getNearbySeries', ()=>{
+    const chartData = {
+        timeSeries: [
+            {
+                type: 'line',
+                name: 'env="demo", instance="demo.do.prometheus", job="node", mode="test"',
+                color: 'hsla(-1365438424,50%,50%,0.8)',
+                data: [
+                    0.0002315202231525094,
+                    0.00022873082287300112,
+                    0.00023152022315149463,
+                    0.00023152022315149463,
+                    0.00022873082287300112
+                ],
+                symbol: 'circle'
+            },
+            {
+                type: 'line',
+                name: 'env="demo", instance="demo.do.prometheus", job="node", mode="test alt"',
+                color: 'hsla(286664040,50%,50%,0.8)',
+                data: [
+                    0.05245188284519867,
+                    0.0524463040446356,
+                    0.0524463040446356,
+                    0.05247140864723438,
+                    0.052482566248230646
+                ],
+                symbol: 'circle'
+            }
+        ],
+        xAxis: [
+            1654007865000,
+            1654007880000,
+            1654007895000,
+            1654007910000,
+            1654007925000
+        ],
+        rangeMs: 60000
+    };
+    // https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel
+    const pointInGrid = [
+        2,
+        0.0560655737704918
+    ]; // converted from chart.getZr() mousemove coordinates
+    const yBuffer = 0.02; // calculated from y axis interval
+    const focusedSeriesOutput = [
+        {
+            date: 'May 31, 2022, 2:38:15 PM',
+            datumIdx: 2,
+            markerColor: 'hsla(286664040,50%,50%,0.8)',
+            seriesName: 'env="demo", instance="demo.do.prometheus", job="node", mode="test alt"',
+            seriesIdx: 1,
+            x: 1654007895000,
+            y: 0.0524463040446356,
+            formattedY: '0.05'
+        }
+    ];
+    it('should return focused series data for points nearby the cursor', ()=>{
+        const decimalUnit = {
+            kind: 'Decimal',
+            decimal_places: 2
+        };
+        expect((0, _focusedSeries.getNearbySeries)(chartData, pointInGrid, yBuffer, decimalUnit)).toEqual(focusedSeriesOutput);
+    });
+    it('should return series values formatted as a percent', ()=>{
+        const percentFormattedOutput = [
+            ...focusedSeriesOutput
+        ];
+        if (percentFormattedOutput[0]) {
+            percentFormattedOutput[0].formattedY = '5%';
+        }
+        const percentFormattedUnit = {
+            kind: 'PercentDecimal',
+            decimal_places: 0
+        };
+        expect((0, _focusedSeries.getNearbySeries)(chartData, pointInGrid, yBuffer, percentFormattedUnit)).toEqual(percentFormattedOutput);
+    });
+});

package/dist/cjs/Tooltip/index.js

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