@perses-dev/components 0.0.0-snapshot-saving-defaults-refinements-1b25cec → 0.0.0-snapshot-time-chart-rewrite-4667058

package/dist/cjs/Table/TableCell.js

@@ -27,7 +27,7 @@ const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme
         backgroundColor: 'inherit',
         '&.MuiTableCell-head': {
             // Important to avoid scrolling behind the header showing through.
-            backgroundColor: theme.palette.background.paper
+            backgroundColor: theme.palette.background.default
         },
         '&:focus-visible': {
             outline: `solid 1px ${theme.palette.primary.main}`,
@@ -37,7 +37,7 @@ const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme
             borderRadius: 0
         }
     }));
-function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , ...otherProps }) {
+function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , isFirstColumn , isLastColumn , description , ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const elRef = (0, _react.useRef)();
     const isHeader = variant === 'head';
@@ -51,7 +51,7 @@ function TableCell({ children , density , variant , width , focusState ='none' ,
     const handleFocus = (e)=>{
         var ref;
         // From https://zellwk.com/blog/keyboard-focusable-elements/
-        const nestedFocusTarget = (ref = e.currentTarget) === null || ref === void 0 ? void 0 : ref.querySelector('a[href], button, input, textarea, select, details');
+        const nestedFocusTarget = (ref = e.currentTarget) === null || ref === void 0 ? void 0 : ref.querySelector('a[href], button, input, textarea, select, details,[role="button"]');
         if (nestedFocusTarget) {
             // If the cell has a focusable child, focus it instead. Mostly used for
             // checkbox cells, but could have other uses.
@@ -83,14 +83,22 @@ function TableCell({ children , density , variant , width , focusState ='none' ,
         ref: elRef,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             sx: {
-                ...(0, _tableModel.getTableCellLayout)(theme, density),
+                ...(0, _tableModel.getTableCellLayout)(theme, density, {
+                    isLastColumn,
+                    isFirstColumn
+                }),
                 position: 'relative',
                 // Text truncation. Currently enforced on all cells. We may control
                 // this with a prop on column config in the future.
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                textOverflow: 'ellipsis',
+                // Need to inherit from the MUI cell because this manages some ordering
+                // that the `TableSortLabel` uses to determine the location of the icon
+                // in headers.
+                flexDirection: 'inherit'
             },
+            title: description,
             children: children
         })
     });

package/dist/cjs/Table/TableCheckbox.js

@@ -48,7 +48,7 @@ function TableCheckbox({ color , density , ...otherProps }) {
                 background: color ? (0, _material.alpha)(color, 0.5) : undefined
             },
             '& .MuiSvgIcon-root': {
-                fontSize: isCompact ? 14 : 16
+                fontSize: isCompact ? 16 : 18
             }
         }
     });

package/dist/cjs/Table/TableHeaderCell.js

@@ -0,0 +1,59 @@
+// 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, "TableHeaderCell", {
+    enumerable: true,
+    get: ()=>TableHeaderCell
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _tableCell = require("./TableCell");
+function TableHeaderCell({ onSort , sortDirection , nextSortDirection , children , ...cellProps }) {
+    const showSortLabel = !!onSort;
+    const headerText = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+        noWrap: true,
+        variant: "inherit",
+        component: "div",
+        color: "inherit",
+        children: children
+    });
+    const isActive = !!sortDirection;
+    const direction = isActive ? sortDirection : nextSortDirection;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCell.TableCell, {
+        ...cellProps,
+        children: showSortLabel ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableSortLabel, {
+            onClick: onSort,
+            direction: direction,
+            active: isActive,
+            sx: {
+                // Overrides a default vertical alignment in the CSS that changes
+                // the header vertical rhythm in a way that's inconsistent with
+                // non-sorting headers.
+                verticalAlign: 'unset',
+                // Makes it possible to ellipsize the text if it's too long.
+                maxWidth: '100%',
+                // Make the arrow visible when focused using the keyboard to assist
+                // with a11y.
+                '&:focus-visible': {
+                    [`& .${_material.tableSortLabelClasses.icon}`]: {
+                        opacity: isActive ? 1 : 0.5
+                    }
+                }
+            },
+            children: headerText
+        }) : headerText
+    });
+}

