@perses-dev/components 0.0.0-snapshot-color-palette-gen-test-0ebddd6 → 0.0.0-snapshot-saving-defaults-refinements-1b25cec

package/dist/cjs/Legend/Legend.js

@@ -20,15 +20,81 @@ Object.defineProperty(exports, "Legend", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _immer = require("immer");
+const _model = require("../model");
 const _listLegend = require("./ListLegend");
 const _compactLegend = require("./CompactLegend");
+const _tableLegend = require("./TableLegend");
 // When the number of items to display is above this number, it is likely to
 // cause performance issues in the browser. The legend will be displayed in a
 // format (list) that allows for virtualization to minimize the performance impact.
 // Set this number based on testing, but it may need to be tuned a bit on the
 // future as people test this out on different machines.
 const NEED_VIRTUALIZATION_LIMIT = 500;
-function Legend({ width , height , options , data , listProps  }) {
+function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange  }) {
+    const onLegendItemClick = (e, seriesId)=>{
+        const isModifiedClick = e.metaKey || e.shiftKey;
+        const newSelected = (0, _immer.produce)(selectedItems, (draft)=>{
+            if (draft === 'ALL') {
+                return {
+                    [seriesId]: true
+                };
+            }
+            const isSelected = !!draft[seriesId];
+            // Clicks with modifier key can select multiple items.
+            if (isModifiedClick) {
+                if (isSelected) {
+                    // Modified click on already selected item. Remove that item.
+                    delete draft[seriesId];
+                } else {
+                    // Modified click on not-selected item. Add it.
+                    draft[seriesId] = true;
+                }
+                return draft;
+            }
+            if (isSelected) {
+                // Clicked item was already selected. Unselect it and return to
+                // ALL state.
+                return 'ALL';
+            }
+            // Select clicked item.
+            return {
+                [seriesId]: true
+            };
+        });
+        onSelectedItemsChange(newSelected);
+    };
+    const mode = (0, _model.getLegendMode)(options.mode);
+    // The bottom legend is displayed as a list when the number of items is too
+    // large and requires virtualization. Otherwise, it is rendered more compactly.
+    // We do not need this check for the right-side legend because it is always
+    // a virtualized list.
+    const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;
+    const commonLegendProps = {
+        height,
+        items: data,
+        selectedItems,
+        onLegendItemClick
+    };
+    let legendContent;
+    if (mode === 'Table') {
+        legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableLegend.TableLegend, {
+            ...commonLegendProps,
+            onSelectedItemsChange: onSelectedItemsChange,
+            width: width
+        });
+    } else if (options.position === 'Right' || needsVirtualization) {
+        legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
+            ...commonLegendProps,
+            width: width,
+            onLegendItemClick: onLegendItemClick
+        });
+    } else {
+        legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
+            ...commonLegendProps,
+            onLegendItemClick: onLegendItemClick
+        });
+    }
     if (options.position === 'Right') {
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             sx: {
@@ -38,19 +104,10 @@ function Legend({ width , height , options , data , listProps  }) {
                 top: 0,
                 right: 0
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
-                items: data,
-                width: width,
-                height: height,
-                ...listProps
-            })
+            children: legendContent
         });
     }
-    // The bottom legend is displayed as a list when the number of items is too
-    // large and requires virtualization. Otherwise, it is rendered more compactly.
-    // We do not need this check for the right-side legend because it is always
-    // a virtualized list.
-    const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;
+    // Position bottom
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
             width: width,
@@ -58,14 +115,6 @@ function Legend({ width , height , options , data , listProps  }) {
             position: 'absolute',
             bottom: 0
         },
-        children: needsVirtualization ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
-            items: data,
-            width: width,
-            height: height,
-            ...listProps
-        }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
-            items: data,
-            height: height
-        })
+        children: legendContent
     });
 }

package/dist/cjs/Legend/ListLegend.js

