@perses-dev/timeseries-chart-plugin 0.7.0 → 0.9.0

package/lib/cjs/TimeSeriesChartBase.js

@@ -0,0 +1,402 @@
+// Copyright 2025 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, "TimeSeriesChartBase", {
+    enumerable: true,
+    get: function() {
+        return TimeSeriesChartBase;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+const _isEqual = /*#__PURE__*/ _interop_require_default(require("lodash/isEqual"));
+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 _components1 = require("@perses-dev/components");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+(0, _core1.use)([
+    _charts.LineChart,
+    _charts.BarChart,
+    _components.GridComponent,
+    _components.DatasetComponent,
+    _components.DataZoomComponent,
+    _components.MarkAreaComponent,
+    _components.MarkLineComponent,
+    _components.MarkPointComponent,
+    _components.TitleComponent,
+    _components.ToolboxComponent,
+    _components.TooltipComponent,
+    _renderers.CanvasRenderer
+]);
+const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, grid, isStackedBar = false, tooltipConfig = _components1.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
+    const { chartsTheme, enablePinning, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = (0, _components1.useChartsContext)();
+    const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
+    const chartRef = (0, _react.useRef)();
+    const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
+    const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
+    const [pinnedCrosshair, setPinnedCrosshair] = (0, _react.useState)(null);
+    const [isDragging, setIsDragging] = (0, _react.useState)(false);
+    const [startX, setStartX] = (0, _react.useState)(0);
+    const { timeZone } = (0, _components1.useTimeZone)();
+    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) {
+                    // when chart undef, do not highlight series when hovering over legend
+                    return;
+                }
+                chartRef.current.dispatchAction({
+                    type: 'highlight',
+                    seriesId: name
+                });
+            },
+            clearHighlightedSeries: ()=>{
+                if (!chartRef.current) {
+                    // when chart undef, do not clear highlight series
+                    return;
+                }
+                (0, _components1.clearHighlightedSeries)(chartRef.current);
+            }
+        };
+    }, []);
+    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);
+                }
+            },
+            finished: ()=>{
+                if (chartRef.current !== undefined) {
+                    (0, _components1.enableDataZoom)(chartRef.current);
+                }
+            }
+        };
+    }, [
+        onDataZoom,
+        setTooltipPinnedCoords
+    ]);
+    const { noDataOption } = chartsTheme;
+    const option = (0, _react.useMemo)(()=>{
+        // 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.toZonedTime)(timestamp, timeZone),
+                    val
+                ];
+            });
+            dataset.push({
+                id: index,
+                source: [
+                    ...values
+                ],
+                dimensions: [
+                    'time',
+                    'value'
+                ]
+            });
+        });
+        const updatedSeriesMapping = enablePinning && pinnedCrosshair !== null ? [
+            ...seriesMapping,
+            pinnedCrosshair
+        ] : seriesMapping;
+        const option = {
+            dataset: dataset,
+            series: updatedSeriesMapping,
+            xAxis: {
+                type: 'time',
+                min: isLocalTimeZone ? timeScale.startMs : (0, _datefnstz.toZonedTime)(timeScale.startMs, timeZone),
+                max: isLocalTimeZone ? timeScale.endMs : (0, _datefnstz.toZonedTime)(timeScale.endMs, timeZone),
+                axisLabel: {
+                    hideOverlap: true,
+                    formatter: (0, _components1.getFormattedAxisLabel)(timeScale.rangeMs ?? 0)
+                },
+                axisPointer: {
+                    snap: false
+                }
+            },
+            yAxis: (0, _components1.getFormattedAxis)(yAxis, format),
+            animation: false,
+            tooltip: {
+                show: true,
+                // ECharts tooltip content hidden by default since we use custom tooltip instead.
+                // Stacked bar uses ECharts tooltip so subgroup data shows correctly.
+                showContent: isStackedBar,
+                trigger: isStackedBar ? 'item' : 'axis',
+                appendToBody: isStackedBar
+            },
+            // https://echarts.apache.org/en/option.html#axisPointer
+            axisPointer: {
+                type: 'line',
+                z: 0,
+                triggerEmphasis: false,
+                triggerTooltip: false,
+                snap: false
+            },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        icon: null,
+                        yAxisIndex: 'none'
+                    }
+                }
+            },
+            grid
+        };
+        if (__experimentalEChartsOptionsOverride) {
+            return __experimentalEChartsOptionsOverride(option);
+        }
+        return option;
+    }, [
+        data,
+        seriesMapping,
+        timeScale,
+        yAxis,
+        format,
+        grid,
+        noDataOption,
+        __experimentalEChartsOptionsOverride,
+        noDataVariant,
+        timeZone,
+        isStackedBar,
+        enablePinning,
+        pinnedCrosshair
+    ]);
+    // Update adjacent charts so tooltip is unpinned when current chart is clicked.
+    (0, _react.useEffect)(()=>{
+        // Only allow pinning one tooltip at a time, subsequent tooltip click unpins previous.
+        // Multiple tooltips can only be pinned if Ctrl or Cmd key is pressed while clicking.
+        const multipleTooltipsPinned = tooltipPinnedCoords !== null && lastTooltipPinnedCoords !== null;
+        if (multipleTooltipsPinned) {
+            if (!(0, _isEqual.default)(lastTooltipPinnedCoords, tooltipPinnedCoords)) {
+                setTooltipPinnedCoords(null);
+                if (tooltipPinnedCoords !== null && pinnedCrosshair !== null) {
+                    setPinnedCrosshair(null);
+                }
+            }
+        }
+    // tooltipPinnedCoords CANNOT be in dep array or tooltip pinning breaks in the current chart's onClick
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        lastTooltipPinnedCoords,
+        seriesMapping
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        style: {
+            height
+        },
+        // onContextMenu={(e) => {
+        //   // TODO: confirm tooltip pinning works correctly on Windows, should e.preventDefault() be added here
+        //   e.preventDefault(); // Prevent the default behaviour when right clicked
+        // }}
+        onClick: (e)=>{
+            // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down
+            const isControlKeyPressed = e.ctrlKey || e.metaKey;
+            if (isControlKeyPressed) {
+                e.preventDefault();
+            }
+            // Determine where on chart canvas to plot pinned crosshair as markLine.
+            const pointInGrid = (0, _components1.getPointInGrid)(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);
+            if (pointInGrid === null) {
+                return;
+            }
+            // Pin and unpin when clicking on chart canvas but not tooltip text.
+            if (isPinningEnabled && e.target instanceof HTMLCanvasElement) {
+                // Pin tooltip and update shared charts context to remember these coordinates.
+                const pinnedPos = {
+                    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
+                };
+                setTooltipPinnedCoords((current)=>{
+                    if (current === null) {
+                        return pinnedPos;
+                    } else {
+                        setPinnedCrosshair(null);
+                        return null;
+                    }
+                });
+                setPinnedCrosshair((current)=>{
+                    // Only add pinned crosshair line series when there is not one already in seriesMapping.
+                    if (current === null) {
+                        const cursorX = pointInGrid[0];
+                        // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent
+                        const firstTimeSeriesValues = data[0]?.values;
+                        const closestTimestamp = (0, _components1.getClosestTimestamp)(firstTimeSeriesValues, cursorX);
+                        // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right
+                        const pinnedCrosshair = (0, _merge.default)({}, _components1.DEFAULT_PINNED_CROSSHAIR, {
+                            markLine: {
+                                data: [
+                                    {
+                                        xAxis: closestTimestamp
+                                    }
+                                ]
+                            }
+                        });
+                        return pinnedCrosshair;
+                    } else {
+                        // Clear previously set pinned crosshair
+                        return null;
+                    }
+                });
+                if (!isControlKeyPressed) {
+                    setLastTooltipPinnedCoords(pinnedPos);
+                }
+            }
+        },
+        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, _components1.clearHighlightedSeries)(chartRef.current);
+            }
+        },
+        onMouseEnter: ()=>{
+            setShowTooltip(true);
+            if (chartRef.current !== undefined) {
+                (0, _components1.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, _components1.restoreChart)(chartRef.current);
+                }
+            } else {
+                onDoubleClick(e);
+            }
+        },
+        children: [
+            showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.TimeChartTooltip, {
+                containerId: chartsTheme.tooltipPortalContainerId,
+                chartRef: chartRef,
+                data: data,
+                seriesMapping: seriesMapping,
+                wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: isPinningEnabled,
+                pinnedPos: tooltipPinnedCoords,
+                format: format,
+                onUnpinClick: ()=>{
+                    // Unpins tooltip when clicking Pin icon in TooltipHeader.
+                    setTooltipPinnedCoords(null);
+                    // Clear previously set pinned crosshair.
+                    setPinnedCrosshair(null);
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
+                option: option,
+                theme: chartsTheme.echartsTheme,
+                onEvents: handleEvents,
+                _instance: chartRef,
+                syncGroup: syncGroup
+            })
+        ]
+    });
+});

