@perses-dev/components 0.0.0-snapshot-time-chart-rewrite-4667058 → 0.0.0-snapshot-panel-extra-content-3-17f9c42

package/dist/cjs/TimeSeriesTooltip/nearby-series.js

@@ -33,6 +33,7 @@ _export(exports, {
 });
 const _core = require("@perses-dev/core");
 const _model = require("../model");
+const _utils = require("../utils");
 const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show in tooltip (higher == more series shown)
 const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor
 const SHOW_FEWER_SERIES_LIMIT = 5;
@@ -43,13 +44,15 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
     var ref1;
     const cursorY = (ref1 = pointInGrid[1]) !== null && ref1 !== void 0 ? ref1 : null;
     if (cursorX === null || cursorY === null) return currentNearbySeriesData;
+    if (chart.dispatchAction === undefined) return currentNearbySeriesData;
     if (!Array.isArray(data)) return currentNearbySeriesData;
-    // TODO: better way to calc xBuffer for longer time ranges
-    // const xBuffer = cursorX * 0.0000005;
     const nearbySeriesIndexes = [];
     const emphasizedSeriesIndexes = [];
     const nonEmphasizedSeriesIndexes = [];
+    const emphasizedDatapoints = [];
+    const duplicateDatapoints = [];
     const totalSeries = data.length;
+    const yValueCounts = new Map();
     let closestTimestamp = null;
     let closestDistance = Infinity;
     // find the timestamp with data that is closest to cursorX
@@ -59,6 +62,8 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
         const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;
         if (currentDataset == null) break;
         const currentDatasetValues = currentDataset.values;
+        // Determine closestTimestamp before checking whether it is equal to xValue. Consolidating
+        // with second currentDatasetValues loop below would result in duplicate nearby series
         for (const [timestamp] of currentDatasetValues){
             const distance = Math.abs(timestamp - cursorX);
             if (distance < closestDistance) {
@@ -79,7 +84,6 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
                 const yValue = nearbyTimeSeries[1];
                 // TODO: ensure null values not displayed in tooltip
                 if (yValue !== undefined && yValue !== null) {
-                    // if (cursorX < xValue + xBuffer && cursorX > xValue - xBuffer) {
                     if (closestTimestamp === xValue) {
                         if (cursorY <= yValue + yBuffer && cursorY >= yValue - yBuffer) {
                             // show fewer bold series in tooltip when many total series
@@ -91,19 +95,36 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
                                 percentage: percentRangeToCheck
                             });
                             if (isClosestToCursor) {
+                                // shows as bold in tooltip, customize 'emphasis' options in getTimeSeries util
                                 emphasizedSeriesIndexes.push(seriesIdx);
-                            } else {
-                                nonEmphasizedSeriesIndexes.push(seriesIdx);
-                                // ensure series not close to cursor are not highlighted
-                                if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
-                                    chart.dispatchAction({
-                                        type: 'downplay',
-                                        seriesIndex: seriesIdx
+                                var ref2;
+                                // Used to determine which datapoint to apply select styles to.
+                                // Accounts for cases where lines may be rendered directly on top of eachother.
+                                const duplicateValuesCount = (ref2 = yValueCounts.get(yValue)) !== null && ref2 !== void 0 ? ref2 : 0;
+                                yValueCounts.set(yValue, duplicateValuesCount + 1);
+                                if (duplicateValuesCount > 0) {
+                                    duplicateDatapoints.push({
+                                        seriesIndex: seriesIdx,
+                                        dataIndex: datumIdx,
+                                        seriesName: currentSeriesName,
+                                        yValue: yValue
                                     });
                                 }
+                                // keep track of all bold datapoints in tooltip so that 'select' state only applied to topmost
+                                emphasizedDatapoints.push({
+                                    seriesIndex: seriesIdx,
+                                    dataIndex: datumIdx,
+                                    seriesName: currentSeriesName,
+                                    yValue: yValue
+                                });
+                            } else {
+                                nonEmphasizedSeriesIndexes.push(seriesIdx);
+                                // ensure series far away from cursor are not highlighted
+                                chart.dispatchAction({
+                                    type: 'downplay',
+                                    seriesIndex: seriesIdx
+                                });
                             }
-                            // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
-                            // const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
                             const formattedY = (0, _core.formatValue)(yValue, unit);
                             currentNearbySeriesData.push({
                                 seriesIdx: seriesIdx,
@@ -123,32 +144,7 @@ function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, cha
             }
         }
     }
-    if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
-        // Clears emphasis state of all lines that are not emphasized.
-        // Emphasized is a subset of just the nearby series that are closest to cursor.
-        chart.dispatchAction({
-            type: 'downplay',
-            seriesIndex: nonEmphasizedSeriesIndexes
-        });
-        // https://echarts.apache.org/en/api.html#action.highlight
-        if (emphasizedSeriesIndexes.length > 0) {
-            // Fadeout opacity of all series not closest to cursor.
-            chart.dispatchAction({
-                type: 'highlight',
-                seriesIndex: emphasizedSeriesIndexes,
-                notBlur: false,
-                escapeConnect: true
-            });
-        } else {
-            // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.
-            chart.dispatchAction({
-                type: 'highlight',
-                seriesIndex: nearbySeriesIndexes,
-                notBlur: true,
-                escapeConnect: true
-            });
-        }
-    }
+    (0, _utils.batchDispatchNearbySeriesActions)(chart, nearbySeriesIndexes, emphasizedSeriesIndexes, nonEmphasizedSeriesIndexes, emphasizedDatapoints, duplicateDatapoints);
     return currentNearbySeriesData;
 }
 function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
@@ -167,55 +163,54 @@ function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
     if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {
         for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
             const currentSeries = data.timeSeries[seriesIdx];
+            if (currentSeries === undefined) break;
             if (currentNearbySeriesData.length >= _model.OPTIMIZED_MODE_SERIES_LIMIT) break;
-            if (currentSeries !== undefined) {
-                const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';
-                var _color;
-                const markerColor = (_color = currentSeries.color) !== null && _color !== void 0 ? _color : '#000';
-                if (Array.isArray(currentSeries.data)) {
-                    for(let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++){
-                        var _datumIdx;
-                        const xValue = (_datumIdx = data.xAxis[datumIdx]) !== null && _datumIdx !== void 0 ? _datumIdx : 0;
-                        const yValue = currentSeries.data[datumIdx];
-                        // ensure null values not displayed in tooltip
-                        if (yValue !== undefined && yValue !== null && cursorX === datumIdx) {
-                            if (yValue !== '-' && cursorY <= yValue + yBuffer && cursorY >= yValue - yBuffer) {
-                                // show fewer bold series in tooltip when many total series
-                                const minPercentRange = totalSeries > SHOW_FEWER_SERIES_LIMIT ? 2 : 5;
-                                const percentRangeToCheck = Math.max(minPercentRange, 100 / totalSeries);
-                                const isClosestToCursor = isWithinPercentageRange({
-                                    valueToCheck: cursorY,
-                                    baseValue: yValue,
-                                    percentage: percentRangeToCheck
-                                });
-                                if (isClosestToCursor) {
-                                    emphasizedSeriesIndexes.push(seriesIdx);
-                                } else {
-                                    nonEmphasizedSeriesIndexes.push(seriesIdx);
-                                    // ensure series not close to cursor are not highlighted
-                                    if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
-                                        chart.dispatchAction({
-                                            type: 'downplay',
-                                            seriesIndex: seriesIdx
-                                        });
-                                    }
+            const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';
+            var _color;
+            const markerColor = (_color = currentSeries.color) !== null && _color !== void 0 ? _color : '#000';
+            if (Array.isArray(currentSeries.data)) {
+                for(let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++){
+                    var _datumIdx;
+                    const xValue = (_datumIdx = data.xAxis[datumIdx]) !== null && _datumIdx !== void 0 ? _datumIdx : 0;
+                    const yValue = currentSeries.data[datumIdx];
+                    // ensure null values not displayed in tooltip
+                    if (yValue !== undefined && yValue !== null && cursorX === datumIdx) {
+                        if (yValue !== '-' && cursorY <= yValue + yBuffer && cursorY >= yValue - yBuffer) {
+                            // show fewer bold series in tooltip when many total series
+                            const minPercentRange = totalSeries > SHOW_FEWER_SERIES_LIMIT ? 2 : 5;
+                            const percentRangeToCheck = Math.max(minPercentRange, 100 / totalSeries);
+                            const isClosestToCursor = isWithinPercentageRange({
+                                valueToCheck: cursorY,
+                                baseValue: yValue,
+                                percentage: percentRangeToCheck
+                            });
+                            if (isClosestToCursor) {
+                                emphasizedSeriesIndexes.push(seriesIdx);
+                            } else {
+                                nonEmphasizedSeriesIndexes.push(seriesIdx);
+                                // ensure series not close to cursor are not highlighted
+                                if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+                                    chart.dispatchAction({
+                                        type: 'downplay',
+                                        seriesIndex: seriesIdx
+                                    });
                                 }
-                                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
-                                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
-                                const formattedY = (0, _core.formatValue)(yValue, unit);
-                                currentNearbySeriesData.push({
-                                    seriesIdx: seriesIdx,
-                                    datumIdx: datumIdx,
-                                    seriesName: currentSeriesName,
-                                    date: xValueMilliSeconds,
-                                    x: xValue,
-                                    y: yValue,
-                                    formattedY: formattedY,
-                                    markerColor: markerColor.toString(),
-                                    isClosestToCursor
-                                });
-                                nearbySeriesIndexes.push(seriesIdx);
                             }
+                            // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
+                            const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
+                            const formattedY = (0, _core.formatValue)(yValue, unit);
+                            currentNearbySeriesData.push({
+                                seriesIdx: seriesIdx,
+                                datumIdx: datumIdx,
+                                seriesName: currentSeriesName,
+                                date: xValueMilliSeconds,
+                                x: xValue,
+                                y: yValue,
+                                formattedY: formattedY,
+                                markerColor: markerColor.toString(),
+                                isClosestToCursor
+                            });
+                            nearbySeriesIndexes.push(seriesIdx);
                         }
                     }
                 }
@@ -273,24 +268,17 @@ function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , cha
     }
     if (cursorTargetMatchesChart === false) return [];
     if (chart['_model'] === undefined || data === null) return [];
-    const chartModel = chart['_model'];
-    const yInterval = chartModel.getComponent('yAxis').axis.scale._interval;
-    const totalSeries = data.length;
-    const yBuffer = getYBuffer({
-        yInterval,
-        totalSeries,
-        showAllSeries
-    });
-    var _x, _y;
-    const pointInPixel = [
-        (_x = mousePos.plotCanvas.x) !== null && _x !== void 0 ? _x : 0,
-        (_y = mousePos.plotCanvas.y) !== null && _y !== void 0 ? _y : 0
-    ];
-    if (chart.containPixel('grid', pointInPixel)) {
-        const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
-        if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
-            return checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, unit);
-        }
+    const pointInGrid = (0, _utils.getPointInGrid)(mousePos.plotCanvas.x, mousePos.plotCanvas.y, chart);
+    if (pointInGrid !== null) {
+        const chartModel = chart['_model'];
+        const yInterval = chartModel.getComponent('yAxis').axis.scale._interval;
+        const totalSeries = data.length;
+        const yBuffer = getYBuffer({
+            yInterval,
+            totalSeries,
+            showAllSeries
+        });
+        return checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, unit);
     }
     return [];
 }

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

@@ -26,6 +26,7 @@ _export(exports, {
     TOOLTIP_MAX_HEIGHT: ()=>TOOLTIP_MAX_HEIGHT,
     TOOLTIP_LABELS_MAX_WIDTH: ()=>TOOLTIP_LABELS_MAX_WIDTH,
     TOOLTIP_ADJUST_Y_POS_MULTIPLIER: ()=>TOOLTIP_ADJUST_Y_POS_MULTIPLIER,
+    TOOLTIP_PADDING: ()=>TOOLTIP_PADDING,
     FALLBACK_CHART_WIDTH: ()=>FALLBACK_CHART_WIDTH,
     NEARBY_SERIES_DESCRIPTION: ()=>NEARBY_SERIES_DESCRIPTION,
     EMPHASIZED_SERIES_DESCRIPTION: ()=>EMPHASIZED_SERIES_DESCRIPTION,
@@ -33,7 +34,10 @@ _export(exports, {
     TOOLTIP_DATE_FORMAT: ()=>TOOLTIP_DATE_FORMAT,
     defaultCursorData: ()=>defaultCursorData,
     emptyTooltipData: ()=>emptyTooltipData,
-    useMousePosition: ()=>useMousePosition
+    useMousePosition: ()=>useMousePosition,
+    DEFAULT_TOOLTIP_CONFIG: ()=>DEFAULT_TOOLTIP_CONFIG,
+    PIN_TOOLTIP_HELP_TEXT: ()=>PIN_TOOLTIP_HELP_TEXT,
+    UNPIN_TOOLTIP_HELP_TEXT: ()=>UNPIN_TOOLTIP_HELP_TEXT
 });
 const _react = require("react");
 const TOOLTIP_MIN_WIDTH = 375;
@@ -41,6 +45,7 @@ const TOOLTIP_MAX_WIDTH = 650;
 const TOOLTIP_MAX_HEIGHT = 650;
 const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;
 const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;
+const TOOLTIP_PADDING = 8;
 const FALLBACK_CHART_WIDTH = 750;
 const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';
 const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';
@@ -106,3 +111,9 @@ const useMousePosition = ()=>{
     }, []);
     return coords;
 };
+const DEFAULT_TOOLTIP_CONFIG = {
+    wrapLabels: true,
+    enablePinning: true
+};
+const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';
+const UNPIN_TOOLTIP_HELP_TEXT = 'Click to unpin';

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -25,7 +25,7 @@ _export(exports, {
     getTooltipStyles: ()=>getTooltipStyles
 });
 const _tooltipModel = require("./tooltip-model");
-function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, tooltipWidth) {
+function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, tooltipWidth, containerElement) {
     if (mousePos === null) {
         return 'translate3d(0, 0)';
     }
@@ -34,28 +34,42 @@ function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, toolt
     if (pinnedPos !== null) {
         mousePos = pinnedPos;
     }
-    // Tooltip is located in a Portal attached to the body.
+    // By default, tooltip is located in a Portal attached to the body.
     // Using page coordinates instead of viewport ensures the tooltip is
     // absolutely positioned correctly as the user scrolls
-    const x = mousePos.page.x;
+    let x = mousePos.page.x;
     let y = mousePos.page.y + cursorPaddingY;
-    // adjust so tooltip does not get cut off at bottom of chart
+    // If containerElement is defined, tooltip is attached to the containerElement instead.
+    let containerRect;
+    if (containerElement) {
+        // get the container's position relative to viewport
+        containerRect = containerElement.getBoundingClientRect();
+        // calculate the mouse position relative to container
+        x = x - containerRect.left + containerElement.scrollLeft;
+        y = y - containerRect.top + containerElement.scrollTop;
+    }
     if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {
+        // adjust so tooltip does not get cut off at bottom of chart
         // multiplier ensures tooltip isn't overly adjusted and gets cut off at the top of the viewport
-        y = mousePos.page.y - tooltipHeight * _tooltipModel.TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
+        y = y - tooltipHeight * _tooltipModel.TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
+        // If y is now above of the top of containerElement, set y close to 0 so tooltip does not get cut off
+        if (containerRect && y < containerRect.top) {
+            y = _tooltipModel.TOOLTIP_PADDING / 2; // leaves room for some padding around tooltip
+        }
     }
     // use tooltip width to determine when to repos from right to left
     const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;
     // reposition so tooltip is never too close to right side of chart or left side of browser window
     return mousePos.plotCanvas.x > xPosAdjustThreshold && x > _tooltipModel.TOOLTIP_MAX_WIDTH ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)` : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
 }
-function getTooltipStyles(theme, pinnedPos) {
+function getTooltipStyles(theme, pinnedPos, maxHeight) {
     var ref;
+    const adjustedMaxHeight = maxHeight ? maxHeight - _tooltipModel.TOOLTIP_PADDING : undefined;
     var ref1;
     return {
         minWidth: _tooltipModel.TOOLTIP_MIN_WIDTH,
         maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
-        maxHeight: _tooltipModel.TOOLTIP_MAX_HEIGHT,
+        maxHeight: adjustedMaxHeight !== null && adjustedMaxHeight !== void 0 ? adjustedMaxHeight : _tooltipModel.TOOLTIP_MAX_HEIGHT,
         padding: 0,
         position: 'absolute',
         top: 0,

package/dist/cjs/UnitSelector/UnitSelector.js

@@ -64,7 +64,7 @@ const DECIMAL_PLACES_OPTIONS = [
 function getOptionByDecimalPlaces(decimal_places) {
     return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimal_places === decimal_places);
 }
-function UnitSelector({ value , onChange  }) {
+function UnitSelector({ value , onChange , disabled =false  }) {
     const hasDecimalPlaces = (0, _core.isUnitWithDecimalPlaces)(value);
     const hasAbbreviate = (0, _core.isUnitWithAbbreviate)(value);
     const handleKindChange = (_, newValue)=>{
@@ -109,7 +109,8 @@ function UnitSelector({ value , onChange  }) {
                     options: KIND_OPTIONS,
                     groupBy: (option)=>option.group,
                     onChange: handleKindChange,
-                    disableClearable: true
+                    disableClearable: true,
+                    disabled: disabled
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {

package/dist/cjs/index.js

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_exportStar(require("./BarChart"), exports);
 _exportStar(require("./ColorPicker"), exports);
 _exportStar(require("./ContentWithLegend"), exports);
 _exportStar(require("./DateTimeRangePicker"), exports);
@@ -22,13 +23,16 @@ _exportStar(require("./Drawer"), exports);
 _exportStar(require("./EChart"), exports);
 _exportStar(require("./ErrorAlert"), exports);
 _exportStar(require("./ErrorBoundary"), exports);
+_exportStar(require("./FontSizeSelector"), exports);
 _exportStar(require("./GaugeChart"), exports);
 _exportStar(require("./InfoTooltip"), exports);
 _exportStar(require("./JSONEditor"), exports);
 _exportStar(require("./Legend"), exports);
 _exportStar(require("./LineChart"), exports);
+_exportStar(require("./ModeSelector"), exports);
 _exportStar(require("./OptionsEditorLayout"), exports);
 _exportStar(require("./SettingsAutocomplete"), exports);
+_exportStar(require("./SortSelector"), exports);
 _exportStar(require("./StatChart"), exports);
 _exportStar(require("./Table"), exports);
 _exportStar(require("./ThresholdsEditor"), exports);

package/dist/cjs/model/graph.js

@@ -14,8 +14,40 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "OPTIMIZED_MODE_SERIES_LIMIT", {
-    enumerable: true,
-    get: ()=>OPTIMIZED_MODE_SERIES_LIMIT
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    OPTIMIZED_MODE_SERIES_LIMIT: ()=>OPTIMIZED_MODE_SERIES_LIMIT,
+    PINNED_CROSSHAIR_SERIES_NAME: ()=>PINNED_CROSSHAIR_SERIES_NAME,
+    DEFAULT_PINNED_CROSSHAIR: ()=>DEFAULT_PINNED_CROSSHAIR
 });
 const OPTIMIZED_MODE_SERIES_LIMIT = 1000;
+const PINNED_CROSSHAIR_SERIES_NAME = 'Pinned Crosshair';
+const DEFAULT_PINNED_CROSSHAIR = {
+    name: PINNED_CROSSHAIR_SERIES_NAME,
+    type: 'line',
+    // https://echarts.apache.org/en/option.html#series-line.markLine
+    markLine: {
+        data: [],
+        lineStyle: {
+            type: 'dashed',
+            width: 2
+        },
+        emphasis: {
+            lineStyle: {
+                width: 2,
+                opacity: 1
+            }
+        },
+        blur: {
+            lineStyle: {
+                width: 2,
+                opacity: 1
+            }
+        }
+    }
+};

package/dist/cjs/utils/chart-actions.js

@@ -23,7 +23,9 @@ function _export(target, all) {
 _export(exports, {
     enableDataZoom: ()=>enableDataZoom,
     restoreChart: ()=>restoreChart,
-    clearHighlightedSeries: ()=>clearHighlightedSeries
+    clearHighlightedSeries: ()=>clearHighlightedSeries,
+    getPointInGrid: ()=>getPointInGrid,
+    batchDispatchNearbySeriesActions: ()=>batchDispatchNearbySeriesActions
 });
 function enableDataZoom(chart) {
     const chartModel = chart['_model'];
@@ -55,3 +57,61 @@ function clearHighlightedSeries(chart, totalSeries) {
         }
     }
 }
+function getPointInGrid(cursorCoordX, cursorCoordY, chart) {
+    if (chart === undefined) {
+        return null;
+    }
+    const pointInPixel = [
+        cursorCoordX,
+        cursorCoordY
+    ];
+    if (!chart.containPixel('grid', pointInPixel)) {
+        return null;
+    }
+    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
+    return pointInGrid;
+}
+function batchDispatchNearbySeriesActions(chart, nearbySeriesIndexes, emphasizedSeriesIndexes, nonEmphasizedSeriesIndexes, emphasizedDatapoints, duplicateDatapoints) {
+    // Accounts for multiple series that are rendered direct on top of eachother.
+    // Only applies select state to the datapoint that is visible to avoid color mismatch.
+    const lastEmphasizedDatapoint = duplicateDatapoints.length > 0 ? duplicateDatapoints[duplicateDatapoints.length - 1] : emphasizedDatapoints[emphasizedDatapoints.length - 1];
+    if (lastEmphasizedDatapoint !== undefined) {
+        // Corresponds to select options inside getTimeSeries util.
+        // https://echarts.apache.org/en/option.html#series-line.select.itemStyle
+        chart.dispatchAction({
+            type: 'select',
+            seriesIndex: lastEmphasizedDatapoint.seriesIndex,
+            dataIndex: lastEmphasizedDatapoint.dataIndex,
+            // Shared crosshair should not emphasize datapoints on adjacent charts.
+            escapeConnect: true
+        });
+    }
+    // Clears emphasis state of all lines that are not emphasized.
+    // Emphasized is a subset of just the nearby series that are closest to cursor.
+    chart.dispatchAction({
+        type: 'downplay',
+        seriesIndex: nonEmphasizedSeriesIndexes
+    });
+    // https://echarts.apache.org/en/api.html#action.highlight
+    if (emphasizedSeriesIndexes.length > 0) {
+        // Fadeout opacity of all series not closest to cursor.
+        chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: emphasizedSeriesIndexes,
+            notBlur: false,
+            escapeConnect: true
+        });
+    } else {
+        // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.
+        chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: nearbySeriesIndexes,
+            notBlur: true,
+            escapeConnect: true
+        });
+        // Clears selected datapoints since no bold series in tooltip, restore does not impact highlighting
+        chart.dispatchAction({
+            type: 'toggleSelect'
+        });
+    }
+}

package/dist/cjs/utils/theme-gen.js

@@ -25,10 +25,13 @@ function _interopRequireDefault(obj) {
     };
 }
 const DEFAULT_TEXT_COLOR = '#222';
-function generateChartsTheme(muiTheme, echartsTheme) {
-    var ref, ref1, ref2, ref3, ref4;
-    var ref5;
-    const primaryTextColor = (ref5 = (ref = muiTheme.palette.text) === null || ref === void 0 ? void 0 : ref.primary) !== null && ref5 !== void 0 ? ref5 : DEFAULT_TEXT_COLOR;
+function generateChartsTheme(muiTheme, echartsTheme, /**
+   * The id of the container that will have the chart tooltip appended to it.
+   * By default, chart tooltip uses the body of the top-level document object.
+   */ tooltipPortalContainerId) {
+    var ref, ref1, ref2, ref3, ref4, ref5, ref6;
+    var ref7;
+    const primaryTextColor = (ref7 = (ref = muiTheme.palette.text) === null || ref === void 0 ? void 0 : ref.primary) !== null && ref7 !== void 0 ? ref7 : DEFAULT_TEXT_COLOR;
     const muiConvertedTheme = {
         title: {
             show: false
@@ -80,7 +83,7 @@ function generateChartsTheme(muiTheme, echartsTheme) {
                 lineStyle: {
                     width: 0.5,
                     color: muiTheme.palette.grey[300],
-                    opacity: 0.6
+                    opacity: 0.4
                 }
             },
             splitArea: {
@@ -117,7 +120,7 @@ function generateChartsTheme(muiTheme, echartsTheme) {
                 lineStyle: {
                     width: 0.5,
                     color: muiTheme.palette.grey[300],
-                    opacity: 0.6
+                    opacity: 0.4
                 }
             },
             splitArea: {
@@ -166,7 +169,30 @@ function generateChartsTheme(muiTheme, echartsTheme) {
                 borderColor: primaryTextColor
             }
         },
-        tooltip: {},
+        tooltip: {
+            backgroundColor: (ref5 = muiTheme.palette.designSystem) === null || ref5 === void 0 ? void 0 : ref5.grey[800],
+            borderColor: (ref6 = muiTheme.palette.designSystem) === null || ref6 === void 0 ? void 0 : ref6.grey[800],
+            textStyle: {
+                color: '#fff',
+                fontSize: 11
+            }
+        },
+        axisPointer: {
+            lineStyle: {
+                color: muiTheme.palette.grey[500]
+            }
+        },
+        markLine: {
+            symbol: 'none',
+            symbolSize: 0,
+            itemStyle: {
+                color: muiTheme.palette.grey[500]
+            },
+            lineStyle: {
+                type: 'dashed',
+                width: 1
+            }
+        },
         line: {
             showSymbol: false,
             symbol: 'circle',
@@ -185,7 +211,12 @@ function generateChartsTheme(muiTheme, echartsTheme) {
             barMaxWidth: 150,
             itemStyle: {
                 borderWidth: 0,
+                borderRadius: 0,
                 borderColor: muiTheme.palette.grey[300]
+            },
+            label: {
+                show: false,
+                color: primaryTextColor
             }
         },
         gauge: {
@@ -205,6 +236,7 @@ function generateChartsTheme(muiTheme, echartsTheme) {
         }
     };
     return {
+        tooltipPortalContainerId,
         echartsTheme: (0, _merge.default)(muiConvertedTheme, echartsTheme),
         noDataOption: {
             title: {

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './BarChart';
 export * from './ColorPicker';
 export * from './ContentWithLegend';
 export * from './DateTimeRangePicker';
@@ -6,13 +7,16 @@ export * from './Drawer';
 export * from './EChart';
 export * from './ErrorAlert';
 export * from './ErrorBoundary';
+export * from './FontSizeSelector';
 export * from './GaugeChart';
 export * from './InfoTooltip';
 export * from './JSONEditor';
 export * from './Legend';
 export * from './LineChart';
+export * from './ModeSelector';
 export * from './OptionsEditorLayout';
 export * from './SettingsAutocomplete';
+export * from './SortSelector';
 export * from './StatChart';
 export * from './Table';
 export * from './ThresholdsEditor';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC"}