@perses-dev/components 0.30.0 → 0.31.0

package/dist/theme/palette/grey.js

@@ -13,6 +13,7 @@
 import { grey } from './colors/grey';
 export const greyOption = (mode)=>{
     return mode === 'light' ? {
+        50: grey[50],
         100: grey[100],
         200: grey[200],
         300: grey[300],
@@ -21,8 +22,10 @@ export const greyOption = (mode)=>{
         600: grey[600],
         700: grey[700],
         800: grey[800],
-        900: grey[900]
+        900: grey[900],
+        950: grey[950]
     } : {
+        50: grey[950],
         100: grey[900],
         200: grey[800],
         300: grey[700],
@@ -31,7 +34,8 @@ export const greyOption = (mode)=>{
         600: grey[400],
         700: grey[300],
         800: grey[200],
-        900: grey[100]
+        900: grey[100],
+        950: grey[50]
     };
 };
 

package/dist/theme/palette/grey.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/palette/grey.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 { PaletteOptions, PaletteMode } from '@mui/material';\nimport { grey } from './colors/grey';\n\nexport const greyOption = (mode: PaletteMode): PaletteOptions['grey'] => {\n  return mode === 'light'\n    ? {\n        100: grey[100],\n        200: grey[200],\n        300: grey[300],\n        400: grey[400],\n        500: grey[500],\n        600: grey[600],\n        700: grey[700],\n        800: grey[800],\n        900: grey[900],\n      }\n    : // Reverse greys from darkest to lightest for Dark mode\n      {\n        100: grey[900],\n        200: grey[800],\n        300: grey[700],\n        400: grey[600],\n        500: grey[500],\n        600: grey[400],\n        700: grey[300],\n        800: grey[200],\n        900: grey[100],\n      };\n};\n"],"names":["grey","greyOption","mode"],"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,IAAI,QAAQ,eAAe,CAAC;AAErC,OAAO,MAAMC,UAAU,GAAG,CAACC,IAAiB,GAA6B;IACvE,OAAOA,IAAI,KAAK,OAAO,GACnB;AACE,QAAA,GAAG,EAAEF,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;KACf,GAED;AACE,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;KACf,CAAC;AACR,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/theme/palette/grey.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 { PaletteOptions, PaletteMode } from '@mui/material';\nimport { grey } from './colors/grey';\n\nexport const greyOption = (mode: PaletteMode): PaletteOptions['grey'] => {\n  return mode === 'light'\n    ? {\n        50: grey[50],\n        100: grey[100],\n        200: grey[200],\n        300: grey[300],\n        400: grey[400],\n        500: grey[500],\n        600: grey[600],\n        700: grey[700],\n        800: grey[800],\n        900: grey[900],\n        950: grey[950],\n      }\n    : // Reverse greys from darkest to lightest for Dark mode\n      {\n        50: grey[950],\n        100: grey[900],\n        200: grey[800],\n        300: grey[700],\n        400: grey[600],\n        500: grey[500],\n        600: grey[400],\n        700: grey[300],\n        800: grey[200],\n        900: grey[100],\n        950: grey[50],\n      };\n};\n"],"names":["grey","greyOption","mode"],"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,IAAI,QAAQ,eAAe,CAAC;AAErC,OAAO,MAAMC,UAAU,GAAG,CAACC,IAAiB,GAA6B;IACvE,OAAOA,IAAI,KAAK,OAAO,GACnB;AACE,QAAA,EAAE,EAAEF,IAAI,CAAC,EAAE,CAAC;AACZ,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;KACf,GAED;AACE,QAAA,EAAE,EAAEA,IAAI,CAAC,GAAG,CAAC;AACb,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,GAAG,CAAC;AACd,QAAA,GAAG,EAAEA,IAAI,CAAC,EAAE,CAAC;KACd,CAAC;AACR,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -36,22 +36,22 @@
     "@codemirror/lang-json": "^6.0.1",
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "0.30.0",
+    "@perses-dev/core": "0.31.0",
+    "@tanstack/react-table": "^8.9.1",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^2.28.0",
     "date-fns-tz": "^1.3.7",
-    "echarts": "^5.4.1",
+    "echarts": "npm:echarts-nightly@5.5.0-dev.20230517",
     "lodash-es": "^4.17.21",
     "mathjs": "^10.6.4",
     "mdi-material-ui": "^7.4.0",
     "numbro": "^2.3.6",
     "react-colorful": "^5.6.1",
     "react-error-boundary": "^3.1.4",
-    "react-window": "^1.8.8"
+    "react-virtuoso": "^4.3.6"
   },
   "devDependencies": {
-    "@perses-dev/storybook": "0.30.0",
-    "@types/react-window": "^1.8.5"
+    "@perses-dev/storybook": "0.31.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.10.0",

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

@@ -1,25 +0,0 @@
-import { ECharts as EChartsInstance } from 'echarts/core';
-import { UnitOptions, EChartsDataFormat } from '../model';
-import { CursorData } from './tooltip-model';
-export interface FocusedSeriesInfo {
-    seriesIdx: number | null;
-    datumIdx: number | null;
-    seriesName: string;
-    date: number;
-    markerColor: string;
-    x: number;
-    y: number;
-    formattedY: string;
-}
-export declare type FocusedSeriesArray = FocusedSeriesInfo[];
-/**
- * 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 getNearbySeries(data: EChartsDataFormat, pointInGrid: number[], yBuffer: number, unit?: UnitOptions): FocusedSeriesArray;
-/**
- * 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 declare function getFocusedSeriesData(mousePos: CursorData['coords'], chartData: EChartsDataFormat, pinnedPos: CursorData['coords'], chart?: EChartsInstance, unit?: UnitOptions): FocusedSeriesArray;
-//# sourceMappingURL=focused-series.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"focused-series.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/focused-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAe,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,UAAU,EAAqB,MAAM,iBAAiB,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAChC,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;CACpB;AAED,oBAAY,kBAAkB,GAAG,iBAAiB,EAAE,CAAC;AAErD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,IAAI,CAAC,EAAE,WAAW,GACjB,kBAAkB,CA4CpB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC/B,KAAK,CAAC,EAAE,eAAe,EACvB,IAAI,CAAC,EAAE,WAAW,sBA2CnB"}

package/dist/TimeSeriesTooltip/focused-series.js

@@ -1,110 +0,0 @@
-// 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 } from '../model';
-import { 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, unit) {
-    const currentFocusedData = [];
-    var ref;
-    const focusedX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
-    var ref1;
-    const focusedY = (ref1 = pointInGrid[1]) !== null && ref1 !== void 0 ? ref1 : null;
-    if (focusedX === null || focusedY === null) {
-        return currentFocusedData;
-    }
-    if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {
-        for(let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++){
-            const currentSeries = data.timeSeries[seriesIdx];
-            if (currentFocusedData.length >= 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;
-                        const yValue = currentSeries.data[datumIdx];
-                        // ensure null values not displayed in tooltip
-                        if (yValue !== undefined && yValue !== null && 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 formattedY = formatValue(yValue, unit);
-                                currentFocusedData.push({
-                                    seriesIdx: seriesIdx,
-                                    datumIdx: datumIdx,
-                                    seriesName: currentSeriesName,
-                                    date: xValueMilliSeconds,
-                                    x: xValue,
-                                    y: yValue,
-                                    formattedY: formattedY,
-                                    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, unit) {
-    if (chart === undefined || mousePos === null) return [];
-    // prevents multiple tooltips showing from adjacent charts
-    let cursorTargetMatchesChart = false;
-    if (mousePos.target !== null) {
-        const currentParent = mousePos.target.parentElement;
-        if (currentParent !== null) {
-            const currentGrandparent = currentParent.parentElement;
-            if (currentGrandparent !== null) {
-                const chartDom = chart.getDom();
-                if (chartDom === currentGrandparent) {
-                    cursorTargetMatchesChart = true;
-                }
-            }
-        }
-    }
-    // allows moving cursor inside tooltip
-    if (pinnedPos !== null) {
-        mousePos = pinnedPos;
-        cursorTargetMatchesChart = true;
-    }
-    if (cursorTargetMatchesChart === false) return [];
-    if (chart['_model'] === undefined) return [];
-    const chartModel = chart['_model'];
-    const yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;
-    // tooltip trigger area gets smaller with more series, increase yAxisInterval multiplier to expand nearby series range
-    const seriesNum = chartData.timeSeries.length;
-    const yBuffer = seriesNum > TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 5;
-    var _x, _y;
-    const pointInPixel = [
-        (_x = mousePos.plotCanvas.x) !== null && _x !== void 0 ? _x : 0,
-        (_y = mousePos.plotCanvas.y) !== null && _y !== void 0 ? _y : 0
-    ];
-    if (chart.containPixel('grid', pointInPixel)) {
-        const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
-        if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
-            return getNearbySeries(chartData, pointInGrid, yBuffer, unit);
-        }
-    }
-    return [];
-}
-
-//# sourceMappingURL=focused-series.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/focused-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 } from '../model';\nimport { CursorData, TOOLTIP_MAX_ITEMS } from './tooltip-model';\n\nexport interface FocusedSeriesInfo {\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}\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(\n  data: EChartsDataFormat,\n  pointInGrid: number[],\n  yBuffer: number,\n  unit?: UnitOptions\n): 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];\n            // ensure null values not displayed in tooltip\n            if (yValue !== undefined && yValue !== null && 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 formattedY = formatValue(yValue, unit);\n                currentFocusedData.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                });\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  unit?: UnitOptions\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  // tooltip trigger area gets smaller with more series, increase yAxisInterval multiplier to expand nearby series range\n  const seriesNum = chartData.timeSeries.length;\n  const yBuffer = seriesNum > TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 5;\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, unit);\n    }\n  }\n  return [];\n}\n"],"names":["formatValue","TOOLTIP_MAX_ITEMS","getNearbySeries","data","pointInGrid","yBuffer","unit","currentFocusedData","focusedX","focusedY","Array","isArray","xAxis","timeSeries","seriesIdx","length","currentSeries","undefined","currentSeriesName","name","toString","markerColor","color","datumIdx","xValue","yValue","xValueMilliSeconds","formattedY","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":"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"}

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

@@ -1,116 +0,0 @@
-// 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.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    getNearbySeries: ()=>getNearbySeries,
-    getFocusedSeriesData: ()=>getFocusedSeriesData
-});
-const _model = require("../model");
-const _tooltipModel = require("./tooltip-model");
-function getNearbySeries(data, pointInGrid, yBuffer, unit) {
-    const currentFocusedData = [];
-    var ref;
-    const focusedX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
-    var ref1;
-    const focusedY = (ref1 = pointInGrid[1]) !== null && ref1 !== void 0 ? ref1 : null;
-    if (focusedX === null || focusedY === null) {
-        return currentFocusedData;
-    }
-    if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {
-        for(let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++){
-            const currentSeries = data.timeSeries[seriesIdx];
-            if (currentFocusedData.length >= _tooltipModel.TOOLTIP_MAX_ITEMS) break;
-            if (currentSeries !== undefined) {
-                const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';
-                var _color;
-                const markerColor = (_color = currentSeries.color) !== null && _color !== void 0 ? _color : '#000';
-                if (Array.isArray(currentSeries.data)) {
-                    for(let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++){
-                        var _datumIdx;
-                        const xValue = (_datumIdx = data.xAxis[datumIdx]) !== null && _datumIdx !== void 0 ? _datumIdx : 0;
-                        const yValue = currentSeries.data[datumIdx];
-                        // ensure null values not displayed in tooltip
-                        if (yValue !== undefined && yValue !== null && 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 formattedY = (0, _model.formatValue)(yValue, unit);
-                                currentFocusedData.push({
-                                    seriesIdx: seriesIdx,
-                                    datumIdx: datumIdx,
-                                    seriesName: currentSeriesName,
-                                    date: xValueMilliSeconds,
-                                    x: xValue,
-                                    y: yValue,
-                                    formattedY: formattedY,
-                                    markerColor: markerColor.toString()
-                                });
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-    return currentFocusedData;
-}
-function getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit) {
-    if (chart === undefined || mousePos === null) return [];
-    // prevents multiple tooltips showing from adjacent charts
-    let cursorTargetMatchesChart = false;
-    if (mousePos.target !== null) {
-        const currentParent = mousePos.target.parentElement;
-        if (currentParent !== null) {
-            const currentGrandparent = currentParent.parentElement;
-            if (currentGrandparent !== null) {
-                const chartDom = chart.getDom();
-                if (chartDom === currentGrandparent) {
-                    cursorTargetMatchesChart = true;
-                }
-            }
-        }
-    }
-    // allows moving cursor inside tooltip
-    if (pinnedPos !== null) {
-        mousePos = pinnedPos;
-        cursorTargetMatchesChart = true;
-    }
-    if (cursorTargetMatchesChart === false) return [];
-    if (chart['_model'] === undefined) return [];
-    const chartModel = chart['_model'];
-    const yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;
-    // tooltip trigger area gets smaller with more series, increase yAxisInterval multiplier to expand nearby series range
-    const seriesNum = chartData.timeSeries.length;
-    const yBuffer = seriesNum > _tooltipModel.TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 5;
-    var _x, _y;
-    const pointInPixel = [
-        (_x = mousePos.plotCanvas.x) !== null && _x !== void 0 ? _x : 0,
-        (_y = mousePos.plotCanvas.y) !== null && _y !== void 0 ? _y : 0
-    ];
-    if (chart.containPixel('grid', pointInPixel)) {
-        const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
-        if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
-            return getNearbySeries(chartData, pointInGrid, yBuffer, unit);
-        }
-    }
-    return [];
-}