@@ -19,119 +19,33 @@ Object.defineProperty(exports, "ListLegend", {
     get: ()=>ListLegend
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _reactWindow = require("react-window");
-const _react = require("react");
+const _reactVirtuoso = require("react-virtuoso");
+const _model = require("../model");
 const _listLegendItem = require("./ListLegendItem");
-const DEFAULT_INITIAL_ROW_HEIGHT = 26;
-function ListLegend({ items , height , width , initialRowHeight =DEFAULT_INITIAL_ROW_HEIGHT  }) {
-    // Storing a ref to the react-window `VariableSizeList`, so we can call
-    // `resetAfterIndex` to resize the list after mouseover/out events to account
-    // for the change in list items on hover.
-    const listRef = (0, _react.useRef)(null);
-    // Storing row heights, so we can use dynamic heights, which enables the
-    // user the hover to show the full label, while still having a virtualized
-    // list.
-    const rowHeights = (0, _react.useRef)({});
-    const theme = (0, _material.useTheme)();
-    // Padding value used throughout to adjust the react-window virtual layouts
-    // to simulate padding per the guidance from:
-    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
-    const LIST_PADDING = parseInt(theme.spacing(1), 10);
+function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
-    // Gets the row height for a given item to enable the virtualized list to
-    // render the row properly.
-    function getRowHeight(index) {
-        const currentHeight = rowHeights.current[index];
-        return currentHeight !== null && currentHeight !== void 0 ? currentHeight : initialRowHeight;
-    }
-    // Set the height for a given item to enable the virtualized list to
-    // adjust to size changes.
-    function setRowHeight(index, size) {
-        var // Tell the virtualized list that items changed size and need to be
-        // re-evaluated.
-        ref;
-        (ref = listRef.current) === null || ref === void 0 ? void 0 : ref.resetAfterIndex(0);
-        rowHeights.current = {
-            ...rowHeights.current,
-            [index]: size
-        };
-    }
-    // Renderer for virtualized rows in `VariableSizeList`.
-    function ListLegendRow({ index , style  }) {
-        // Storing a ref to the row's `ListLegendItem`, so we can get the "real"
-        // height and adjust the height of the row based on it, enabling the dynamic
-        // heights on hover.
-        const rowRef = (0, _react.useRef)(null);
-        // useCallback is important here to avoid constantly running the useEffect
-        // that calls this in `ListLegendItem`.
-        const handleRowLayoutChange = (0, _react.useCallback)(()=>{
-            // Handle size changes from hovering on a list item.
-            if (rowRef.current) {
-                setRowHeight(index, rowRef.current.clientHeight);
-            }
-        }, [
-            index
-        ]);
-        // Adjust row heights when the row being rendered changes.
-        (0, _react.useEffect)(()=>{
-            handleRowLayoutChange();
-        }, [
-            handleRowLayoutChange
-        ]);
-        const item = items[index];
-        if (!item) {
-            // This shouldn't happen if configured correctly, but covering
-            // the case to appease the type checking and to cover any edge
-            // cases.
-            return null;
-        }
-        const originalTop = parseFloat(`${style.top}`);
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-            style: {
-                ...style,
-                // Adjust the top position to simulate top padding on the list.
-                top: `${originalTop + LIST_PADDING}px`
-            },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
-                ref: rowRef,
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactVirtuoso.Virtuoso, {
+        style: {
+            height,
+            width
+        },
+        data: items,
+        itemContent: (index, item)=>{
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
                 truncateLabel: truncateLabels,
-                onLayoutChange: handleRowLayoutChange,
+                isVisuallySelected: (0, _model.isLegendItemVisuallySelected)(item, selectedItems),
+                onClick: onLegendItemClick,
                 sx: {
                     // Having an explicit width is important for the ellipsizing to
                     // work correctly. Subtract padding to simulate padding.
-                    width: width - LIST_PADDING,
+                    width: width,
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }
-            }, item.id)
-        });
-    }
-    // Renderer for the inner container element of the `VariableSizeList` used
-    // to adjust styles to simulate padding on the list per:
-    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
-    const InnerElementType = /*#__PURE__*/ (0, _react.forwardRef)(function InnerElementType({ style , ...rest }, ref) {
-        const originalHeight = (style === null || style === void 0 ? void 0 : style.height) ? parseFloat(`${style === null || style === void 0 ? void 0 : style.height}`) : 0;
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-            ref: ref,
-            role: "list",
-            style: {
-                ...style,
-                // Adjust height to account for simulated padding.
-                height: `${originalHeight + LIST_PADDING * 2}px`
-            },
-            ...rest
-        });
-    });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactWindow.VariableSizeList, {
-        height: height,
-        width: width,
-        itemCount: items.length,
-        itemSize: getRowHeight,
-        innerElementType: InnerElementType,
-        ref: listRef,
-        children: ListLegendRow
+            }, item.id);
+        },
+        role: "list"
     });
 }

package/dist/cjs/Legend/ListLegendItem.js

