@perses-dev/components 0.8.1 → 0.9.0

package/dist/Tooltip/SeriesMarker.js

@@ -1 +1,33 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{Box}from"@mui/material";export function SeriesMarker(r){const{markerColor:i}=r;return _jsx(Box,{sx:{display:"inline-block",width:"12px",borderRadius:"2px",height:"12px",marginTop:.25,marginRight:1,verticalAlign:"top"},style:{backgroundColor:i}})}
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+export function SeriesMarker(props) {
+    const { markerColor  } = props;
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            display: 'inline-block',
+            width: '12px',
+            borderRadius: '2px',
+            height: '12px',
+            marginTop: 0.25,
+            marginRight: 1,
+            verticalAlign: 'top'
+        },
+        style: {
+            backgroundColor: markerColor
+        }
+    });
+}
+
+//# sourceMappingURL=SeriesMarker.js.map

package/dist/Tooltip/SeriesMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip/SeriesMarker.tsx"],"sourcesContent":["// Copyright 2022 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 } from '@mui/material';\n\ninterface SeriesMarkerProps {\n  markerColor: string;\n}\n\nexport function SeriesMarker(props: SeriesMarkerProps) {\n  const { markerColor } = props;\n  return (\n    <Box\n      sx={{\n        display: 'inline-block',\n        width: '12px',\n        borderRadius: '2px',\n        height: '12px',\n        marginTop: 0.25,\n        marginRight: 1,\n        verticalAlign: 'top',\n      }}\n      style={{ backgroundColor: markerColor }}\n    ></Box>\n  );\n}\n"],"names":["Box","SeriesMarker","props","markerColor","sx","display","width","borderRadius","height","marginTop","marginRight","verticalAlign","style","backgroundColor"],"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;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAMpC,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,MAAM,EAAEC,WAAW,CAAA,EAAE,GAAGD,KAAK,AAAC;IAC9B,qBACE,KAACF,GAAG;QACFI,EAAE,EAAE;YACFC,OAAO,EAAE,cAAc;YACvBC,KAAK,EAAE,MAAM;YACbC,YAAY,EAAE,KAAK;YACnBC,MAAM,EAAE,MAAM;YACdC,SAAS,EAAE,IAAI;YACfC,WAAW,EAAE,CAAC;YACdC,aAAa,EAAE,KAAK;SACrB;QACDC,KAAK,EAAE;YAAEC,eAAe,EAAEV,WAAW;SAAE;MAClC,CACP;AACJ,CAAC"}

package/dist/Tooltip/Tooltip.js

