@perses-dev/components 0.18.0 → 0.19.0

package/dist/LineChart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBhH,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,GACd,EAAE,cAAc,eAmJhB"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBhH,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,GACd,EAAE,cAAc,eAkJhB"}

package/dist/LineChart/LineChart.js

@@ -19,7 +19,6 @@ import { LineChart as EChartsLineChart } from 'echarts/charts';
 import { GridComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent, LegendComponent, VisualMapComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { EChart } from '../EChart';
-import { PROGRESSIVE_MODE_SERIES_LIMIT } from '../model/graph';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from './utils';
@@ -108,7 +107,6 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , visua
     const option = useDeepMemo(()=>{
         if (data.timeSeries === undefined) return {};
         if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;
-        const showPointsOnHover = data.timeSeries.length < PROGRESSIVE_MODE_SERIES_LIMIT;
         var _rangeMs;
         const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : getDateRange(data.xAxis);
         const option = {
@@ -126,11 +124,12 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , visua
             yAxis: getYAxes(yAxis, unit),
             animation: false,
             tooltip: {
-                show: showPointsOnHover,
+                show: true,
                 trigger: 'axis',
                 showContent: false,
                 axisPointer: {
-                    type: 'none'
+                    type: 'line',
+                    z: 0
                 }
             },
             toolbox: {

package/dist/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { useDeepMemo } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  VisualMapComponentOption,\n  YAXisComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  VisualMapComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { PROGRESSIVE_MODE_SERIES_LIMIT, EChartsDataFormat } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  VisualMapComponent,\n  CanvasRenderer,\n]);\n\ninterface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  visualMap?: VisualMapComponentOption[];\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n}\n\nexport function LineChart({\n  height,\n  data,\n  yAxis,\n  unit,\n  grid,\n  legend,\n  visualMap,\n  onDataZoom,\n  onDoubleClick,\n}: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setPinTooltip(false);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setPinTooltip]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnClick = () => setPinTooltip((current) => !current);\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setPinTooltip(false);\n    // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n    if (onDoubleClick === undefined) {\n      if (chartRef.current !== undefined) {\n        restoreChart(chartRef.current);\n      }\n    } else {\n      onDoubleClick(e);\n    }\n  };\n\n  const handleOnMouseDown = (e: MouseEvent) => {\n    // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n    if (e.target instanceof HTMLCanvasElement) {\n      setShowTooltip(false);\n    }\n  };\n\n  const handleOnMouseUp = () => {\n    setShowTooltip(true);\n  };\n\n  const handleOnMouseEnter = () => {\n    setShowTooltip(true);\n  };\n\n  const handleOnMouseLeave = () => {\n    setShowTooltip(false);\n    setPinTooltip(false);\n  };\n\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;\n\n    const showPointsOnHover = data.timeSeries.length < PROGRESSIVE_MODE_SERIES_LIMIT;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: showPointsOnHover,\n        trigger: 'axis',\n        showContent: false,\n        axisPointer: {\n          type: 'none',\n        },\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n      visualMap,\n    };\n\n    return option;\n  }, [data, yAxis, grid, legend, visualMap]);\n\n  return (\n    <Box\n      sx={{\n        height,\n      }}\n      onClick={handleOnClick}\n      onDoubleClick={handleOnDoubleClick}\n      onMouseDown={handleOnMouseDown}\n      onMouseUp={handleOnMouseUp}\n      onMouseLeave={handleOnMouseLeave}\n      onMouseEnter={handleOnMouseEnter}\n    >\n      {showTooltip === true && (\n        <Tooltip chartRef={chartRef} chartData={data} wrapLabels={true} pinTooltip={pinTooltip} unit={unit}></Tooltip>\n      )}\n\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","useRef","useState","useDeepMemo","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","VisualMapComponent","CanvasRenderer","EChart","PROGRESSIVE_MODE_SERIES_LIMIT","useChartsTheme","Tooltip","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","visualMap","onDataZoom","onDoubleClick","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnClick","handleOnDoubleClick","e","handleOnMouseDown","target","HTMLCanvasElement","handleOnMouseUp","handleOnMouseEnter","handleOnMouseLeave","option","timeSeries","noDataOption","showPointsOnHover","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","onMouseUp","onMouseLeave","onMouseEnter","chartData","wrapLabels","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { useDeepMemo } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  VisualMapComponentOption,\n  YAXisComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  VisualMapComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  VisualMapComponent,\n  CanvasRenderer,\n]);\n\ninterface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  visualMap?: VisualMapComponentOption[];\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n}\n\nexport function LineChart({\n  height,\n  data,\n  yAxis,\n  unit,\n  grid,\n  legend,\n  visualMap,\n  onDataZoom,\n  onDoubleClick,\n}: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setPinTooltip(false);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setPinTooltip]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnClick = () => setPinTooltip((current) => !current);\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setPinTooltip(false);\n    // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n    if (onDoubleClick === undefined) {\n      if (chartRef.current !== undefined) {\n        restoreChart(chartRef.current);\n      }\n    } else {\n      onDoubleClick(e);\n    }\n  };\n\n  const handleOnMouseDown = (e: MouseEvent) => {\n    // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n    if (e.target instanceof HTMLCanvasElement) {\n      setShowTooltip(false);\n    }\n  };\n\n  const handleOnMouseUp = () => {\n    setShowTooltip(true);\n  };\n\n  const handleOnMouseEnter = () => {\n    setShowTooltip(true);\n  };\n\n  const handleOnMouseLeave = () => {\n    setShowTooltip(false);\n    setPinTooltip(false);\n  };\n\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n        axisPointer: {\n          type: 'line',\n          z: 0, // ensure point symbol shows on top of dashed line\n        },\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n      visualMap,\n    };\n\n    return option;\n  }, [data, yAxis, grid, legend, visualMap]);\n\n  return (\n    <Box\n      sx={{\n        height,\n      }}\n      onClick={handleOnClick}\n      onDoubleClick={handleOnDoubleClick}\n      onMouseDown={handleOnMouseDown}\n      onMouseUp={handleOnMouseUp}\n      onMouseLeave={handleOnMouseLeave}\n      onMouseEnter={handleOnMouseEnter}\n    >\n      {showTooltip === true && (\n        <Tooltip chartRef={chartRef} chartData={data} wrapLabels={true} pinTooltip={pinTooltip} unit={unit}></Tooltip>\n      )}\n\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","useRef","useState","useDeepMemo","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","VisualMapComponent","CanvasRenderer","EChart","useChartsTheme","Tooltip","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","visualMap","onDataZoom","onDoubleClick","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnClick","handleOnDoubleClick","e","handleOnMouseDown","target","HTMLCanvasElement","handleOnMouseUp","handleOnMouseEnter","handleOnMouseLeave","option","timeSeries","noDataOption","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","onMouseUp","onMouseLeave","onMouseEnter","chartData","wrapLabels","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/cjs/LineChart/LineChart.js

@@ -27,7 +27,6 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
-const _graph = require("../model/graph");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _tooltip = require("../Tooltip/Tooltip");
 const _utils = require("./utils");
@@ -116,7 +115,6 @@ function LineChart({ height , data , yAxis , unit , grid , legend , visualMap ,
     const option = (0, _core.useDeepMemo)(()=>{
         if (data.timeSeries === undefined) return {};
         if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;
-        const showPointsOnHover = data.timeSeries.length < _graph.PROGRESSIVE_MODE_SERIES_LIMIT;
         var _rangeMs;
         const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : (0, _utils.getDateRange)(data.xAxis);
         const option = {
@@ -134,11 +132,12 @@ function LineChart({ height , data , yAxis , unit , grid , legend , visualMap ,
             yAxis: (0, _utils.getYAxes)(yAxis, unit),
             animation: false,
             tooltip: {
-                show: showPointsOnHover,
+                show: true,
                 trigger: 'axis',
                 showContent: false,
                 axisPointer: {
-                    type: 'none'
+                    type: 'line',
+                    z: 0
                 }
             },
             toolbox: {

package/dist/cjs/model/graph.js

@@ -14,8 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "PROGRESSIVE_MODE_SERIES_LIMIT", {
+Object.defineProperty(exports, "OPTIMIZED_MODE_SERIES_LIMIT", {
     enumerable: true,
-    get: ()=>PROGRESSIVE_MODE_SERIES_LIMIT
+    get: ()=>OPTIMIZED_MODE_SERIES_LIMIT
 });
-const PROGRESSIVE_MODE_SERIES_LIMIT = 500;
+const OPTIMIZED_MODE_SERIES_LIMIT = 1000;

package/dist/model/graph.d.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler } from 'react';
 import { LineSeriesOption } from 'echarts/charts';
-export declare const PROGRESSIVE_MODE_SERIES_LIMIT = 500;
+export declare const OPTIMIZED_MODE_SERIES_LIMIT = 1000;
 export declare type UnixTimeMs = number;
 export declare type GraphSeriesValueTuple = [timestamp: UnixTimeMs, value: number];
 export interface GraphSeries {

package/dist/model/graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;CAC3C"}
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;CAC3C"}

package/dist/model/graph.js

@@ -10,6 +10,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export const PROGRESSIVE_MODE_SERIES_LIMIT = 500;
+// adjust display when there are many time series to help with performance
+export const OPTIMIZED_MODE_SERIES_LIMIT = 1000;
 
 //# sourceMappingURL=graph.js.map

package/dist/model/graph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/graph.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MouseEventHandler } from 'react';\nimport { LineSeriesOption } from 'echarts/charts';\n\nexport const PROGRESSIVE_MODE_SERIES_LIMIT = 500;\n\nexport type UnixTimeMs = number;\n\nexport type GraphSeriesValueTuple = [timestamp: UnixTimeMs, value: number];\n\nexport interface GraphSeries {\n  name: string;\n  values: Iterable<GraphSeriesValueTuple>;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  // TODO: support dataset and both category / time xAxis types\n  data: Iterable<GraphSeriesValueTuple> | EChartsValues[];\n}\n\nexport type EChartsDataFormat = {\n  timeSeries: EChartsTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n/**\n * Supported legend options\n */\nexport interface LegendOptions {\n  position?: 'bottom' | 'right';\n}\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  color: string;\n  onClick: MouseEventHandler<HTMLLIElement>;\n}\n"],"names":["PROGRESSIVE_MODE_SERIES_LIMIT"],"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;AAKjC,OAAO,MAAMA,6BAA6B,GAAG,GAAG,CAAC"}
+{"version":3,"sources":["../../src/model/graph.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MouseEventHandler } from 'react';\nimport { LineSeriesOption } from 'echarts/charts';\n\n// adjust display when there are many time series to help with performance\nexport const OPTIMIZED_MODE_SERIES_LIMIT = 1000;\n\nexport type UnixTimeMs = number;\n\nexport type GraphSeriesValueTuple = [timestamp: UnixTimeMs, value: number];\n\nexport interface GraphSeries {\n  name: string;\n  values: Iterable<GraphSeriesValueTuple>;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  // TODO: support dataset and both category / time xAxis types\n  data: Iterable<GraphSeriesValueTuple> | EChartsValues[];\n}\n\nexport type EChartsDataFormat = {\n  timeSeries: EChartsTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n/**\n * Supported legend options\n */\nexport interface LegendOptions {\n  position?: 'bottom' | 'right';\n}\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  color: string;\n  onClick: MouseEventHandler<HTMLLIElement>;\n}\n"],"names":["OPTIMIZED_MODE_SERIES_LIMIT"],"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;AAKjC,0EAA0E;AAC1E,OAAO,MAAMA,2BAA2B,GAAG,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "^0.18.0",
+    "@perses-dev/core": "^0.19.0",
     "date-fns": "^2.28.0",
     "echarts": "^5.3.3",
     "lodash-es": "^4.17.21",