@@ -62,7 +62,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onLayoutChange , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , ...others }, ref) {
     const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
     function handleMouseOver() {
         if (truncateLabel) {
@@ -74,14 +74,11 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
             setNoWrap(true);
         }
     }
-    (0, _react.useEffect)(()=>{
-        // When `noWrap` changes, so does the layout of the component. Notifies the
-        // parent, so it can handle those changes.
-        onLayoutChange === null || onLayoutChange === void 0 ? void 0 : onLayoutChange();
-    }, [
-        noWrap,
-        onLayoutChange
-    ]);
+    const handleClick = (e)=>{
+        var ref;
+        onClick(e, item.id);
+        (ref = item.onClick) === null || ref === void 0 ? void 0 : ref.call(item, e);
+    };
     return /*#__PURE__*/ (0, _react.createElement)(_material.ListItem, {
         ...others,
         component: "div",
@@ -92,8 +89,8 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         }, sx),
         dense: true,
         key: item.id,
-        onClick: item.onClick,
-        selected: item.isSelected,
+        onClick: handleClick,
+        selected: isVisuallySelected,
         ref: ref,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {

package/dist/cjs/Legend/TableLegend.js

@@ -0,0 +1,67 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableLegend", {
+    enumerable: true,
+    get: ()=>TableLegend
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _table = require("../Table");
+const COLUMNS = [
+    {
+        accessorKey: 'label',
+        header: 'Name',
+        // Starting with `title` attr instead of a tooltip because it is easier to
+        // implement. We should try adding a tooltip in the future, but we'll need
+        // to be very careful about performance when doing so with large tables.
+        cell: ({ getValue  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("span", {
+                title: getValue(),
+                children: getValue()
+            })
+    }
+];
+const getRowId = (data)=>{
+    return data.id;
+};
+const getCheckboxColor = (data)=>{
+    return data.color;
+};
+function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width  }) {
+    const rowSelection = (0, _react.useMemo)(()=>{
+        return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
+        // TODO: clean this up if we switch to also using checkboxes in list legend.
+        items.reduce((allRowSelection, item, index)=>{
+            allRowSelection[getRowId(item, index)] = true;
+            return allRowSelection;
+        }, {});
+    }, [
+        initRowSelection,
+        items
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_table.Table, {
+        height: height,
+        width: width,
+        rowSelection: rowSelection,
+        onRowSelectionChange: onSelectedItemsChange,
+        data: items,
+        columns: COLUMNS,
+        density: "compact",
+        getRowId: getRowId,
+        getCheckboxColor: getCheckboxColor,
+        checkboxSelection: true
+    });
+}

package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.js

@@ -29,6 +29,12 @@ const POSITION_OPTIONS = Object.entries(_model.LEGEND_POSITIONS_CONFIG).map(([id
         ...config
     };
 });
+const MODE_OPTIONS = Object.entries(_model.LEGEND_MODE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
 function LegendOptionsEditor({ value , onChange  }) {
     const handleLegendShowChange = (_, checked)=>{
         // legend is hidden when legend obj is undefined
@@ -43,9 +49,18 @@ function LegendOptionsEditor({ value , onChange  }) {
             position: newValue.id
         });
     };
+    const handleLegendModeChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: currentPosition,
+            mode: newValue.id
+        });
+    };
     const isValidLegend = (0, _model.validateLegendSpec)(value);
     const currentPosition = (0, _model.getLegendPosition)(value === null || value === void 0 ? void 0 : value.position);
-    const legendConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
+    const legendPositionConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
+    const currentMode = (0, _model.getLegendMode)(value === null || value === void 0 ? void 0 : value.mode);
+    const legendModeConfig = _model.LEGEND_MODE_CONFIG[currentMode];
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             !isValidLegend && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_errorAlert.ErrorAlert, {
@@ -65,7 +80,7 @@ function LegendOptionsEditor({ value , onChange  }) {
                 label: "Position",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
                     value: {
-                        ...legendConfig,
+                        ...legendPositionConfig,
                         id: currentPosition
                     },
                     options: POSITION_OPTIONS,
@@ -77,6 +92,23 @@ function LegendOptionsEditor({ value , onChange  }) {
                     disabled: value === undefined,
                     disableClearable: true
                 })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+                label: "Mode",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                    value: {
+                        ...legendModeConfig,
+                        id: currentMode
+                    },
+                    options: MODE_OPTIONS,
+                    isOptionEqualToValue: (option, value)=>option.id === value.id,
+                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            ...params
+                        }),
+                    onChange: handleLegendModeChange,
+                    disabled: value === undefined,
+                    disableClearable: true
+                })
             })
         ]
     });