@@ -1 +1,72 @@
-import{jsx as _jsx}from"react/jsx-runtime";import React,{useState}from"react";import{Box,Portal}from"@mui/material";import{getFocusedSeriesData}from"./focused-series";import{TOOLTIP_MAX_HEIGHT,TOOLTIP_MAX_WIDTH,useMousePosition}from"./tooltip-model";import{TooltipContent}from"./TooltipContent";import{assembleTransform}from"./utils";const Tooltip=React.memo((function({chartRef:o,chartData:t,wrapLabels:e,pinTooltip:r}){var l,i;const[s,n]=useState(null),a=useMousePosition();if(null===a||null===a.target)return null;if(null===s&&"CANVAS"!==a.target.tagName)return null;const u=o.current,m=getFocusedSeriesData(a,t,s,u),p=null!==(l=null==u?void 0:u.getWidth())&&void 0!==l?l:750,f=null!==(i=null==u?void 0:u.getHeight())&&void 0!==i?i:230,c=assembleTransform(a,m.length,p,f,s);return 0===m.length?null:(!0===r&&null===s&&n(a),_jsx(Portal,{children:_jsx(Box,{sx:o=>({maxWidth:TOOLTIP_MAX_WIDTH,maxHeight: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:o.zIndex.tooltip,overflow:"hidden","&:hover":{overflowY:"auto"}}),style:{transform:c},children:_jsx(TooltipContent,{focusedSeries:m,wrapLabels:e})})}))}));export{Tooltip};
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Box, Portal } from '@mui/material';
+import { getFocusedSeriesData } from './focused-series';
+import { TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';
+import { TooltipContent } from './TooltipContent';
+import { assembleTransform } from './utils';
+const Tooltip = /*#__PURE__*/ React.memo(function Tooltip({ chartRef , chartData , wrapLabels , pinTooltip  }) {
+    const [pinnedPos, setPinnedPos] = useState(null);
+    const mousePos = 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 = getFocusedSeriesData(mousePos, chartData, pinnedPos, chart);
+    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 = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
+    if (focusedSeries.length === 0) {
+        return null;
+    }
+    if (pinTooltip === true && pinnedPos === null) {
+        setPinnedPos(mousePos);
+    }
+    return /*#__PURE__*/ _jsx(Portal, {
+        children: /*#__PURE__*/ _jsx(Box, {
+            sx: (theme)=>({
+                    maxWidth: TOOLTIP_MAX_WIDTH,
+                    maxHeight: 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__*/ _jsx(TooltipContent, {
+                focusedSeries: focusedSeries,
+                wrapLabels: wrapLabels
+            })
+        })
+    });
+});
+export { Tooltip };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["// Copyright 2022 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 React, { useState } from 'react';\nimport { Box, Portal } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { EChartsDataFormat } from '../model/graph';\nimport { getFocusedSeriesData } from './focused-series';\nimport { CursorCoordinates, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';\nimport { TooltipContent } from './TooltipContent';\nimport { assembleTransform } from './utils';\n\ninterface TooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  pinTooltip: boolean;\n  wrapLabels?: boolean;\n}\n\nconst Tooltip = React.memo(function Tooltip({ chartRef, chartData, wrapLabels, pinTooltip }: TooltipProps) {\n  const [pinnedPos, setPinnedPos] = useState<CursorCoordinates | null>(null);\n  const mousePos = useMousePosition();\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);\n  const chartWidth = chart?.getWidth() ?? 750;\n  const chartHeight = chart?.getHeight() ?? 230;\n  const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);\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        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\nexport { Tooltip };\n"],"names":["React","useState","Box","Portal","getFocusedSeriesData","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","useMousePosition","TooltipContent","assembleTransform","Tooltip","memo","chartRef","chartData","wrapLabels","pinTooltip","pinnedPos","setPinnedPos","mousePos","target","tagName","chart","current","focusedSeries","chartWidth","getWidth","chartHeight","getHeight","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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"}

package/dist/Tooltip/TooltipContent.js

@@ -1 +1,89 @@
-import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useMemo}from"react";import{Box,Divider,Stack,Typography}from"@mui/material";import{SeriesInfo}from"./SeriesInfo";export function TooltipContent(r){const{focusedSeries:e,wrapLabels:t}=r,s=e&&e[0]&&e[0].date?e[0].date:null,o=useMemo((()=>null===e?null:e.sort(((r,e)=>r.y>e.y?-1:1))),[e]);return null!==o&&null!==s?_jsxs(Stack,{py:1,px:1.5,spacing:.5,children:[_jsx(Typography,{variant:"caption",children:(r=>{const[e,t,s]=r.split(",");return _jsxs(_Fragment,{children:[_jsxs(Typography,{variant:"caption",sx:r=>({color:r.palette.common.white}),children:[e,", ",t," –"]}),_jsx(Typography,{variant:"caption",children:_jsx("strong",{children:s})})]})})(s)}),_jsx(Divider,{sx:r=>({borderColor:r.palette.grey[500]})}),_jsx(Box,{sx:{display:"table"},children:o.map((({datumIdx:r,seriesIdx:e,seriesName:s,y:n,markerColor:a})=>{if(null===r||null===e)return null;const i=e.toString()+r.toString();return _jsx(SeriesInfo,{seriesName:s,y:n,markerColor:a,totalSeries:o.length,wrapLabels:t},i)}))})]}):_jsx(_Fragment,{})}
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, Divider, Stack, Typography } from '@mui/material';
+import { SeriesInfo } from './SeriesInfo';
+export 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 /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(Typography, {
+                    variant: "caption",
+                    sx: (theme)=>({
+                            color: theme.palette.common.white
+                        }),
+                    children: [
+                        month,
+                        ", ",
+                        year,
+                        " –"
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    children: /*#__PURE__*/ _jsx("strong", {
+                        children: time
+                    })
+                })
+            ]
+        });
+    };
+    const sortedFocusedSeries = 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__*/ _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 , markerColor  })=>{
+                        if (datumIdx === null || seriesIdx === null) return null;
+                        const key = seriesIdx.toString() + datumIdx.toString();
+                        return /*#__PURE__*/ _jsx(SeriesInfo, {
+                            seriesName: seriesName,
+                            y: y,
+                            markerColor: markerColor,
+                            totalSeries: sortedFocusedSeries.length,
+                            wrapLabels: wrapLabels
+                        }, key);
+                    })
+                })
+            ]
+        });
+    } else {
+        return /*#__PURE__*/ _jsx(_Fragment, {});
+    }
+}
+
+//# sourceMappingURL=TooltipContent.js.map

