@perses-dev/components 0.3.0 → 0.4.1

package/dist/cjs/model/units.js

@@ -0,0 +1,211 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIMPLE_UNITS = exports.removeUnitNamespace = exports.SANCTIONED_UNITS = exports.isSanctionedSimpleUnitIdentifier = exports.abbreviateLargeNumber = exports.formatValue = void 0;
+const date_fns_1 = require("date-fns");
+function formatValue(value, unitOptions) {
+    if (unitOptions === undefined) {
+        return value.toString();
+    }
+    if (isTimeUnit(unitOptions)) {
+        return formatTime(value, unitOptions);
+    }
+    if (isPercentUnit(unitOptions)) {
+        return formatPercent(value, unitOptions);
+    }
+    if (isDecimalUnit(unitOptions)) {
+        return formatDecimal(value, unitOptions);
+    }
+    const exhaustive = unitOptions;
+    throw new Error(`Unknown unit options ${exhaustive}`);
+}
+exports.formatValue = formatValue;
+const timeUnitKinds = ['Milliseconds', 'Seconds', 'Minutes', 'Hours', 'Days', 'Weeks', 'Months', 'Years'];
+const timeUnitKindsSet = new Set(timeUnitKinds);
+function isTimeUnit(unitOptions) {
+    return timeUnitKindsSet.has(unitOptions.kind);
+}
+function formatTime(value, unitOptions) {
+    // Create a Duration from the value based on what time unit it is
+    const duration = {};
+    switch (unitOptions.kind) {
+        case 'Milliseconds':
+            duration.seconds = value / 1000;
+            break;
+        case 'Seconds':
+            duration.seconds = value;
+            break;
+        case 'Minutes':
+            duration.minutes = value;
+            break;
+        case 'Hours':
+            duration.hours = value;
+            break;
+        case 'Days':
+            duration.days = value;
+            break;
+        case 'Weeks':
+            duration.weeks = value;
+            break;
+        case 'Months':
+            duration.months = value;
+            break;
+        case 'Years':
+            duration.years = value;
+            break;
+        default:
+            const exhaustive = unitOptions.kind;
+            throw new Error(`Unknown time unit type ${exhaustive}`);
+    }
+    // Find the largest whole time unit we can display the value in and use it
+    const ms = (0, date_fns_1.milliseconds)(duration);
+    const seconds = ms / 1000;
+    if (seconds < 1) {
+        return `${ms.toFixed()} milliseconds`;
+    }
+    const minutes = seconds / 60;
+    if (minutes < 1) {
+        return `${seconds.toFixed()} seconds`;
+    }
+    const hours = minutes / 60;
+    if (hours < 1) {
+        return `${minutes.toFixed()} minutes`;
+    }
+    const days = hours / 24;
+    if (days < 1) {
+        return `${hours.toFixed()} hours`;
+    }
+    const weeks = days / 7;
+    if (weeks < 1) {
+        return `${days.toFixed()} days`;
+    }
+    const years = weeks / 52;
+    if (years < 1) {
+        return `${weeks.toFixed()} weeks`;
+    }
+    return `${years.toFixed()} years`;
+}
+const percentUnitKinds = ['Percent', 'PercentDecimal'];
+const percentUnitKindsSet = new Set(percentUnitKinds);
+function isPercentUnit(unitOptions) {
+    return percentUnitKindsSet.has(unitOptions.kind);
+}
+function formatPercent(value, unitOptions) {
+    if (unitOptions.kind === 'PercentDecimal') {
+        value = value * 100;
+    }
+    return value.toFixed(unitOptions.decimal_places) + '%';
+}
+const decimalUnitKinds = ['Decimal'];
+const decimalUnitKindsSet = new Set(decimalUnitKinds);
+function isDecimalUnit(unitOptions) {
+    return decimalUnitKindsSet.has(unitOptions.kind);
+}
+function formatDecimal(value, unitOptions) {
+    var _a, _b;
+    const maximumFractionDigits = (_a = unitOptions.decimal_places) !== null && _a !== void 0 ? _a : 2;
+    if (unitOptions.suffix !== undefined) {
+        if (isSanctionedSimpleUnitIdentifier(unitOptions.suffix)) {
+            const formatParams = {
+                style: 'unit',
+                minimumFractionDigits: 0,
+                maximumFractionDigits: maximumFractionDigits,
+                useGrouping: true,
+                unit: unitOptions.suffix,
+                unitDisplay: (_b = unitOptions.unitDisplay) !== null && _b !== void 0 ? _b : 'narrow',
+            };
+            const unitFormatter = new Intl.NumberFormat('en-US', formatParams);
+            return unitFormatter.format(value);
+        }
+    }
+    const formatParams = {
+        style: 'decimal',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: maximumFractionDigits,
+        useGrouping: true,
+    };
+    const decimalFormatter = new Intl.NumberFormat('en-US', formatParams);
+    return decimalFormatter.format(value);
+}
+// Take a large number and abbreviate appropriate suffix
+// ex) 10000 -> 10k, 1000000 -> 1M
+function abbreviateLargeNumber(num) {
+    return num >= 1e12
+        ? num / 1e12 + 'T'
+        : num >= 1e9
+            ? num / 1e9 + 'B'
+            : num >= 1e6
+                ? num / 1e6 + 'M'
+                : num >= 1e3
+                    ? num / 1e3 + 'k'
+                    : num;
+}
+exports.abbreviateLargeNumber = abbreviateLargeNumber;
+// Util to check unit name against ECMA standard: https://tc39.es/ecma402/#sec-issanctionedsimpleunitidentifier
+function isSanctionedSimpleUnitIdentifier(unitIdentifier) {
+    return exports.SIMPLE_UNITS.indexOf(unitIdentifier) > -1;
+}
+exports.isSanctionedSimpleUnitIdentifier = isSanctionedSimpleUnitIdentifier;
+// https://tc39.es/ecma402/#table-sanctioned-simple-unit-identifiers
+exports.SANCTIONED_UNITS = [
+    'angle-degree',
+    'area-acre',
+    'area-hectare',
+    'concentr-percent',
+    'digital-bit',
+    'digital-byte',
+    'digital-gigabit',
+    'digital-gigabyte',
+    'digital-kilobit',
+    'digital-kilobyte',
+    'digital-megabit',
+    'digital-megabyte',
+    'digital-petabyte',
+    'digital-terabit',
+    'digital-terabyte',
+    'duration-day',
+    'duration-hour',
+    'duration-millisecond',
+    'duration-minute',
+    'duration-month',
+    'duration-second',
+    'duration-week',
+    'duration-year',
+    'length-centimeter',
+    'length-foot',
+    'length-inch',
+    'length-kilometer',
+    'length-meter',
+    'length-mile-scandinavian',
+    'length-mile',
+    'length-millimeter',
+    'length-yard',
+    'mass-gram',
+    'mass-kilogram',
+    'mass-ounce',
+    'mass-pound',
+    'mass-stone',
+    'temperature-celsius',
+    'temperature-fahrenheit',
+    'volume-fluid-ounce',
+    'volume-gallon',
+    'volume-liter',
+    'volume-milliliter',
+];
+// removes the namespace prefix, ex: duration-hour -> hour
+function removeUnitNamespace(unit) {
+    return unit.slice(unit.indexOf('-') + 1);
+}
+exports.removeUnitNamespace = removeUnitNamespace;
+exports.SIMPLE_UNITS = exports.SANCTIONED_UNITS.map(removeUnitNamespace);