package/lib/cjs/TimeSeriesChartPanel.js

@@ -30,6 +30,7 @@ const _components = require("@perses-dev/components");
 const _timeserieschartmodel = require("./time-series-chart-model");
 const _datatransform = require("./utils/data-transform");
 const _palettegen = require("./utils/palette-gen");
+const _TimeSeriesChartBase = require("./TimeSeriesChartBase");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -324,7 +325,7 @@ function TimeSeriesChartPanel(props) {
                             name: yAxis.label,
                             height: height
                         }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.TimeChart, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesChartBase.TimeSeriesChartBase, {
                             ref: chartRef,
                             height: height,
                             data: timeChartData,

package/lib/cjs/index.js

@@ -1,3 +1,15 @@
+// Copyright 2025 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
@@ -15,6 +27,7 @@ _export_star(require("./TimeSeriesChartOptionsEditorSettings"), exports);
 _export_star(require("./VisualOptionsEditor"), exports);
 _export_star(require("./YAxisOptionsEditor"), exports);
 _export_star(require("./TimeSeriesChartPanel"), exports);
+_export_star(require("./TimeSeriesChartBase"), exports);
 _export_star(require("./time-series-chart-model"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/lib/index.d.ts

@@ -5,5 +5,6 @@ export * from './TimeSeriesChartOptionsEditorSettings';
 export * from './VisualOptionsEditor';
 export * from './YAxisOptionsEditor';
 export * from './TimeSeriesChartPanel';
+export * from './TimeSeriesChartBase';
 export * from './time-series-chart-model';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wCAAwC,CAAC;AACvD,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wCAAwC,CAAC;AACvD,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC"}

package/lib/index.js

@@ -1,3 +1,15 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 export { getPluginModule } from './getPluginModule';
 export * from './TimeSeriesChart';
 export * from './QuerySettingsEditor';
@@ -5,6 +17,7 @@ export * from './TimeSeriesChartOptionsEditorSettings';
 export * from './VisualOptionsEditor';
 export * from './YAxisOptionsEditor';
 export * from './TimeSeriesChartPanel';
+export * from './TimeSeriesChartBase';
 export * from './time-series-chart-model';
 
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export { getPluginModule } from './getPluginModule';\nexport * from './TimeSeriesChart';\nexport * from './QuerySettingsEditor';\nexport * from './TimeSeriesChartOptionsEditorSettings';\nexport * from './VisualOptionsEditor';\nexport * from './YAxisOptionsEditor';\nexport * from './TimeSeriesChartPanel';\nexport * from './time-series-chart-model';\n"],"names":["getPluginModule"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,oBAAoB;AAClC,cAAc,wBAAwB;AACtC,cAAc,yCAAyC;AACvD,cAAc,wBAAwB;AACtC,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,4BAA4B"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Copyright 2025 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 { getPluginModule } from './getPluginModule';\nexport * from './TimeSeriesChart';\nexport * from './QuerySettingsEditor';\nexport * from './TimeSeriesChartOptionsEditorSettings';\nexport * from './VisualOptionsEditor';\nexport * from './YAxisOptionsEditor';\nexport * from './TimeSeriesChartPanel';\nexport * from './TimeSeriesChartBase';\nexport * from './time-series-chart-model';\n"],"names":["getPluginModule"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,oBAAoB;AAClC,cAAc,wBAAwB;AACtC,cAAc,yCAAyC;AACvD,cAAc,wBAAwB;AACtC,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,wBAAwB;AACtC,cAAc,4BAA4B"}

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "TimeSeriesChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.7.0",
+      "buildVersion": "0.9.0",
       "buildName": "@perses-dev/timeseries-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TimeSeriesChart.2074a1a8.js",
+      "name": "__mf/js/TimeSeriesChart.33363c77.js",
       "path": "",
       "type": "global"
     },
@@ -34,7 +34,7 @@
       "assets": {
         "js": {
           "async": [
-            "__mf/js/async/110.e82fda83.js"
+            "__mf/js/async/964.6dfbf211.js"
           ],
           "sync": [
             "__mf/js/async/960.3047096d.js"
@@ -55,7 +55,7 @@
       "assets": {
         "js": {
           "async": [
-            "__mf/js/async/110.e82fda83.js",
+            "__mf/js/async/964.6dfbf211.js",
             "__mf/js/async/960.3047096d.js"
           ],
           "sync": [
@@ -78,7 +78,7 @@
       "assets": {
         "js": {
           "async": [
-            "__mf/js/async/110.e82fda83.js"
+            "__mf/js/async/964.6dfbf211.js"
           ],
           "sync": [
             "__mf/js/async/214.2d4431c6.js",
@@ -94,21 +94,21 @@
     {
       "id": "TimeSeriesChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.51.0-beta.1",
+      "version": "0.51.0-rc.1",
       "singleton": true,
-      "requiredVersion": "^0.51.0-beta.1",
+      "requiredVersion": "^0.51.0-rc.1",
       "assets": {
         "js": {
           "async": [
-            "__mf/js/async/110.e82fda83.js",
+            "__mf/js/async/964.6dfbf211.js",
             "__mf/js/async/173.f6f7e45b.js",
             "__mf/js/async/960.3047096d.js",
             "__mf/js/async/770.78a741ab.js",
-            "__mf/js/async/740.67107c3c.js",
-            "__mf/js/async/75.5952779d.js"
+            "__mf/js/async/75.5952779d.js",
+            "__mf/js/async/740.67107c3c.js"
           ],
           "sync": [
-            "__mf/js/async/357.397150dd.js"
+            "__mf/js/async/171.598de6a9.js"
           ]
         },
         "css": {
@@ -120,29 +120,31 @@
     {
       "id": "TimeSeriesChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.51.0-beta.1",
+      "version": "0.51.0-rc.1",
       "singleton": true,
-      "requiredVersion": "^0.51.0-beta.1",
+      "requiredVersion": "^0.51.0-rc.1",
       "assets": {
         "js": {
           "async": [
-            "__mf/js/async/110.e82fda83.js",
+            "__mf/js/async/964.6dfbf211.js",
             "__mf/js/async/173.f6f7e45b.js",
             "__mf/js/async/960.3047096d.js",
             "__mf/js/async/770.78a741ab.js",
-            "__mf/js/async/224.ce414ffb.js",
-            "__mf/js/async/740.67107c3c.js",
             "__mf/js/async/238.625b8a48.js",
+            "__mf/js/async/224.ce414ffb.js",
             "__mf/js/async/75.5952779d.js",
-            "__mf/js/async/996.7bede0b2.js",
-            "__mf/js/async/357.397150dd.js",
-            "__mf/js/async/511.754bc334.js",
+            "__mf/js/async/740.67107c3c.js",
+            "__mf/js/async/281.a2a87c37.js",
+            "__mf/js/async/476.45fca8d3.js",
+            "__mf/js/async/171.598de6a9.js",
+            "__mf/js/async/879.24def15a.js",
             "__mf/js/async/738.0a12bb44.js",
-            "__mf/js/async/610.df049245.js",
+            "__mf/js/async/223.def4d0a9.js",
+            "__mf/js/async/409.b4cabab7.js",
             "__mf/js/async/981.77f901c0.js"
           ],
           "sync": [
-            "__mf/js/async/162.5d97bc19.js"
+            "__mf/js/async/845.6d99c354.js"
           ]
         },
         "css": {
@@ -182,7 +184,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/610.df049245.js"
+            "__mf/js/async/409.b4cabab7.js"
           ]
         },
         "css": {
@@ -219,7 +221,7 @@
       "assets": {
         "js": {
           "async": [
-            "__mf/js/async/110.e82fda83.js"
+            "__mf/js/async/964.6dfbf211.js"
           ],
           "sync": [
             "__mf/js/async/173.f6f7e45b.js"
@@ -241,7 +243,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/110.e82fda83.js"
+            "__mf/js/async/964.6dfbf211.js"
           ]
         },
         "css": {
@@ -281,29 +283,31 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/511.754bc334.js",
+            "__mf/js/async/281.a2a87c37.js",
             "__mf/js/async/780.3fa36115.js",
-            "__mf/js/async/964.8be59ce0.js",
-            "__mf/js/async/__federation_expose_TimeSeriesChart.a02bcd07.js"
+            "__mf/js/async/879.24def15a.js",
+            "__mf/js/async/223.def4d0a9.js",
+            "__mf/js/async/359.18a264e7.js",
+            "__mf/js/async/__federation_expose_TimeSeriesChart.1e16af77.js"
           ],
           "async": [
-            "__mf/js/async/110.e82fda83.js",
+            "__mf/js/async/964.6dfbf211.js",
             "__mf/js/async/173.f6f7e45b.js",
             "__mf/js/async/960.3047096d.js",
             "__mf/js/async/770.78a741ab.js",
-            "__mf/js/async/238.625b8a48.js",
             "__mf/js/async/224.ce414ffb.js",
-            "__mf/js/async/292.311e6eb0.js",
-            "__mf/js/async/996.7bede0b2.js",
-            "__mf/js/async/754.a8adddbc.js",
-            "__mf/js/async/357.397150dd.js",
             "__mf/js/async/740.67107c3c.js",
+            "__mf/js/async/238.625b8a48.js",
             "__mf/js/async/75.5952779d.js",
+            "__mf/js/async/292.311e6eb0.js",
+            "__mf/js/async/755.f76e3538.js",
+            "__mf/js/async/476.45fca8d3.js",
+            "__mf/js/async/171.598de6a9.js",
             "__mf/js/async/lib-router.098fc614.js",
-            "__mf/js/async/162.5d97bc19.js",
+            "__mf/js/async/845.6d99c354.js",
             "__mf/js/async/488.0d0b1a91.js",
             "__mf/js/async/738.0a12bb44.js",
-            "__mf/js/async/610.df049245.js",
+            "__mf/js/async/409.b4cabab7.js",
             "__mf/js/async/981.77f901c0.js"
           ]
         },