@perses-dev/components 0.36.2 → 0.37.0

package/dist/StatChart/calculateFontSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/calculateFontSize.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 { useChartsTheme } from '../context/ChartsThemeProvider';\n\ninterface CalculateFontSize {\n  text: string;\n  fontWeight: number;\n  width: number;\n  height: number;\n  lineHeight: number;\n  maxSize?: number;\n}\n\nlet canvasContext: CanvasRenderingContext2D | null;\n\nfunction getGlobalCanvasContext() {\n  if (!canvasContext) {\n    canvasContext = document.createElement('canvas').getContext('2d');\n    if (canvasContext === null) {\n      throw new Error('Canvas context is null.');\n    }\n  }\n  return canvasContext;\n}\n\n/**\n * Find the optimal font size given available space\n */\nexport function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSize }: CalculateFontSize) {\n  const ctx = getGlobalCanvasContext();\n  const chartsTheme = useChartsTheme();\n\n  const textStyle = chartsTheme.echartsTheme.textStyle;\n  const fontSize = Number(textStyle?.fontSize) ?? 12;\n  const fontFamily = textStyle?.fontFamily ?? 'Lato';\n\n  // set the font on the canvas context\n  const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;\n  ctx.font = fontStyle;\n  // measure the width of the text with the given font style\n  const textMetrics: TextMetrics = ctx.measureText(text);\n\n  // check how much bigger we can make the font while staying within the width and height\n  const fontSizeBasedOnWidth = (width / textMetrics.width) * fontSize;\n  const fontSizeBasedOnHeight = height / lineHeight;\n\n  // return the smaller font size\n  const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);\n  return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;\n}\n"],"names":["useChartsTheme","canvasContext","getGlobalCanvasContext","document","createElement","getContext","Error","useOptimalFontSize","text","fontWeight","width","height","lineHeight","maxSize","ctx","chartsTheme","textStyle","echartsTheme","Number","fontSize","fontFamily","fontStyle","font","textMetrics","measureText","fontSizeBasedOnWidth","fontSizeBasedOnHeight","finalFontSize","Math","min"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,cAAc,QAAQ,gCAAgC,CAAC;AAWhE,IAAIC,aAAa,AAAiC,AAAC;AAEnD,SAASC,sBAAsB,GAAG;IAChC,IAAI,CAACD,aAAa,EAAE;QAClBA,aAAa,GAAGE,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC,CAACC,UAAU,CAAC,IAAI,CAAC,CAAC;QAClE,IAAIJ,aAAa,KAAK,IAAI,EAAE;YAC1B,MAAM,IAAIK,KAAK,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IACD,OAAOL,aAAa,CAAC;AACvB,CAAC;AAED;;CAEC,GACD,OAAO,SAASM,kBAAkB,CAAC,EAAEC,IAAI,CAAA,EAAEC,UAAU,CAAA,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,UAAU,CAAA,EAAEC,OAAO,CAAA,EAAqB,EAAE;IAC9G,MAAMC,GAAG,GAAGZ,sBAAsB,EAAE,AAAC;IACrC,MAAMa,WAAW,GAAGf,cAAc,EAAE,AAAC;IAErC,MAAMgB,SAAS,GAAGD,WAAW,CAACE,YAAY,CAACD,SAAS,AAAC;QACpCE,GAA2B;IAA5C,MAAMC,QAAQ,GAAGD,CAAAA,GAA2B,GAA3BA,MAAM,CAACF,SAAS,aAATA,SAAS,WAAU,GAAnBA,KAAAA,CAAmB,GAAnBA,SAAS,CAAEG,QAAQ,CAAC,cAA3BD,GAA2B,cAA3BA,GAA2B,GAAI,EAAE,AAAC;QAChCF,IAAqB;IAAxC,MAAMI,UAAU,GAAGJ,CAAAA,IAAqB,GAArBA,SAAS,aAATA,SAAS,WAAY,GAArBA,KAAAA,CAAqB,GAArBA,SAAS,CAAEI,UAAU,cAArBJ,IAAqB,cAArBA,IAAqB,GAAI,MAAM,AAAC;IAEnD,qCAAqC;IACrC,MAAMK,SAAS,GAAG,CAAC,EAAEZ,UAAU,CAAC,CAAC,EAAEU,QAAQ,CAAC,GAAG,EAAEC,UAAU,CAAC,CAAC,AAAC;IAC9DN,GAAG,CAACQ,IAAI,GAAGD,SAAS,CAAC;IACrB,0DAA0D;IAC1D,MAAME,WAAW,GAAgBT,GAAG,CAACU,WAAW,CAAChB,IAAI,CAAC,AAAC;IAEvD,uFAAuF;IACvF,MAAMiB,oBAAoB,GAAG,AAACf,KAAK,GAAGa,WAAW,CAACb,KAAK,GAAIS,QAAQ,AAAC;IACpE,MAAMO,qBAAqB,GAAGf,MAAM,GAAGC,UAAU,AAAC;IAElD,+BAA+B;IAC/B,MAAMe,aAAa,GAAGC,IAAI,CAACC,GAAG,CAACH,qBAAqB,EAAED,oBAAoB,CAAC,AAAC;IAC5E,OAAOZ,OAAO,GAAGe,IAAI,CAACC,GAAG,CAACF,aAAa,EAAEd,OAAO,CAAC,GAAGc,aAAa,CAAC;AACpE,CAAC"}
+{"version":3,"sources":["../../src/StatChart/calculateFontSize.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 { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { FontSizeOption } from '../FontSizeSelector';\n\ninterface CalculateFontSize {\n  text: string;\n  fontWeight: number;\n  width: number;\n  height: number;\n  lineHeight: number;\n  maxSize?: number;\n  fontSizeOverride?: FontSizeOption;\n}\n\nlet canvasContext: CanvasRenderingContext2D | null;\n\nfunction getGlobalCanvasContext() {\n  if (!canvasContext) {\n    canvasContext = document.createElement('canvas').getContext('2d');\n    if (canvasContext === null) {\n      throw new Error('Canvas context is null.');\n    }\n  }\n  return canvasContext;\n}\n\n/**\n * Find the optimal font size given available space\n */\nexport function useOptimalFontSize({\n  text,\n  fontWeight,\n  width,\n  height,\n  lineHeight,\n  maxSize,\n  fontSizeOverride,\n}: CalculateFontSize) {\n  const ctx = getGlobalCanvasContext();\n  const chartsTheme = useChartsTheme();\n\n  // if user has selected a font size in the settings, use it instead of calculating the optimal size\n  if (fontSizeOverride !== undefined) {\n    return Number(fontSizeOverride);\n  }\n\n  const textStyle = chartsTheme.echartsTheme.textStyle;\n  const fontSize = Number(textStyle?.fontSize) ?? 12;\n  const fontFamily = textStyle?.fontFamily ?? 'Lato';\n\n  // set the font on the canvas context\n  const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;\n  ctx.font = fontStyle;\n  // measure the width of the text with the given font style\n  const textMetrics: TextMetrics = ctx.measureText(text);\n\n  // check how much bigger we can make the font while staying within the width and height\n  const fontSizeBasedOnWidth = (width / textMetrics.width) * fontSize;\n  const fontSizeBasedOnHeight = height / lineHeight;\n\n  // return the smaller font size\n  const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);\n  return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;\n}\n"],"names":["useChartsTheme","canvasContext","getGlobalCanvasContext","document","createElement","getContext","Error","useOptimalFontSize","text","fontWeight","width","height","lineHeight","maxSize","fontSizeOverride","ctx","chartsTheme","undefined","Number","textStyle","echartsTheme","fontSize","fontFamily","fontStyle","font","textMetrics","measureText","fontSizeBasedOnWidth","fontSizeBasedOnHeight","finalFontSize","Math","min"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,cAAc,QAAQ,gCAAgC,CAAC;AAahE,IAAIC,aAAa,AAAiC,AAAC;AAEnD,SAASC,sBAAsB,GAAG;IAChC,IAAI,CAACD,aAAa,EAAE;QAClBA,aAAa,GAAGE,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC,CAACC,UAAU,CAAC,IAAI,CAAC,CAAC;QAClE,IAAIJ,aAAa,KAAK,IAAI,EAAE;YAC1B,MAAM,IAAIK,KAAK,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IACD,OAAOL,aAAa,CAAC;AACvB,CAAC;AAED;;CAEC,GACD,OAAO,SAASM,kBAAkB,CAAC,EACjCC,IAAI,CAAA,EACJC,UAAU,CAAA,EACVC,KAAK,CAAA,EACLC,MAAM,CAAA,EACNC,UAAU,CAAA,EACVC,OAAO,CAAA,EACPC,gBAAgB,CAAA,EACE,EAAE;IACpB,MAAMC,GAAG,GAAGb,sBAAsB,EAAE,AAAC;IACrC,MAAMc,WAAW,GAAGhB,cAAc,EAAE,AAAC;IAErC,mGAAmG;IACnG,IAAIc,gBAAgB,KAAKG,SAAS,EAAE;QAClC,OAAOC,MAAM,CAACJ,gBAAgB,CAAC,CAAC;IAClC,CAAC;IAED,MAAMK,SAAS,GAAGH,WAAW,CAACI,YAAY,CAACD,SAAS,AAAC;QACpCD,GAA2B;IAA5C,MAAMG,QAAQ,GAAGH,CAAAA,GAA2B,GAA3BA,MAAM,CAACC,SAAS,aAATA,SAAS,WAAU,GAAnBA,KAAAA,CAAmB,GAAnBA,SAAS,CAAEE,QAAQ,CAAC,cAA3BH,GAA2B,cAA3BA,GAA2B,GAAI,EAAE,AAAC;QAChCC,IAAqB;IAAxC,MAAMG,UAAU,GAAGH,CAAAA,IAAqB,GAArBA,SAAS,aAATA,SAAS,WAAY,GAArBA,KAAAA,CAAqB,GAArBA,SAAS,CAAEG,UAAU,cAArBH,IAAqB,cAArBA,IAAqB,GAAI,MAAM,AAAC;IAEnD,qCAAqC;IACrC,MAAMI,SAAS,GAAG,CAAC,EAAEd,UAAU,CAAC,CAAC,EAAEY,QAAQ,CAAC,GAAG,EAAEC,UAAU,CAAC,CAAC,AAAC;IAC9DP,GAAG,CAACS,IAAI,GAAGD,SAAS,CAAC;IACrB,0DAA0D;IAC1D,MAAME,WAAW,GAAgBV,GAAG,CAACW,WAAW,CAAClB,IAAI,CAAC,AAAC;IAEvD,uFAAuF;IACvF,MAAMmB,oBAAoB,GAAG,AAACjB,KAAK,GAAGe,WAAW,CAACf,KAAK,GAAIW,QAAQ,AAAC;IACpE,MAAMO,qBAAqB,GAAGjB,MAAM,GAAGC,UAAU,AAAC;IAElD,+BAA+B;IAC/B,MAAMiB,aAAa,GAAGC,IAAI,CAACC,GAAG,CAACH,qBAAqB,EAAED,oBAAoB,CAAC,AAAC;IAC5E,OAAOd,OAAO,GAAGiB,IAAI,CAACC,GAAG,CAACF,aAAa,EAAEhB,OAAO,CAAC,GAAGgB,aAAa,CAAC;AACpE,CAAC"}

package/dist/TimeChart/TimeChart.d.ts

@@ -0,0 +1,23 @@
+import { MouseEvent } from 'react';
+import { TimeScale, UnitOptions, TimeSeries } from '@perses-dev/core';
+import type { EChartsCoreOption, GridComponentOption, YAXisComponentOption } from 'echarts';
+import { ChartInstance, TimeChartSeriesMapping } from '../model/graph';
+import { ZoomEventData } from '../utils';
+import { TooltipConfig } from '../TimeSeriesTooltip';
+export interface TimeChartProps {
+    height: number;
+    data: TimeSeries[];
+    seriesMapping: TimeChartSeriesMapping;
+    timeScale?: TimeScale;
+    yAxis?: YAXisComponentOption;
+    unit?: UnitOptions;
+    grid?: GridComponentOption;
+    tooltipConfig?: TooltipConfig;
+    noDataVariant?: 'chart' | 'message';
+    syncGroup?: string;
+    onDataZoom?: (e: ZoomEventData) => void;
+    onDoubleClick?: (e: MouseEvent) => void;
+    __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;
+}
+export declare const TimeChart: import("react").ForwardRefExoticComponent<TimeChartProps & import("react").RefAttributes<ChartInstance>>;
+//# sourceMappingURL=TimeChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeChart.d.ts","sourceRoot":"","sources":["../../src/TimeChart/TimeChart.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAc,UAAU,EAAkD,MAAM,OAAO,CAAC;AAG/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,EAA0B,aAAa,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAE/F,OAAO,EAML,aAAa,EACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuC,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAiB1F,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,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,0GAsRpB,CAAC"}

package/dist/TimeChart/TimeChart.js

@@ -0,0 +1,313 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import { utcToZonedTime } from 'date-fns-tz';
+import { getCommonTimeScale } from '@perses-dev/core';
+import { use } from 'echarts/core';
+import { LineChart as EChartsLineChart } from 'echarts/charts';
+import { GridComponent, DatasetComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { EChart } from '../EChart';
+import { useChartsTheme } from '../context/ChartsThemeProvider';
+import { clearHighlightedSeries, enableDataZoom, getFormattedAxisLabel, getYAxes, restoreChart } from '../utils';
+import { TimeChartTooltip } from '../TimeSeriesTooltip';
+import { useTimeZone } from '../context/TimeZoneProvider';
+use([
+    EChartsLineChart,
+    GridComponent,
+    DatasetComponent,
+    DataZoomComponent,
+    MarkAreaComponent,
+    MarkLineComponent,
+    MarkPointComponent,
+    TitleComponent,
+    ToolboxComponent,
+    TooltipComponent,
+    CanvasRenderer
+]);
+export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , tooltipConfig ={
+    wrapLabels: true
+} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+    var ref1;
+    const chartsTheme = useChartsTheme();
+    const chartRef = useRef();
+    const [showTooltip, setShowTooltip] = useState(true);
+    const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [startX, setStartX] = useState(0);
+    const { timeZone  } = useTimeZone();
+    var ref2;
+    const totalSeries = (ref2 = data === null || data === void 0 ? void 0 : data.length) !== null && ref2 !== void 0 ? ref2 : 0;
+    let timeScale;
+    if (timeScaleProp === undefined) {
+        const commonTimeScale = getCommonTimeScale(data);
+        if (commonTimeScale === undefined) {
+            // set default to past 5 years
+            const today = new Date();
+            const pastDate = new Date(today);
+            pastDate.setFullYear(today.getFullYear() - 5);
+            const todayMs = today.getTime();
+            const pastDateMs = pastDate.getTime();
+            timeScale = {
+                startMs: pastDateMs,
+                endMs: todayMs,
+                stepMs: 1,
+                rangeMs: todayMs - pastDateMs
+            };
+        } else {
+            timeScale = commonTimeScale;
+        }
+    } else {
+        timeScale = timeScaleProp;
+    }
+    useImperativeHandle(ref, ()=>{
+        return {
+            highlightSeries ({ name  }) {
+                if (!chartRef.current) {
+                    // when chart undef, do not highlight series when hovering over legend
+                    return;
+                }
+                chartRef.current.dispatchAction({
+                    type: 'highlight',
+                    seriesId: name
+                });
+            },
+            clearHighlightedSeries: ()=>{
+                if (!chartRef.current) {
+                    // when chart undef, do not clear highlight series
+                    return;
+                }
+                clearHighlightedSeries(chartRef.current, totalSeries);
+            }
+        };
+    }, [
+        totalSeries
+    ]);
+    const handleEvents = useMemo(()=>{
+        return {
+            datazoom: (params)=>{
+                if (onDataZoom === undefined) {
+                    setTimeout(()=>{
+                        // workaround so unpin happens after click event
+                        setTooltipPinnedCoords(null);
+                    }, 10);
+                }
+                if (onDataZoom === undefined || params.batch[0] === undefined) return;
+                const xAxisStartValue = params.batch[0].startValue;
+                const xAxisEndValue = params.batch[0].endValue;
+                if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
+                    const zoomEvent = {
+                        start: xAxisStartValue,
+                        end: xAxisEndValue
+                    };
+                    onDataZoom(zoomEvent);
+                }
+            }
+        };
+    }, [
+        onDataZoom,
+        setTooltipPinnedCoords
+    ]);
+    if (chartRef.current !== undefined) {
+        enableDataZoom(chartRef.current);
+    }
+    const { noDataOption  } = chartsTheme;
+    const option = useMemo(()=>{
+        // TODO: fix loading state and noData variants
+        // if (data === undefined) return {};
+        // The "chart" `noDataVariant` is only used when the `timeSeries` is an
+        // empty array because a `null` value will throw an error.
+        if (data === null || data.length === 0 && noDataVariant === 'message') return noDataOption;
+        // Utilizes ECharts dataset so raw data is separate from series option style properties
+        // https://apache.github.io/echarts-handbook/en/concepts/dataset/
+        const dataset = [];
+        const isLocalTimeZone = timeZone === 'local';
+        data.map((d, index)=>{
+            const values = d.values.map(([timestamp, value])=>{
+                const val = value === null ? '-' : value; // echarts use '-' to represent null data
+                return [
+                    isLocalTimeZone ? timestamp : utcToZonedTime(timestamp, timeZone),
+                    val
+                ];
+            });
+            dataset.push({
+                id: index,
+                source: [
+                    ...values
+                ],
+                dimensions: [
+                    'time',
+                    'value'
+                ]
+            });
+        });
+        var _rangeMs;
+        const option = {
+            dataset: dataset,
+            series: seriesMapping,
+            xAxis: {
+                type: 'time',
+                min: isLocalTimeZone ? timeScale.startMs : utcToZonedTime(timeScale.startMs, timeZone),
+                max: isLocalTimeZone ? timeScale.endMs : utcToZonedTime(timeScale.endMs, timeZone),
+                axisLabel: {
+                    hideOverlap: true,
+                    formatter: getFormattedAxisLabel((_rangeMs = timeScale.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : 0)
+                }
+            },
+            yAxis: getYAxes(yAxis, unit),
+            animation: false,
+            tooltip: {
+                show: true,
+                trigger: 'axis',
+                showContent: false
+            },
+            // https://echarts.apache.org/en/option.html#axisPointer
+            axisPointer: {
+                type: 'line',
+                z: 0,
+                triggerEmphasis: false,
+                triggerTooltip: false,
+                snap: true
+            },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        icon: null,
+                        yAxisIndex: 'none'
+                    }
+                }
+            },
+            grid
+        };
+        if (__experimentalEChartsOptionsOverride) {
+            return __experimentalEChartsOptionsOverride(option);
+        }
+        return option;
+    }, [
+        data,
+        seriesMapping,
+        timeScale,
+        yAxis,
+        unit,
+        grid,
+        noDataOption,
+        __experimentalEChartsOptionsOverride,
+        noDataVariant,
+        timeZone
+    ]);
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            height
+        },
+        onClick: (e)=>{
+            // Pin and unpin when clicking on chart canvas but not tooltip text.
+            if (e.target instanceof HTMLCanvasElement) {
+                setTooltipPinnedCoords((current)=>{
+                    if (current === null) {
+                        return {
+                            page: {
+                                x: e.pageX,
+                                y: e.pageY
+                            },
+                            client: {
+                                x: e.clientX,
+                                y: e.clientY
+                            },
+                            plotCanvas: {
+                                x: e.nativeEvent.offsetX,
+                                y: e.nativeEvent.offsetY
+                            },
+                            target: e.target
+                        };
+                    } else {
+                        return null;
+                    }
+                });
+            }
+        },
+        onMouseDown: (e)=>{
+            const { clientX  } = e;
+            setIsDragging(true);
+            setStartX(clientX);
+        },
+        onMouseMove: (e)=>{
+            // Allow clicking inside tooltip to copy labels.
+            if (!(e.target instanceof HTMLCanvasElement)) {
+                return;
+            }
+            const { clientX  } = e;
+            if (isDragging) {
+                const deltaX = clientX - startX;
+                if (deltaX > 0) {
+                    // Hide tooltip when user drags to zoom.
+                    setShowTooltip(false);
+                }
+            }
+        },
+        onMouseUp: ()=>{
+            setIsDragging(false);
+            setStartX(0);
+            setShowTooltip(true);
+        },
+        onMouseLeave: ()=>{
+            if (tooltipPinnedCoords === null) {
+                setShowTooltip(false);
+            }
+            if (chartRef.current !== undefined) {
+                clearHighlightedSeries(chartRef.current, totalSeries);
+            }
+        },
+        onMouseEnter: ()=>{
+            setShowTooltip(true);
+            if (chartRef.current !== undefined) {
+                enableDataZoom(chartRef.current);
+            }
+        },
+        onDoubleClick: (e)=>{
+            setTooltipPinnedCoords(null);
+            // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
+            if (onDoubleClick === undefined) {
+                if (chartRef.current !== undefined) {
+                    restoreChart(chartRef.current);
+                }
+            } else {
+                onDoubleClick(e);
+            }
+        },
+        children: [
+            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeChartTooltip, {
+                chartRef: chartRef,
+                data: data,
+                seriesMapping: seriesMapping,
+                wrapLabels: tooltipConfig.wrapLabels,
+                pinnedPos: tooltipPinnedCoords,
+                unit: unit
+            }),
+            /*#__PURE__*/ _jsx(EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
+                option: option,
+                theme: chartsTheme.echartsTheme,
+                onEvents: handleEvents,
+                _instance: chartRef,
+                syncGroup: syncGroup
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=TimeChart.js.map

package/dist/TimeChart/TimeChart.js.map

@@ -0,0 +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 { DatasetOption } from 'echarts/types/dist/shared';\nimport { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\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 } 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 { ChartInstanceFocusOpts, ChartInstance, TimeChartSeriesMapping } from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getFormattedAxisLabel,\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  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  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    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    };\n  }, [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    // TODO: fix loading state and noData variants\n    // if (data === 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 === 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      },\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    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [\n    data,\n    seriesMapping,\n    timeScale,\n    yAxis,\n    unit,\n    grid,\n    noDataOption,\n    __experimentalEChartsOptionsOverride,\n    noDataVariant,\n    timeZone,\n  ]);\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, 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            chartRef={chartRef}\n            data={data}\n            seriesMapping={seriesMapping}\n            wrapLabels={tooltipConfig.wrapLabels}\n            pinnedPos={tooltipPinnedCoords}\n            unit={unit}\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","utcToZonedTime","getCommonTimeScale","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","CanvasRenderer","EChart","useChartsTheme","clearHighlightedSeries","enableDataZoom","getFormattedAxisLabel","getYAxes","restoreChart","TimeChartTooltip","useTimeZone","TimeChart","height","data","seriesMapping","timeScale","timeScaleProp","yAxis","unit","grid","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","noDataOption","dataset","isLocalTimeZone","map","d","index","values","timestamp","value","val","push","id","source","dimensions","series","xAxis","min","max","axisLabel","hideOverlap","formatter","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","pinnedPos","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/TimeChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TimeChart';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC"}

package/dist/TimeChart/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './TimeChart';
+
+//# sourceMappingURL=index.js.map

package/dist/TimeChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeChart/index.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\nexport * from './TimeChart';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,aAAa,CAAC"}

package/dist/TimeSeriesTooltip/{TimeSeriesTooltip.d.ts → LineChartTooltip.d.ts}

@@ -11,5 +11,5 @@ export interface TimeSeriesTooltipProps {
     onUnpinClick?: () => void;
     pinnedPos: CursorCoordinates | null;
 }
-export declare const TimeSeriesTooltip: import("react").NamedExoticComponent<TimeSeriesTooltipProps>;
-//# sourceMappingURL=TimeSeriesTooltip.d.ts.map
+export declare const LineChartTooltip: import("react").NamedExoticComponent<TimeSeriesTooltipProps>;
+//# sourceMappingURL=LineChartTooltip.d.ts.map

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

@@ -0,0 +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;CACrC;AAED,eAAO,MAAM,gBAAgB,8DAkF3B,CAAC"}

package/dist/TimeSeriesTooltip/{TimeSeriesTooltip.js → LineChartTooltip.js}

@@ -16,10 +16,10 @@ import { memo, useState } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import { TooltipContent } from './TooltipContent';
 import { TooltipHeader } from './TooltipHeader';
-import { getNearbySeriesData } from './nearby-series';
+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 TimeSeriesTooltip = /*#__PURE__*/ memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+export const LineChartTooltip = /*#__PURE__*/ memo(function LineChartTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
     const [showAllSeries, setShowAllSeries] = useState(false);
     const mousePos = useMousePosition();
     const { height , width , ref: tooltipRef  } = useResizeObserver();
@@ -32,7 +32,7 @@ export const TimeSeriesTooltip = /*#__PURE__*/ memo(function TimeSeriesTooltip({
     const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
     const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
     // Get series nearby the cursor and pass into tooltip content children.
-    const nearbySeries = getNearbySeriesData({
+    const nearbySeries = legacyGetNearbySeriesData({
         mousePos,
         chartData,
         pinnedPos,
@@ -97,4 +97,4 @@ export const TimeSeriesTooltip = /*#__PURE__*/ memo(function TimeSeriesTooltip({
     });
 });
 
-//# sourceMappingURL=TimeSeriesTooltip.js.map
+//# sourceMappingURL=LineChartTooltip.js.map

package/dist/TimeSeriesTooltip/LineChartTooltip.js.map

@@ -0,0 +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, 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\nexport const LineChartTooltip = memo(function LineChartTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  unit,\n  onUnpinClick,\n  pinnedPos,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null;\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // Ensure user is hovering over a chart before checking for nearby series.\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.\n  const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = 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  return (\n    <Portal>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          padding: 0,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          // Ensure pinned tooltip shows behind edit panel drawer and sticky header\n          zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Stack","memo","useState","useResizeObserver","TooltipContent","TooltipHeader","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","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","nearbySeries","length","totalSeries","timeSeries","theme","sx","minWidth","maxWidth","maxHeight","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform","spacing","onShowAllClick","checked","series"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ECharts as EChartsInstance } from 'echarts/core';
+import { UnitOptions, TimeSeries } from '@perses-dev/core';
+import { TimeChartSeriesMapping } from '../model';
+import { CursorCoordinates } from './tooltip-model';
+export interface TimeChartTooltipProps {
+    chartRef: React.MutableRefObject<EChartsInstance | undefined>;
+    data: TimeSeries[];
+    seriesMapping: TimeChartSeriesMapping;
+    wrapLabels?: boolean;
+    unit?: UnitOptions;
+    onUnpinClick?: () => void;
+    pinnedPos: CursorCoordinates | null;
+}
+export declare const TimeChartTooltip: import("react").NamedExoticComponent<TimeChartTooltipProps>;
+//# sourceMappingURL=TimeChartTooltip.d.ts.map

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

@@ -0,0 +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,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;CACrC;AAED,eAAO,MAAM,gBAAgB,6DA+D3B,CAAC"}

package/dist/TimeSeriesTooltip/TimeChartTooltip.js

@@ -0,0 +1,76 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { Box, Portal, Stack } from '@mui/material';
+import useResizeObserver from 'use-resize-observer';
+import { FALLBACK_CHART_WIDTH, useMousePosition } from './tooltip-model';
+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({ chartRef , data , seriesMapping , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+    const [showAllSeries, setShowAllSeries] = useState(false);
+    const mousePos = useMousePosition();
+    const { height , width , ref: tooltipRef  } = useResizeObserver();
+    const isTooltipPinned = pinnedPos !== null;
+    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;
+    const chart = chartRef.current;
+    var ref;
+    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
+    const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
+    // Get series nearby the cursor and pass into tooltip content children.
+    const nearbySeries = getNearbySeriesData({
+        mousePos,
+        data,
+        seriesMapping,
+        pinnedPos,
+        chart,
+        unit,
+        showAllSeries
+    });
+    if (nearbySeries.length === 0) {
+        return null;
+    }
+    const totalSeries = data.length;
+    return /*#__PURE__*/ _jsx(Portal, {
+        children: /*#__PURE__*/ _jsx(Box, {
+            ref: tooltipRef,
+            sx: (theme)=>getTooltipStyles(theme, pinnedPos),
+            style: {
+                transform: cursorTransform
+            },
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ _jsx(TooltipHeader, {
+                        nearbySeries: nearbySeries,
+                        totalSeries: totalSeries,
+                        isTooltipPinned: isTooltipPinned,
+                        showAllSeries: showAllSeries,
+                        onShowAllClick: (checked)=>setShowAllSeries(checked),
+                        onUnpinClick: onUnpinClick
+                    }),
+                    /*#__PURE__*/ _jsx(TooltipContent, {
+                        series: nearbySeries,
+                        wrapLabels: wrapLabels
+                    })
+                ]
+            })
+        })
+    });
+});
+
+//# sourceMappingURL=TimeChartTooltip.js.map

package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map

@@ -0,0 +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, 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  wrapLabels?: boolean;\n  unit?: UnitOptions;\n  onUnpinClick?: () => void;\n  pinnedPos: CursorCoordinates | null;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  chartRef,\n  data,\n  seriesMapping,\n  wrapLabels,\n  unit,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null;\n\n  if (mousePos === null || mousePos.target === null || 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  const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    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>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos)}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["memo","useState","Box","Portal","Stack","useResizeObserver","FALLBACK_CHART_WIDTH","useMousePosition","assembleTransform","getTooltipStyles","getNearbySeriesData","TooltipHeader","TooltipContent","TimeChartTooltip","chartRef","data","seriesMapping","wrapLabels","unit","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","nearbySeries","length","totalSeries","sx","theme","style","transform","spacing","onShowAllClick","checked","series"],"mappings":"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"}