package/dist/Tooltip/TooltipContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright 2022 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 { FocusedSeriesArray } from './focused-series';\nimport { SeriesInfo } from './SeriesInfo';\n\ninterface TooltipContentProps {\n  focusedSeries: FocusedSeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { focusedSeries, wrapLabels } = props;\n\n  const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;\n\n  const formatTimeSeriesHeader = (timeString: string) => {\n    const [month, year, time] = timeString.split(',');\n    return (\n      <>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {month}, {year} –\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{time}</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, 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                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","SeriesInfo","TooltipContent","props","focusedSeries","wrapLabels","seriesTime","date","formatTimeSeriesHeader","timeString","month","year","time","split","variant","sx","theme","color","palette","common","white","strong","sortedFocusedSeries","sort","a","b","y","py","px","spacing","borderColor","grey","display","map","datumIdx","seriesIdx","seriesName","markerColor","key","toString","totalSeries","length"],"mappings":"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"}

package/dist/Tooltip/focused-series.js

@@ -1 +1,108 @@
-import{TOOLTIP_DATE_FORMAT,TOOLTIP_MAX_ITEMS}from"./tooltip-model";export function getNearbySeries(e,t,r){var i,n,l,o,a;const s=[],u=null!==(i=t[0])&&void 0!==i?i:null,d=null!==(n=t[1])&&void 0!==n?n:null;if(null===u||null===d)return s;if(Array.isArray(e.xAxis)&&Array.isArray(e.timeSeries))for(let t=0;t<e.timeSeries.length;t++){const i=e.timeSeries[t];if(s.length>=TOOLTIP_MAX_ITEMS)break;if(void 0!==i){const n=i.name?i.name.toString():"",m=null!==(l=i.color)&&void 0!==l?l:"#000";if(Array.isArray(i.data))for(let l=0;l<i.data.length;l++){const f=null!==(o=e.xAxis[l])&&void 0!==o?o:0,v=null!==(a=i.data[l])&&void 0!==a?a:0;if(u===l&&"-"!==v&&d<=v+r&&d>=v-r){const e=f>99999999999?f:1e3*f,r=TOOLTIP_DATE_FORMAT.format(e);s.push({seriesIdx:t,datumIdx:l,seriesName:n,date:r,x:f,y:v,markerColor:m.toString()})}}}}return s}export function getFocusedSeriesData(e,t,r,i){var n,l;if(void 0===i||null===e)return[];let o=!1;if(null!==e.target){const t=e.target.parentElement;if(null!==t){const e=t.parentElement;null!==e&&i.getDom()===e&&(o=!0)}}if(null!==r&&(e=r,o=!0),!1===o)return[];if(void 0===i._model)return[];const a=i._model.getComponent("yAxis").axis.scale._interval,s=t.timeSeries.length>TOOLTIP_MAX_ITEMS?.5*a:2*a,u=[null!==(n=e.plotCanvas.x)&&void 0!==n?n:0,null!==(l=e.plotCanvas.y)&&void 0!==l?l:0];if(i.containPixel("grid",u)){const e=i.convertFromPixel("grid",u);if(void 0!==e[0]&&void 0!==e[1])return getNearbySeries(t,e,s)}return[]}
+// 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.
+import { TOOLTIP_DATE_FORMAT, TOOLTIP_MAX_ITEMS } from './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
+ */ export function getNearbySeries(data, pointInGrid, yBuffer) {
+    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 >= 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 = TOOLTIP_DATE_FORMAT.format(xValueMilliSeconds);
+                                currentFocusedData.push({
+                                    seriesIdx: seriesIdx,
+                                    datumIdx: datumIdx,
+                                    seriesName: currentSeriesName,
+                                    date: formattedDate,
+                                    x: xValue,
+                                    y: yValue,
+                                    markerColor: markerColor.toString()
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return currentFocusedData;
+}
+/**
+ * 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
+ */ export function getFocusedSeriesData(mousePos, chartData, pinnedPos, chart) {
+    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_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);
+        }
+    }
+    return [];
+}
+
+//# sourceMappingURL=focused-series.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip/focused-series.ts"],"sourcesContent":["// Copyright 2022 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 { EChartsDataFormat } from '../model/graph';\nimport { CursorData, TOOLTIP_DATE_FORMAT, TOOLTIP_MAX_ITEMS } from './tooltip-model';\n\nexport interface FocusedSeriesInfo {\n  seriesIdx: number | null;\n  datumIdx: number | null;\n  seriesName: string;\n  date: string;\n  markerColor: string;\n  x: number;\n  y: number;\n}\n\nexport type FocusedSeriesArray = FocusedSeriesInfo[];\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 getNearbySeries(data: EChartsDataFormat, pointInGrid: number[], yBuffer: number): FocusedSeriesArray {\n  const currentFocusedData: FocusedSeriesArray = [];\n  const focusedX: number | null = pointInGrid[0] ?? null;\n  const focusedY: number | null = pointInGrid[1] ?? null;\n\n  if (focusedX === null || focusedY === null) {\n    return currentFocusedData;\n  }\n\n  if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {\n    for (let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++) {\n      const currentSeries = data.timeSeries[seriesIdx];\n      if (currentFocusedData.length >= TOOLTIP_MAX_ITEMS) 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] ?? 0;\n            if (focusedX === datumIdx) {\n              if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {\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 formattedDate = TOOLTIP_DATE_FORMAT.format(xValueMilliSeconds);\n                currentFocusedData.push({\n                  seriesIdx: seriesIdx,\n                  datumIdx: datumIdx,\n                  seriesName: currentSeriesName,\n                  date: formattedDate,\n                  x: xValue,\n                  y: yValue,\n                  markerColor: markerColor.toString(),\n                });\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  return currentFocusedData;\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 focused series\n */\nexport function getFocusedSeriesData(\n  mousePos: CursorData['coords'],\n  chartData: EChartsDataFormat,\n  pinnedPos: CursorData['coords'],\n  chart?: EChartsInstance\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 yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;\n\n  const seriesNum = chartData.timeSeries.length;\n  // tooltip trigger area gets smaller with more series\n  const yBuffer = seriesNum > TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 2;\n\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 getNearbySeries(chartData, pointInGrid, yBuffer);\n    }\n  }\n  return [];\n}\n"],"names":["TOOLTIP_DATE_FORMAT","TOOLTIP_MAX_ITEMS","getNearbySeries","data","pointInGrid","yBuffer","currentFocusedData","focusedX","focusedY","Array","isArray","xAxis","timeSeries","seriesIdx","length","currentSeries","undefined","currentSeriesName","name","toString","markerColor","color","datumIdx","xValue","yValue","xValueMilliSeconds","formattedDate","format","push","seriesName","date","x","y","getFocusedSeriesData","mousePos","chartData","pinnedPos","chart","cursorTargetMatchesChart","target","currentParent","parentElement","currentGrandparent","chartDom","getDom","chartModel","yAxisInterval","getComponent","axis","scale","_interval","seriesNum","pointInPixel","plotCanvas","containPixel","convertFromPixel"],"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;AAIjC,SAAqBA,mBAAmB,EAAEC,iBAAiB,QAAQ,iBAAiB,CAAC;AAcrF;;;CAGC,GACD,OAAO,SAASC,eAAe,CAACC,IAAuB,EAAEC,WAAqB,EAAEC,OAAe,EAAsB;IACnH,MAAMC,kBAAkB,GAAuB,EAAE,AAAC;QAClBF,GAAc;IAA9C,MAAMG,QAAQ,GAAkBH,CAAAA,GAAc,GAAdA,WAAW,CAAC,CAAC,CAAC,cAAdA,GAAc,cAAdA,GAAc,GAAI,IAAI,AAAC;QACvBA,IAAc;IAA9C,MAAMI,QAAQ,GAAkBJ,CAAAA,IAAc,GAAdA,WAAW,CAAC,CAAC,CAAC,cAAdA,IAAc,cAAdA,IAAc,GAAI,IAAI,AAAC;IAEvD,IAAIG,QAAQ,KAAK,IAAI,IAAIC,QAAQ,KAAK,IAAI,EAAE;QAC1C,OAAOF,kBAAkB,CAAC;IAC5B,CAAC;IAED,IAAIG,KAAK,CAACC,OAAO,CAACP,IAAI,CAACQ,KAAK,CAAC,IAAIF,KAAK,CAACC,OAAO,CAACP,IAAI,CAACS,UAAU,CAAC,EAAE;QAC/D,IAAK,IAAIC,SAAS,GAAG,CAAC,EAAEA,SAAS,GAAGV,IAAI,CAACS,UAAU,CAACE,MAAM,EAAED,SAAS,EAAE,CAAE;YACvE,MAAME,aAAa,GAAGZ,IAAI,CAACS,UAAU,CAACC,SAAS,CAAC,AAAC;YACjD,IAAIP,kBAAkB,CAACQ,MAAM,IAAIb,iBAAiB,EAAE,MAAM;YAC1D,IAAIc,aAAa,KAAKC,SAAS,EAAE;gBAC/B,MAAMC,iBAAiB,GAAGF,aAAa,CAACG,IAAI,GAAGH,aAAa,CAACG,IAAI,CAACC,QAAQ,EAAE,GAAG,EAAE,AAAC;oBAC9DJ,MAAmB;gBAAvC,MAAMK,WAAW,GAAGL,CAAAA,MAAmB,GAAnBA,aAAa,CAACM,KAAK,cAAnBN,MAAmB,cAAnBA,MAAmB,GAAI,MAAM,AAAC;gBAClD,IAAIN,KAAK,CAACC,OAAO,CAACK,aAAa,CAACZ,IAAI,CAAC,EAAE;oBACrC,IAAK,IAAImB,QAAQ,GAAG,CAAC,EAAEA,QAAQ,GAAGP,aAAa,CAACZ,IAAI,CAACW,MAAM,EAAEQ,QAAQ,EAAE,CAAE;4BACxDnB,SAAoB;wBAAnC,MAAMoB,MAAM,GAAGpB,CAAAA,SAAoB,GAApBA,IAAI,CAACQ,KAAK,CAACW,QAAQ,CAAC,cAApBnB,SAAoB,cAApBA,SAAoB,GAAI,CAAC,AAAC;4BAC1BY,UAA4B;wBAA3C,MAAMS,MAAM,GAAGT,CAAAA,UAA4B,GAA5BA,aAAa,CAACZ,IAAI,CAACmB,QAAQ,CAAC,cAA5BP,UAA4B,cAA5BA,UAA4B,GAAI,CAAC,AAAC;wBACjD,IAAIR,QAAQ,KAAKe,QAAQ,EAAE;4BACzB,IAAIE,MAAM,KAAK,GAAG,IAAIhB,QAAQ,IAAIgB,MAAM,GAAGnB,OAAO,IAAIG,QAAQ,IAAIgB,MAAM,GAAGnB,OAAO,EAAE;gCAClF,mGAAmG;gCACnG,MAAMoB,kBAAkB,GAAGF,MAAM,GAAG,WAAW,GAAGA,MAAM,GAAGA,MAAM,GAAG,IAAI,AAAC;gCACzE,MAAMG,aAAa,GAAG1B,mBAAmB,CAAC2B,MAAM,CAACF,kBAAkB,CAAC,AAAC;gCACrEnB,kBAAkB,CAACsB,IAAI,CAAC;oCACtBf,SAAS,EAAEA,SAAS;oCACpBS,QAAQ,EAAEA,QAAQ;oCAClBO,UAAU,EAAEZ,iBAAiB;oCAC7Ba,IAAI,EAAEJ,aAAa;oCACnBK,CAAC,EAAER,MAAM;oCACTS,CAAC,EAAER,MAAM;oCACTJ,WAAW,EAAEA,WAAW,CAACD,QAAQ,EAAE;iCACpC,CAAC,CAAC;4BACL,CAAC;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAOb,kBAAkB,CAAC;AAC5B,CAAC;AAED;;;CAGC,GACD,OAAO,SAAS2B,oBAAoB,CAClCC,QAA8B,EAC9BC,SAA4B,EAC5BC,SAA+B,EAC/BC,KAAuB,EACvB;IACA,IAAIA,KAAK,KAAKrB,SAAS,IAAIkB,QAAQ,KAAK,IAAI,EAAE,OAAO,EAAE,CAAC;IAExD,0DAA0D;IAC1D,IAAII,wBAAwB,GAAG,KAAK,AAAC;IACrC,IAAIJ,QAAQ,CAACK,MAAM,KAAK,IAAI,EAAE;QAC5B,MAAMC,aAAa,GAAG,AAAcN,QAAQ,CAACK,MAAM,CAAEE,aAAa,AAAC;QACnE,IAAID,aAAa,KAAK,IAAI,EAAE;YAC1B,MAAME,kBAAkB,GAAGF,aAAa,CAACC,aAAa,AAAC;YACvD,IAAIC,kBAAkB,KAAK,IAAI,EAAE;gBAC/B,MAAMC,QAAQ,GAAGN,KAAK,CAACO,MAAM,EAAE,AAAC;gBAChC,IAAID,QAAQ,KAAKD,kBAAkB,EAAE;oBACnCJ,wBAAwB,GAAG,IAAI,CAAC;gBAClC,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,sCAAsC;IACtC,IAAIF,SAAS,KAAK,IAAI,EAAE;QACtBF,QAAQ,GAAGE,SAAS,CAAC;QACrBE,wBAAwB,GAAG,IAAI,CAAC;IAClC,CAAC;IAED,IAAIA,wBAAwB,KAAK,KAAK,EAAE,OAAO,EAAE,CAAC;IAElD,IAAID,KAAK,CAAC,QAAQ,CAAC,KAAKrB,SAAS,EAAE,OAAO,EAAE,CAAC;IAC7C,MAAM6B,UAAU,GAAGR,KAAK,CAAC,QAAQ,CAAC,AAAC;IACnC,MAAMS,aAAa,GAAGD,UAAU,CAACE,YAAY,CAAC,OAAO,CAAC,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,AAAC;IAE5E,MAAMC,SAAS,GAAGhB,SAAS,CAACvB,UAAU,CAACE,MAAM,AAAC;IAC9C,qDAAqD;IACrD,MAAMT,OAAO,GAAG8C,SAAS,GAAGlD,iBAAiB,GAAG6C,aAAa,GAAG,GAAG,GAAGA,aAAa,GAAG,CAAC,AAAC;QAElEZ,EAAqB,EAAOA,EAAqB;IAAvE,MAAMkB,YAAY,GAAG;QAAClB,CAAAA,EAAqB,GAArBA,QAAQ,CAACmB,UAAU,CAACtB,CAAC,cAArBG,EAAqB,cAArBA,EAAqB,GAAI,CAAC;QAAEA,CAAAA,EAAqB,GAArBA,QAAQ,CAACmB,UAAU,CAACrB,CAAC,cAArBE,EAAqB,cAArBA,EAAqB,GAAI,CAAC;KAAC,AAAC;IAC9E,IAAIG,KAAK,CAACiB,YAAY,CAAC,MAAM,EAAEF,YAAY,CAAC,EAAE;QAC5C,MAAMhD,WAAW,GAAGiC,KAAK,CAACkB,gBAAgB,CAAC,MAAM,EAAEH,YAAY,CAAC,AAAC;QACjE,IAAIhD,WAAW,CAAC,CAAC,CAAC,KAAKY,SAAS,IAAIZ,WAAW,CAAC,CAAC,CAAC,KAAKY,SAAS,EAAE;YAChE,OAAOd,eAAe,CAACiC,SAAS,EAAE/B,WAAW,EAAEC,OAAO,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC"}

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

@@ -1 +1,75 @@
-import{getNearbySeries}from"./focused-series";describe("getNearbySeries",(()=>{const e={timeSeries:[{type:"line",name:'env="demo", instance="demo.do.prometheus", job="node", mode="test"',color:"hsla(-1365438424,50%,50%,0.8)",data:[.0002315202231525094,.00022873082287300112,.00023152022315149463,.00023152022315149463,.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:[.05245188284519867,.0524463040446356,.0524463040446356,.05247140864723438,.052482566248230646],symbol:"circle"}],xAxis:[1654007865e3,165400788e4,1654007895e3,165400791e4,1654007925e3],rangeMs:6e4},o=[2,.0560655737704918],s=[{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:1654007895e3,y:.0524463040446356}];it("should return focused series data for points nearby the cursor",(()=>{expect(getNearbySeries(e,o,.02)).toEqual(s)}))}));
+// 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.
+import { getNearbySeries } from './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
+        }
+    ];
+    it('should return focused series data for points nearby the cursor', ()=>{
+        expect(getNearbySeries(chartData, pointInGrid, yBuffer)).toEqual(focusedSeriesOutput);
+    });
+});
+
+//# sourceMappingURL=focused-series.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip/focused-series.test.ts"],"sourcesContent":["// Copyright 2022 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 { EChartsDataFormat } from '../model';\nimport { getNearbySeries } from './focused-series';\n\ndescribe('getNearbySeries', () => {\n  const chartData: EChartsDataFormat = {\n    timeSeries: [\n      {\n        type: 'line',\n        name: 'env=\"demo\", instance=\"demo.do.prometheus\", job=\"node\", mode=\"test\"',\n        color: 'hsla(-1365438424,50%,50%,0.8)',\n        data: [\n          0.0002315202231525094, 0.00022873082287300112, 0.00023152022315149463, 0.00023152022315149463,\n          0.00022873082287300112,\n        ],\n        symbol: 'circle',\n      },\n      {\n        type: 'line',\n        name: 'env=\"demo\", instance=\"demo.do.prometheus\", job=\"node\", mode=\"test alt\"',\n        color: 'hsla(286664040,50%,50%,0.8)',\n        data: [0.05245188284519867, 0.0524463040446356, 0.0524463040446356, 0.05247140864723438, 0.052482566248230646],\n        symbol: 'circle',\n      },\n    ],\n    xAxis: [1654007865000, 1654007880000, 1654007895000, 1654007910000, 1654007925000],\n    rangeMs: 60000,\n  };\n\n  // https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel\n  const pointInGrid = [2, 0.0560655737704918]; // converted from chart.getZr() mousemove coordinates\n\n  const yBuffer = 0.02; // calculated from y axis interval\n\n  const focusedSeriesOutput = [\n    {\n      date: 'May 31, 2022, 2:38:15 PM',\n      datumIdx: 2,\n      markerColor: 'hsla(286664040,50%,50%,0.8)',\n      seriesName: 'env=\"demo\", instance=\"demo.do.prometheus\", job=\"node\", mode=\"test alt\"',\n      seriesIdx: 1,\n      x: 1654007895000,\n      y: 0.0524463040446356,\n    },\n  ];\n\n  it('should return focused series data for points nearby the cursor', () => {\n    expect(getNearbySeries(chartData, pointInGrid, yBuffer)).toEqual(focusedSeriesOutput);\n  });\n});\n"],"names":["getNearbySeries","describe","chartData","timeSeries","type","name","color","data","symbol","xAxis","rangeMs","pointInGrid","yBuffer","focusedSeriesOutput","date","datumIdx","markerColor","seriesName","seriesIdx","x","y","it","expect","toEqual"],"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;AAGjC,SAASA,eAAe,QAAQ,kBAAkB,CAAC;AAEnDC,QAAQ,CAAC,iBAAiB,EAAE,IAAM;IAChC,MAAMC,SAAS,GAAsB;QACnCC,UAAU,EAAE;YACV;gBACEC,IAAI,EAAE,MAAM;gBACZC,IAAI,EAAE,oEAAoE;gBAC1EC,KAAK,EAAE,+BAA+B;gBACtCC,IAAI,EAAE;AACJ,yCAAqB;AAAE,0CAAsB;AAAE,0CAAsB;AAAE,0CAAsB;AAC7F,0CAAsB;iBACvB;gBACDC,MAAM,EAAE,QAAQ;aACjB;YACD;gBACEJ,IAAI,EAAE,MAAM;gBACZC,IAAI,EAAE,wEAAwE;gBAC9EC,KAAK,EAAE,6BAA6B;gBACpCC,IAAI,EAAE;AAAC,uCAAmB;AAAE,sCAAkB;AAAE,sCAAkB;AAAE,uCAAmB;AAAE,wCAAoB;iBAAC;gBAC9GC,MAAM,EAAE,QAAQ;aACjB;SACF;QACDC,KAAK,EAAE;AAAC,yBAAa;AAAE,yBAAa;AAAE,yBAAa;AAAE,yBAAa;AAAE,yBAAa;SAAC;QAClFC,OAAO,EAAE,KAAK;KACf,AAAC;IAEF,0EAA0E;IAC1E,MAAMC,WAAW,GAAG;AAAC,SAAC;AAAE,0BAAkB;KAAC,AAAC,EAAC,qDAAqD;IAElG,MAAMC,OAAO,GAAG,IAAI,AAAC,EAAC,kCAAkC;IAExD,MAAMC,mBAAmB,GAAG;QAC1B;YACEC,IAAI,EAAE,0BAA0B;YAChCC,QAAQ,EAAE,CAAC;YACXC,WAAW,EAAE,6BAA6B;YAC1CC,UAAU,EAAE,wEAAwE;YACpFC,SAAS,EAAE,CAAC;YACZC,CAAC,EAAE,aAAa;YAChBC,CAAC,EAAE,kBAAkB;SACtB;KACF,AAAC;IAEFC,EAAE,CAAC,gEAAgE,EAAE,IAAM;QACzEC,MAAM,CAACtB,eAAe,CAACE,SAAS,EAAES,WAAW,EAAEC,OAAO,CAAC,CAAC,CAACW,OAAO,CAACV,mBAAmB,CAAC,CAAC;IACxF,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/Tooltip/index.js