package/dist/cjs/tooltip/SeriesInfo.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeriesInfo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 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.
+const material_1 = require("@mui/material");
+const SeriesMarker_1 = require("./SeriesMarker");
+const tooltip_model_1 = require("./tooltip-model");
+function SeriesInfo(props) {
+    const { seriesName, y, 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 ((0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 0.5, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: (theme) => ({
+                        height: '16px',
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'left',
+                        color: theme.palette.common.white,
+                        fontSize: '11px',
+                    }), children: [(0, jsx_runtime_1.jsx)(SeriesMarker_1.SeriesMarker, { markerColor: markerColor }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", children: ["value:", (0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", sx: (theme) => ({
+                                        color: theme.palette.common.white,
+                                        fontWeight: 700,
+                                        paddingLeft: '2px',
+                                    }), children: y })] })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: (theme) => ({
+                        borderColor: theme.palette.grey['500'],
+                    }) }), (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: '4px' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { fontSize: '11px' }, children: formattedKey }), (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: (theme) => ({
+                                            color: theme.palette.common.white,
+                                            fontWeight: 700,
+                                            fontSize: '11px',
+                                        }), children: value })] }, name));
+                        }
+                    }) })] }));
+    }
+    const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ').replace(/[:=]/g, ': ');
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: 'table-row',
+            paddingTop: 0.5,
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: 'table-cell',
+                    maxWidth: '520px',
+                }, children: [(0, jsx_runtime_1.jsx)(SeriesMarker_1.SeriesMarker, { markerColor: markerColor }), (0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", sx: (theme) => ({
+                            color: theme.palette.common.white,
+                            display: 'inline-block',
+                            maxWidth: tooltip_model_1.TOOLTIP_LABELS_MAX_WIDTH,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: wrapLabels ? 'normal' : 'nowrap',
+                            width: 'calc(100% - 20px)',
+                        }), children: inlineSeriesLabels })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    display: 'table-cell',
+                    fontWeight: '700',
+                    paddingLeft: 1.5,
+                    textAlign: 'right',
+                    verticalAlign: 'top',
+                }, children: y })] }));
+}
+exports.SeriesInfo = SeriesInfo;

