@perses-dev/components 0.35.0 → 0.36.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, Stack } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { memo, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { getNearbySeriesData } from './nearby-series';\nimport {\n  CursorCoordinates,\n  FALLBACK_CHART_WIDTH,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MIN_WIDTH,\n  useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\nexport interface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n  onUnpinClick?: () => void;\n  pinnedPos: CursorCoordinates | null;\n}\n\nexport const TimeSeriesTooltip = memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  unit,\n  onUnpinClick,\n  pinnedPos,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null;\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 ever 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 nearbySeries = getNearbySeriesData({\n    mousePos,\n    chartData,\n    pinnedPos,\n    chart,\n    unit,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = 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: 0,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\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        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Stack","memo","useState","useResizeObserver","TooltipContent","TooltipHeader","getNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","chartRef","chartData","wrapLabels","unit","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","nearbySeries","length","totalSeries","timeSeries","theme","sx","minWidth","maxWidth","maxHeight","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform","spacing","onShowAllClick","checked","series"],"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, Stack } from '@mui/material';\nimport { UnitOptions } from '@perses-dev/core';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { memo, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { getNearbySeriesData } from './nearby-series';\nimport {\n  CursorCoordinates,\n  FALLBACK_CHART_WIDTH,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MIN_WIDTH,\n  useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\nexport interface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n  onUnpinClick?: () => void;\n  pinnedPos: CursorCoordinates | null;\n}\n\nexport const TimeSeriesTooltip = memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  unit,\n  onUnpinClick,\n  pinnedPos,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null;\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 ever 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 nearbySeries = getNearbySeriesData({\n    mousePos,\n    chartData,\n    pinnedPos,\n    chart,\n    unit,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = 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: 0,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          // Ensure pinned tooltip shows behind edit panel drawer and sticky header\n          zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Stack","memo","useState","useResizeObserver","TooltipContent","TooltipHeader","getNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","chartRef","chartData","wrapLabels","unit","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","nearbySeries","length","totalSeries","timeSeries","theme","sx","minWidth","maxWidth","maxHeight","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform","spacing","onShowAllClick","checked","series"],"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,EAAEC,MAAM,EAAEC,KAAK,QAAQ,eAAe,CAAC;AAGnD,SAASC,IAAI,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AACvC,OAAOC,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAClD,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAChD,SAASC,mBAAmB,QAAQ,iBAAiB,CAAC;AACtD,SAEEC,oBAAoB,EACpBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB,EACjBC,iBAAiB,EACjBC,gBAAgB,QACX,iBAAiB,CAAC;AACzB,SAASC,iBAAiB,QAAQ,SAAS,CAAC;AAW5C,OAAO,MAAMC,iBAAiB,iBAAGb,IAAI,CAAC,SAASa,iBAAiB,CAAC,EAC/DC,QAAQ,CAAA,EACRC,SAAS,CAAA,EACTC,UAAU,CAAA,EACVC,IAAI,CAAA,EACJC,YAAY,CAAA,EACZC,SAAS,CAAA,EACc,EAAE;IACzB,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGpB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAC1D,MAAMqB,QAAQ,GAAGX,gBAAgB,EAAE,AAAC;IACpC,MAAM,EAAEY,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAEC,GAAG,EAAEC,UAAU,CAAA,EAAE,GAAGxB,iBAAiB,EAAE,AAAC;IAE/D,MAAMyB,eAAe,GAAGR,SAAS,KAAK,IAAI,AAAC;IAE3C,IAAIG,QAAQ,KAAK,IAAI,IAAIA,QAAQ,CAACM,MAAM,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;IAE/D,0EAA0E;IAC1E,IAAIT,SAAS,KAAK,IAAI,IAAI,AAACG,QAAQ,CAACM,MAAM,CAAiBC,OAAO,KAAK,QAAQ,EAAE,OAAO,IAAI,CAAC;IAE7F,MAAMC,KAAK,GAAGhB,QAAQ,CAACiB,OAAO,AAAC;QACZD,GAAiB;IAApC,MAAME,UAAU,GAAGF,CAAAA,GAAiB,GAAjBA,KAAK,aAALA,KAAK,WAAU,GAAfA,KAAAA,CAAe,GAAfA,KAAK,CAAEG,QAAQ,EAAE,cAAjBH,GAAiB,cAAjBA,GAAiB,GAAIxB,oBAAoB,AAAC,EAAC,+CAA+C;IAC7G,MAAM4B,eAAe,GAAGtB,iBAAiB,CAACU,QAAQ,EAAEU,UAAU,EAAEb,SAAS,EAAEI,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,CAAC,EAAEC,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,AAAC;IAEpG,uEAAuE;IACvE,MAAMW,YAAY,GAAG9B,mBAAmB,CAAC;QACvCiB,QAAQ;QACRP,SAAS;QACTI,SAAS;QACTW,KAAK;QACLb,IAAI;QACJG,aAAa;KACd,CAAC,AAAC;IACH,IAAIe,YAAY,CAACC,MAAM,KAAK,CAAC,EAAE;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAMC,WAAW,GAAGtB,SAAS,CAACuB,UAAU,CAACF,MAAM,AAAC;QAcvBG,IAAqC;IAZ9D,qBACE,KAACzC,MAAM;kBACL,cAAA,KAACD,GAAG;YACF4B,GAAG,EAAEC,UAAU;YACfc,EAAE,EAAE,CAACD,KAAK;oBAQSA,GAA0B;gBAR7B,OAAA;oBACdE,QAAQ,EAAE/B,iBAAiB;oBAC3BgC,QAAQ,EAAEjC,iBAAiB;oBAC3BkC,SAAS,EAAEnC,kBAAkB;oBAC7BoC,OAAO,EAAE,CAAC;oBACVC,QAAQ,EAAE,UAAU;oBACpBC,GAAG,EAAE,CAAC;oBACNC,IAAI,EAAE,CAAC;oBACPC,eAAe,EAAET,CAAAA,IAAqC,GAArCA,CAAAA,GAA0B,GAA1BA,KAAK,CAACU,OAAO,CAACC,YAAY,cAA1BX,GAA0B,WAAM,GAAhCA,KAAAA,CAAgC,GAAhCA,GAA0B,CAAEY,IAAI,CAAC,GAAG,CAAC,cAArCZ,IAAqC,cAArCA,IAAqC,GAAIhC,yBAAyB;oBACnF6C,YAAY,EAAE,KAAK;oBACnBC,KAAK,EAAE,MAAM;oBACbC,QAAQ,EAAE,MAAM;oBAChBC,UAAU,EAAE,SAAS;oBACrBC,OAAO,EAAE,CAAC;oBACVC,UAAU,EAAE,mBAAmB;oBAC/B,yEAAyE;oBACzEC,MAAM,EAAEvC,SAAS,KAAK,IAAI,GAAG,MAAM,GAAGoB,KAAK,CAACmB,MAAM,CAACC,OAAO;oBAC1DC,QAAQ,EAAE,QAAQ;oBAClB,SAAS,EAAE;wBACTC,SAAS,EAAE,MAAM;qBAClB;iBACF,CAAA;aAAC;YACFC,KAAK,EAAE;gBACLC,SAAS,EAAE7B,eAAe;aAC3B;sBAED,cAAA,MAACnC,KAAK;gBAACiE,OAAO,EAAE,GAAG;;kCACjB,KAAC5D,aAAa;wBACZ+B,YAAY,EAAEA,YAAY;wBAC1BE,WAAW,EAAEA,WAAW;wBACxBV,eAAe,EAAEA,eAAe;wBAChCP,aAAa,EAAEA,aAAa;wBAC5B6C,cAAc,EAAE,CAACC,OAAO,GAAK7C,gBAAgB,CAAC6C,OAAO,CAAC;wBACtDhD,YAAY,EAAEA,YAAY;sBAC1B;kCACF,KAACf,cAAc;wBAACgE,MAAM,EAAEhC,YAAY;wBAAEnB,UAAU,EAAEA,UAAU;sBAAI;;cAC1D;UACJ;MACC,CACT;AACJ,CAAC,CAAC,CAAC"}

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

@@ -1,5 +1,6 @@
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { UnitOptions, EChartsDataFormat } from '../model';
+import { UnitOptions } from '@perses-dev/core';
+import { EChartsDataFormat } from '../model';
 import { CursorCoordinates, CursorData } from './tooltip-model';
 export declare const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5;
 export declare const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30;

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

@@ -1 +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,iBAAiB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGhE,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,CAmGnB;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,iBAAiB,GAAG,IAAI,CAAC;IACpC,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"}
+{"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,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAA+B,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGhE,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,CAmGnB;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,iBAAiB,GAAG,IAAI,CAAC;IACpC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,qBAwCA;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

@@ -10,7 +10,8 @@
 // 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';
+import { formatValue } from '@perses-dev/core';
+import { 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
@@ -162,16 +163,6 @@ export const SHOW_FEWER_SERIES_LIMIT = 5;
             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 [];
 }
 /*

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

@@ -1 +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 { CursorCoordinates, 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, // ensure blur IS triggered, this is default but setting so it is explicit\n        escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\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, // do not trigger blur state when cursor is not immediately close to any series\n        escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\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: CursorCoordinates | null;\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 unless tooltip is pinned\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 without it fading away\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","escapeConnect","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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"}
+{"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 } from '@perses-dev/core';\nimport { EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT } from '../model';\nimport { CursorCoordinates, 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, // ensure blur IS triggered, this is default but setting so it is explicit\n        escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\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, // do not trigger blur state when cursor is not immediately close to any series\n        escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\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: CursorCoordinates | null;\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 unless tooltip is pinned\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 without it fading away\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  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","escapeConnect","getNearbySeriesData","mousePos","pinnedPos","chartData","showAllSeries","cursorTargetMatchesChart","target","currentParent","parentElement","currentGrandparent","chartDom","getDom","chartModel","yInterval","getComponent","axis","scale","_interval","getYBuffer","pointInPixel","plotCanvas","containPixel","convertFromPixel","range","lowerBound","upperBound","yBufferMin","adjustedBuffer"],"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,WAAW,QAAqB,kBAAkB,CAAC;AAC5D,SAA4BC,2BAA2B,QAAQ,UAAU,CAAC;AAG1E,sDAAsD;AACtD,OAAO,MAAMC,iCAAiC,GAAG,GAAG,CAAC,CAAC,wEAAwE;AAC9H,OAAO,MAAMC,gCAAgC,GAAG,EAAE,CAAC,CAAC,kDAAkD;AACtG,OAAO,MAAMC,uBAAuB,GAAG,CAAC,CAAC;AAgBzC;;;CAGC,GACD,OAAO,SAASC,oBAAoB,CAClCC,IAAuB,EACvBC,WAAqB,EACrBC,OAAe,EACfC,KAAuB,EACvBC,IAAkB,EACC;IACnB,MAAMC,uBAAuB,GAAsB,EAAE,AAAC;QACvBJ,GAAc;IAA7C,MAAMK,OAAO,GAAkBL,CAAAA,GAAc,GAAdA,WAAW,CAAC,CAAC,CAAC,cAAdA,GAAc,cAAdA,GAAc,GAAI,IAAI,AAAC;QACvBA,IAAc;IAA7C,MAAMM,OAAO,GAAkBN,CAAAA,IAAc,GAAdA,WAAW,CAAC,CAAC,CAAC,cAAdA,IAAc,cAAdA,IAAc,GAAI,IAAI,AAAC;IAEtD,IAAIK,OAAO,KAAK,IAAI,IAAIC,OAAO,KAAK,IAAI,EAAE;QACxC,OAAOF,uBAAuB,CAAC;IACjC,CAAC;IAED,MAAMG,mBAAmB,GAAa,EAAE,AAAC;IACzC,MAAMC,uBAAuB,GAAa,EAAE,AAAC;IAC7C,MAAMC,0BAA0B,GAAa,EAAE,AAAC;IAChD,MAAMC,WAAW,GAAGX,IAAI,CAACY,UAAU,CAACC,MAAM,AAAC;IAC3C,IAAIC,KAAK,CAACC,OAAO,CAACf,IAAI,CAACgB,KAAK,CAAC,IAAIF,KAAK,CAACC,OAAO,CAACf,IAAI,CAACY,UAAU,CAAC,EAAE;QAC/D,IAAK,IAAIK,SAAS,GAAG,CAAC,EAAEA,SAAS,GAAGN,WAAW,EAAEM,SAAS,EAAE,CAAE;YAC5D,MAAMC,aAAa,GAAGlB,IAAI,CAACY,UAAU,CAACK,SAAS,CAAC,AAAC;YACjD,IAAIZ,uBAAuB,CAACQ,MAAM,IAAIlB,2BAA2B,EAAE,MAAM;YACzE,IAAIuB,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,IAAIJ,KAAK,CAACC,OAAO,CAACG,aAAa,CAAClB,IAAI,CAAC,EAAE;oBACrC,IAAK,IAAIyB,QAAQ,GAAG,CAAC,EAAEA,QAAQ,GAAGP,aAAa,CAAClB,IAAI,CAACa,MAAM,EAAEY,QAAQ,EAAE,CAAE;4BACxDzB,SAAoB;wBAAnC,MAAM0B,MAAM,GAAG1B,CAAAA,SAAoB,GAApBA,IAAI,CAACgB,KAAK,CAACS,QAAQ,CAAC,cAApBzB,SAAoB,cAApBA,SAAoB,GAAI,CAAC,AAAC;wBACzC,MAAM2B,MAAM,GAAGT,aAAa,CAAClB,IAAI,CAACyB,QAAQ,CAAC,AAAC;wBAC5C,8CAA8C;wBAC9C,IAAIE,MAAM,KAAKR,SAAS,IAAIQ,MAAM,KAAK,IAAI,IAAIrB,OAAO,KAAKmB,QAAQ,EAAE;4BACnE,IAAIE,MAAM,KAAK,GAAG,IAAIpB,OAAO,IAAIoB,MAAM,GAAGzB,OAAO,IAAIK,OAAO,IAAIoB,MAAM,GAAGzB,OAAO,EAAE;gCAChF,2DAA2D;gCAC3D,MAAM0B,eAAe,GAAGjB,WAAW,GAAGb,uBAAuB,GAAG,CAAC,GAAG,CAAC,AAAC;gCACtE,MAAM+B,mBAAmB,GAAGC,IAAI,CAACC,GAAG,CAACH,eAAe,EAAE,GAAG,GAAGjB,WAAW,CAAC,AAAC;gCACzE,MAAMqB,iBAAiB,GAAGC,uBAAuB,CAAC;oCAChDC,YAAY,EAAE3B,OAAO;oCACrB4B,SAAS,EAAER,MAAM;oCACjBS,UAAU,EAAEP,mBAAmB;iCAChC,CAAC,AAAC;gCACH,IAAIG,iBAAiB,EAAE;oCACrBvB,uBAAuB,CAAC4B,IAAI,CAACpB,SAAS,CAAC,CAAC;gCAC1C,OAAO;oCACLP,0BAA0B,CAAC2B,IAAI,CAACpB,SAAS,CAAC,CAAC;oCAC3C,wDAAwD;oCACxD,IAAId,CAAAA,KAAK,aAALA,KAAK,WAAgB,GAArBA,KAAAA,CAAqB,GAArBA,KAAK,CAAEmC,cAAc,CAAA,KAAKnB,SAAS,EAAE;wCACvChB,KAAK,CAACmC,cAAc,CAAC;4CACnBC,IAAI,EAAE,UAAU;4CAChBC,WAAW,EAAEvB,SAAS;yCACvB,CAAC,CAAC;oCACL,CAAC;gCACH,CAAC;gCAED,mGAAmG;gCACnG,MAAMwB,kBAAkB,GAAGf,MAAM,GAAG,WAAW,GAAGA,MAAM,GAAGA,MAAM,GAAG,IAAI,AAAC;gCACzE,MAAMgB,UAAU,GAAGhD,WAAW,CAACiC,MAAM,EAAEvB,IAAI,CAAC,AAAC;gCAC7CC,uBAAuB,CAACgC,IAAI,CAAC;oCAC3BpB,SAAS,EAAEA,SAAS;oCACpBQ,QAAQ,EAAEA,QAAQ;oCAClBkB,UAAU,EAAEvB,iBAAiB;oCAC7BwB,IAAI,EAAEH,kBAAkB;oCACxBI,CAAC,EAAEnB,MAAM;oCACToB,CAAC,EAAEnB,MAAM;oCACTe,UAAU,EAAEA,UAAU;oCACtBnB,WAAW,EAAEA,WAAW,CAACD,QAAQ,EAAE;oCACnCU,iBAAiB;iCAClB,CAAC,CAAC;gCACHxB,mBAAmB,CAAC6B,IAAI,CAACpB,SAAS,CAAC,CAAC;4BACtC,CAAC;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IACD,IAAId,CAAAA,KAAK,aAALA,KAAK,WAAgB,GAArBA,KAAAA,CAAqB,GAArBA,KAAK,CAAEmC,cAAc,CAAA,KAAKnB,SAAS,EAAE;QACvC,8DAA8D;QAC9D,+EAA+E;QAC/EhB,KAAK,CAACmC,cAAc,CAAC;YACnBC,IAAI,EAAE,UAAU;YAChBC,WAAW,EAAE9B,0BAA0B;SACxC,CAAC,CAAC;QAEH,0DAA0D;QAC1D,IAAID,uBAAuB,CAACI,MAAM,GAAG,CAAC,EAAE;YACtC,uDAAuD;YACvDV,KAAK,CAACmC,cAAc,CAAC;gBACnBC,IAAI,EAAE,WAAW;gBACjBC,WAAW,EAAE/B,uBAAuB;gBACpCsC,OAAO,EAAE,KAAK;gBACdC,aAAa,EAAE,IAAI;aACpB,CAAC,CAAC;QACL,OAAO;YACL,2FAA2F;YAC3F7C,KAAK,CAACmC,cAAc,CAAC;gBACnBC,IAAI,EAAE,WAAW;gBACjBC,WAAW,EAAEhC,mBAAmB;gBAChCuC,OAAO,EAAE,IAAI;gBACbC,aAAa,EAAE,IAAI;aACpB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,OAAO3C,uBAAuB,CAAC;AACjC,CAAC;AAED;;;CAGC,GACD,OAAO,SAAS4C,mBAAmB,CAAC,EAClCC,QAAQ,CAAA,EACRC,SAAS,CAAA,EACTC,SAAS,CAAA,EACTjD,KAAK,CAAA,EACLC,IAAI,CAAA,EACJiD,aAAa,EAAG,KAAK,CAAA,EAQtB,EAAE;IACD,IAAIlD,KAAK,KAAKgB,SAAS,IAAI+B,QAAQ,KAAK,IAAI,EAAE,OAAO,EAAE,CAAC;IAExD,mFAAmF;IACnF,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,GAAGxD,KAAK,CAACyD,MAAM,EAAE,AAAC;gBAChC,IAAID,QAAQ,KAAKD,kBAAkB,EAAE;oBACnCJ,wBAAwB,GAAG,IAAI,CAAC;gBAClC,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,6DAA6D;IAC7D,IAAIH,SAAS,KAAK,IAAI,EAAE;QACtBD,QAAQ,GAAGC,SAAS,CAAC;QACrBG,wBAAwB,GAAG,IAAI,CAAC;IAClC,CAAC;IAED,IAAIA,wBAAwB,KAAK,KAAK,EAAE,OAAO,EAAE,CAAC;IAElD,IAAInD,KAAK,CAAC,QAAQ,CAAC,KAAKgB,SAAS,EAAE,OAAO,EAAE,CAAC;IAC7C,MAAM0C,UAAU,GAAG1D,KAAK,CAAC,QAAQ,CAAC,AAAC;IACnC,MAAM2D,SAAS,GAAGD,UAAU,CAACE,YAAY,CAAC,OAAO,CAAC,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,AAAC;IACxE,MAAMvD,WAAW,GAAGyC,SAAS,CAACxC,UAAU,CAACC,MAAM,AAAC;IAChD,MAAMX,OAAO,GAAGiE,UAAU,CAAC;QAAEL,SAAS;QAAEnD,WAAW;QAAE0C,aAAa;KAAE,CAAC,AAAC;QAChDH,EAAqB,EAAOA,EAAqB;IAAvE,MAAMkB,YAAY,GAAG;QAAClB,CAAAA,EAAqB,GAArBA,QAAQ,CAACmB,UAAU,CAACxB,CAAC,cAArBK,EAAqB,cAArBA,EAAqB,GAAI,CAAC;QAAEA,CAAAA,EAAqB,GAArBA,QAAQ,CAACmB,UAAU,CAACvB,CAAC,cAArBI,EAAqB,cAArBA,EAAqB,GAAI,CAAC;KAAC,AAAC;IAC9E,IAAI/C,KAAK,CAACmE,YAAY,CAAC,MAAM,EAAEF,YAAY,CAAC,EAAE;QAC5C,MAAMnE,WAAW,GAAGE,KAAK,CAACoE,gBAAgB,CAAC,MAAM,EAAEH,YAAY,CAAC,AAAC;QACjE,IAAInE,WAAW,CAAC,CAAC,CAAC,KAAKkB,SAAS,IAAIlB,WAAW,CAAC,CAAC,CAAC,KAAKkB,SAAS,EAAE;YAChE,OAAOpB,oBAAoB,CAACqD,SAAS,EAAEnD,WAAW,EAAEC,OAAO,EAAEC,KAAK,EAAEC,IAAI,CAAC,CAAC;QAC5E,CAAC;IACH,CAAC;IAED,OAAO,EAAE,CAAC;AACZ,CAAC;AAED;;CAEC,GACD,OAAO,SAAS6B,uBAAuB,CAAC,EACtCC,YAAY,CAAA,EACZC,SAAS,CAAA,EACTC,UAAU,CAAA,EAKX,EAAW;IACV,MAAMoC,KAAK,GAAG,AAACpC,UAAU,GAAG,GAAG,GAAID,SAAS,AAAC;IAC7C,MAAMsC,UAAU,GAAGtC,SAAS,GAAGqC,KAAK,AAAC;IACrC,MAAME,UAAU,GAAGvC,SAAS,GAAGqC,KAAK,AAAC;IACrC,OAAOtC,YAAY,IAAIuC,UAAU,IAAIvC,YAAY,IAAIwC,UAAU,CAAC;AAClE,CAAC;AAED;;CAEC,GACD,OAAO,SAASP,UAAU,CAAC,EACzBL,SAAS,CAAA,EACTnD,WAAW,CAAA,EACX0C,aAAa,EAAG,KAAK,CAAA,EAKtB,EAAE;IACD,IAAIA,aAAa,EAAE;QACjB,OAAOS,SAAS,GAAG,EAAE,CAAC,CAAC,4DAA4D;IACrF,CAAC;IAED,+EAA+E;IAC/E,MAAMa,UAAU,GAAGb,SAAS,GAAG,GAAG,AAAC;IAEnC,qDAAqD;IACrD,IAAInD,WAAW,GAAGb,uBAAuB,EAAE;QACzC,MAAM8E,cAAc,GAAG,AAACd,SAAS,GAAGjE,gCAAgC,GAAIc,WAAW,AAAC;QACpF,OAAOmB,IAAI,CAACC,GAAG,CAAC4C,UAAU,EAAEC,cAAc,CAAC,CAAC;IAC9C,CAAC;IAED,oDAAoD;IACpD,OAAO9C,IAAI,CAACC,GAAG,CAAC4C,UAAU,EAAEb,SAAS,GAAGlE,iCAAiC,CAAC,CAAC;AAC7E,CAAC"}

package/dist/UnitSelector/UnitSelector.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UnitOptions } from '../model';
+import { UnitOptions } from '@perses-dev/core';
 export interface UnitSelectorProps {
     value: UnitOptions;
     onChange: (unit: UnitOptions) => void;

package/dist/UnitSelector/UnitSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/UnitSelector/UnitSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,WAAW,EAA0E,MAAM,UAAU,CAAC;AAK/G,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AA0BD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,eAqElE"}
+{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/UnitSelector/UnitSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAEL,WAAW,EAKZ,MAAM,kBAAkB,CAAC;AAI1B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AA0BD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,eAqElE"}

package/dist/UnitSelector/UnitSelector.js

@@ -12,8 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Switch } from '@mui/material';
-import { UNIT_CONFIG, isUnitWithDecimalPlaces, isUnitWithAbbreviate } from '../model';
-import { shouldAbbreviate } from '../model/units/utils';
+import { shouldAbbreviate, UNIT_CONFIG, isUnitWithDecimalPlaces, isUnitWithAbbreviate } from '@perses-dev/core';
 import { OptionsEditorControl } from '../OptionsEditorLayout';
 import { SettingsAutocomplete } from '../SettingsAutocomplete';
 const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{

package/dist/UnitSelector/UnitSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/UnitSelector/UnitSelector.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.\nimport { Switch, SwitchProps } from '@mui/material';\nimport { UnitOptions, UNIT_CONFIG, UnitConfig, isUnitWithDecimalPlaces, isUnitWithAbbreviate } from '../model';\nimport { shouldAbbreviate } from '../model/units/utils';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface UnitSelectorProps {\n  value: UnitOptions;\n  onChange: (unit: UnitOptions) => void;\n}\n\ntype AutocompleteKindOption = UnitConfig & { id: UnitOptions['kind'] };\n\nconst KIND_OPTIONS: AutocompleteKindOption[] = Object.entries(UNIT_CONFIG)\n  .map(([id, config]) => {\n    return {\n      id: id as UnitOptions['kind'],\n      ...config,\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nconst DECIMAL_PLACES_OPTIONS = [\n  { id: 'default', label: 'Default', decimal_places: undefined },\n  { id: '0', label: '0', decimal_places: 0 },\n  { id: '1', label: '1', decimal_places: 1 },\n  { id: '2', label: '2', decimal_places: 2 },\n  { id: '3', label: '3', decimal_places: 3 },\n  { id: '4', label: '4', decimal_places: 4 },\n];\n\nfunction getOptionByDecimalPlaces(decimal_places?: number) {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimal_places === decimal_places);\n}\n\nexport function UnitSelector({ value, onChange }: UnitSelectorProps) {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasAbbreviate = isUnitWithAbbreviate(value);\n\n  const handleKindChange = (_: unknown, newValue: AutocompleteKindOption) => {\n    onChange({\n      kind: newValue.id,\n    });\n  };\n\n  const handleDecimalPlacesChange = (_: unknown, { decimal_places }: { decimal_places: number | undefined }) => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimal_places: decimal_places,\n      });\n    }\n  };\n\n  const handleAbbreviateChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasAbbreviate) {\n      onChange({\n        ...value,\n        abbreviate: checked,\n      });\n    }\n  };\n\n  const kindConfig = UNIT_CONFIG[value.kind];\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Abbreviate\"\n        control={\n          <Switch\n            checked={hasAbbreviate ? shouldAbbreviate(value.abbreviate) : false}\n            onChange={handleAbbreviateChange}\n            disabled={!hasAbbreviate}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={\n          <SettingsAutocomplete\n            value={{ id: value.kind, ...kindConfig }}\n            options={KIND_OPTIONS}\n            groupBy={(option) => option.group}\n            onChange={handleKindChange}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimal_places)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={handleDecimalPlacesChange}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","UNIT_CONFIG","isUnitWithDecimalPlaces","isUnitWithAbbreviate","shouldAbbreviate","OptionsEditorControl","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","filter","disableSelectorOption","DECIMAL_PLACES_OPTIONS","label","decimal_places","undefined","getOptionByDecimalPlaces","find","o","UnitSelector","value","onChange","hasDecimalPlaces","hasAbbreviate","handleKindChange","_","newValue","kind","handleDecimalPlacesChange","handleAbbreviateChange","checked","abbreviate","kindConfig","control","disabled","options","groupBy","option","group","disableClearable","getOptionLabel"],"mappings":"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"}
+{"version":3,"sources":["../../src/UnitSelector/UnitSelector.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.\nimport { Switch, SwitchProps } from '@mui/material';\nimport {\n  shouldAbbreviate,\n  UnitOptions,\n  UNIT_CONFIG,\n  UnitConfig,\n  isUnitWithDecimalPlaces,\n  isUnitWithAbbreviate,\n} from '@perses-dev/core';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface UnitSelectorProps {\n  value: UnitOptions;\n  onChange: (unit: UnitOptions) => void;\n}\n\ntype AutocompleteKindOption = UnitConfig & { id: UnitOptions['kind'] };\n\nconst KIND_OPTIONS: AutocompleteKindOption[] = Object.entries(UNIT_CONFIG)\n  .map(([id, config]) => {\n    return {\n      id: id as UnitOptions['kind'],\n      ...config,\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nconst DECIMAL_PLACES_OPTIONS = [\n  { id: 'default', label: 'Default', decimal_places: undefined },\n  { id: '0', label: '0', decimal_places: 0 },\n  { id: '1', label: '1', decimal_places: 1 },\n  { id: '2', label: '2', decimal_places: 2 },\n  { id: '3', label: '3', decimal_places: 3 },\n  { id: '4', label: '4', decimal_places: 4 },\n];\n\nfunction getOptionByDecimalPlaces(decimal_places?: number) {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimal_places === decimal_places);\n}\n\nexport function UnitSelector({ value, onChange }: UnitSelectorProps) {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasAbbreviate = isUnitWithAbbreviate(value);\n\n  const handleKindChange = (_: unknown, newValue: AutocompleteKindOption) => {\n    onChange({\n      kind: newValue.id,\n    });\n  };\n\n  const handleDecimalPlacesChange = (_: unknown, { decimal_places }: { decimal_places: number | undefined }) => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimal_places: decimal_places,\n      });\n    }\n  };\n\n  const handleAbbreviateChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasAbbreviate) {\n      onChange({\n        ...value,\n        abbreviate: checked,\n      });\n    }\n  };\n\n  const kindConfig = UNIT_CONFIG[value.kind];\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Abbreviate\"\n        control={\n          <Switch\n            checked={hasAbbreviate ? shouldAbbreviate(value.abbreviate) : false}\n            onChange={handleAbbreviateChange}\n            disabled={!hasAbbreviate}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={\n          <SettingsAutocomplete\n            value={{ id: value.kind, ...kindConfig }}\n            options={KIND_OPTIONS}\n            groupBy={(option) => option.group}\n            onChange={handleKindChange}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimal_places)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={handleDecimalPlacesChange}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","shouldAbbreviate","UNIT_CONFIG","isUnitWithDecimalPlaces","isUnitWithAbbreviate","OptionsEditorControl","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","filter","disableSelectorOption","DECIMAL_PLACES_OPTIONS","label","decimal_places","undefined","getOptionByDecimalPlaces","find","o","UnitSelector","value","onChange","hasDecimalPlaces","hasAbbreviate","handleKindChange","_","newValue","kind","handleDecimalPlacesChange","handleAbbreviateChange","checked","abbreviate","kindConfig","control","disabled","options","groupBy","option","group","disableClearable","getOptionLabel"],"mappings":"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"}

package/dist/cjs/ContentWithLegend/ContentWithLegend.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "ContentWithLegend", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
 const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
 const _legend = require("../Legend");
 const _contentWithLegendModel = require("./model/content-with-legend-model");
 function _interopRequireDefault(obj) {
@@ -28,7 +29,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function ContentWithLegend({ children , legendProps , width , height , spacing =0 , minChildrenWidth =100 , minChildrenHeight =100  }) {
+function ContentWithLegend({ children , legendProps , width , height , spacing =0 , legendSize , minChildrenWidth =100 , minChildrenHeight =100  }) {
     const theme = (0, _material.useTheme)();
     const { content , legend , margin  } = (0, _contentWithLegendModel.getContentWithLegendLayout)({
         width,
@@ -37,7 +38,8 @@ function ContentWithLegend({ children , legendProps , width , height , spacing =
         minChildrenHeight,
         minChildrenWidth,
         spacing,
-        theme
+        theme,
+        legendSize: (0, _core.getLegendSize)(legendSize)
     });
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {

package/dist/cjs/ContentWithLegend/model/content-with-legend-model.js

@@ -27,15 +27,23 @@ _export(exports, {
 const _core = require("@perses-dev/core");
 const _table = require("../../Table");
 const TABLE_LEGEND_SIZE = {
-    // 5 rows plus header. Value to be multiplied by row height in pixels.
-    Bottom: 6,
-    // Pixel value
-    Right: 250
+    Medium: {
+        // 5 rows plus header. Value to be multiplied by row height in pixels.
+        Bottom: 6,
+        // Pixel value
+        Right: 250
+    },
+    Small: {
+        // 3 rows plus header. Value to be multiplied by row height in pixels.
+        Bottom: 4,
+        // Pixel value
+        Right: 150
+    }
 };
 const PANEL_HEIGHT_LG_BREAKPOINT = 300;
 const LEGEND_HEIGHT_SM = 40;
 const LEGEND_HEIGHT_LG = 100;
-function getContentWithLegendLayout({ width , height , legendProps , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+function getContentWithLegendLayout({ width , height , legendProps , legendSize , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
     const legendOptions = legendProps === null || legendProps === void 0 ? void 0 : legendProps.options;
     const hasLegend = !!legendOptions;
     const noLegendLayout = {
@@ -82,8 +90,10 @@ function getContentWithLegendLayout({ width , height , legendProps , minChildren
             }
             return total;
         }, 0);
-        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] + columnsWidth : width;
-        legendHeight = position === 'Bottom' ? TABLE_LEGEND_SIZE['Bottom'] * tableLayout.height : height;
+        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE[legendSize]['Right'] + columnsWidth : width;
+        // Use the smaller of the size-based row count or the number of legend items + 1 for the header.
+        const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['Bottom'], legendProps.data.length + 1);
+        legendHeight = position === 'Bottom' ? rowsToShow * tableLayout.height : height;
     }
     const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;
     const contentHeight = position === 'Bottom' ? height - legendHeight - spacing : height;

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -31,7 +31,6 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _units = require("../model/units");
 const _echart = require("../EChart");
 (0, _core1.use)([
     _charts.GaugeChart,
@@ -171,7 +170,7 @@ function GaugeChart(props) {
                         // when the value is `null`, making it difficult to differentiate
                         // `null` from a true `NaN` case.
                         ()=>'null' : (value)=>{
-                            return (0, _units.formatValue)(value, unit);
+                            return (0, _core.formatValue)(value, unit);
                         }
                     },
                     data: [
@@ -219,7 +218,7 @@ function getResponsiveValueSize(value, unit, width, height) {
     const MIN_SIZE = 3;
     const MAX_SIZE = 24;
     const SIZE_MULTIPLIER = 0.7;
-    const formattedValue = typeof value === 'number' ? (0, _units.formatValue)(value, unit) : `${value}`;
+    const formattedValue = typeof value === 'number' ? (0, _core.formatValue)(value, unit) : `${value}`;
     var _length;
     const valueCharacters = (_length = formattedValue.length) !== null && _length !== void 0 ? _length : 2;
     const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;

package/dist/cjs/Legend/CompactLegend.js

@@ -22,7 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _listLegendItem = require("./ListLegendItem");
 const _legendModel = require("./legend-model");
-function CompactLegend({ height , items , selectedItems , onLegendItemClick  }) {
+function CompactLegend({ height , items , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         component: "ul",
         sx: {
@@ -37,9 +37,12 @@ function CompactLegend({ height , items , selectedItems , onLegendItemClick  })
             overflowY: 'scroll',
             margin: 0
         },
-        children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
+        children: items.map((item, index)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
+                index: index,
                 isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
+                onMouseOver: onItemMouseOver,
+                onMouseOut: onItemMouseOut,
                 onClick: onLegendItemClick,
                 sx: {
                     width: 'auto',

package/dist/cjs/Legend/Legend.js

@@ -31,7 +31,7 @@ const _tableLegend = require("./TableLegend");
 // Set this number based on testing, but it may need to be tuned a bit on the
 // future as people test this out on different machines.
 const NEED_VIRTUALIZATION_LIMIT = 500;
-function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , tableProps  }) {
+function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , tableProps  }) {
     const onLegendItemClick = (e, seriesId)=>{
         const isModifiedClick = e.metaKey || e.shiftKey;
         const newSelected = (0, _immer.produce)(selectedItems, (draft)=>{
@@ -74,7 +74,9 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
         height,
         items: data,
         selectedItems,
-        onLegendItemClick
+        onLegendItemClick,
+        onItemMouseOver,
+        onItemMouseOut
     };
     let legendContent;
     if (mode === 'Table') {

package/dist/cjs/Legend/ListLegend.js

@@ -22,7 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _reactVirtuoso = require("react-virtuoso");
 const _listLegendItem = require("./ListLegendItem");
 const _legendModel = require("./legend-model");
-function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
+function ListLegend({ items , height , width , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactVirtuoso.Virtuoso, {
@@ -34,13 +34,14 @@ function ListLegend({ items , height , width , selectedItems , onLegendItemClick
         itemContent: (index, item)=>{
             return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
+                index: index,
                 truncateLabel: truncateLabels,
                 isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
                 onClick: onLegendItemClick,
+                onMouseOver: onItemMouseOver,
+                onMouseOut: onItemMouseOut,
                 sx: {
-                    // Having an explicit width is important for the ellipsizing to
-                    // work correctly. Subtract padding to simulate padding.
-                    width: width,
+                    width: '100%',
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }

package/dist/cjs/Legend/ListLegendItem.js

@@ -62,14 +62,14 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , onMouseOver , onMouseOut , index , ...others }, ref) {
     const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
-    function handleMouseOver() {
+    function handleTextMouseOver() {
         if (truncateLabel) {
             setNoWrap(false);
         }
     }
-    function handleMouseOut() {
+    function handleTextMouseOut() {
         if (truncateLabel) {
             setNoWrap(true);
         }
@@ -90,6 +90,18 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         dense: true,
         key: item.id,
         onClick: handleClick,
+        onMouseOver: (e)=>{
+            return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
+                id: item.id,
+                index
+            });
+        },
+        onMouseOut: (e)=>{
+            return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, {
+                id: item.id,
+                index
+            });
+        },
         selected: isVisuallySelected,
         ref: ref,
         children: [
@@ -107,8 +119,8 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
                 primaryTypographyProps: {
                     noWrap: noWrap
                 },
-                onMouseOver: handleMouseOver,
-                onMouseOut: handleMouseOut
+                onMouseOver: handleTextMouseOver,
+                onMouseOut: handleTextMouseOut
             })
         ]
     });

package/dist/cjs/Legend/TableLegend.js

@@ -25,6 +25,7 @@ const COLUMNS = [
     {
         accessorKey: 'label',
         header: 'Name',
+        enableSorting: true,
         // Starting with `title` attr instead of a tooltip because it is easier to
         // implement. We should try adding a tooltip in the future, but we'll need
         // to be very careful about performance when doing so with large tables.
@@ -40,7 +41,7 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
-function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width , columns: additionalColumns = []  }) {
+function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , height , width , columns: additionalColumns = [] , sorting , onSortingChange  }) {
     const rowSelection = (0, _react.useMemo)(()=>{
         return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
         // TODO: clean this up if we switch to also using checkboxes in list legend.
@@ -65,11 +66,16 @@ function TableLegend({ items , selectedItems: initRowSelection , onSelectedItems
         width: width,
         rowSelection: rowSelection,
         onRowSelectionChange: onSelectedItemsChange,
+        onRowMouseOver: onItemMouseOver,
+        onRowMouseOut: onItemMouseOut,
+        sorting: sorting,
+        onSortingChange: onSortingChange,
         data: items,
         columns: columns,
         density: "compact",
         getRowId: getRowId,
         getCheckboxColor: getCheckboxColor,
-        checkboxSelection: true
+        checkboxSelection: true,
+        rowSelectionVariant: "legend"
     });
 }

package/dist/cjs/LineChart/LineChart.js

@@ -82,10 +82,10 @@ function _interopRequireWildcard(obj, nodeInterop) {
     _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
+const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
     wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
-    var ref;
+} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+    var ref1;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -93,6 +93,29 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
     const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
+    (0, _react.useImperativeHandle)(ref, ()=>{
+        return {
+            highlightSeries ({ id  }) {
+                if (!chartRef.current) {
+                    // No chart. Do nothing.
+                    return;
+                }
+                chartRef.current.dispatchAction({
+                    type: 'highlight',
+                    seriesId: id
+                });
+            },
+            clearHighlightedSeries: ()=>{
+                if (!chartRef.current) {
+                    // No chart. Do nothing.
+                    return;
+                }
+                (0, _utils.clearHighlightedSeries)(chartRef.current, data.timeSeries.length);
+            }
+        };
+    }, [
+        data.timeSeries.length
+    ]);
     const handleEvents = (0, _react.useMemo)(()=>{
         return {
             datazoom: (params)=>{
@@ -247,6 +270,9 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             if (tooltipPinnedCoords === null) {
                 setShowTooltip(false);
             }
+            if (chartRef.current !== undefined) {
+                (0, _utils.clearHighlightedSeries)(chartRef.current, data.timeSeries.length);
+            }
         },
         onMouseEnter: ()=>{
             setShowTooltip(true);
@@ -266,7 +292,7 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             }
         },
         children: [
-            showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
+            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
@@ -289,4 +315,4 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             })
         ]
     });
-}
+});

package/dist/cjs/LineChart/utils.js

@@ -25,10 +25,11 @@ _export(exports, {
     restoreChart: ()=>restoreChart,
     getDateRange: ()=>getDateRange,
     getFormattedDate: ()=>getFormattedDate,
-    getYAxes: ()=>getYAxes
+    getYAxes: ()=>getYAxes,
+    clearHighlightedSeries: ()=>clearHighlightedSeries
 });
+const _core = require("@perses-dev/core");
 const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
-const _model = require("../model");
 const _utils = require("../utils");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -90,7 +91,7 @@ function getYAxes(yAxis, unit) {
         ],
         axisLabel: {
             formatter: (value)=>{
-                return (0, _model.formatValue)(value, unit);
+                return (0, _core.formatValue)(value, unit);
             }
         }
     };
@@ -98,3 +99,13 @@ function getYAxes(yAxis, unit) {
         (0, _merge.default)(Y_AXIS_DEFAULT, yAxis)
     ];
 }
+function clearHighlightedSeries(chart, totalSeries) {
+    if (chart.dispatchAction !== undefined) {
+        for(let i = 0; i < totalSeries; i++){
+            chart.dispatchAction({
+                type: 'downplay',
+                seriesIndex: i
+            });
+        }
+    }
+}