@@ -1 +1,16 @@
-export*from"./Tooltip";export*from"./SeriesMarker";
+// 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.
+export * from './Tooltip';
+export * from './SeriesMarker';
+
+//# sourceMappingURL=index.js.map

package/dist/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip/index.ts"],"sourcesContent":["// Copyright 2022 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 './Tooltip';\nexport * from './SeriesMarker';\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,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC"}

package/dist/Tooltip/tooltip-model.js

@@ -1 +1,80 @@
-import{useEffect,useState}from"react";export const TOOLTIP_MAX_WIDTH=650;export const TOOLTIP_MAX_HEIGHT=230;export const TOOLTIP_LABELS_MAX_WIDTH=500;export const TOOLTIP_MAX_ITEMS=50;export const TOOLTIP_DATE_FORMAT=new Intl.DateTimeFormat(void 0,{year:"numeric",month:"short",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric",hour12:!0});export const defaultCursorData={coords:{viewport:{x:0,y:0},plotCanvas:{x:0,y:0},zrender:{x:0,y:0},target:null},chartWidth:0};export const emptyTooltipData={cursor:defaultCursorData,focusedSeries:null};export const useMousePosition=()=>{const[e,t]=useState(null);return useEffect((()=>{const e=e=>t({viewport:{x:e.clientX,y:e.clientY},plotCanvas:{x:e.offsetX,y:e.offsetY},zrender:{x:e.zrX,y:e.zrY},target:e.target});return window.addEventListener("mousemove",e),()=>{window.removeEventListener("mousemove",e)}}),[]),e};
+// 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.
+import { useEffect, useState } from 'react';
+export const TOOLTIP_MAX_WIDTH = 650;
+export const TOOLTIP_MAX_HEIGHT = 230;
+export const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;
+export const TOOLTIP_MAX_ITEMS = 50;
+export const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: true
+});
+export const defaultCursorData = {
+    coords: {
+        viewport: {
+            x: 0,
+            y: 0
+        },
+        plotCanvas: {
+            x: 0,
+            y: 0
+        },
+        zrender: {
+            x: 0,
+            y: 0
+        },
+        target: null
+    },
+    chartWidth: 0
+};
+export const emptyTooltipData = {
+    cursor: defaultCursorData,
+    focusedSeries: null
+};
+export const useMousePosition = ()=>{
+    const [coords, setCoords] = useState(null);
+    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;
+};
+
+//# sourceMappingURL=tooltip-model.js.map