package/dist/cjs/tooltip/SeriesMarker.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeriesMarker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 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.
+const material_1 = require("@mui/material");
+function SeriesMarker(props) {
+    const { markerColor } = props;
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            display: 'inline-block',
+            width: '12px',
+            borderRadius: '2px',
+            height: '12px',
+            marginTop: 0.25,
+            marginRight: 1,
+            verticalAlign: 'top',
+        }, style: { backgroundColor: markerColor } }));
+}
+exports.SeriesMarker = SeriesMarker;

package/dist/cjs/tooltip/Tooltip.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// 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.
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const focused_series_1 = require("./focused-series");
+const tooltip_model_1 = require("./tooltip-model");
+const TooltipContent_1 = require("./TooltipContent");
+function Tooltip(props) {
+    var _a, _b;
+    const { chartRef, chartData } = props;
+    const [pinnedPos, setPinnedPos] = (0, react_1.useState)(null);
+    const mousePos = (0, tooltip_model_1.useMousePosition)();
+    if (mousePos === null)
+        return null;
+    const chart = chartRef.current;
+    const focusedSeries = (0, focused_series_1.getFocusedSeriesData)(mousePos, chartData, pinnedPos, chart);
+    const chartWidth = (_a = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && _a !== void 0 ? _a : 750;
+    const chartHeight = (_b = chart === null || chart === void 0 ? void 0 : chart.getHeight()) !== null && _b !== void 0 ? _b : 230;
+    const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
+    function handleMouseEnter() {
+        if (mousePos !== null) {
+            setPinnedPos(mousePos);
+        }
+    }
+    function handleMouseLeave() {
+        if (pinnedPos !== null) {
+            setPinnedPos(null);
+        }
+    }
+    if (focusedSeries.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Portal, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: (theme) => ({
+                maxWidth: tooltip_model_1.TOOLTIP_MAX_WIDTH,
+                maxHeight: tooltip_model_1.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,
+            }, onMouseEnter: () => handleMouseEnter(), onMouseLeave: () => handleMouseLeave(), children: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, { focusedSeries: focusedSeries, wrapLabels: props.wrapLabels }) }) }));
+}
+exports.Tooltip = Tooltip;
+function assembleTransform(mousePos, seriesNum, chartWidth, chartHeight, pinnedPos) {
+    if (mousePos === null) {
+        return 'translate3d(0, 0)';
+    }
+    if (pinnedPos !== null) {
+        mousePos = pinnedPos;
+    }
+    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;
+    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;
+        }
+        else {
+            y = mousePos.viewport.y * 0.75;
+        }
+    }
+    else if (mousePos.plotCanvas.y > yPosAdjustThreshold) {
+        y = mousePos.viewport.y * 0.85;
+    }
+    // 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 ? tooltip_model_1.TOOLTIP_MAX_WIDTH : tooltip_model_1.TOOLTIP_MAX_WIDTH / 2;
+    const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;
+    // reposition so tooltip is never too close to right side of chart or left side of browser window
+    return mousePos.plotCanvas.x > xPosAdjustThreshold && x > tooltip_model_1.TOOLTIP_MAX_WIDTH
+        ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)`
+        : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
+}

package/dist/cjs/tooltip/TooltipContent.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 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.
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const SeriesInfo_1 = require("./SeriesInfo");
+function TooltipContent(props) {
+    const { focusedSeries, wrapLabels } = props;
+    const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;
+    const formatTimeSeriesHeader = (timeString) => {
+        const [month, year, time] = timeString.split(',');
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", sx: (theme) => ({
+                        color: theme.palette.common.white,
+                    }), children: [month, ", ", year, " \u2013"] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: (0, jsx_runtime_1.jsx)("strong", { children: time }) })] }));
+    };
+    const sortedFocusedSeries = (0, react_1.useMemo)(() => {
+        if (focusedSeries === null)
+            return null;
+        return focusedSeries.sort((a, b) => (a.y > b.y ? -1 : 1));
+    }, [focusedSeries]);
+    if (sortedFocusedSeries !== null && seriesTime !== null) {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { py: 1, px: 1.5, spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: formatTimeSeriesHeader(seriesTime) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: (theme) => ({
+                        borderColor: theme.palette.grey['500'],
+                    }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'table',
+                    }, children: sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, markerColor }) => {
+                        if (datumIdx === null || seriesIdx === null)
+                            return null;
+                        const key = seriesIdx.toString() + datumIdx.toString();
+                        return ((0, jsx_runtime_1.jsx)(SeriesInfo_1.SeriesInfo, { seriesName: seriesName, y: y, markerColor: markerColor, totalSeries: sortedFocusedSeries.length, wrapLabels: wrapLabels }, key));
+                    }) })] }));
+    }
+    else {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+}
+exports.TooltipContent = TooltipContent;

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

@@ -0,0 +1,110 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFocusedSeriesData = exports.getNearbySeries = void 0;
+const tooltip_model_1 = require("./tooltip-model");
+/**
+ * Returns formatted series data for the points that are close to the user's cursor
+ * Adjust yBuffer to increase or decrease number of series shown
+ */
+function getNearbySeries(data, pointInGrid, yBuffer) {
+    var _a, _b, _c, _d, _e;
+    const currentFocusedData = [];
+    const focusedX = (_a = pointInGrid[0]) !== null && _a !== void 0 ? _a : null;
+    const focusedY = (_b = pointInGrid[1]) !== null && _b !== void 0 ? _b : 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 > tooltip_model_1.TOOLTIP_MAX_ITEMS)
+                break;
+            if (currentSeries !== undefined) {
+                const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';
+                const markerColor = (_c = currentSeries.color) !== null && _c !== void 0 ? _c : '#000';
+                if (Array.isArray(currentSeries.data)) {
+                    for (let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++) {
+                        const xValue = (_d = data.xAxis[datumIdx]) !== null && _d !== void 0 ? _d : 0;
+                        const yValue = (_e = currentSeries.data[datumIdx]) !== null && _e !== void 0 ? _e : 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 = tooltip_model_1.TOOLTIP_DATE_FORMAT.format(xValueMilliSeconds);
+                                currentFocusedData.push({
+                                    seriesIdx: seriesIdx,
+                                    datumIdx: datumIdx,
+                                    seriesName: currentSeriesName,
+                                    date: formattedDate,
+                                    x: xValue,
+                                    y: yValue,
+                                    markerColor: markerColor.toString(),
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return currentFocusedData;
+}
+exports.getNearbySeries = getNearbySeries;
+/**
+ * Uses mouse position to determine whether user is hovering over a chart canvas
+ * If yes, convert from pixel values to logical cartesian coordinates and return all focused series
+ */
+function getFocusedSeriesData(mousePos, chartData, pinnedPos, chart) {
+    var _a, _b;
+    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 > tooltip_model_1.TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 2;
+    const pointInPixel = [(_a = mousePos.plotCanvas.x) !== null && _a !== void 0 ? _a : 0, (_b = mousePos.plotCanvas.y) !== null && _b !== void 0 ? _b : 0];
+    if (chart.containPixel('grid', pointInPixel)) {
+        const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
+        if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
+            return getNearbySeries(chartData, pointInGrid, yBuffer);
+        }
+    }
+    return [];
+}
+exports.getFocusedSeriesData = getFocusedSeriesData;

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

@@ -0,0 +1,82 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMousePosition = exports.emptyTooltipData = exports.defaultCursorData = exports.TOOLTIP_DATE_FORMAT = exports.TOOLTIP_MAX_ITEMS = exports.TOOLTIP_LABELS_MAX_WIDTH = exports.TOOLTIP_MAX_HEIGHT = exports.TOOLTIP_MAX_WIDTH = void 0;
+const react_1 = require("react");
+exports.TOOLTIP_MAX_WIDTH = 650;
+exports.TOOLTIP_MAX_HEIGHT = 230;
+exports.TOOLTIP_LABELS_MAX_WIDTH = exports.TOOLTIP_MAX_WIDTH - 150;
+exports.TOOLTIP_MAX_ITEMS = 50;
+exports.TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: true,
+});
+exports.defaultCursorData = {
+    coords: {
+        viewport: {
+            x: 0,
+            y: 0,
+        },
+        plotCanvas: {
+            x: 0,
+            y: 0,
+        },
+        zrender: {
+            x: 0,
+            y: 0,
+        },
+        target: null,
+    },
+    chartWidth: 0,
+};
+exports.emptyTooltipData = {
+    cursor: exports.defaultCursorData,
+    focusedSeries: null,
+};
+const useMousePosition = () => {
+    const [coords, setCoords] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const setFromEvent = (e) => {
+            return setCoords({
+                viewport: {
+                    x: e.clientX,
+                    y: e.clientY,
+                },
+                plotCanvas: {
+                    x: e.offsetX,
+                    y: e.offsetY,
+                },
+                zrender: {
+                    // echarts canvas coordinates added automatically by zrender
+                    // zrX and zrY are similar to offsetX and offsetY but they return undefined when not hovering over a chart canvas
+                    x: e.zrX,
+                    y: e.zrY,
+                },
+                // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)
+                target: e.target,
+            });
+        };
+        window.addEventListener('mousemove', setFromEvent);
+        return () => {
+            window.removeEventListener('mousemove', setFromEvent);
+        };
+    }, []);
+    return coords;
+};
+exports.useMousePosition = useMousePosition;