package/dist/cjs/LineChart/LineChart.js

@@ -26,7 +26,6 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
-const _graph = require("../model/graph");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _timeSeriesTooltip = require("../TimeSeriesTooltip");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
@@ -85,20 +84,22 @@ function _interopRequireWildcard(obj, nodeInterop) {
 ]);
 function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
     wrapLabels: true
-} , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
+} , noDataVariant ='message' , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
     var ref;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
-    const [pinTooltip, setPinTooltip] = (0, _react.useState)(false);
+    const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
     const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    const [isDragging, setIsDragging] = (0, _react.useState)(false);
+    const [startX, setStartX] = (0, _react.useState)(0);
     const handleEvents = (0, _react.useMemo)(()=>{
         return {
             datazoom: (params)=>{
                 if (onDataZoom === undefined) {
                     setTimeout(()=>{
                         // workaround so unpin happens after click event
-                        setPinTooltip(false);
+                        setTooltipPinnedCoords(null);
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
@@ -122,28 +123,17 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
     }, [
         data,
         onDataZoom,
-        setPinTooltip
+        setTooltipPinnedCoords
     ]);
     if (chartRef.current !== undefined) {
         (0, _utils.enableDataZoom)(chartRef.current);
     }
-    const handleOnDoubleClick = (e)=>{
-        setPinTooltip(false);
-        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
-        if (onDoubleClick === undefined) {
-            if (chartRef.current !== undefined) {
-                (0, _utils.restoreChart)(chartRef.current);
-            }
-        } else {
-            onDoubleClick(e);
-        }
-    };
     const { noDataOption  } = chartsTheme;
     const option = (0, _react.useMemo)(()=>{
         if (data.timeSeries === undefined) return {};
-        if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;
-        // show symbols and axisPointer dashed line on hover
-        const isOptimizedMode = data.timeSeries.length > _graph.OPTIMIZED_MODE_SERIES_LIMIT;
+        // The "chart" `noDataVariant` is only used when the `timeSeries` is an
+        // empty array because a `null` value will throw an error.
+        if (data.timeSeries === null || data.timeSeries.length === 0 && noDataVariant === 'message') return noDataOption;
         var _rangeMs;
         const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : (0, _utils.getDateRange)(data.xAxis);
         const option = {
@@ -161,13 +151,17 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             yAxis: (0, _utils.getYAxes)(yAxis, unit),
             animation: false,
             tooltip: {
-                show: !isOptimizedMode,
+                show: true,
                 trigger: 'axis',
-                showContent: false,
-                axisPointer: {
-                    type: isOptimizedMode ? 'none' : 'line',
-                    z: 0
-                }
+                showContent: false
+            },
+            // https://echarts.apache.org/en/option.html#axisPointer
+            axisPointer: {
+                type: 'line',
+                z: 0,
+                triggerEmphasis: false,
+                triggerTooltip: false,
+                snap: true
             },
             toolbox: {
                 feature: {
@@ -192,27 +186,67 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
         legend,
         noDataOption,
         timeZone,
-        __experimentalEChartsOptionsOverride
+        __experimentalEChartsOptionsOverride,
+        noDataVariant
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             height
         },
-        onClick: ()=>{
-            setPinTooltip((current)=>!current);
+        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)=>{
-            // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
-            if (e.target instanceof HTMLCanvasElement) {
-                setShowTooltip(false);
+            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: ()=>{
-            setShowTooltip(false);
-            setPinTooltip(false);
+            if (tooltipPinnedCoords === null) {
+                setShowTooltip(false);
+            }
         },
         onMouseEnter: ()=>{
             setShowTooltip(true);
@@ -220,14 +254,27 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
                 (0, _utils.enableDataZoom)(chartRef.current);
             }
         },
-        onDoubleClick: handleOnDoubleClick,
+        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) {
+                    (0, _utils.restoreChart)(chartRef.current);
+                }
+            } else {
+                onDoubleClick(e);
+            }
+        },
         children: [
             showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
-                pinTooltip: pinTooltip,
-                unit: unit
+                pinnedPos: tooltipPinnedCoords,
+                unit: unit,
+                onUnpinClick: ()=>{
+                    setTooltipPinnedCoords(null);
+                }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
                 sx: {