package/dist/Tooltip/tooltip-model.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip/tooltip-model.ts"],"sourcesContent":["// Copyright 2022 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 { useEffect, useState } from 'react';\nimport { FocusedSeriesArray } from './focused-series';\n\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 230;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\n\nexport const TOOLTIP_MAX_ITEMS = 50;\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    viewport: {\n      x: 0,\n      y: 0,\n    },\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const emptyTooltipData = {\n  cursor: defaultCursorData,\n  focusedSeries: null,\n};\n\nexport interface CursorCoordinates {\n  viewport: {\n    x: number;\n    y: number;\n  };\n  plotCanvas: {\n    x: number;\n    y: number;\n  };\n  zrender: {\n    x?: number;\n    y?: number;\n  };\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: FocusedSeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = MouseEvent & ZREventProperties;\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent) => {\n      return setCoords({\n        viewport: {\n          x: e.clientX,\n          y: e.clientY,\n        },\n        plotCanvas: {\n          x: e.offsetX,\n          y: e.offsetY,\n        },\n        zrender: {\n          // echarts canvas coordinates added automatically by zrender\n          // zrX and zrY are similar to offsetX and offsetY but they return undefined when not hovering over a chart canvas\n          x: e.zrX,\n          y: e.zrY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n    window.addEventListener('mousemove', setFromEvent);\n\n    return () => {\n      window.removeEventListener('mousemove', setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n"],"names":["useEffect","useState","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_MAX_ITEMS","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","viewport","x","y","plotCanvas","zrender","target","chartWidth","emptyTooltipData","cursor","focusedSeries","useMousePosition","setCoords","setFromEvent","e","clientX","clientY","offsetX","offsetY","zrX","zrY","window","addEventListener","removeEventListener"],"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,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAG5C,OAAO,MAAMC,iBAAiB,GAAG,GAAG,CAAC;AACrC,OAAO,MAAMC,kBAAkB,GAAG,GAAG,CAAC;AACtC,OAAO,MAAMC,wBAAwB,GAAGF,iBAAiB,GAAG,GAAG,CAAC;AAEhE,OAAO,MAAMG,iBAAiB,GAAG,EAAE,CAAC;AAEpC,OAAO,MAAMC,mBAAmB,GAAG,IAAIC,IAAI,CAACC,cAAc,CAACC,SAAS,EAAE;IACpEC,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE,OAAO;IACdC,GAAG,EAAE,SAAS;IACdC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE,IAAI;CACb,CAAC,CAAC;AAEH,OAAO,MAAMC,iBAAiB,GAAG;IAC/BC,MAAM,EAAE;QACNC,QAAQ,EAAE;YACRC,CAAC,EAAE,CAAC;YACJC,CAAC,EAAE,CAAC;SACL;QACDC,UAAU,EAAE;YACVF,CAAC,EAAE,CAAC;YACJC,CAAC,EAAE,CAAC;SACL;QACDE,OAAO,EAAE;YACPH,CAAC,EAAE,CAAC;YACJC,CAAC,EAAE,CAAC;SACL;QACDG,MAAM,EAAE,IAAI;KACb;IACDC,UAAU,EAAE,CAAC;CACd,CAAC;AAEF,OAAO,MAAMC,gBAAgB,GAAG;IAC9BC,MAAM,EAAEV,iBAAiB;IACzBW,aAAa,EAAE,IAAI;CACpB,CAAC;AAsCF,OAAO,MAAMC,gBAAgB,GAAG,IAA4B;IAC1D,MAAM,CAACX,MAAM,EAAEY,SAAS,CAAC,GAAG7B,QAAQ,CAAuB,IAAI,CAAC,AAAC;IAEjED,SAAS,CAAC,IAAM;QACd,MAAM+B,YAAY,GAAG,CAACC,CAAkB,GAAK;YAC3C,OAAOF,SAAS,CAAC;gBACfX,QAAQ,EAAE;oBACRC,CAAC,EAAEY,CAAC,CAACC,OAAO;oBACZZ,CAAC,EAAEW,CAAC,CAACE,OAAO;iBACb;gBACDZ,UAAU,EAAE;oBACVF,CAAC,EAAEY,CAAC,CAACG,OAAO;oBACZd,CAAC,EAAEW,CAAC,CAACI,OAAO;iBACb;gBACDb,OAAO,EAAE;oBACP,4DAA4D;oBAC5D,iHAAiH;oBACjHH,CAAC,EAAEY,CAAC,CAACK,GAAG;oBACRhB,CAAC,EAAEW,CAAC,CAACM,GAAG;iBACT;gBACD,0HAA0H;gBAC1Hd,MAAM,EAAEQ,CAAC,CAACR,MAAM;aACjB,CAAC,CAAC;QACL,CAAC,AAAC;QACFe,MAAM,CAACC,gBAAgB,CAAC,WAAW,EAAET,YAAY,CAAC,CAAC;QAEnD,OAAO,IAAM;YACXQ,MAAM,CAACE,mBAAmB,CAAC,WAAW,EAAEV,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAOb,MAAM,CAAC;AAChB,CAAC,CAAC"}