@perses-dev/components 0.30.0 → 0.31.0

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Portal } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport React, { useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { getFocusedSeriesData } from './focused-series';\nimport { CursorCoordinates, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';\nimport { assembleTransform } from './utils';\n\ninterface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  pinTooltip: boolean;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n}\n\nexport const TimeSeriesTooltip = React.memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  pinTooltip,\n  unit,\n}: TimeSeriesTooltipProps) {\n  const [pinnedPos, setPinnedPos] = useState<CursorCoordinates | null>(null);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // ensure user is hovering over a chart before checking for nearby series\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const focusedSeries = getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit);\n  const chartWidth = chart?.getWidth() ?? 750;\n  const cursorTransform = assembleTransform(\n    mousePos,\n    focusedSeries.length,\n    chartWidth,\n    pinnedPos,\n    height ?? 0,\n    width ?? 0\n  );\n\n  if (focusedSeries.length === 0) {\n    return null;\n  }\n\n  if (pinTooltip === true && pinnedPos === null) {\n    setPinnedPos(mousePos);\n  }\n\n  return (\n    <Portal>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: '#2E313E', // TODO: use colors from theme, separate styles for dark mode\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          zIndex: theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <TooltipContent focusedSeries={focusedSeries} wrapLabels={wrapLabels} />\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","React","useState","useResizeObserver","TooltipContent","getFocusedSeriesData","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","memo","chartRef","chartData","wrapLabels","pinTooltip","unit","pinnedPos","setPinnedPos","mousePos","height","width","ref","tooltipRef","target","tagName","chart","current","focusedSeries","chartWidth","getWidth","cursorTransform","length","sx","theme","maxWidth","maxHeight","position","top","left","backgroundColor","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Portal, Typography, Stack, Switch } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport React, { useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { getNearbySeriesData } from './nearby-series';\nimport {\n  CursorCoordinates,\n  FALLBACK_CHART_WIDTH,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MIN_WIDTH,\n  TOOLTIP_MAX_WIDTH,\n  useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\ninterface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  isTooltipPinned: boolean;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n  onUnpinClick?: () => void;\n}\n\nexport const TimeSeriesTooltip = React.memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  isTooltipPinned,\n  unit,\n  onUnpinClick,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const [pinnedPos, setPinnedPos] = useState<CursorCoordinates | null>(null);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // Ensure user is hovering over a chart before checking for nearby series.\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to every be needed.\n  const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const focusedSeries = getNearbySeriesData({\n    mousePos,\n    chartData,\n    pinnedPos,\n    chart,\n    unit,\n    showAllSeries,\n  });\n  if (focusedSeries.length === 0) {\n    return null;\n  }\n\n  if (isTooltipPinned === true && pinnedPos === null) {\n    setPinnedPos(mousePos);\n  }\n\n  // Option for user to see all series instead of only the nearby focused series.\n  // Only relevant when there are more total series than are visible.\n  const showAllSeriesToggle =\n    isTooltipPinned === true &&\n    showAllSeries === false &&\n    chartData.timeSeries.length > 1 &&\n    focusedSeries.length !== chartData.timeSeries.length;\n\n  return (\n    <Portal>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          padding: theme.spacing(0.5, 2),\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: '#2E313E', // TODO: use colors from theme, separate styles for dark mode\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          zIndex: theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <TooltipContent\n          series={focusedSeries}\n          wrapLabels={wrapLabels}\n          isTooltipPinned={isTooltipPinned}\n          onUnpinClick={() => {\n            setPinnedPos(null);\n            if (onUnpinClick !== undefined) {\n              onUnpinClick();\n            }\n          }}\n        />\n        {showAllSeriesToggle && (\n          <Stack direction=\"row\" gap={1} alignItems=\"center\" sx={{ textAlign: 'right' }}>\n            <Typography>Show All?</Typography>\n            <Switch\n              checked={showAllSeries}\n              onChange={(_, checked) => setShowAllSeries(checked)}\n              sx={(theme) => ({\n                '& .MuiSwitch-switchBase': {\n                  color: theme.palette.common.white,\n                },\n              })}\n            />\n          </Stack>\n        )}\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Typography","Stack","Switch","React","useState","useResizeObserver","TooltipContent","getNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","memo","chartRef","chartData","wrapLabels","isTooltipPinned","unit","onUnpinClick","showAllSeries","setShowAllSeries","pinnedPos","setPinnedPos","mousePos","height","width","ref","tooltipRef","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","focusedSeries","length","showAllSeriesToggle","timeSeries","sx","theme","minWidth","maxWidth","maxHeight","padding","spacing","position","top","left","backgroundColor","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform","series","undefined","direction","gap","alignItems","textAlign","checked","onChange","_","palette","common","white"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TooltipContent.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
-import { FocusedSeriesArray } from './focused-series';
+import { NearbySeriesArray } from './nearby-series';
 export interface TooltipContentProps {
-    focusedSeries: FocusedSeriesArray | null;
+    series: NearbySeriesArray | null;
+    isTooltipPinned: boolean;
     wrapLabels?: boolean;
+    onUnpinClick: () => void;
 }
-export declare function TooltipContent(props: TooltipContentProps): JSX.Element;
+export declare function TooltipContent(props: TooltipContentProps): JSX.Element | null;
 //# sourceMappingURL=TooltipContent.d.ts.map

package/dist/TimeSeriesTooltip/TooltipContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAqExD"}
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,sBAyFxD"}

package/dist/TimeSeriesTooltip/TooltipContent.js

@@ -10,20 +10,22 @@
 // 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.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import PinOutline from 'mdi-material-ui/PinOutline';
+import Pin from 'mdi-material-ui/Pin';
 import { Box, Divider, Stack, Typography } from '@mui/material';
 import { useTimeZone } from '../context/TimeZoneProvider';
 import { SeriesInfo } from './SeriesInfo';
 export function TooltipContent(props) {
-    const { focusedSeries , wrapLabels  } = props;
+    const { series , wrapLabels , isTooltipPinned , onUnpinClick  } = props;
     const { formatWithUserTimeZone  } = useTimeZone();
-    const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;
+    const seriesTime = series && series[0] && series[0].date ? series[0].date : null;
     const formatTimeSeriesHeader = (timeMs)=>{
         const date = new Date(timeMs);
         const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
         const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
-        return /*#__PURE__*/ _jsxs(_Fragment, {
+        return /*#__PURE__*/ _jsxs(Box, {
             children: [
                 /*#__PURE__*/ _jsx(Typography, {
                     variant: "caption",
@@ -42,48 +44,83 @@ export function TooltipContent(props) {
         });
     };
     const sortedFocusedSeries = useMemo(()=>{
-        if (focusedSeries === null) return null;
-        return focusedSeries.sort((a, b)=>a.y > b.y ? -1 : 1);
+        if (series === null) return null;
+        return series.sort((a, b)=>a.y > b.y ? -1 : 1);
     }, [
-        focusedSeries
+        series
     ]);
-    if (sortedFocusedSeries !== null && seriesTime !== null) {
-        return /*#__PURE__*/ _jsxs(Stack, {
-            py: 1,
-            px: 1.5,
-            spacing: 0.5,
-            children: [
-                /*#__PURE__*/ _jsx(Typography, {
-                    variant: "caption",
-                    children: formatTimeSeriesHeader(seriesTime)
-                }),
-                /*#__PURE__*/ _jsx(Divider, {
-                    sx: (theme)=>({
-                            borderColor: theme.palette.grey['500']
-                        })
-                }),
-                /*#__PURE__*/ _jsx(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__*/ _jsx(SeriesInfo, {
-                            seriesName: seriesName,
-                            y: y,
-                            formattedY: formattedY,
-                            markerColor: markerColor,
-                            totalSeries: sortedFocusedSeries.length,
-                            wrapLabels: wrapLabels
-                        }, key);
+    if (sortedFocusedSeries === null || seriesTime === null) {
+        return null;
+    }
+    // TODO: use react-virtuoso to improve performance
+    return /*#__PURE__*/ _jsxs(Stack, {
+        py: 1,
+        spacing: 0.5,
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    justifyContent: 'start',
+                    alignItems: 'center'
+                },
+                children: [
+                    formatTimeSeriesHeader(seriesTime),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        gap: 1,
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                sx: {
+                                    fontSize: 11
+                                },
+                                children: [
+                                    "Click to ",
+                                    isTooltipPinned ? 'Unpin' : 'Pin'
+                                ]
+                            }),
+                            isTooltipPinned ? /*#__PURE__*/ _jsx(Pin, {
+                                onClick: onUnpinClick,
+                                sx: {
+                                    fontSize: 16,
+                                    cursor: 'pointer'
+                                }
+                            }) : /*#__PURE__*/ _jsx(PinOutline, {
+                                sx: {
+                                    fontSize: 16
+                                }
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Divider, {
+                sx: (theme)=>({
+                        borderColor: theme.palette.grey['500']
                     })
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    display: 'table'
+                },
+                children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor , isClosestToCursor  })=>{
+                    if (datumIdx === null || seriesIdx === null) return null;
+                    const key = seriesIdx.toString() + datumIdx.toString();
+                    return /*#__PURE__*/ _jsx(SeriesInfo, {
+                        seriesName: seriesName,
+                        y: y,
+                        formattedY: formattedY,
+                        markerColor: markerColor,
+                        totalSeries: sortedFocusedSeries.length,
+                        wrapLabels: wrapLabels,
+                        emphasizeText: isClosestToCursor
+                    }, key);
                 })
-            ]
-        });
-    } else {
-        return /*#__PURE__*/ _jsx(_Fragment, {});
-    }
+            })
+        ]
+    });
 }
 
 //# sourceMappingURL=TooltipContent.js.map

package/dist/TimeSeriesTooltip/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { FocusedSeriesArray } from './focused-series';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n  focusedSeries: FocusedSeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { focusedSeries, wrapLabels } = props;\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;\n\n  const formatTimeSeriesHeader = (timeMs: number) => {\n    const date = new Date(timeMs);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n\n    return (\n      <>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</strong>\n        </Typography>\n      </>\n    );\n  };\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (focusedSeries === null) return null;\n    return focusedSeries.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [focusedSeries]);\n\n  if (sortedFocusedSeries !== null && seriesTime !== null) {\n    return (\n      <Stack py={1} px={1.5} spacing={0.5}>\n        <Typography variant=\"caption\">{formatTimeSeriesHeader(seriesTime)}</Typography>\n        <Divider\n          sx={(theme) => ({\n            borderColor: theme.palette.grey['500'],\n          })}\n        />\n        <Box\n          sx={{\n            display: 'table',\n          }}\n        >\n          {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor }) => {\n            if (datumIdx === null || seriesIdx === null) return null;\n            const key = seriesIdx.toString() + datumIdx.toString();\n\n            return (\n              <SeriesInfo\n                key={key}\n                seriesName={seriesName}\n                y={y}\n                formattedY={formattedY}\n                markerColor={markerColor}\n                totalSeries={sortedFocusedSeries.length}\n                wrapLabels={wrapLabels}\n              />\n            );\n          })}\n        </Box>\n      </Stack>\n    );\n  } else {\n    return <></>;\n  }\n}\n"],"names":["useMemo","Box","Divider","Stack","Typography","useTimeZone","SeriesInfo","TooltipContent","props","focusedSeries","wrapLabels","formatWithUserTimeZone","seriesTime","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","sortedFocusedSeries","sort","a","b","y","py","px","spacing","borderColor","grey","display","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","key","toString","totalSeries","length"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport Pin from 'mdi-material-ui/Pin';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { NearbySeriesArray } from './nearby-series';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n  series: NearbySeriesArray | null;\n  isTooltipPinned: boolean;\n  wrapLabels?: boolean;\n  onUnpinClick: () => void;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { series, wrapLabels, isTooltipPinned, onUnpinClick } = props;\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  const seriesTime = series && series[0] && series[0].date ? series[0].date : null;\n\n  const formatTimeSeriesHeader = (timeMs: number) => {\n    const date = new Date(timeMs);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n    return (\n      <Box>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</strong>\n        </Typography>\n      </Box>\n    );\n  };\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (series === null) return null;\n    return series.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [series]);\n\n  if (sortedFocusedSeries === null || seriesTime === null) {\n    return null;\n  }\n\n  // TODO: use react-virtuoso to improve performance\n  return (\n    <Stack py={1} spacing={0.5}>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'start',\n          alignItems: 'center',\n        }}\n      >\n        {formatTimeSeriesHeader(seriesTime)}\n        <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }}>\n          <Typography sx={{ fontSize: 11 }}>Click to {isTooltipPinned ? 'Unpin' : 'Pin'}</Typography>\n          {isTooltipPinned ? (\n            <Pin onClick={onUnpinClick} sx={{ fontSize: 16, cursor: 'pointer' }} />\n          ) : (\n            <PinOutline sx={{ fontSize: 16 }} />\n          )}\n        </Stack>\n      </Box>\n\n      <Divider\n        sx={(theme) => ({\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n      <Box\n        sx={{\n          display: 'table',\n        }}\n      >\n        {sortedFocusedSeries.map(\n          ({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor }) => {\n            if (datumIdx === null || seriesIdx === null) return null;\n            const key = seriesIdx.toString() + datumIdx.toString();\n\n            return (\n              <SeriesInfo\n                key={key}\n                seriesName={seriesName}\n                y={y}\n                formattedY={formattedY}\n                markerColor={markerColor}\n                totalSeries={sortedFocusedSeries.length}\n                wrapLabels={wrapLabels}\n                emphasizeText={isClosestToCursor}\n              />\n            );\n          }\n        )}\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["useMemo","PinOutline","Pin","Box","Divider","Stack","Typography","useTimeZone","SeriesInfo","TooltipContent","props","series","wrapLabels","isTooltipPinned","onUnpinClick","formatWithUserTimeZone","seriesTime","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","sortedFocusedSeries","sort","a","b","y","py","spacing","display","justifyContent","alignItems","direction","gap","marginLeft","fontSize","onClick","cursor","borderColor","grey","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","isClosestToCursor","key","toString","totalSeries","length","emphasizeText"],"mappings":"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"}

package/dist/TimeSeriesTooltip/index.d.ts

@@ -3,7 +3,7 @@ export * from './SeriesInfo';
 export * from './SeriesLabelsStack';
 export * from './SeriesMarker';
 export * from './TooltipContent';
-export * from './focused-series';
+export * from './nearby-series';
 export * from './tooltip-model';
 export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/TimeSeriesTooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}

package/dist/TimeSeriesTooltip/index.js

@@ -15,7 +15,7 @@ export * from './SeriesInfo';
 export * from './SeriesLabelsStack';
 export * from './SeriesMarker';
 export * from './TooltipContent';
-export * from './focused-series';
+export * from './nearby-series';
 export * from './tooltip-model';
 export * from './utils';
 

package/dist/TimeSeriesTooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './TimeSeriesTooltip';\nexport * from './SeriesInfo';\nexport * from './SeriesLabelsStack';\nexport * from './SeriesMarker';\nexport * from './TooltipContent';\nexport * from './focused-series';\nexport * from './tooltip-model';\nexport * from './utils';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './TimeSeriesTooltip';\nexport * from './SeriesInfo';\nexport * from './SeriesLabelsStack';\nexport * from './SeriesMarker';\nexport * from './TooltipContent';\nexport * from './nearby-series';\nexport * from './tooltip-model';\nexport * from './utils';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}

package/dist/TimeSeriesTooltip/nearby-series.d.ts

@@ -0,0 +1,46 @@
+import { ECharts as EChartsInstance } from 'echarts/core';
+import { UnitOptions, EChartsDataFormat } from '../model';
+import { CursorData } from './tooltip-model';
+export declare const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5;
+export declare const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30;
+export declare const SHOW_FEWER_SERIES_LIMIT = 5;
+export interface NearbySeriesInfo {
+    seriesIdx: number | null;
+    datumIdx: number | null;
+    seriesName: string;
+    date: number;
+    markerColor: string;
+    x: number;
+    y: number;
+    formattedY: string;
+    isClosestToCursor: boolean;
+}
+export declare type NearbySeriesArray = NearbySeriesInfo[];
+/**
+ * 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
+ */
+export declare function checkforNearbySeries(data: EChartsDataFormat, pointInGrid: number[], yBuffer: number, chart?: EChartsInstance, unit?: UnitOptions): NearbySeriesArray;
+/**
+ * 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 nearby series
+ */
+export declare function getNearbySeriesData({ mousePos, pinnedPos, chartData, chart, unit, showAllSeries, }: {
+    mousePos: CursorData['coords'];
+    pinnedPos: CursorData['coords'];
+    chartData: EChartsDataFormat;
+    chart?: EChartsInstance;
+    unit?: UnitOptions;
+    showAllSeries?: boolean;
+}): NearbySeriesArray;
+export declare function isWithinPercentageRange({ valueToCheck, baseValue, percentage, }: {
+    valueToCheck: number;
+    baseValue: number;
+    percentage: number;
+}): boolean;
+export declare function getYBuffer({ yInterval, totalSeries, showAllSeries, }: {
+    yInterval: number;
+    totalSeries: number;
+    showAllSeries?: boolean;
+}): number;
+//# sourceMappingURL=nearby-series.d.ts.map

package/dist/TimeSeriesTooltip/nearby-series.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nearby-series.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/nearby-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAe,WAAW,EAAE,iBAAiB,EAA+B,MAAM,UAAU,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,eAAO,MAAM,iCAAiC,MAAM,CAAC;AACrD,eAAO,MAAM,gCAAgC,KAAK,CAAC;AACnD,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,oBAAY,iBAAiB,GAAG,gBAAgB,EAAE,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,eAAe,EACvB,IAAI,CAAC,EAAE,WAAW,GACjB,iBAAiB,CAiGnB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,SAAS,EACT,KAAK,EACL,IAAI,EACJ,aAAqB,GACtB,EAAE;IACD,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC/B,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAChC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,qBAkDA;AAKD,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,SAAS,EACT,UAAU,GACX,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,OAAO,CAKV;AAKD,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,WAAW,EACX,aAAqB,GACtB,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,UAgBA"}

package/dist/TimeSeriesTooltip/nearby-series.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesTooltip/nearby-series.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions, EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT } from '../model';\nimport { CursorData } from './tooltip-model';\n\n// increase multipliers to show more series in tooltip\nexport const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show in tooltip (higher == more series shown)\nexport const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor\nexport const SHOW_FEWER_SERIES_LIMIT = 5;\n\nexport interface NearbySeriesInfo {\n  seriesIdx: number | null;\n  datumIdx: number | null;\n  seriesName: string;\n  date: number;\n  markerColor: string;\n  x: number;\n  y: number;\n  formattedY: string;\n  isClosestToCursor: boolean;\n}\n\nexport type NearbySeriesArray = NearbySeriesInfo[];\n\n/**\n * Returns formatted series data for the points that are close to the user's cursor\n * Adjust yBuffer to increase or decrease number of series shown\n */\nexport function checkforNearbySeries(\n  data: EChartsDataFormat,\n  pointInGrid: number[],\n  yBuffer: number,\n  chart?: EChartsInstance,\n  unit?: UnitOptions\n): NearbySeriesArray {\n  const currentNearbySeriesData: NearbySeriesArray = [];\n  const cursorX: number | null = pointInGrid[0] ?? null;\n  const cursorY: number | null = pointInGrid[1] ?? null;\n\n  if (cursorX === null || cursorY === null) {\n    return currentNearbySeriesData;\n  }\n\n  const nearbySeriesIndexes: number[] = [];\n  const emphasizedSeriesIndexes: number[] = [];\n  const nonEmphasizedSeriesIndexes: number[] = [];\n  const totalSeries = data.timeSeries.length;\n  if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {\n    for (let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++) {\n      const currentSeries = data.timeSeries[seriesIdx];\n      if (currentNearbySeriesData.length >= OPTIMIZED_MODE_SERIES_LIMIT) break;\n      if (currentSeries !== undefined) {\n        const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';\n        const markerColor = currentSeries.color ?? '#000';\n        if (Array.isArray(currentSeries.data)) {\n          for (let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++) {\n            const xValue = data.xAxis[datumIdx] ?? 0;\n            const yValue = currentSeries.data[datumIdx];\n            // ensure null values not displayed in tooltip\n            if (yValue !== undefined && yValue !== null && cursorX === datumIdx) {\n              if (yValue !== '-' && cursorY <= yValue + yBuffer && cursorY >= yValue - yBuffer) {\n                // show fewer bold series in tooltip when many total series\n                const minPercentRange = totalSeries > SHOW_FEWER_SERIES_LIMIT ? 2 : 5;\n                const percentRangeToCheck = Math.max(minPercentRange, 100 / totalSeries);\n                const isClosestToCursor = isWithinPercentageRange({\n                  valueToCheck: cursorY,\n                  baseValue: yValue,\n                  percentage: percentRangeToCheck,\n                });\n                if (isClosestToCursor) {\n                  emphasizedSeriesIndexes.push(seriesIdx);\n                } else {\n                  nonEmphasizedSeriesIndexes.push(seriesIdx);\n                  // ensure series not close to cursor are not highlighted\n                  if (chart?.dispatchAction !== undefined) {\n                    chart.dispatchAction({\n                      type: 'downplay',\n                      seriesIndex: seriesIdx,\n                    });\n                  }\n                }\n\n                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201\n                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;\n                const formattedY = formatValue(yValue, unit);\n                currentNearbySeriesData.push({\n                  seriesIdx: seriesIdx,\n                  datumIdx: datumIdx,\n                  seriesName: currentSeriesName,\n                  date: xValueMilliSeconds,\n                  x: xValue,\n                  y: yValue,\n                  formattedY: formattedY,\n                  markerColor: markerColor.toString(),\n                  isClosestToCursor,\n                });\n                nearbySeriesIndexes.push(seriesIdx);\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  if (chart?.dispatchAction !== undefined) {\n    // Clears emphasis state of all lines that are not emphasized.\n    // Emphasized is a subset of just the nearby series that are closest to cursor.\n    chart.dispatchAction({\n      type: 'downplay',\n      seriesIndex: nonEmphasizedSeriesIndexes,\n    });\n\n    // https://echarts.apache.org/en/api.html#action.highlight\n    if (emphasizedSeriesIndexes.length > 0) {\n      // Fadeout opacity of all series not closest to cursor.\n      chart.dispatchAction({\n        type: 'highlight',\n        seriesIndex: emphasizedSeriesIndexes,\n        notBlur: false,\n      });\n    } else {\n      // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.\n      chart.dispatchAction({\n        type: 'highlight',\n        seriesIndex: nearbySeriesIndexes,\n        notBlur: true,\n      });\n    }\n  }\n\n  return currentNearbySeriesData;\n}\n\n/**\n * Uses mouse position to determine whether user is hovering over a chart canvas\n * If yes, convert from pixel values to logical cartesian coordinates and return all nearby series\n */\nexport function getNearbySeriesData({\n  mousePos,\n  pinnedPos,\n  chartData,\n  chart,\n  unit,\n  showAllSeries = false,\n}: {\n  mousePos: CursorData['coords'];\n  pinnedPos: CursorData['coords'];\n  chartData: EChartsDataFormat;\n  chart?: EChartsInstance;\n  unit?: UnitOptions;\n  showAllSeries?: boolean;\n}) {\n  if (chart === undefined || mousePos === null) return [];\n\n  // prevents multiple tooltips showing from adjacent charts\n  let cursorTargetMatchesChart = false;\n  if (mousePos.target !== null) {\n    const currentParent = (<HTMLElement>mousePos.target).parentElement;\n    if (currentParent !== null) {\n      const currentGrandparent = currentParent.parentElement;\n      if (currentGrandparent !== null) {\n        const chartDom = chart.getDom();\n        if (chartDom === currentGrandparent) {\n          cursorTargetMatchesChart = true;\n        }\n      }\n    }\n  }\n\n  // allows moving cursor inside tooltip\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n    cursorTargetMatchesChart = true;\n  }\n\n  if (cursorTargetMatchesChart === false) return [];\n\n  if (chart['_model'] === undefined) return [];\n  const chartModel = chart['_model'];\n  const yInterval = chartModel.getComponent('yAxis').axis.scale._interval;\n  const totalSeries = chartData.timeSeries.length;\n  const yBuffer = getYBuffer({ yInterval, totalSeries, showAllSeries });\n  const pointInPixel = [mousePos.plotCanvas.x ?? 0, mousePos.plotCanvas.y ?? 0];\n  if (chart.containPixel('grid', pointInPixel)) {\n    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);\n    if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {\n      return checkforNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);\n    }\n  }\n\n  // clear all highlighted series when cursor exits canvas\n  // https://echarts.apache.org/en/api.html#action.downplay\n  for (let i = 0; i < totalSeries; i++) {\n    if (chart?.dispatchAction !== undefined) {\n      chart.dispatchAction({\n        type: 'downplay',\n        seriesIndex: i,\n      });\n    }\n  }\n  return [];\n}\n\n/*\n * Check if two numbers are within a specified percentage range\n */\nexport function isWithinPercentageRange({\n  valueToCheck,\n  baseValue,\n  percentage,\n}: {\n  valueToCheck: number;\n  baseValue: number;\n  percentage: number;\n}): boolean {\n  const range = (percentage / 100) * baseValue;\n  const lowerBound = baseValue - range;\n  const upperBound = baseValue + range;\n  return valueToCheck >= lowerBound && valueToCheck <= upperBound;\n}\n\n/*\n * Get range to check within for nearby series to show in tooltip.\n */\nexport function getYBuffer({\n  yInterval,\n  totalSeries,\n  showAllSeries = false,\n}: {\n  yInterval: number;\n  totalSeries: number;\n  showAllSeries?: boolean;\n}) {\n  if (showAllSeries) {\n    return yInterval * 10; // roughly correlates with grid so entire canvas is searched\n  }\n\n  // never let nearby series range be less than roughly the size of a single tick\n  const yBufferMin = yInterval * 0.3;\n\n  // tooltip trigger area gets smaller with more series\n  if (totalSeries > SHOW_FEWER_SERIES_LIMIT) {\n    const adjustedBuffer = (yInterval * DYNAMIC_NEARBY_SERIES_MULTIPLIER) / totalSeries;\n    return Math.max(yBufferMin, adjustedBuffer);\n  }\n\n  // increase multiplier to expand nearby series range\n  return Math.max(yBufferMin, yInterval * INCREASE_NEARBY_SERIES_MULTIPLIER);\n}\n"],"names":["formatValue","OPTIMIZED_MODE_SERIES_LIMIT","INCREASE_NEARBY_SERIES_MULTIPLIER","DYNAMIC_NEARBY_SERIES_MULTIPLIER","SHOW_FEWER_SERIES_LIMIT","checkforNearbySeries","data","pointInGrid","yBuffer","chart","unit","currentNearbySeriesData","cursorX","cursorY","nearbySeriesIndexes","emphasizedSeriesIndexes","nonEmphasizedSeriesIndexes","totalSeries","timeSeries","length","Array","isArray","xAxis","seriesIdx","currentSeries","undefined","currentSeriesName","name","toString","markerColor","color","datumIdx","xValue","yValue","minPercentRange","percentRangeToCheck","Math","max","isClosestToCursor","isWithinPercentageRange","valueToCheck","baseValue","percentage","push","dispatchAction","type","seriesIndex","xValueMilliSeconds","formattedY","seriesName","date","x","y","notBlur","getNearbySeriesData","mousePos","pinnedPos","chartData","showAllSeries","cursorTargetMatchesChart","target","currentParent","parentElement","currentGrandparent","chartDom","getDom","chartModel","yInterval","getComponent","axis","scale","_interval","getYBuffer","pointInPixel","plotCanvas","containPixel","convertFromPixel","i","range","lowerBound","upperBound","yBufferMin","adjustedBuffer"],"mappings":"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"}

