@perses-dev/components 0.0.0-snapshot-panel-extra-content-2-2767e21 → 0.0.0-snapshot-panel-extra-content-3-17f9c42

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,EAAc,UAAU,EAAkD,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA0B,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE1F,OAAO,EAAuC,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1F,OAAO,EAOL,aAAa,EACd,MAAM,UAAU,CAAC;AAgBlB,MAAM,WAAW,cAAc;IAC7B,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,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,SAAS,0GAsPpB,CAAC"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAAkD,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA0B,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE1F,OAAO,EAAuC,aAAa,EAA0B,MAAM,sBAAsB,CAAC;AAElH,OAAO,EAOL,aAAa,EACd,MAAM,UAAU,CAAC;AAgBlB,MAAM,WAAW,cAAc;IAC7B,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,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,SAAS,0GAuPpB,CAAC"}

package/dist/LineChart/LineChart.js

@@ -19,7 +19,7 @@ import { GridComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent,
 import { CanvasRenderer } from 'echarts/renderers';
 import { EChart } from '../EChart';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
-import { LineChartTooltip } from '../TimeSeriesTooltip';
+import { LineChartTooltip, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';
 import { useTimeZone } from '../context/TimeZoneProvider';
 import { clearHighlightedSeries, enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from '../utils';
 use([
@@ -35,9 +35,7 @@ use([
     LegendComponent,
     CanvasRenderer
 ]);
-export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
-    wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig =DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
     var ref1;
     const chartsTheme = useChartsTheme();
     const chartRef = useRef();
@@ -171,7 +169,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
         },
         onClick: (e)=>{
             // Pin and unpin when clicking on chart canvas but not tooltip text.
-            if (e.target instanceof HTMLCanvasElement) {
+            if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {
                 setTooltipPinnedCoords((current)=>{
                     if (current === null) {
                         return {
@@ -249,6 +247,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: tooltipConfig.enablePinning,
                 pinnedPos: tooltipPinnedCoords,
                 unit: unit,
                 onUnpinClick: ()=>{

package/dist/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/LineChart.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 { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { UnitOptions } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\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} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, ChartInstanceFocusOpts, ChartInstance } from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { CursorCoordinates, LineChartTooltip, TooltipConfig } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getDateRange,\n  getFormattedDate,\n  getYAxes,\n  restoreChart,\n  ZoomEventData,\n} 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  CanvasRenderer,\n]);\n\nexport interface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const LineChart = forwardRef<ChartInstance, LineChartProps>(function LineChart(\n  {\n    height,\n    data,\n    yAxis,\n    unit,\n    grid,\n    legend,\n    tooltipConfig = { wrapLabels: true },\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const { timeZone } = useTimeZone();\n\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        highlightSeries({ id }: ChartInstanceFocusOpts) {\n          if (!chartRef.current) {\n            // when chart undef, do not highlight series when hovering over legend\n            return;\n          }\n\n          chartRef.current.dispatchAction({ type: 'highlight', seriesId: id });\n        },\n        clearHighlightedSeries: () => {\n          if (!chartRef.current) {\n            // when chart undef, do not clear highlight series\n            return;\n          }\n          clearHighlightedSeries(chartRef.current, data.timeSeries.length);\n        },\n      };\n    },\n    [data.timeSeries.length]\n  );\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            setTooltipPinnedCoords(null);\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    };\n  }, [data, onDataZoom, setTooltipPinnedCoords]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data.timeSeries === null || (data.timeSeries.length === 0 && noDataVariant === 'message')) return 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, timeZone);\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      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: true,\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    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride, noDataVariant]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\n                page: {\n                  x: e.pageX,\n                  y: e.pageY,\n                },\n                client: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                plotCanvas: {\n                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current, data.timeSeries.length);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\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      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <LineChartTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            pinnedPos={tooltipPinnedCoords}\n            unit={unit}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n            }}\n            containerId={chartsTheme.tooltipPortalContainerId}\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        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useImperativeHandle","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","useChartsTheme","LineChartTooltip","useTimeZone","clearHighlightedSeries","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","tooltipConfig","wrapLabels","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","timeZone","isDragging","setIsDragging","startX","setStartX","highlightSeries","id","current","dispatchAction","type","seriesId","timeSeries","length","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","noDataOption","rangeMs","series","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","triggerEmphasis","triggerTooltip","snap","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","pinnedPos","onUnpinClick","containerId","tooltipPortalContainerId","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/LineChart.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 { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { UnitOptions } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\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} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, ChartInstanceFocusOpts, ChartInstance } from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { CursorCoordinates, LineChartTooltip, TooltipConfig, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getDateRange,\n  getFormattedDate,\n  getYAxes,\n  restoreChart,\n  ZoomEventData,\n} 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  CanvasRenderer,\n]);\n\nexport interface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const LineChart = forwardRef<ChartInstance, LineChartProps>(function LineChart(\n  {\n    height,\n    data,\n    yAxis,\n    unit,\n    grid,\n    legend,\n    tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const { timeZone } = useTimeZone();\n\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        highlightSeries({ id }: ChartInstanceFocusOpts) {\n          if (!chartRef.current) {\n            // when chart undef, do not highlight series when hovering over legend\n            return;\n          }\n\n          chartRef.current.dispatchAction({ type: 'highlight', seriesId: id });\n        },\n        clearHighlightedSeries: () => {\n          if (!chartRef.current) {\n            // when chart undef, do not clear highlight series\n            return;\n          }\n          clearHighlightedSeries(chartRef.current, data.timeSeries.length);\n        },\n      };\n    },\n    [data.timeSeries.length]\n  );\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            setTooltipPinnedCoords(null);\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    };\n  }, [data, onDataZoom, setTooltipPinnedCoords]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data.timeSeries === null || (data.timeSeries.length === 0 && noDataVariant === 'message')) return 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, timeZone);\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      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: true,\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    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride, noDataVariant]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\n                page: {\n                  x: e.pageX,\n                  y: e.pageY,\n                },\n                client: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                plotCanvas: {\n                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current, data.timeSeries.length);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\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      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <LineChartTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            enablePinning={tooltipConfig.enablePinning}\n            pinnedPos={tooltipPinnedCoords}\n            unit={unit}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n            }}\n            containerId={chartsTheme.tooltipPortalContainerId}\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        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useImperativeHandle","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","useChartsTheme","LineChartTooltip","DEFAULT_TOOLTIP_CONFIG","useTimeZone","clearHighlightedSeries","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","timeZone","isDragging","setIsDragging","startX","setStartX","highlightSeries","id","current","dispatchAction","type","seriesId","timeSeries","length","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","noDataOption","rangeMs","series","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","triggerEmphasis","triggerTooltip","snap","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","enablePinning","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","wrapLabels","pinnedPos","onUnpinClick","containerId","tooltipPortalContainerId","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/TimeChart/TimeChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeChart.d.ts","sourceRoot":"","sources":["../../src/TimeChart/TimeChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAAkD,MAAM,OAAO,CAAC;AAK/F,OAAO,EAAsB,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1F,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAEL,aAAa,EACb,sBAAsB,EAGvB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAOL,aAAa,EACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuC,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAkB1F,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,SAAS,0GA6TpB,CAAC"}
+{"version":3,"file":"TimeChart.d.ts","sourceRoot":"","sources":["../../src/TimeChart/TimeChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAAkD,MAAM,OAAO,CAAC;AAK/F,OAAO,EAAsB,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1F,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAEL,aAAa,EACb,sBAAsB,EAGvB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAOL,aAAa,EACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuC,aAAa,EAA0B,MAAM,sBAAsB,CAAC;AAkBlH,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,SAAS,0GA+TpB,CAAC"}

package/dist/TimeChart/TimeChart.js

@@ -24,7 +24,7 @@ import { EChart } from '../EChart';
 import { DEFAULT_PINNED_CROSSHAIR, PINNED_CROSSHAIR_SERIES_NAME } from '../model/graph';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
 import { clearHighlightedSeries, enableDataZoom, getFormattedAxisLabel, getPointInGrid, getYAxes, restoreChart } from '../utils';
-import { TimeChartTooltip } from '../TimeSeriesTooltip';
+import { TimeChartTooltip, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';
 import { useTimeZone } from '../context/TimeZoneProvider';
 use([
     EChartsLineChart,
@@ -40,9 +40,7 @@ use([
     TooltipComponent,
     CanvasRenderer
 ]);
-export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , isStackedBar =false , tooltipConfig ={
-    wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , isStackedBar =false , tooltipConfig =DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
     var ref1;
     const chartsTheme = useChartsTheme();
     const chartRef = useRef();
@@ -176,9 +174,10 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
             animation: false,
             tooltip: {
                 show: true,
-                trigger: isStackedBar ? 'item' : 'axis',
-                // ECharts tooltip content hidden since we use custom tooltip instead
+                // ECharts tooltip content hidden by default since we use custom tooltip instead.
+                // Stacked bar uses ECharts tooltip so subgroup data shows correctly.
                 showContent: isStackedBar,
+                trigger: isStackedBar ? 'item' : 'axis',
                 appendToBody: true
             },
             // https://echarts.apache.org/en/option.html#axisPointer
@@ -248,7 +247,7 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
                 seriesMapping.push(pinnedCrosshair);
             }
             // Pin and unpin when clicking on chart canvas but not tooltip text.
-            if (e.target instanceof HTMLCanvasElement) {
+            if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {
                 setTooltipPinnedCoords((current)=>{
                     if (current === null) {
                         return {
@@ -328,6 +327,7 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
                 data: data,
                 seriesMapping: seriesMapping,
                 wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: tooltipConfig.enablePinning,
                 pinnedPos: tooltipPinnedCoords,
                 unit: unit,
                 onUnpinClick: ()=>{

package/dist/TimeChart/TimeChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeChart/TimeChart.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 { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { DatasetOption } from 'echarts/types/dist/shared';\nimport { utcToZonedTime } from 'date-fns-tz';\nimport { getCommonTimeScale, TimeScale, UnitOptions, TimeSeries } from '@perses-dev/core';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport {\n  ChartInstanceFocusOpts,\n  ChartInstance,\n  TimeChartSeriesMapping,\n  DEFAULT_PINNED_CROSSHAIR,\n  PINNED_CROSSHAIR_SERIES_NAME,\n} from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getFormattedAxisLabel,\n  getPointInGrid,\n  getYAxes,\n  restoreChart,\n  ZoomEventData,\n} from '../utils';\nimport { CursorCoordinates, TimeChartTooltip, TooltipConfig } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\n\nuse([\n  EChartsLineChart,\n  EChartsBarChart,\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport interface TimeChartProps {\n  height: number;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  timeScale?: TimeScale;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  isStackedBar?: boolean;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const TimeChart = forwardRef<ChartInstance, TimeChartProps>(function TimeChart(\n  {\n    height,\n    data,\n    seriesMapping,\n    timeScale: timeScaleProp,\n    yAxis,\n    unit,\n    grid,\n    isStackedBar = false,\n    tooltipConfig = { wrapLabels: true },\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n  const { timeZone } = useTimeZone();\n  const totalSeries = data?.length ?? 0;\n\n  let timeScale: TimeScale;\n  if (timeScaleProp === undefined) {\n    const commonTimeScale = getCommonTimeScale(data);\n    if (commonTimeScale === undefined) {\n      // set default to past 5 years\n      const today = new Date();\n      const pastDate = new Date(today);\n      pastDate.setFullYear(today.getFullYear() - 5);\n      const todayMs = today.getTime();\n      const pastDateMs = pastDate.getTime();\n      timeScale = { startMs: pastDateMs, endMs: todayMs, stepMs: 1, rangeMs: todayMs - pastDateMs };\n    } else {\n      timeScale = commonTimeScale;\n    }\n  } else {\n    timeScale = timeScaleProp;\n  }\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        highlightSeries({ name }: ChartInstanceFocusOpts) {\n          if (!chartRef.current) {\n            // when chart undef, do not highlight series when hovering over legend\n            return;\n          }\n\n          chartRef.current.dispatchAction({ type: 'highlight', seriesId: name });\n        },\n        clearHighlightedSeries: () => {\n          if (!chartRef.current) {\n            // when chart undef, do not clear highlight series\n            return;\n          }\n          clearHighlightedSeries(chartRef.current, totalSeries);\n        },\n      };\n    },\n    [totalSeries]\n  );\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            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const xAxisStartValue = params.batch[0].startValue;\n        const xAxisEndValue = params.batch[0].endValue;\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      finished: () => {\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      },\n    };\n  }, [onDataZoom, setTooltipPinnedCoords]);\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data === null || (data.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    // Utilizes ECharts dataset so raw data is separate from series option style properties\n    // https://apache.github.io/echarts-handbook/en/concepts/dataset/\n    const dataset: DatasetOption[] = [];\n    const isLocalTimeZone = timeZone === 'local';\n    data.map((d, index) => {\n      const values = d.values.map(([timestamp, value]) => {\n        const val: string | number = value === null ? '-' : value; // echarts use '-' to represent null data\n        return [isLocalTimeZone ? timestamp : utcToZonedTime(timestamp, timeZone), val];\n      });\n      dataset.push({ id: index, source: [...values], dimensions: ['time', 'value'] });\n    });\n\n    const option: EChartsCoreOption = {\n      dataset: dataset,\n      series: seriesMapping,\n      xAxis: {\n        type: 'time',\n        min: isLocalTimeZone ? timeScale.startMs : utcToZonedTime(timeScale.startMs, timeZone),\n        max: isLocalTimeZone ? timeScale.endMs : utcToZonedTime(timeScale.endMs, timeZone),\n        axisLabel: {\n          hideOverlap: true,\n          formatter: getFormattedAxisLabel(timeScale.rangeMs ?? 0),\n        },\n        axisPointer: {\n          snap: false, // important so shared crosshair does not lag\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: isStackedBar ? 'item' : 'axis',\n        // ECharts tooltip content hidden since we use custom tooltip instead\n        showContent: isStackedBar,\n        appendToBody: true,\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: false, // xAxis.axisPointer.snap takes priority\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    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n\n    return option;\n    // tooltipPinnedCoords is needed in dep array so crosshair stays beside pinned tooltip onClick\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    data,\n    seriesMapping,\n    timeScale,\n    yAxis,\n    unit,\n    grid,\n    noDataOption,\n    __experimentalEChartsOptionsOverride,\n    noDataVariant,\n    timeZone,\n    tooltipPinnedCoords,\n    isStackedBar,\n  ]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\n        // Determine where on chart canvas to plot pinned crosshair as markLine.\n        const pointInGrid = getPointInGrid(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);\n        if (pointInGrid === null) {\n          return;\n        }\n\n        // Clear previously set pinned crosshair\n        const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === PINNED_CROSSHAIR_SERIES_NAME;\n        if (tooltipPinnedCoords !== null && isCrosshairPinned) {\n          seriesMapping.pop();\n        } else if (seriesMapping.length !== data.length + 1) {\n          // Only add pinned crosshair line series when there is not one already in seriesMapping.\n          const pinnedCrosshair = merge(DEFAULT_PINNED_CROSSHAIR, {\n            markLine: {\n              data: [\n                {\n                  xAxis: pointInGrid[0],\n                },\n              ],\n            },\n          });\n          seriesMapping.push(pinnedCrosshair);\n        }\n\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\n                page: {\n                  x: e.pageX,\n                  y: e.pageY,\n                },\n                client: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                plotCanvas: {\n                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current, totalSeries);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\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      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeChartTooltip\n            containerId={chartsTheme.tooltipPortalContainerId}\n            chartRef={chartRef}\n            data={data}\n            seriesMapping={seriesMapping}\n            wrapLabels={tooltipConfig.wrapLabels}\n            pinnedPos={tooltipPinnedCoords}\n            unit={unit}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n              // Clear previously set pinned crosshair\n              seriesMapping.pop();\n            }}\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        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useImperativeHandle","useMemo","useRef","useState","Box","merge","utcToZonedTime","getCommonTimeScale","use","LineChart","EChartsLineChart","BarChart","EChartsBarChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","CanvasRenderer","EChart","DEFAULT_PINNED_CROSSHAIR","PINNED_CROSSHAIR_SERIES_NAME","useChartsTheme","clearHighlightedSeries","enableDataZoom","getFormattedAxisLabel","getPointInGrid","getYAxes","restoreChart","TimeChartTooltip","useTimeZone","TimeChart","height","data","seriesMapping","timeScale","timeScaleProp","yAxis","unit","grid","isStackedBar","tooltipConfig","wrapLabels","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","isDragging","setIsDragging","startX","setStartX","timeZone","totalSeries","length","undefined","commonTimeScale","today","Date","pastDate","setFullYear","getFullYear","todayMs","getTime","pastDateMs","startMs","endMs","stepMs","rangeMs","highlightSeries","name","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","setTimeout","batch","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","finished","noDataOption","dataset","isLocalTimeZone","map","d","index","values","timestamp","value","val","push","id","source","dimensions","series","xAxis","min","max","axisLabel","hideOverlap","formatter","axisPointer","snap","animation","tooltip","show","trigger","showContent","appendToBody","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","pointInGrid","nativeEvent","offsetX","offsetY","isCrosshairPinned","pop","pinnedCrosshair","markLine","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","containerId","tooltipPortalContainerId","pinnedPos","onUnpinClick","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeChart/TimeChart.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 { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { DatasetOption } from 'echarts/types/dist/shared';\nimport { utcToZonedTime } from 'date-fns-tz';\nimport { getCommonTimeScale, TimeScale, UnitOptions, TimeSeries } from '@perses-dev/core';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport {\n  ChartInstanceFocusOpts,\n  ChartInstance,\n  TimeChartSeriesMapping,\n  DEFAULT_PINNED_CROSSHAIR,\n  PINNED_CROSSHAIR_SERIES_NAME,\n} from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getFormattedAxisLabel,\n  getPointInGrid,\n  getYAxes,\n  restoreChart,\n  ZoomEventData,\n} from '../utils';\nimport { CursorCoordinates, TimeChartTooltip, TooltipConfig, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\n\nuse([\n  EChartsLineChart,\n  EChartsBarChart,\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport interface TimeChartProps {\n  height: number;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  timeScale?: TimeScale;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  isStackedBar?: boolean;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const TimeChart = forwardRef<ChartInstance, TimeChartProps>(function TimeChart(\n  {\n    height,\n    data,\n    seriesMapping,\n    timeScale: timeScaleProp,\n    yAxis,\n    unit,\n    grid,\n    isStackedBar = false,\n    tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n  const { timeZone } = useTimeZone();\n  const totalSeries = data?.length ?? 0;\n\n  let timeScale: TimeScale;\n  if (timeScaleProp === undefined) {\n    const commonTimeScale = getCommonTimeScale(data);\n    if (commonTimeScale === undefined) {\n      // set default to past 5 years\n      const today = new Date();\n      const pastDate = new Date(today);\n      pastDate.setFullYear(today.getFullYear() - 5);\n      const todayMs = today.getTime();\n      const pastDateMs = pastDate.getTime();\n      timeScale = { startMs: pastDateMs, endMs: todayMs, stepMs: 1, rangeMs: todayMs - pastDateMs };\n    } else {\n      timeScale = commonTimeScale;\n    }\n  } else {\n    timeScale = timeScaleProp;\n  }\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        highlightSeries({ name }: ChartInstanceFocusOpts) {\n          if (!chartRef.current) {\n            // when chart undef, do not highlight series when hovering over legend\n            return;\n          }\n\n          chartRef.current.dispatchAction({ type: 'highlight', seriesId: name });\n        },\n        clearHighlightedSeries: () => {\n          if (!chartRef.current) {\n            // when chart undef, do not clear highlight series\n            return;\n          }\n          clearHighlightedSeries(chartRef.current, totalSeries);\n        },\n      };\n    },\n    [totalSeries]\n  );\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            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const xAxisStartValue = params.batch[0].startValue;\n        const xAxisEndValue = params.batch[0].endValue;\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      finished: () => {\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      },\n    };\n  }, [onDataZoom, setTooltipPinnedCoords]);\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data === null || (data.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    // Utilizes ECharts dataset so raw data is separate from series option style properties\n    // https://apache.github.io/echarts-handbook/en/concepts/dataset/\n    const dataset: DatasetOption[] = [];\n    const isLocalTimeZone = timeZone === 'local';\n    data.map((d, index) => {\n      const values = d.values.map(([timestamp, value]) => {\n        const val: string | number = value === null ? '-' : value; // echarts use '-' to represent null data\n        return [isLocalTimeZone ? timestamp : utcToZonedTime(timestamp, timeZone), val];\n      });\n      dataset.push({ id: index, source: [...values], dimensions: ['time', 'value'] });\n    });\n\n    const option: EChartsCoreOption = {\n      dataset: dataset,\n      series: seriesMapping,\n      xAxis: {\n        type: 'time',\n        min: isLocalTimeZone ? timeScale.startMs : utcToZonedTime(timeScale.startMs, timeZone),\n        max: isLocalTimeZone ? timeScale.endMs : utcToZonedTime(timeScale.endMs, timeZone),\n        axisLabel: {\n          hideOverlap: true,\n          formatter: getFormattedAxisLabel(timeScale.rangeMs ?? 0),\n        },\n        axisPointer: {\n          snap: false, // important so shared crosshair does not lag\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: true,\n        // ECharts tooltip content hidden by default since we use custom tooltip instead.\n        // Stacked bar uses ECharts tooltip so subgroup data shows correctly.\n        showContent: isStackedBar,\n        trigger: isStackedBar ? 'item' : 'axis',\n        appendToBody: true,\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: false, // xAxis.axisPointer.snap takes priority\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    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n\n    return option;\n    // tooltipPinnedCoords is needed in dep array so crosshair stays beside pinned tooltip onClick\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    data,\n    seriesMapping,\n    timeScale,\n    yAxis,\n    unit,\n    grid,\n    noDataOption,\n    __experimentalEChartsOptionsOverride,\n    noDataVariant,\n    timeZone,\n    tooltipPinnedCoords,\n    isStackedBar,\n  ]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\n        // Determine where on chart canvas to plot pinned crosshair as markLine.\n        const pointInGrid = getPointInGrid(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);\n        if (pointInGrid === null) {\n          return;\n        }\n\n        // Clear previously set pinned crosshair\n        const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === PINNED_CROSSHAIR_SERIES_NAME;\n        if (tooltipPinnedCoords !== null && isCrosshairPinned) {\n          seriesMapping.pop();\n        } else if (seriesMapping.length !== data.length + 1) {\n          // Only add pinned crosshair line series when there is not one already in seriesMapping.\n          const pinnedCrosshair = merge(DEFAULT_PINNED_CROSSHAIR, {\n            markLine: {\n              data: [\n                {\n                  xAxis: pointInGrid[0],\n                },\n              ],\n            },\n          });\n          seriesMapping.push(pinnedCrosshair);\n        }\n\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\n                page: {\n                  x: e.pageX,\n                  y: e.pageY,\n                },\n                client: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                plotCanvas: {\n                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current, totalSeries);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\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      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeChartTooltip\n            containerId={chartsTheme.tooltipPortalContainerId}\n            chartRef={chartRef}\n            data={data}\n            seriesMapping={seriesMapping}\n            wrapLabels={tooltipConfig.wrapLabels}\n            enablePinning={tooltipConfig.enablePinning}\n            pinnedPos={tooltipPinnedCoords}\n            unit={unit}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n              // Clear previously set pinned crosshair\n              seriesMapping.pop();\n            }}\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        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useImperativeHandle","useMemo","useRef","useState","Box","merge","utcToZonedTime","getCommonTimeScale","use","LineChart","EChartsLineChart","BarChart","EChartsBarChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","CanvasRenderer","EChart","DEFAULT_PINNED_CROSSHAIR","PINNED_CROSSHAIR_SERIES_NAME","useChartsTheme","clearHighlightedSeries","enableDataZoom","getFormattedAxisLabel","getPointInGrid","getYAxes","restoreChart","TimeChartTooltip","DEFAULT_TOOLTIP_CONFIG","useTimeZone","TimeChart","height","data","seriesMapping","timeScale","timeScaleProp","yAxis","unit","grid","isStackedBar","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","isDragging","setIsDragging","startX","setStartX","timeZone","totalSeries","length","undefined","commonTimeScale","today","Date","pastDate","setFullYear","getFullYear","todayMs","getTime","pastDateMs","startMs","endMs","stepMs","rangeMs","highlightSeries","name","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","setTimeout","batch","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","finished","noDataOption","dataset","isLocalTimeZone","map","d","index","values","timestamp","value","val","push","id","source","dimensions","series","xAxis","min","max","axisLabel","hideOverlap","formatter","axisPointer","snap","animation","tooltip","show","showContent","trigger","appendToBody","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","pointInGrid","nativeEvent","offsetX","offsetY","isCrosshairPinned","pop","pinnedCrosshair","markLine","enablePinning","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","containerId","tooltipPortalContainerId","wrapLabels","pinnedPos","onUnpinClick","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts

@@ -6,6 +6,7 @@ import { CursorCoordinates } from './tooltip-model';
 export interface TimeSeriesTooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
     chartData: EChartsDataFormat;
+    enablePinning?: boolean;
     wrapLabels?: boolean;
     unit?: UnitOptions;
     onUnpinClick?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"LineChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/LineChartTooltip.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAI7C,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,8DA0F3B,CAAC"}
+{"version":3,"file":"LineChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/LineChartTooltip.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAI7C,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,8DA4F3B,CAAC"}

package/dist/TimeSeriesTooltip/LineChartTooltip.js

@@ -19,12 +19,12 @@ import { TooltipHeader } from './TooltipHeader';
 import { legacyGetNearbySeriesData } from './nearby-series';
 import { FALLBACK_CHART_WIDTH, TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, TOOLTIP_MIN_WIDTH, useMousePosition } from './tooltip-model';
 import { assembleTransform } from './utils';
-export const LineChartTooltip = /*#__PURE__*/ memo(function LineChartTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos , containerId  }) {
+export const LineChartTooltip = /*#__PURE__*/ memo(function LineChartTooltip({ chartRef , chartData , enablePinning =true , wrapLabels , unit , onUnpinClick , pinnedPos , containerId  }) {
     const [showAllSeries, setShowAllSeries] = useState(false);
     const mousePos = useMousePosition();
     const { height , width , ref: tooltipRef  } = useResizeObserver();
     const transform = useRef('');
-    const isTooltipPinned = pinnedPos !== null;
+    const isTooltipPinned = pinnedPos !== null && enablePinning;
     if (mousePos === null || mousePos.target === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
@@ -89,6 +89,7 @@ export const LineChartTooltip = /*#__PURE__*/ memo(function LineChartTooltip({ c
                     /*#__PURE__*/ _jsx(TooltipHeader, {
                         nearbySeries: nearbySeries,
                         totalSeries: totalSeries,
+                        enablePinning: enablePinning,
                         isTooltipPinned: isTooltipPinned,
                         showAllSeries: showAllSeries,
                         onShowAllClick: (checked)=>setShowAllSeries(checked),

package/dist/TimeSeriesTooltip/LineChartTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/LineChartTooltip.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, useRef, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { legacyGetNearbySeriesData } 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   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n}\n\nexport const LineChartTooltip = memo(function LineChartTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  unit,\n  onUnpinClick,\n  pinnedPos,\n  containerId,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n  const transform = useRef('');\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\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = legacyGetNearbySeriesData({\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  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n  if (!isTooltipPinned) {\n    transform.current = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);\n  }\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: 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: transform.current,\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","useRef","useState","useResizeObserver","TooltipContent","TooltipHeader","legacyGetNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","LineChartTooltip","chartRef","chartData","wrapLabels","unit","onUnpinClick","pinnedPos","containerId","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","transform","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","nearbySeries","length","totalSeries","timeSeries","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","theme","container","sx","minWidth","maxWidth","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","spacing","onShowAllClick","checked","series"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/LineChartTooltip.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, useRef, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { legacyGetNearbySeriesData } 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  enablePinning?: boolean;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n  onUnpinClick?: () => void;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n}\n\nexport const LineChartTooltip = memo(function LineChartTooltip({\n  chartRef,\n  chartData,\n  enablePinning = true,\n  wrapLabels,\n  unit,\n  onUnpinClick,\n  pinnedPos,\n  containerId,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n  const transform = useRef('');\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\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\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = legacyGetNearbySeriesData({\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  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n  if (!isTooltipPinned) {\n    transform.current = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);\n  }\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: 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: transform.current,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\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","useRef","useState","useResizeObserver","TooltipContent","TooltipHeader","legacyGetNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","LineChartTooltip","chartRef","chartData","enablePinning","wrapLabels","unit","onUnpinClick","pinnedPos","containerId","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","transform","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","nearbySeries","length","totalSeries","timeSeries","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","theme","container","sx","minWidth","maxWidth","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","spacing","onShowAllClick","checked","series"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts

@@ -7,6 +7,7 @@ export interface TimeChartTooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
     data: TimeSeries[];
     seriesMapping: TimeChartSeriesMapping;
+    enablePinning?: boolean;
     pinnedPos: CursorCoordinates | null;
     /**
      * The id of the container that will have the chart tooltip appended to it.

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

@@ -1 +1 @@
-{"version":3,"file":"TimeChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAA0C,MAAM,iBAAiB,CAAC;AAM5F,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6DAyE3B,CAAC"}
+{"version":3,"file":"TimeChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAA0C,MAAM,iBAAiB,CAAC;AAM5F,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6DA2E3B,CAAC"}

package/dist/TimeSeriesTooltip/TimeChartTooltip.js

@@ -19,12 +19,12 @@ import { assembleTransform, getTooltipStyles } from './utils';
 import { getNearbySeriesData } from './nearby-series';
 import { TooltipHeader } from './TooltipHeader';
 import { TooltipContent } from './TooltipContent';
-export const TimeChartTooltip = /*#__PURE__*/ memo(function TimeChartTooltip({ containerId , chartRef , data , seriesMapping , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+export const TimeChartTooltip = /*#__PURE__*/ memo(function TimeChartTooltip({ containerId , chartRef , data , seriesMapping , enablePinning =true , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
     const [showAllSeries, setShowAllSeries] = useState(false);
     const transform = useRef('');
     const mousePos = useMousePosition();
     const { height , width , ref: tooltipRef  } = useResizeObserver();
-    const isTooltipPinned = pinnedPos !== null;
+    const isTooltipPinned = pinnedPos !== null && enablePinning;
     if (mousePos === null || mousePos.target === null || data === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
@@ -65,6 +65,7 @@ export const TimeChartTooltip = /*#__PURE__*/ memo(function TimeChartTooltip({ c
                     /*#__PURE__*/ _jsx(TooltipHeader, {
                         nearbySeries: nearbySeries,
                         totalSeries: totalSeries,
+                        enablePinning: enablePinning,
                         isTooltipPinned: isTooltipPinned,
                         showAllSeries: showAllSeries,
                         onShowAllClick: (checked)=>setShowAllSeries(checked),

package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.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 { memo, useRef, useState } from 'react';\nimport { Box, Portal, Stack } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { UnitOptions, TimeSeries } from '@perses-dev/core';\nimport useResizeObserver from 'use-resize-observer';\nimport { TimeChartSeriesMapping } from '../model';\nimport { CursorCoordinates, FALLBACK_CHART_WIDTH, useMousePosition } from './tooltip-model';\nimport { assembleTransform, getTooltipStyles } from './utils';\nimport { getNearbySeriesData } from './nearby-series';\nimport { TooltipHeader } from './TooltipHeader';\nimport { TooltipContent } from './TooltipContent';\n\nexport interface TimeChartTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n  onUnpinClick?: () => void;\n  unit?: UnitOptions;\n  wrapLabels?: boolean;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  containerId,\n  chartRef,\n  data,\n  seriesMapping,\n  wrapLabels,\n  unit,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const transform = useRef('');\n\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 || data === 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\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  if (!isTooltipPinned) {\n    transform.current = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);\n  }\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    data,\n    seriesMapping,\n    pinnedPos,\n    chart,\n    unit,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = data.length;\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}\n        style={{\n          transform: transform.current,\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":["memo","useRef","useState","Box","Portal","Stack","useResizeObserver","FALLBACK_CHART_WIDTH","useMousePosition","assembleTransform","getTooltipStyles","getNearbySeriesData","TooltipHeader","TooltipContent","TimeChartTooltip","containerId","chartRef","data","seriesMapping","wrapLabels","unit","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","transform","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","nearbySeries","length","totalSeries","container","sx","theme","style","spacing","onShowAllClick","checked","series"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.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 { memo, useRef, useState } from 'react';\nimport { Box, Portal, Stack } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { UnitOptions, TimeSeries } from '@perses-dev/core';\nimport useResizeObserver from 'use-resize-observer';\nimport { TimeChartSeriesMapping } from '../model';\nimport { CursorCoordinates, FALLBACK_CHART_WIDTH, useMousePosition } from './tooltip-model';\nimport { assembleTransform, getTooltipStyles } from './utils';\nimport { getNearbySeriesData } from './nearby-series';\nimport { TooltipHeader } from './TooltipHeader';\nimport { TooltipContent } from './TooltipContent';\n\nexport interface TimeChartTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  enablePinning?: boolean;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n  onUnpinClick?: () => void;\n  unit?: UnitOptions;\n  wrapLabels?: boolean;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  containerId,\n  chartRef,\n  data,\n  seriesMapping,\n  enablePinning = true,\n  wrapLabels,\n  unit,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const transform = useRef('');\n\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  if (mousePos === null || mousePos.target === null || data === 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\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  if (!isTooltipPinned) {\n    transform.current = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);\n  }\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    data,\n    seriesMapping,\n    pinnedPos,\n    chart,\n    unit,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = data.length;\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}\n        style={{\n          transform: transform.current,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\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":["memo","useRef","useState","Box","Portal","Stack","useResizeObserver","FALLBACK_CHART_WIDTH","useMousePosition","assembleTransform","getTooltipStyles","getNearbySeriesData","TooltipHeader","TooltipContent","TimeChartTooltip","containerId","chartRef","data","seriesMapping","enablePinning","wrapLabels","unit","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","transform","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","nearbySeries","length","totalSeries","container","sx","theme","style","spacing","onShowAllClick","checked","series"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TooltipHeader.d.ts

@@ -5,6 +5,7 @@ export interface TooltipHeaderProps {
     totalSeries: number;
     isTooltipPinned: boolean;
     showAllSeries: boolean;
+    enablePinning?: boolean;
     onShowAllClick?: (checked: boolean) => void;
     onUnpinClick?: () => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipHeader.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,0DAwHxB,CAAC"}
+{"version":3,"file":"TooltipHeader.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAQpD,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,0DA2HxB,CAAC"}

package/dist/TimeSeriesTooltip/TooltipHeader.js

@@ -16,8 +16,8 @@ import Pin from 'mdi-material-ui/Pin';
 import PinOutline from 'mdi-material-ui/PinOutline';
 import { memo } from 'react';
 import { format } from 'date-fns';
-import { TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_WIDTH } from './tooltip-model';
-export const TooltipHeader = /*#__PURE__*/ memo(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , onShowAllClick , onUnpinClick  }) {
+import { TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_WIDTH, PIN_TOOLTIP_HELP_TEXT, UNPIN_TOOLTIP_HELP_TEXT } from './tooltip-model';
+export const TooltipHeader = /*#__PURE__*/ memo(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , enablePinning =true , onShowAllClick , onUnpinClick  }) {
     var ref;
     var ref1;
     const seriesTimeMs = (ref1 = (ref = nearbySeries[0]) === null || ref === void 0 ? void 0 : ref.date) !== null && ref1 !== void 0 ? ref1 : null;
@@ -47,8 +47,8 @@ export const TooltipHeader = /*#__PURE__*/ memo(function TooltipHeader({ nearbyS
         });
     };
     // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT
-    const showAllSeriesToggle = totalSeries > 5;
-    const pinTooltipHelpText = isTooltipPinned ? 'Click to unpin' : 'Click chart to pin';
+    const showAllSeriesToggle = enablePinning && totalSeries > 5;
+    const pinTooltipHelpText = isTooltipPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT;
     var ref2;
     return /*#__PURE__*/ _jsxs(Box, {
         sx: (theme)=>{
@@ -114,7 +114,7 @@ export const TooltipHeader = /*#__PURE__*/ memo(function TooltipHeader({ nearbyS
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ _jsxs(Stack, {
+                            enablePinning && /*#__PURE__*/ _jsxs(Stack, {
                                 direction: "row",
                                 alignItems: "center",
                                 children: [

package/dist/TimeSeriesTooltip/TooltipHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipHeader.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, Divider, Typography, Stack, Switch } from '@mui/material';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport { memo } from 'react';\nimport { format } from 'date-fns';\nimport { NearbySeriesArray } from './nearby-series';\nimport { TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_WIDTH } from './tooltip-model';\n\nexport interface TooltipHeaderProps {\n  nearbySeries: NearbySeriesArray;\n  totalSeries: number;\n  isTooltipPinned: boolean;\n  showAllSeries: boolean;\n  onShowAllClick?: (checked: boolean) => void;\n  onUnpinClick?: () => void;\n}\n\nexport const TooltipHeader = memo(function TooltipHeader({\n  nearbySeries,\n  totalSeries,\n  isTooltipPinned,\n  showAllSeries,\n  onShowAllClick,\n  onUnpinClick,\n}: TooltipHeaderProps) {\n  const seriesTimeMs = nearbySeries[0]?.date ?? null;\n  if (seriesTimeMs === null) {\n    return null;\n  }\n\n  const formatTimeSeriesHeader = (timeMs: number) => {\n    const date = new Date(timeMs);\n    const formattedDate = format(date, 'MMM dd, yyyy - ');\n    const formattedTime = format(date, 'HH:mm:ss');\n    return (\n      <Box>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</strong>\n        </Typography>\n      </Box>\n    );\n  };\n\n  // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT\n  const showAllSeriesToggle = totalSeries > 5;\n\n  const pinTooltipHelpText = isTooltipPinned ? 'Click to unpin' : 'Click chart to pin';\n\n  return (\n    <Box\n      sx={(theme) => ({\n        width: '100%',\n        maxWidth: TOOLTIP_MAX_WIDTH,\n        padding: theme.spacing(1.5, 2, 0.5, 2),\n        backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n        position: 'sticky',\n        top: 0,\n        left: 0,\n      })}\n    >\n      <Box\n        sx={{\n          width: '100%',\n          display: 'flex',\n          justifyContent: 'start',\n          alignItems: 'center',\n          paddingBottom: 0.5,\n        }}\n      >\n        {formatTimeSeriesHeader(seriesTimeMs)}\n        <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }}>\n          {showAllSeriesToggle && (\n            <Stack direction=\"row\" gap={0.5} alignItems=\"center\" sx={{ textAlign: 'right' }}>\n              <Typography sx={{ fontSize: 11 }}>Show All</Typography>\n              <Switch\n                checked={showAllSeries}\n                size=\"small\"\n                onChange={(_, checked) => {\n                  if (onShowAllClick !== undefined) {\n                    return onShowAllClick(checked);\n                  }\n                }}\n                sx={(theme) => ({\n                  '& .MuiSwitch-switchBase': {\n                    color: theme.palette.common.white,\n                  },\n                  '& .MuiSwitch-track': {\n                    backgroundColor: theme.palette.common.white,\n                  },\n                })}\n              />\n            </Stack>\n          )}\n          <Stack direction=\"row\" alignItems=\"center\">\n            <Typography\n              sx={{\n                marginRight: 0.5,\n                fontSize: 11,\n                verticalAlign: 'middle',\n              }}\n            >\n              {pinTooltipHelpText}\n            </Typography>\n            {isTooltipPinned ? (\n              <Pin\n                onClick={() => {\n                  if (onUnpinClick !== undefined) {\n                    onUnpinClick();\n                  }\n                }}\n                sx={{\n                  fontSize: 16,\n                  cursor: 'pointer',\n                }}\n              />\n            ) : (\n              <PinOutline sx={{ fontSize: 16 }} />\n            )}\n          </Stack>\n        </Stack>\n      </Box>\n      <Divider\n        sx={(theme) => ({\n          width: '100%',\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n    </Box>\n  );\n});\n"],"names":["Box","Divider","Typography","Stack","Switch","Pin","PinOutline","memo","format","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","TooltipHeader","nearbySeries","totalSeries","isTooltipPinned","showAllSeries","onShowAllClick","onUnpinClick","seriesTimeMs","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","showAllSeriesToggle","pinTooltipHelpText","width","maxWidth","padding","spacing","backgroundColor","designSystem","grey","position","top","left","display","justifyContent","alignItems","paddingBottom","direction","gap","marginLeft","textAlign","fontSize","checked","size","onChange","_","undefined","marginRight","verticalAlign","onClick","cursor","borderColor"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipHeader.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, Divider, Typography, Stack, Switch } from '@mui/material';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport { memo } from 'react';\nimport { format } from 'date-fns';\nimport { NearbySeriesArray } from './nearby-series';\nimport {\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  PIN_TOOLTIP_HELP_TEXT,\n  UNPIN_TOOLTIP_HELP_TEXT,\n} from './tooltip-model';\n\nexport interface TooltipHeaderProps {\n  nearbySeries: NearbySeriesArray;\n  totalSeries: number;\n  isTooltipPinned: boolean;\n  showAllSeries: boolean;\n  enablePinning?: boolean;\n  onShowAllClick?: (checked: boolean) => void;\n  onUnpinClick?: () => void;\n}\n\nexport const TooltipHeader = memo(function TooltipHeader({\n  nearbySeries,\n  totalSeries,\n  isTooltipPinned,\n  showAllSeries,\n  enablePinning = true,\n  onShowAllClick,\n  onUnpinClick,\n}: TooltipHeaderProps) {\n  const seriesTimeMs = nearbySeries[0]?.date ?? null;\n  if (seriesTimeMs === null) {\n    return null;\n  }\n\n  const formatTimeSeriesHeader = (timeMs: number) => {\n    const date = new Date(timeMs);\n    const formattedDate = format(date, 'MMM dd, yyyy - ');\n    const formattedTime = format(date, 'HH:mm:ss');\n    return (\n      <Box>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</strong>\n        </Typography>\n      </Box>\n    );\n  };\n\n  // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT\n  const showAllSeriesToggle = enablePinning && totalSeries > 5;\n\n  const pinTooltipHelpText = isTooltipPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT;\n\n  return (\n    <Box\n      sx={(theme) => ({\n        width: '100%',\n        maxWidth: TOOLTIP_MAX_WIDTH,\n        padding: theme.spacing(1.5, 2, 0.5, 2),\n        backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n        position: 'sticky',\n        top: 0,\n        left: 0,\n      })}\n    >\n      <Box\n        sx={{\n          width: '100%',\n          display: 'flex',\n          justifyContent: 'start',\n          alignItems: 'center',\n          paddingBottom: 0.5,\n        }}\n      >\n        {formatTimeSeriesHeader(seriesTimeMs)}\n        <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }}>\n          {showAllSeriesToggle && (\n            <Stack direction=\"row\" gap={0.5} alignItems=\"center\" sx={{ textAlign: 'right' }}>\n              <Typography sx={{ fontSize: 11 }}>Show All</Typography>\n              <Switch\n                checked={showAllSeries}\n                size=\"small\"\n                onChange={(_, checked) => {\n                  if (onShowAllClick !== undefined) {\n                    return onShowAllClick(checked);\n                  }\n                }}\n                sx={(theme) => ({\n                  '& .MuiSwitch-switchBase': {\n                    color: theme.palette.common.white,\n                  },\n                  '& .MuiSwitch-track': {\n                    backgroundColor: theme.palette.common.white,\n                  },\n                })}\n              />\n            </Stack>\n          )}\n          {enablePinning && (\n            <Stack direction=\"row\" alignItems=\"center\">\n              <Typography\n                sx={{\n                  marginRight: 0.5,\n                  fontSize: 11,\n                  verticalAlign: 'middle',\n                }}\n              >\n                {pinTooltipHelpText}\n              </Typography>\n              {isTooltipPinned ? (\n                <Pin\n                  onClick={() => {\n                    if (onUnpinClick !== undefined) {\n                      onUnpinClick();\n                    }\n                  }}\n                  sx={{\n                    fontSize: 16,\n                    cursor: 'pointer',\n                  }}\n                />\n              ) : (\n                <PinOutline sx={{ fontSize: 16 }} />\n              )}\n            </Stack>\n          )}\n        </Stack>\n      </Box>\n      <Divider\n        sx={(theme) => ({\n          width: '100%',\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n    </Box>\n  );\n});\n"],"names":["Box","Divider","Typography","Stack","Switch","Pin","PinOutline","memo","format","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT","TooltipHeader","nearbySeries","totalSeries","isTooltipPinned","showAllSeries","enablePinning","onShowAllClick","onUnpinClick","seriesTimeMs","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","showAllSeriesToggle","pinTooltipHelpText","width","maxWidth","padding","spacing","backgroundColor","designSystem","grey","position","top","left","display","justifyContent","alignItems","paddingBottom","direction","gap","marginLeft","textAlign","fontSize","checked","size","onChange","_","undefined","marginRight","verticalAlign","onClick","cursor","borderColor"],"mappings":"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"}

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

@@ -75,6 +75,10 @@ export declare const useMousePosition: () => CursorData['coords'];
 export declare type TooltipConfig = {
     wrapLabels: boolean;
     hidden?: boolean;
+    enablePinning?: boolean;
 };
+export declare const DEFAULT_TOOLTIP_CONFIG: TooltipConfig;
+export declare const PIN_TOOLTIP_HELP_TEXT = "Click chart to pin";
+export declare const UNPIN_TOOLTIP_HELP_TEXT = "Click to unpin";
 export {};
 //# sourceMappingURL=tooltip-model.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-model.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,wBAAwB,QAA0B,CAAC;AAChE,eAAO,MAAM,+BAA+B,OAAO,CAAC;AACpD,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,eAAO,MAAM,yBAAyB,qCAAqC,CAAC;AAC5E,eAAO,MAAM,6BAA6B,iDAAiD,CAAC;AAE5F,eAAO,MAAM,yBAAyB,YAAY,CAAC;AAEnD,eAAO,MAAM,mBAAmB,qBAQ9B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAa7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAG5B,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE;QACR,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACxC,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,aAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,eAAe,GAAG,UAAU,GAAG,iBAAiB,CAAC;AAE7D,eAAO,MAAM,gBAAgB,QAAO,UAAU,CAAC,QAAQ,CAoCtD,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC"}
+{"version":3,"file":"tooltip-model.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,wBAAwB,QAA0B,CAAC;AAChE,eAAO,MAAM,+BAA+B,OAAO,CAAC;AACpD,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,eAAO,MAAM,yBAAyB,qCAAqC,CAAC;AAC5E,eAAO,MAAM,6BAA6B,iDAAiD,CAAC;AAE5F,eAAO,MAAM,yBAAyB,YAAY,CAAC;AAEnD,eAAO,MAAM,mBAAmB,qBAQ9B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAa7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAG5B,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE;QACR,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACxC,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,aAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,eAAe,GAAG,UAAU,GAAG,iBAAiB,CAAC;AAE7D,eAAO,MAAM,gBAAgB,QAAO,UAAU,CAAC,QAAQ,CAoCtD,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,aAGpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,uBAAuB,CAAC;AAE1D,eAAO,MAAM,uBAAuB,mBAAmB,CAAC"}

package/dist/TimeSeriesTooltip/tooltip-model.js

@@ -82,5 +82,11 @@ export const useMousePosition = ()=>{
     }, []);
     return coords;
 };
+export const DEFAULT_TOOLTIP_CONFIG = {
+    wrapLabels: true,
+    enablePinning: true
+};
+export const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';
+export const UNPIN_TOOLTIP_HELP_TEXT = 'Click to unpin';
 
 //# sourceMappingURL=tooltip-model.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/tooltip-model.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 { useEffect, useState } from 'react';\nimport { NearbySeriesArray } from './nearby-series';\n\nexport const TOOLTIP_MIN_WIDTH = 375;\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 650;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\nexport const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;\nexport const TOOLTIP_PADDING = 8;\n\nexport const FALLBACK_CHART_WIDTH = 750;\n\nexport const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';\nexport const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';\n\nexport const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const emptyTooltipData = {\n  cursor: defaultCursorData,\n  focusedSeries: null,\n};\n\nexport interface Coordinate {\n  x: number;\n  y: number;\n}\n\nexport interface CursorCoordinates {\n  page: Coordinate;\n  client: Coordinate;\n  plotCanvas: Coordinate;\n  zrender?: {\n    x?: number;\n    y?: number;\n  };\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: NearbySeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = MouseEvent & ZREventProperties;\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent) => {\n      return setCoords({\n        page: {\n          x: e.pageX,\n          y: e.pageY,\n        },\n        client: {\n          x: e.clientX,\n          y: e.clientY,\n        },\n        plotCanvas: {\n          x: e.offsetX,\n          y: e.offsetY,\n        },\n        zrender: {\n          // echarts canvas coordinates added automatically by zrender\n          // zrX and zrY are similar to offsetX and offsetY but they return undefined when not hovering over a chart canvas\n          x: e.zrX,\n          y: e.zrY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n    window.addEventListener('mousemove', setFromEvent);\n\n    return () => {\n      window.removeEventListener('mousemove', setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n};\n"],"names":["useEffect","useState","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","TOOLTIP_PADDING","FALLBACK_CHART_WIDTH","NEARBY_SERIES_DESCRIPTION","EMPHASIZED_SERIES_DESCRIPTION","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","plotCanvas","x","y","zrender","target","chartWidth","emptyTooltipData","cursor","focusedSeries","useMousePosition","setCoords","setFromEvent","e","page","pageX","pageY","client","clientX","clientY","offsetX","offsetY","zrX","zrY","window","addEventListener","removeEventListener"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/tooltip-model.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 { useEffect, useState } from 'react';\nimport { NearbySeriesArray } from './nearby-series';\n\nexport const TOOLTIP_MIN_WIDTH = 375;\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 650;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\nexport const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;\nexport const TOOLTIP_PADDING = 8;\n\nexport const FALLBACK_CHART_WIDTH = 750;\n\nexport const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';\nexport const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';\n\nexport const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const emptyTooltipData = {\n  cursor: defaultCursorData,\n  focusedSeries: null,\n};\n\nexport interface Coordinate {\n  x: number;\n  y: number;\n}\n\nexport interface CursorCoordinates {\n  page: Coordinate;\n  client: Coordinate;\n  plotCanvas: Coordinate;\n  zrender?: {\n    x?: number;\n    y?: number;\n  };\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: NearbySeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = MouseEvent & ZREventProperties;\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent) => {\n      return setCoords({\n        page: {\n          x: e.pageX,\n          y: e.pageY,\n        },\n        client: {\n          x: e.clientX,\n          y: e.clientY,\n        },\n        plotCanvas: {\n          x: e.offsetX,\n          y: e.offsetY,\n        },\n        zrender: {\n          // echarts canvas coordinates added automatically by zrender\n          // zrX and zrY are similar to offsetX and offsetY but they return undefined when not hovering over a chart canvas\n          x: e.zrX,\n          y: e.zrY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n    window.addEventListener('mousemove', setFromEvent);\n\n    return () => {\n      window.removeEventListener('mousemove', setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n  enablePinning?: boolean;\n};\n\nexport const DEFAULT_TOOLTIP_CONFIG: TooltipConfig = {\n  wrapLabels: true,\n  enablePinning: true,\n};\n\nexport const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';\n\nexport const UNPIN_TOOLTIP_HELP_TEXT = 'Click to unpin';\n"],"names":["useEffect","useState","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","TOOLTIP_PADDING","FALLBACK_CHART_WIDTH","NEARBY_SERIES_DESCRIPTION","EMPHASIZED_SERIES_DESCRIPTION","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","plotCanvas","x","y","zrender","target","chartWidth","emptyTooltipData","cursor","focusedSeries","useMousePosition","setCoords","setFromEvent","e","page","pageX","pageY","client","clientX","clientY","offsetX","offsetY","zrX","zrY","window","addEventListener","removeEventListener","DEFAULT_TOOLTIP_CONFIG","wrapLabels","enablePinning","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT"],"mappings":"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"}

package/dist/cjs/LineChart/LineChart.js

@@ -43,9 +43,7 @@ const _utils = require("../utils");
     _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
-    wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig =_timeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
     var ref1;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
@@ -179,7 +177,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         },
         onClick: (e)=>{
             // Pin and unpin when clicking on chart canvas but not tooltip text.
-            if (e.target instanceof HTMLCanvasElement) {
+            if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {
                 setTooltipPinnedCoords((current)=>{
                     if (current === null) {
                         return {
@@ -257,6 +255,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: tooltipConfig.enablePinning,
                 pinnedPos: tooltipPinnedCoords,
                 unit: unit,
                 onUnpinClick: ()=>{

package/dist/cjs/TimeChart/TimeChart.js

@@ -53,9 +53,7 @@ function _interopRequireDefault(obj) {
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , isStackedBar =false , tooltipConfig ={
-    wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , isStackedBar =false , tooltipConfig =_timeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
     var ref1;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
@@ -189,9 +187,10 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             animation: false,
             tooltip: {
                 show: true,
-                trigger: isStackedBar ? 'item' : 'axis',
-                // ECharts tooltip content hidden since we use custom tooltip instead
+                // ECharts tooltip content hidden by default since we use custom tooltip instead.
+                // Stacked bar uses ECharts tooltip so subgroup data shows correctly.
                 showContent: isStackedBar,
+                trigger: isStackedBar ? 'item' : 'axis',
                 appendToBody: true
             },
             // https://echarts.apache.org/en/option.html#axisPointer
@@ -261,7 +260,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 seriesMapping.push(pinnedCrosshair);
             }
             // Pin and unpin when clicking on chart canvas but not tooltip text.
-            if (e.target instanceof HTMLCanvasElement) {
+            if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {
                 setTooltipPinnedCoords((current)=>{
                     if (current === null) {
                         return {
@@ -341,6 +340,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 data: data,
                 seriesMapping: seriesMapping,
                 wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: tooltipConfig.enablePinning,
                 pinnedPos: tooltipPinnedCoords,
                 unit: unit,
                 onUnpinClick: ()=>{

package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js

@@ -32,12 +32,12 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos , containerId  }) {
+const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartTooltip({ chartRef , chartData , enablePinning =true , wrapLabels , unit , onUnpinClick , pinnedPos , containerId  }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
     const transform = (0, _react.useRef)('');
-    const isTooltipPinned = pinnedPos !== null;
+    const isTooltipPinned = pinnedPos !== null && enablePinning;
     if (mousePos === null || mousePos.target === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
@@ -102,6 +102,7 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipHeader.TooltipHeader, {
                         nearbySeries: nearbySeries,
                         totalSeries: totalSeries,
+                        enablePinning: enablePinning,
                         isTooltipPinned: isTooltipPinned,
                         showAllSeries: showAllSeries,
                         onShowAllClick: (checked)=>setShowAllSeries(checked),

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -32,12 +32,12 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId , chartRef , data , seriesMapping , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId , chartRef , data , seriesMapping , enablePinning =true , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const transform = (0, _react.useRef)('');
     const mousePos = (0, _tooltipModel.useMousePosition)();
     const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
-    const isTooltipPinned = pinnedPos !== null;
+    const isTooltipPinned = pinnedPos !== null && enablePinning;
     if (mousePos === null || mousePos.target === null || data === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
@@ -78,6 +78,7 @@ const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartToolti
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipHeader.TooltipHeader, {
                         nearbySeries: nearbySeries,
                         totalSeries: totalSeries,
+                        enablePinning: enablePinning,
                         isTooltipPinned: isTooltipPinned,
                         showAllSeries: showAllSeries,
                         onShowAllClick: (checked)=>setShowAllSeries(checked),

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -30,7 +30,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , onShowAllClick , onUnpinClick  }) {
+const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , enablePinning =true , onShowAllClick , onUnpinClick  }) {
     var ref;
     var ref1;
     const seriesTimeMs = (ref1 = (ref = nearbySeries[0]) === null || ref === void 0 ? void 0 : ref.date) !== null && ref1 !== void 0 ? ref1 : null;
@@ -60,8 +60,8 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
         });
     };
     // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT
-    const showAllSeriesToggle = totalSeries > 5;
-    const pinTooltipHelpText = isTooltipPinned ? 'Click to unpin' : 'Click chart to pin';
+    const showAllSeriesToggle = enablePinning && totalSeries > 5;
+    const pinTooltipHelpText = isTooltipPinned ? _tooltipModel.UNPIN_TOOLTIP_HELP_TEXT : _tooltipModel.PIN_TOOLTIP_HELP_TEXT;
     var ref2;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: (theme)=>{
@@ -127,7 +127,7 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            enablePinning && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                 direction: "row",
                                 alignItems: "center",
                                 children: [

package/dist/cjs/TimeSeriesTooltip/tooltip-model.js

@@ -34,7 +34,10 @@ _export(exports, {
     TOOLTIP_DATE_FORMAT: ()=>TOOLTIP_DATE_FORMAT,
     defaultCursorData: ()=>defaultCursorData,
     emptyTooltipData: ()=>emptyTooltipData,
-    useMousePosition: ()=>useMousePosition
+    useMousePosition: ()=>useMousePosition,
+    DEFAULT_TOOLTIP_CONFIG: ()=>DEFAULT_TOOLTIP_CONFIG,
+    PIN_TOOLTIP_HELP_TEXT: ()=>PIN_TOOLTIP_HELP_TEXT,
+    UNPIN_TOOLTIP_HELP_TEXT: ()=>UNPIN_TOOLTIP_HELP_TEXT
 });
 const _react = require("react");
 const TOOLTIP_MIN_WIDTH = 375;
@@ -108,3 +111,9 @@ const useMousePosition = ()=>{
     }, []);
     return coords;
 };
+const DEFAULT_TOOLTIP_CONFIG = {
+    wrapLabels: true,
+    enablePinning: true
+};
+const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';
+const UNPIN_TOOLTIP_HELP_TEXT = 'Click to unpin';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.0.0-snapshot-panel-extra-content-2-2767e21",
+  "version": "0.0.0-snapshot-panel-extra-content-3-17f9c42",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -36,7 +36,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "0.0.0-snapshot-panel-extra-content-2-2767e21",
+    "@perses-dev/core": "0.0.0-snapshot-panel-extra-content-3-17f9c42",
     "@tanstack/react-table": "^8.9.1",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^2.28.0",
@@ -50,7 +50,7 @@
     "react-virtuoso": "^4.3.6"
   },
   "devDependencies": {
-    "@perses-dev/storybook": "0.0.0-snapshot-panel-extra-content-2-2767e21"
+    "@perses-dev/storybook": "0.0.0-snapshot-panel-extra-content-3-17f9c42"
   },
   "peerDependencies": {
     "@mui/material": "^5.10.0",