package/dist/cjs/Table/TableRow.js

@@ -26,9 +26,9 @@ const TableRow = /*#__PURE__*/ (0, _react.forwardRef)(function TableRow(props, r
         ...props,
         ref: ref,
         sx: {
-            backgroundColor: (theme)=>theme.palette.background.paper,
+            backgroundColor: (theme)=>theme.palette.background.default,
             '&:hover': {
-                backgroundColor: (theme)=>theme.palette.primary.light
+                backgroundColor: (theme)=>(0, _material.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
             }
         }
     });

package/dist/cjs/Table/VirtualizedTable.js

@@ -27,10 +27,11 @@ const _tableRow = require("./TableRow");
 const _tableBody = require("./TableBody");
 const _innerTable = require("./InnerTable");
 const _tableHead = require("./TableHead");
+const _tableHeaderCell = require("./TableHeaderCell");
 const _tableCell = require("./TableCell");
 const _virtualizedTableContainer = require("./VirtualizedTableContainer");
 const _useVirtualizedTableKeyboardNav = require("./hooks/useVirtualizedTableKeyboardNav");
-function VirtualizedTable({ width , height , density , onRowClick , rows , columns , headers  }) {
+function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOver , onRowMouseOut , rows , columns , headers  }) {
     const virtuosoRef = (0, _react.useRef)(null);
     // Use a ref for these values because they are only needed for keyboard
     // focus interactions and setting them on state will lead to a significant
@@ -74,10 +75,20 @@ function VirtualizedTable({ width , height , density , onRowClick , rows , colum
                 if (!row) {
                     return null;
                 }
+                const rowEventOpts = {
+                    id: row.id,
+                    index: row.index
+                };
                 return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableRow.TableRow, {
                     ...props,
-                    onClick: ()=>onRowClick(row.id),
-                    density: density
+                    onClick: (e)=>onRowClick(e, row.id),
+                    density: density,
+                    onMouseOver: (e)=>{
+                        onRowMouseOver === null || onRowMouseOver === void 0 ? void 0 : onRowMouseOver(e, rowEventOpts);
+                    },
+                    onMouseOut: (e)=>{
+                        onRowMouseOut === null || onRowMouseOut === void 0 ? void 0 : onRowMouseOut(e, rowEventOpts);
+                    }
                 });
             },
             TableBody: _tableBody.TableBody
@@ -86,6 +97,8 @@ function VirtualizedTable({ width , height , density , onRowClick , rows , colum
         density,
         keyboardNav.onTableKeyDown,
         onRowClick,
+        onRowMouseOut,
+        onRowMouseOver,
         rows,
         width
     ]);
@@ -107,18 +120,28 @@ function VirtualizedTable({ width , height , density , onRowClick , rows , colum
                     children: headers.map((headerGroup)=>{
                         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableRow.TableRow, {
                             density: density,
-                            children: headerGroup.headers.map((header, i)=>{
+                            children: headerGroup.headers.map((header, i, headers)=>{
+                                var ref, ref1;
                                 const column = header.column;
                                 const position = {
                                     row: 0,
                                     column: i
                                 };
-                                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCell.TableCell, {
+                                const isSorted = column.getIsSorted();
+                                const nextSorting = column.getNextSortingOrder();
+                                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableHeaderCell.TableHeaderCell, {
+                                    onSort: column.getCanSort() ? column.getToggleSortingHandler() : undefined,
+                                    sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
+                                    nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
                                     width: column.getSize() || 'auto',
+                                    align: (ref = column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.align,
                                     variant: "head",
                                     density: density,
+                                    description: (ref1 = column.columnDef.meta) === null || ref1 === void 0 ? void 0 : ref1.headerDescription,
                                     focusState: getFocusState(position),
                                     onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                                    isFirstColumn: i === 0,
+                                    isLastColumn: i === headers.length - 1,
                                     children: (0, _reactTable.flexRender)(column.columnDef.header, header.getContext())
                                 }, header.id);
                             })
@@ -132,20 +155,38 @@ function VirtualizedTable({ width , height , density , onRowClick , rows , colum
                     return null;
                 }
                 return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-                    children: row.getVisibleCells().map((cell, i)=>{
+                    children: row.getVisibleCells().map((cell, i, cells)=>{
+                        var ref, ref1;
                         const position = {
                             // Add 1 to the row index because the header is row 0
                             row: index + 1,
                             column: i
                         };
+                        const cellContext = cell.getContext();
+                        const cellRenderFn = cell.column.columnDef.cell;
+                        const cellContent = typeof cellRenderFn == 'function' ? cellRenderFn(cellContext) : null;
+                        const cellDescriptionDef = (ref = cell.column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.cellDescription;
+                        let description = undefined;
+                        if (typeof cellDescriptionDef === 'function') {
+                            // If the cell description is a function, set the value using
+                            // the function.
+                            description = cellDescriptionDef(cellContext);
+                        } else if (cellDescriptionDef && typeof cellContent === 'string') {
+                            // If the cell description is `true` AND the cell content is
+                            // a string (and thus viable as a `title` attribute), use the
+                            // cell content.
+                            description = cellContent;
+                        }
                         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCell.TableCell, {
-                            sx: {
-                                width: cell.column.getSize() || 'auto'
-                            },
+                            width: cell.column.getSize() || 'auto',
+                            align: (ref1 = cell.column.columnDef.meta) === null || ref1 === void 0 ? void 0 : ref1.align,
                             density: density,
                             focusState: getFocusState(position),
                             onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
-                            children: (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                            isFirstColumn: i === 0,
+                            isLastColumn: i === cells.length - 1,
+                            description: description,
+                            children: cellContent
                         }, cell.id);
                     })
                 });

package/dist/cjs/Table/model/table-model.js

@@ -31,13 +31,16 @@ function calculateTableCellHeight(lineHeight, paddingY) {
     const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;
     return lineHeightNum + verticalPaddingNum * 2;
 }
-function getTableCellLayout(theme, density) {
+function getTableCellLayout(theme, density, { isLastColumn , isFirstColumn  } = {}) {
     if (density === 'compact') {
         const paddingY = theme.spacing(0.5);
-        const paddingX = theme.spacing(0.25);
+        const basePaddingX = theme.spacing(0.5);
+        const edgePaddingX = theme.spacing(1);
+        const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
+        const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
         const lineHeight = theme.typography.body2.lineHeight;
         return {
-            padding: `${paddingY} ${paddingX}`,
+            padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,
             height: calculateTableCellHeight(lineHeight, paddingY),
             fontSize: theme.typography.body2.fontSize,
             lineHeight: lineHeight
@@ -45,17 +48,20 @@ function getTableCellLayout(theme, density) {
     }
     // standard density
     const paddingY1 = theme.spacing(1);
-    const paddingX1 = theme.spacing(1.25);
+    const basePaddingX1 = theme.spacing(1.25);
+    const edgePaddingX1 = theme.spacing(2);
+    const paddingLeft1 = isFirstColumn ? edgePaddingX1 : basePaddingX1;
+    const paddingRight1 = isLastColumn ? edgePaddingX1 : basePaddingX1;
     const lineHeight1 = theme.typography.body1.lineHeight;
     return {
-        padding: `${paddingY1} ${paddingX1}`,
+        padding: `${paddingY1} ${paddingRight1} ${paddingY1} ${paddingLeft1}`,
         height: calculateTableCellHeight(lineHeight1, paddingY1),
         fontSize: theme.typography.body1.fontSize,
         lineHeight: lineHeight1
     };
 }
 function persesColumnsToTanstackColumns(columns) {
-    const tableCols = columns.map(({ width , ...otherProps })=>{
+    const tableCols = columns.map(({ width , align , headerDescription , cellDescription , enableSorting , ...otherProps })=>{
         // Tanstack Table does not support an "auto" value to naturally size to fit
         // the space in a table. We translate our custom "auto" setting to 0 size
         // for these columns, so it is easy to fall back to auto when rendering.
@@ -72,7 +78,16 @@ function persesColumnsToTanstackColumns(columns) {
         };
         const result = {
             ...otherProps,
-            ...sizeProps
+            ...sizeProps,
+            // Default sorting to false, so it is very explicitly set per column.
+            enableSorting: !!enableSorting,
+            // Open-ended store for extra metadata in TanStack Table, so you can bake
+            // in your own features.
+            meta: {
+                align,
+                headerDescription,
+                cellDescription
+            }
         };
         return result;
     });

package/dist/cjs/TimeChart/TimeChart.js

@@ -0,0 +1,320 @@
+// 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, "TimeChart", {
+    enumerable: true,
+    get: ()=>TimeChart
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _dateFnsTz = require("date-fns-tz");
+const _core = require("@perses-dev/core");
+const _core1 = require("echarts/core");
+const _charts = require("echarts/charts");
+const _components = require("echarts/components");
+const _renderers = require("echarts/renderers");
+const _echart = require("../EChart");
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _utils = require("../utils");
+const _timeSeriesTooltip = require("../TimeSeriesTooltip");
+const _timeZoneProvider = require("../context/TimeZoneProvider");
+(0, _core1.use)([
+    _charts.LineChart,
+    _components.GridComponent,
+    _components.DatasetComponent,
+    _components.DataZoomComponent,
+    _components.MarkAreaComponent,
+    _components.MarkLineComponent,
+    _components.MarkPointComponent,
+    _components.TitleComponent,
+    _components.ToolboxComponent,
+    _components.TooltipComponent,
+    _components.LegendComponent,
+    _renderers.CanvasRenderer
+]);
+const TimeChart = /*#__PURE__*/ (0, _react.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 = (0, _chartsThemeProvider.useChartsTheme)();
+    const chartRef = (0, _react.useRef)();
+    const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
+    const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
+    const [isDragging, setIsDragging] = (0, _react.useState)(false);
+    const [startX, setStartX] = (0, _react.useState)(0);
+    const { timeZone  } = (0, _timeZoneProvider.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 = (0, _core.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;
+    }
+    (0, _react.useImperativeHandle)(ref, ()=>{
+        return {
+            highlightSeries ({ name  }) {
+                if (!chartRef.current) {
+                    // No chart. Do nothing.
+                    return;
+                }
+                chartRef.current.dispatchAction({
+                    type: 'highlight',
+                    seriesId: name
+                });
+            },
+            clearHighlightedSeries: ()=>{
+                if (!chartRef.current) {
+                    // No chart. Do nothing.
+                    return;
+                }
+                (0, _utils.clearHighlightedSeries)(chartRef.current, totalSeries);
+            }
+        };
+    }, [
+        totalSeries
+    ]);
+    const handleEvents = (0, _react.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) {
+        (0, _utils.enableDataZoom)(chartRef.current);
+    }
+    const { noDataOption  } = chartsTheme;
+    const option = (0, _react.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 : (0, _dateFnsTz.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 : (0, _dateFnsTz.utcToZonedTime)(timeScale.startMs, timeZone),
+                max: isLocalTimeZone ? timeScale.endMs : (0, _dateFnsTz.utcToZonedTime)(timeScale.endMs, timeZone),
+                axisLabel: {
+                    hideOverlap: true,
+                    formatter: (0, _utils.getFormattedAxisLabel)((_rangeMs = timeScale.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : 0)
+                }
+            },
+            yAxis: (0, _utils.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__*/ (0, _jsxRuntime.jsxs)(_material.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) {
+                (0, _utils.clearHighlightedSeries)(chartRef.current, totalSeries);
+            }
+        },
+        onMouseEnter: ()=>{
+            setShowTooltip(true);
+            if (chartRef.current !== undefined) {
+                (0, _utils.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) {
+                    (0, _utils.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__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeChartTooltip, {
+                chartRef: chartRef,
+                data: data,
+                seriesMapping: seriesMapping,
+                wrapLabels: tooltipConfig.wrapLabels,
+                pinnedPos: tooltipPinnedCoords,
+                unit: unit
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
+                option: option,
+                theme: chartsTheme.echartsTheme,
+                onEvents: handleEvents,
+                _instance: chartRef,
+                syncGroup: syncGroup
+            })
+        ]
+    });
+});

package/dist/cjs/{LegendOptionsEditor → TimeChart}/index.js

@@ -14,7 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./LegendOptionsEditor"), exports);
+_exportStar(require("./TimeChart"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {