@perses-dev/components 0.36.2 → 0.37.1

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

@@ -24,8 +24,10 @@ _export(exports, {
     INCREASE_NEARBY_SERIES_MULTIPLIER: ()=>INCREASE_NEARBY_SERIES_MULTIPLIER,
     DYNAMIC_NEARBY_SERIES_MULTIPLIER: ()=>DYNAMIC_NEARBY_SERIES_MULTIPLIER,
     SHOW_FEWER_SERIES_LIMIT: ()=>SHOW_FEWER_SERIES_LIMIT,
-    checkforNearbySeries: ()=>checkforNearbySeries,
+    checkforNearbyTimeSeries: ()=>checkforNearbyTimeSeries,
+    legacyCheckforNearbySeries: ()=>legacyCheckforNearbySeries,
     getNearbySeriesData: ()=>getNearbySeriesData,
+    legacyGetNearbySeriesData: ()=>legacyGetNearbySeriesData,
     isWithinPercentageRange: ()=>isWithinPercentageRange,
     getYBuffer: ()=>getYBuffer
 });
@@ -34,7 +36,119 @@ const _model = require("../model");
 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;
-function checkforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
+function checkforNearbyTimeSeries(data, seriesMapping, pointInGrid, yBuffer, chart, unit) {
+    const currentNearbySeriesData = [];
+    var ref;
+    const cursorX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
+    var ref1;
+    const cursorY = (ref1 = pointInGrid[1]) !== null && ref1 !== void 0 ? ref1 : null;
+    if (cursorX === null || cursorY === null) return currentNearbySeriesData;
+    if (!Array.isArray(data)) return currentNearbySeriesData;
+    const nearbySeriesIndexes = [];
+    const emphasizedSeriesIndexes = [];
+    const nonEmphasizedSeriesIndexes = [];
+    const totalSeries = data.length;
+    let closestTimestamp = null;
+    let closestDistance = Infinity;
+    // find the timestamp with data that is closest to cursorX
+    for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
+        const currentSeries = seriesMapping[seriesIdx];
+        if (currentSeries === undefined) break;
+        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) {
+                closestTimestamp = timestamp;
+                closestDistance = distance;
+            }
+        }
+        if (currentDatasetValues === undefined || !Array.isArray(currentDatasetValues)) break;
+        const lineSeries = currentSeries;
+        const currentSeriesName = lineSeries.name ? lineSeries.name.toString() : '';
+        var _color;
+        const markerColor = (_color = lineSeries.color) !== null && _color !== void 0 ? _color : '#000';
+        if (Array.isArray(data)) {
+            for(let datumIdx = 0; datumIdx < currentDatasetValues.length; datumIdx++){
+                const nearbyTimeSeries = currentDatasetValues[datumIdx];
+                if (nearbyTimeSeries === undefined || !Array.isArray(nearbyTimeSeries)) break;
+                const xValue = nearbyTimeSeries[0];
+                const yValue = nearbyTimeSeries[1];
+                // TODO: ensure null values not displayed in tooltip
+                if (yValue !== undefined && yValue !== null) {
+                    if (closestTimestamp === xValue) {
+                        if (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 far away from cursor are not highlighted
+                                if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+                                    chart.dispatchAction({
+                                        type: 'downplay',
+                                        seriesIndex: seriesIdx
+                                    });
+                                }
+                            }
+                            const formattedY = (0, _core.formatValue)(yValue, unit);
+                            currentNearbySeriesData.push({
+                                seriesIdx: seriesIdx,
+                                datumIdx: datumIdx,
+                                seriesName: currentSeriesName,
+                                date: closestTimestamp,
+                                x: xValue,
+                                y: yValue,
+                                formattedY: formattedY,
+                                markerColor: markerColor.toString(),
+                                isClosestToCursor
+                            });
+                            nearbySeriesIndexes.push(seriesIdx);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    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
+            });
+        }
+    }
+    return currentNearbySeriesData;
+}
+function legacyCheckforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
     const currentNearbySeriesData = [];
     var ref;
     const cursorX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
@@ -133,7 +247,51 @@ function checkforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
     }
     return currentNearbySeriesData;
 }
-function getNearbySeriesData({ mousePos , pinnedPos , chartData , chart , unit , showAllSeries =false  }) {
+function getNearbySeriesData({ mousePos , pinnedPos , data , seriesMapping , chart , unit , showAllSeries =false  }) {
+    if (chart === undefined || mousePos === null) return [];
+    // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
+    let cursorTargetMatchesChart = false;
+    if (mousePos.target !== null) {
+        const currentParent = mousePos.target.parentElement;
+        if (currentParent !== null) {
+            const currentGrandparent = currentParent.parentElement;
+            if (currentGrandparent !== null) {
+                const chartDom = chart.getDom();
+                if (chartDom === currentGrandparent) {
+                    cursorTargetMatchesChart = true;
+                }
+            }
+        }
+    }
+    // allows moving cursor inside tooltip without it fading away
+    if (pinnedPos !== null) {
+        mousePos = pinnedPos;
+        cursorTargetMatchesChart = true;
+    }
+    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);
+        }
+    }
+    return [];
+}
+function legacyGetNearbySeriesData({ mousePos , pinnedPos , chartData , chart , unit , showAllSeries =false  }) {
     if (chart === undefined || mousePos === null) return [];
     // prevents multiple tooltips showing from adjacent charts unless tooltip is pinned
     let cursorTargetMatchesChart = false;
@@ -172,7 +330,7 @@ function getNearbySeriesData({ mousePos , pinnedPos , chartData , chart , unit ,
     if (chart.containPixel('grid', pointInPixel)) {
         const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
         if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
-            return checkforNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);
+            return legacyCheckforNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);
         }
     }
     return [];

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -14,12 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "assembleTransform", {
-    enumerable: true,
-    get: ()=>assembleTransform
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    assembleTransform: ()=>assembleTransform,
+    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)';
     }
@@ -28,18 +34,52 @@ 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;
+    // If containerElement is defined, tooltip is attached to the containerElement instead.
+    if (containerElement) {
+        // get the container's position relative to viewport
+        const containerRect = containerElement.getBoundingClientRect();
+        // calculate the mouse position relative to container
+        x = x - containerRect.left + containerElement.scrollLeft;
+        y = y - containerRect.top + containerElement.scrollTop;
+    }
     // adjust so tooltip does not get cut off at bottom of chart
     if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {
         // 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;
     }
     // 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) {
+    var ref;
+    var ref1;
+    return {
+        minWidth: _tooltipModel.TOOLTIP_MIN_WIDTH,
+        maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
+        maxHeight: _tooltipModel.TOOLTIP_MAX_HEIGHT,
+        padding: 0,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        backgroundColor: (ref1 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref1 !== void 0 ? ref1 : _tooltipModel.TOOLTIP_BG_COLOR_FALLBACK,
+        borderRadius: '6px',
+        color: '#fff',
+        fontSize: '11px',
+        visibility: 'visible',
+        opacity: 1,
+        transition: 'all 0.1s ease-out',
+        // Ensure pinned tooltip shows behind edit panel drawer and sticky header
+        zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,
+        overflow: 'hidden',
+        '&:hover': {
+            overflowY: 'auto'
+        }
+    };
+}

package/dist/cjs/index.js

@@ -22,6 +22,7 @@ _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);
@@ -32,6 +33,7 @@ _exportStar(require("./SettingsAutocomplete"), exports);
 _exportStar(require("./StatChart"), exports);
 _exportStar(require("./Table"), exports);
 _exportStar(require("./ThresholdsEditor"), exports);
+_exportStar(require("./TimeChart"), exports);
 _exportStar(require("./TimeSeriesTooltip"), exports);
 _exportStar(require("./UnitSelector"), exports);
 _exportStar(require("./YAxisLabel"), exports);

package/dist/cjs/utils/axis.js

@@ -0,0 +1,58 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getYAxes: ()=>getYAxes,
+    getDateRange: ()=>getDateRange
+});
+const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
+const _core = require("@perses-dev/core");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getYAxes(yAxis, unit) {
+    // TODO: support alternate yAxis that shows on right side
+    const Y_AXIS_DEFAULT = {
+        type: 'value',
+        boundaryGap: [
+            0,
+            '10%'
+        ],
+        axisLabel: {
+            formatter: (value)=>{
+                return (0, _core.formatValue)(value, unit);
+            }
+        }
+    };
+    return [
+        (0, _merge.default)(Y_AXIS_DEFAULT, yAxis)
+    ];
+}
+function getDateRange(data) {
+    const defaultRange = 3600000; // hour in ms
+    if (data.length === 0) return defaultRange;
+    const lastDatum = data[data.length - 1];
+    if (data[0] === undefined || lastDatum === undefined) return defaultRange;
+    return lastDatum - data[0];
+}

package/dist/cjs/{LineChart/utils.js → utils/chart-actions.js}

@@ -23,19 +23,8 @@ function _export(target, all) {
 _export(exports, {
     enableDataZoom: ()=>enableDataZoom,
     restoreChart: ()=>restoreChart,
-    getDateRange: ()=>getDateRange,
-    getFormattedDate: ()=>getFormattedDate,
-    getYAxes: ()=>getYAxes,
     clearHighlightedSeries: ()=>clearHighlightedSeries
 });
-const _core = require("@perses-dev/core");
-const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
-const _utils = require("../utils");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function enableDataZoom(chart) {
     const chartModel = chart['_model'];
     if (chartModel === undefined) return;
@@ -56,49 +45,6 @@ function restoreChart(chart) {
         type: 'restore'
     });
 }
-function getDateRange(data) {
-    const defaultRange = 3600000; // hour in ms
-    if (data.length === 0) return defaultRange;
-    const lastDatum = data[data.length - 1];
-    if (data[0] === undefined || lastDatum === undefined) return defaultRange;
-    return lastDatum - data[0];
-}
-function getFormattedDate(value, rangeMs, timeZone) {
-    const dateFormatOptions = (0, _utils.dateFormatOptionsWithTimeZone)({
-        hour: 'numeric',
-        minute: 'numeric',
-        hourCycle: 'h23'
-    }, timeZone);
-    const thirtyMinMs = 1800000;
-    const dayMs = 86400000;
-    if (rangeMs <= thirtyMinMs) {
-        dateFormatOptions.second = 'numeric';
-    } else if (rangeMs >= dayMs) {
-        dateFormatOptions.month = 'numeric';
-        dateFormatOptions.day = 'numeric';
-    }
-    const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);
-    // remove comma when month / day present
-    return DATE_FORMAT.format(value).replace(/, /g, ' ');
-}
-function getYAxes(yAxis, unit) {
-    // TODO: support alternate yAxis that shows on right side
-    const Y_AXIS_DEFAULT = {
-        type: 'value',
-        boundaryGap: [
-            0,
-            '10%'
-        ],
-        axisLabel: {
-            formatter: (value)=>{
-                return (0, _core.formatValue)(value, unit);
-            }
-        }
-    };
-    return [
-        (0, _merge.default)(Y_AXIS_DEFAULT, yAxis)
-    ];
-}
 function clearHighlightedSeries(chart, totalSeries) {
     if (chart.dispatchAction !== undefined) {
         for(let i = 0; i < totalSeries; i++){

package/dist/cjs/utils/format.js

@@ -22,7 +22,9 @@ function _export(target, all) {
 }
 _export(exports, {
     dateFormatOptionsWithTimeZone: ()=>dateFormatOptionsWithTimeZone,
-    formatWithTimeZone: ()=>formatWithTimeZone
+    formatWithTimeZone: ()=>formatWithTimeZone,
+    getFormattedDate: ()=>getFormattedDate,
+    getFormattedAxisLabel: ()=>getFormattedAxisLabel
 });
 const _dateFnsTz = require("date-fns-tz");
 const _dateFns = require("date-fns");
@@ -54,3 +56,47 @@ function formatWithTimeZone(date, formatString, timeZone) {
         return (0, _dateFnsTz.formatInTimeZone)(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);
     }
 }
+function getFormattedDate(value, rangeMs, timeZone) {
+    const dateFormatOptions = dateFormatOptionsWithTimeZone({
+        hour: 'numeric',
+        minute: 'numeric',
+        hourCycle: 'h23'
+    }, timeZone);
+    const thirtyMinMs = 1800000;
+    const dayMs = 86400000;
+    if (rangeMs <= thirtyMinMs) {
+        dateFormatOptions.second = 'numeric';
+    } else if (rangeMs >= dayMs) {
+        dateFormatOptions.month = 'numeric';
+        dateFormatOptions.day = 'numeric';
+    }
+    const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);
+    // remove comma when month / day present
+    return DATE_FORMAT.format(value).replace(/, /g, ' ');
+}
+function getFormattedAxisLabel(rangeMs) {
+    const dayMs = 86400000;
+    const monthMs = 2629440000;
+    const yearMs = 31536000000;
+    // more than 5 years
+    if (rangeMs > yearMs * 5) {
+        return '{yyyy}';
+    }
+    // more than 2 years
+    if (rangeMs > yearMs * 2) {
+        return '{MMM} {yyyy}';
+    }
+    // between 5 days to 6 months
+    if (rangeMs > dayMs * 5 && rangeMs < monthMs * 6) {
+        return '{MM}/{dd}'; // 12/01
+    }
+    // between 2 and 5 days
+    if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 5) {
+        return '{MM}/{dd} {HH}:{mm}'; // 12/01 12:30
+    }
+    return {
+        year: '{yearStyle|{yyyy}}\n{monthStyle|{MMM}}',
+        month: '{MMM}',
+        day: '{MM}/{dd}'
+    };
+}

package/dist/cjs/utils/index.js

@@ -14,10 +14,12 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_exportStar(require("./axis"), exports);
+_exportStar(require("./chart-actions"), exports);
 _exportStar(require("./combine-sx"), exports);
-_exportStar(require("./theme-gen"), exports);
 _exportStar(require("./component-ids"), exports);
 _exportStar(require("./format"), exports);
+_exportStar(require("./theme-gen"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

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

@@ -25,7 +25,10 @@ function _interopRequireDefault(obj) {
     };
 }
 const DEFAULT_TEXT_COLOR = '#222';
-function generateChartsTheme(muiTheme, echartsTheme) {
+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;
     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;
@@ -92,6 +95,43 @@ function generateChartsTheme(muiTheme, echartsTheme) {
                 }
             }
         },