package/dist/TimeSeriesTooltip/tooltip-model.d.ts

@@ -1,8 +1,12 @@
-import { FocusedSeriesArray } from './focused-series';
+import { NearbySeriesArray } from './nearby-series';
+export declare const TOOLTIP_MIN_WIDTH = 375;
 export declare const TOOLTIP_MAX_WIDTH = 650;
-export declare const TOOLTIP_MAX_HEIGHT = 400;
+export declare const TOOLTIP_MAX_HEIGHT = 600;
 export declare const TOOLTIP_LABELS_MAX_WIDTH: number;
-export declare const TOOLTIP_MAX_ITEMS = 50;
+export declare const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;
+export declare const FALLBACK_CHART_WIDTH = 750;
+export declare const NEARBY_SERIES_DESCRIPTION = "nearby series showing in tooltip";
+export declare const EMPHASIZED_SERIES_DESCRIPTION = "emphasized series showing as bold in tooltip";
 export declare const TOOLTIP_DATE_FORMAT: Intl.DateTimeFormat;
 export declare const defaultCursorData: {
     coords: {
@@ -59,7 +63,7 @@ export interface CursorData {
     chartWidth?: number;
 }
 export interface TooltipData {
-    focusedSeries: FocusedSeriesArray | null;
+    focusedSeries: NearbySeriesArray | null;
     cursor: CursorData;
 }
 declare type ZREventProperties = {