+        timeAxis: {
+            show: true,
+            axisLabel: {
+                show: true,
+                color: primaryTextColor,
+                margin: 15
+            },
+            axisTick: {
+                show: false,
+                length: 6,
+                lineStyle: {
+                    color: muiTheme.palette.grey[600]
+                }
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: muiTheme.palette.grey[600]
+                }
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    width: 0.5,
+                    color: muiTheme.palette.grey[300],
+                    opacity: 0.6
+                }
+            },
+            splitArea: {
+                show: false,
+                areaStyle: {
+                    color: [
+                        muiTheme.palette.grey[300]
+                    ]
+                }
+            }
+        },
         valueAxis: {
             show: true,
             axisLabel: {
@@ -168,6 +208,7 @@ function generateChartsTheme(muiTheme, echartsTheme) {
         }
     };
     return {
+        tooltipPortalContainerId,
         echartsTheme: (0, _merge.default)(muiConvertedTheme, echartsTheme),
         noDataOption: {
             title: {

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './Drawer';
 export * from './EChart';
 export * from './ErrorAlert';
 export * from './ErrorBoundary';
+export * from './FontSizeSelector';
 export * from './GaugeChart';
 export * from './InfoTooltip';
 export * from './JSONEditor';
@@ -16,6 +17,7 @@ export * from './SettingsAutocomplete';
 export * from './StatChart';
 export * from './Table';
 export * from './ThresholdsEditor';
+export * from './TimeChart';
 export * from './TimeSeriesTooltip';
 export * from './UnitSelector';
 export * from './YAxisLabel';

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,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,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,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"}

package/dist/index.js

@@ -18,6 +18,7 @@ export * from './Drawer';
 export * from './EChart';
 export * from './ErrorAlert';
 export * from './ErrorBoundary';
+export * from './FontSizeSelector';
 export * from './GaugeChart';
 export * from './InfoTooltip';
 export * from './JSONEditor';
@@ -28,6 +29,7 @@ export * from './SettingsAutocomplete';
 export * from './StatChart';
 export * from './Table';
 export * from './ThresholdsEditor';
+export * from './TimeChart';
 export * from './TimeSeriesTooltip';
 export * from './UnitSelector';
 export * from './YAxisLabel';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/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 './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './DateTimeRangePicker';\nexport * from './Dialog';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './SettingsAutocomplete';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeSeriesTooltip';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './context/SnackbarProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './RefreshIntervalPicker';\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,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,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,"sources":["../src/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 './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './DateTimeRangePicker';\nexport * from './Dialog';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './FontSizeSelector';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './SettingsAutocomplete';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeChart';\nexport * from './TimeSeriesTooltip';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './context/SnackbarProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './RefreshIntervalPicker';\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,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,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"}

package/dist/model/graph.d.ts

@@ -6,16 +6,33 @@ export declare type UnixTimeMs = number;
 export interface GraphSeries {
     name: string;
     values: TimeSeriesValueTuple[];
+    id?: string;
 }
 export declare type EChartsValues = number | null | '-';
-export interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {
+export interface LegacyTimeSeries extends Omit<LineSeriesOption, 'data'> {
     data: EChartsValues[];
 }
+export declare type TimeChartSeriesMapping = LineSeriesOption[];
+export declare type TimeChartLegendItems = LegendItem[];
 export declare type EChartsDataFormat = {
-    timeSeries: EChartsTimeSeries[];
+    timeSeries: LegacyTimeSeries[];
     xAxis: number[];
     legendItems?: LegendItem[];
     xAxisMax?: number | string;
     rangeMs?: number;
 };
+export declare type ChartInstanceFocusOpts = {
+    id?: string;
+    name?: string;
+};
+export declare type ChartInstance = {
+    /**
+     * Highlight the series associated with the specified options.
+     */
+    highlightSeries: (opts: ChartInstanceFocusOpts) => void;
+    /**
+     * Clear all highlighted series.
+     */
+    clearHighlightedSeries: () => void;
+};
 //# sourceMappingURL=graph.d.ts.map

package/dist/model/graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGvC,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,oBAAoB,EAAE,CAAC;CAChC;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,aAAa,EAAE,CAAC;CACvB;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGvC,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,oBAAoB,EAAE,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IACtE,IAAI,EAAE,aAAa,EAAE,CAAC;CACvB;AAGD,oBAAY,sBAAsB,GAAG,gBAAgB,EAAE,CAAC;AACxD,oBAAY,oBAAoB,GAAG,UAAU,EAAE,CAAC;AAGhD,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,oBAAY,sBAAsB,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B;;OAEG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAExD;;OAEG;IACH,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC,CAAC"}