@perses-dev/timeseries-chart-plugin 0.13.0-beta.2 → 0.13.0-rc.0

package/lib/annotations/AnnotationTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/annotations/AnnotationTooltip.tsx"],"sourcesContent":["// Copyright 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\nimport { Box, Divider, Portal, Stack, Typography } from '@mui/material';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport useResizeObserver from 'use-resize-observer';\nimport type { LineSeriesOption } from 'echarts';\nimport {\n  assembleTransform,\n  CursorCoordinates,\n  getDateAndTime,\n  getTooltipStyles,\n  PIN_TOOLTIP_HELP_TEXT,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  UNPIN_TOOLTIP_HELP_TEXT,\n  useMousePosition,\n} from '@perses-dev/components';\nimport { DEFAULT_ANNOTATION_COLOR } from '@perses-dev/plugin-system';\nimport { TimeSeriesAnnotation } from '../utils/annotation';\n\nexport interface AnnotationTooltipProps {\n  annotation: TimeSeriesAnnotation;\n  containerId?: string;\n  formatWithUserTimeZone: (date: Date, formatString: string) => string;\n  pinnedPos: CursorCoordinates | null;\n  enablePinning?: boolean;\n  onUnpinClick?: () => void;\n}\n\nexport function AnnotationTooltip({\n  annotation,\n  containerId,\n  formatWithUserTimeZone,\n  pinnedPos,\n  enablePinning = true,\n  onUnpinClick,\n}: AnnotationTooltipProps): JSX.Element | null {\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver<HTMLDivElement>();\n\n  const isPinned = pinnedPos !== null;\n  if (!isPinned && mousePos === null) return null;\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n  const transform = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  const start = getDateAndTime(annotation.start, formatWithUserTimeZone);\n  const end = annotation.end !== undefined ? getDateAndTime(annotation.end, formatWithUserTimeZone) : null;\n\n  return (\n    <Portal container={containerElement}>\n      <Box ref={tooltipRef} sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)} style={{ transform }}>\n        <Stack spacing={0.5}>\n          <Box\n            sx={(theme) => ({\n              width: '100%',\n              maxWidth: TOOLTIP_MAX_WIDTH,\n              padding: theme.spacing(1.5, 2, 0.5, 2),\n              backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n              position: 'sticky',\n              top: 0,\n              left: 0,\n            })}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', paddingBottom: 0.5, width: '100%' }}>\n              <Box\n                sx={{\n                  width: 8,\n                  height: 8,\n                  borderRadius: '50%',\n                  backgroundColor: annotation.color ?? DEFAULT_ANNOTATION_COLOR,\n                  marginRight: 1,\n                  flexShrink: 0,\n                }}\n              />\n              <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n                <Typography variant=\"caption\">\n                  {start.formattedDate} - <strong>{start.formattedTime}</strong>\n                </Typography>\n                {end && (\n                  <>\n                    <Typography variant=\"caption\">{' → '}</Typography>\n                    <Typography variant=\"caption\">\n                      {end.formattedDate} - <strong>{end.formattedTime}</strong>\n                    </Typography>\n                  </>\n                )}\n              </Box>\n              {enablePinning && (\n                <Stack direction=\"row\" alignItems=\"center\" sx={{ marginLeft: 1, flexShrink: 0 }}>\n                  <Typography sx={{ marginRight: 0.5, fontSize: 11, verticalAlign: 'middle' }}>\n                    {isPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT}\n                  </Typography>\n                  {isPinned ? (\n                    <Pin\n                      onClick={() => {\n                        if (onUnpinClick !== undefined) onUnpinClick();\n                      }}\n                      sx={{ fontSize: 16, cursor: 'pointer' }}\n                    />\n                  ) : (\n                    <PinOutline sx={{ fontSize: 16 }} />\n                  )}\n                </Stack>\n              )}\n            </Box>\n            <Divider sx={(theme) => ({ width: '100%', borderColor: theme.palette.grey['500'] })} />\n          </Box>\n          <Box sx={(theme) => ({ padding: theme.spacing(0.5, 2, 1.5, 2) })}>\n            {annotation.title && (\n              <Typography variant=\"caption\" sx={{ display: 'block', fontWeight: 'bold', marginBottom: 0.5 }}>\n                {annotation.title}\n              </Typography>\n            )}\n            {annotation.legend && (\n              <Typography variant=\"caption\" sx={{ display: 'block', marginBottom: 0.5 }}>\n                {annotation.legend}\n              </Typography>\n            )}\n            {annotation.tags && Object.keys(annotation.tags).length > 0 && (\n              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, marginTop: 0.5 }}>\n                {Object.entries(annotation.tags).map(([key, value]) => (\n                  <Box\n                    key={key}\n                    sx={(theme) => ({\n                      backgroundColor: theme.palette.grey['700'],\n                      borderRadius: '4px',\n                      padding: '2px 6px',\n                      fontSize: '0.7rem',\n                      fontFamily: 'monospace',\n                    })}\n                  >\n                    {key}: {value}\n                  </Box>\n                ))}\n              </Box>\n            )}\n          </Box>\n        </Stack>\n      </Box>\n    </Portal>\n  );\n}\n\n/**\n * Build ECharts series options for rendering annotations as markArea (range),\n * markLine (vertical dashed lines) and markPoint (triangle markers under the X-axis).\n */\nexport function buildAnnotationSeries(annotations: TimeSeriesAnnotation[] | undefined): LineSeriesOption[] {\n  if (!annotations?.length) return [];\n\n  const markAreaData: Array<[{ xAxis: number; itemStyle?: { color: string; opacity: number } }, { xAxis: number }]> =\n    [];\n  const markLineData: Array<{\n    xAxis: number;\n    lineStyle?: { color: string; width: number; type: 'dashed' | 'solid' | 'dotted' };\n    label?: { show: boolean };\n    annotationIndex?: number;\n  }> = [];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const markPointData: any[] = [];\n\n  annotations.forEach((annotation, index) => {\n    const color = annotation.color ?? DEFAULT_ANNOTATION_COLOR;\n    const opacity = 0.3;\n\n    if (annotation.end !== undefined) {\n      // Range annotation - use markArea and markLine (silent) + markers at start/end\n      markLineData.push({\n        xAxis: annotation.start,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      markLineData.push({\n        xAxis: annotation.end,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      markAreaData.push([\n        {\n          xAxis: annotation.start,\n          itemStyle: { color, opacity },\n        },\n        { xAxis: annotation.end },\n      ]);\n\n      // Add start and end markers\n      for (const isStart of [true, false]) {\n        markPointData.push({\n          coord: [isStart ? annotation.start : annotation.end, 0],\n          symbol: 'triangle',\n          symbolSize: [12, 12],\n          symbolRotate: 0,\n          symbolOffset: [0, 4], // Position below X-axis\n          itemStyle: { color },\n          annotationIndex: index,\n          emphasis: {\n            disabled: true,\n          },\n          isStart: isStart,\n          isEnd: !isStart,\n        });\n      }\n    } else {\n      // Point annotation - use markLine (silent) + single marker\n      markLineData.push({\n        xAxis: annotation.start,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      // Add point marker\n      markPointData.push({\n        coord: [annotation.start, 0],\n        symbol: 'triangle',\n        symbolSize: [12, 10],\n        symbolRotate: 0,\n        symbolOffset: [0, '120%'], // Position below X-axis\n        itemStyle: { color },\n        annotationIndex: index,\n        isPoint: true,\n      });\n    }\n  });\n\n  const series: LineSeriesOption = {\n    type: 'line',\n    data: [],\n    silent: false,\n    markArea:\n      markAreaData.length > 0\n        ? {\n            silent: true, // Make area silent, only markers are interactive\n            data: markAreaData,\n            label: {\n              show: false,\n            },\n          }\n        : undefined,\n    markLine:\n      markLineData.length > 0\n        ? {\n            silent: true, // Non-interactive: hovering the dashed line keeps the TimeSeries tooltip\n            symbol: ['none', 'none'],\n            data: markLineData,\n            lineStyle: {\n              type: 'dashed',\n            },\n          }\n        : undefined,\n    markPoint:\n      markPointData.length > 0\n        ? {\n            silent: false, // Markers are interactive\n            data: markPointData,\n            label: {\n              show: false,\n            },\n          }\n        : undefined,\n  };\n\n  return [series];\n}\n"],"names":["Box","Divider","Portal","Stack","Typography","Pin","PinOutline","useResizeObserver","assembleTransform","getDateAndTime","getTooltipStyles","PIN_TOOLTIP_HELP_TEXT","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","UNPIN_TOOLTIP_HELP_TEXT","useMousePosition","DEFAULT_ANNOTATION_COLOR","AnnotationTooltip","annotation","containerId","formatWithUserTimeZone","pinnedPos","enablePinning","onUnpinClick","mousePos","height","width","ref","tooltipRef","isPinned","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","transform","start","end","container","sx","theme","style","spacing","maxWidth","padding","backgroundColor","palette","designSystem","grey","position","top","left","display","alignItems","paddingBottom","borderRadius","color","marginRight","flexShrink","flexGrow","minWidth","variant","formattedDate","strong","formattedTime","direction","marginLeft","fontSize","verticalAlign","onClick","cursor","borderColor","title","fontWeight","marginBottom","legend","tags","Object","keys","length","flexWrap","gap","marginTop","entries","map","key","value","fontFamily","buildAnnotationSeries","annotations","markAreaData","markLineData","markPointData","forEach","index","opacity","push","xAxis","lineStyle","type","label","show","annotationIndex","itemStyle","isStart","coord","symbol","symbolSize","symbolRotate","symbolOffset","emphasis","disabled","isEnd","isPoint","series","data","silent","markArea","markLine","markPoint"],"mappings":"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"}

package/lib/cjs/QuerySettingsEditor.js

@@ -225,12 +225,41 @@ function QuerySettingsEditor(props) {
             qs.format = undefined;
         });
     };
+    const addStack = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.stack = false;
+        });
+    };
+    const removeStack = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.stack = undefined;
+        });
+    };
+    const handleStackChange = (i, checked)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.stack = checked;
+        });
+    };
     const handleFormatChange = (i, format)=>{
         updateQuerySettings(i, (qs)=>{
             qs.format = format;
         });
     };
-    const queryCount = (0, _pluginsystem.useQueryCountContext)();
+    const addNegativeY = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.negativeY = true;
+        });
+    };
+    const removeNegativeY = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.negativeY = undefined;
+        });
+    };
+    const { queryDefinitions } = (0, _pluginsystem.useDataQueriesContext)();
+    const queryCount = queryDefinitions.length;
+    const queryNames = (0, _react.useMemo)(()=>(0, _pluginsystem.generateQueryNames)(queryDefinitions), [
+        queryDefinitions
+    ]);
     // Compute the list of query indexes for which query settings are not already defined.
     // This is to avoid already-booked indexes to still be selectable in the dropdown(s)
     const availableQueryIndexes = (0, _react.useMemo)(()=>{
@@ -269,10 +298,11 @@ function QuerySettingsEditor(props) {
                 mb: 2,
                 fontStyle: "italic",
                 children: "No query defined"
-            }) : querySettingsList?.length && querySettingsList.map((querySettings, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(QuerySettingsInput, {
+            }) : querySettingsList?.map((querySettings, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(QuerySettingsInput, {
                     inputRef: i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined,
                     querySettings: querySettings,
                     availableQueryIndexes: availableQueryIndexes,
+                    queryNames: queryNames,
                     onQueryIndexChange: (e)=>{
                         handleQueryIndexChange(e, i);
                     },
@@ -291,7 +321,12 @@ function QuerySettingsEditor(props) {
                     onRemoveAreaOpacity: ()=>removeAreaOpacity(i),
                     onAddFormat: ()=>addFormat(i),
                     onRemoveFormat: ()=>removeFormat(i),
-                    onFormatChange: (format)=>handleFormatChange(i, format)
+                    onFormatChange: (format)=>handleFormatChange(i, format),
+                    onAddNegativeY: ()=>addNegativeY(i),
+                    onRemoveNegativeY: ()=>removeNegativeY(i),
+                    onAddStack: ()=>addStack(i),
+                    onRemoveStack: ()=>removeStack(i),
+                    onStackChange: (checked)=>handleStackChange(i, checked)
                 }, i)),
             queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                 variant: "contained",
@@ -305,7 +340,7 @@ function QuerySettingsEditor(props) {
         ]
     });
 }
-function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity, onAddFormat, onRemoveFormat, onFormatChange }) {
+function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format, negativeY, stack }, availableQueryIndexes, queryNames, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity, onAddFormat, onRemoveFormat, onFormatChange, onAddNegativeY, onRemoveNegativeY, onAddStack, onRemoveStack, onStackChange }) {
     // current query index should also be selectable
     const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b)=>a - b);
     // State for dropdown menu
@@ -333,16 +368,30 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
             label: 'Format',
             action: onAddFormat
         });
+        if (!negativeY) options.push({
+            key: 'negativeY',
+            label: 'Negative Y',
+            action: onAddNegativeY
+        });
+        if (stack === undefined) options.push({
+            key: 'stack',
+            label: 'Stack',
+            action: onAddStack
+        });
         return options;
     }, [
         colorMode,
         lineStyle,
         areaOpacity,
         format,
+        negativeY,
+        stack,
         onAddColor,
         onAddLineStyle,
         onAddAreaOpacity,
-        onAddFormat
+        onAddFormat,
+        onAddNegativeY,
+        onAddStack
     ]);
     const handleAddMenuClick = (event)=>{
         if (availableOptions.length === 1 && availableOptions[0]) {
@@ -389,12 +438,9 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
                         sx: {
                             minWidth: '75px'
                         },
-                        children: selectableQueryIndexes.map((qi)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
+                        children: selectableQueryIndexes.map((qi)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                                 value: qi,
-                                children: [
-                                    "#",
-                                    qi + 1
-                                ]
+                                children: queryNames[qi] ?? `#${qi + 1}`
                             }, `query-${qi}`))
                     }),
                     colorMode && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
@@ -421,7 +467,7 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
                                 ]
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsColorPicker, {
-                                label: `Query n°${queryIndex + 1}`,
+                                label: queryNames[queryIndex] ?? `Query n°${queryIndex + 1}`,
                                 color: colorValue || DEFAULT_COLOR_VALUE,
                                 onColorChange: onColorValueChange
                             })
@@ -489,6 +535,39 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
                             })
                         })
                     }),
+                    negativeY && /*#__PURE__*/ (0, _jsxruntime.jsx)(SettingsSection, {
+                        label: "Negative Y",
+                        onRemove: onRemoveNegativeY,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            sx: {
+                                flexGrow: 1,
+                                py: 0.5
+                            },
+                            children: "Series rendered below the X axis"
+                        })
+                    }),
+                    stack !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
+                        label: "Stack",
+                        onRemove: onRemoveStack,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                checked: stack,
+                                onChange: (e)=>onStackChange(e.target.checked),
+                                slotProps: {
+                                    input: {
+                                        'aria-label': 'stack override'
+                                    }
+                                }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                                sx: {
+                                    flexGrow: 1
+                                }
+                            })
+                        ]
+                    }),
                     availableOptions.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
@@ -531,7 +610,7 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
                     justifyContent: 'center'
                 },
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                    "aria-label": `delete settings for query n°${queryIndex + 1}`,
+                    "aria-label": `delete settings for ${queryNames[queryIndex] ?? `query n°${queryIndex + 1}`}`,
                     onClick: onDelete,
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
                 })

package/lib/cjs/TimeSeriesChartBase.js

@@ -31,6 +31,7 @@ const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _components1 = require("@perses-dev/components");
 const _timezoneformatter = require("./utils/timezone-formatter");
+const _AnnotationTooltip = require("./annotations/AnnotationTooltip");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -50,7 +51,7 @@ function _interop_require_default(obj) {
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, seriesFormatMap, grid, isStackedBar = false, tooltipConfig = _components1.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
+const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height, data, seriesMapping, annotations, timeScale: timeScaleProp, yAxis, format, seriesFormatMap, grid, isStackedBar = false, tooltipConfig = _components1.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
     const { chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = (0, _components1.useChartsContext)();
     const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
     const chartRef = (0, _react.useRef)();
@@ -59,7 +60,10 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
     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)();
+    const [hoveredAnnotation, setHoveredAnnotation] = (0, _react.useState)(null);
+    const [pinnedAnnotation, setPinnedAnnotation] = (0, _react.useState)(null);
+    const [pinnedAnnotationPos, setPinnedAnnotationPos] = (0, _react.useState)(null);
+    const { timeZone, formatWithUserTimeZone } = (0, _components1.useTimeZone)();
     const getTimezoneAwareAxisFormatter = (0, _react.useCallback)((rangeMs)=>(0, _timezoneformatter.createTimezoneAwareAxisFormatter)(rangeMs, timeZone), [
         timeZone
     ]);
@@ -130,11 +134,44 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
                 if (chartRef.current !== undefined) {
                     (0, _components1.enableDataZoom)(chartRef.current);
                 }
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            mouseover: (params)=>{
+                // Only markPoint (triangles under the X-axis) opens the annotation tooltip.
+                // Hovering markLine or anything else keeps the regular TimeSeries tooltip visible
+                // and clears any stale hovered annotation (mouseout is sometimes missed by ECharts).
+                if (annotations && params.componentType === 'markPoint' && params.data?.annotationIndex !== undefined) {
+                    const matchedAnnotation = annotations[params.data.annotationIndex] || null;
+                    if (matchedAnnotation) {
+                        setHoveredAnnotation(matchedAnnotation);
+                        return;
+                    }
+                }
+                setHoveredAnnotation(null);
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            mouseout: (params)=>{
+                if (annotations && params.componentType === 'markPoint' && params.data?.annotationIndex !== undefined && annotations) {
+                    // Only clear if the mouseout corresponds to the currently hovered annotation, so that
+                    // a quick move from one markPoint to another isn't cancelled by a late mouseout event.
+                    const leaving = annotations[params.data.annotationIndex] || null;
+                    setHoveredAnnotation((current)=>current === leaving ? null : current);
+                }
+            },
+            globalout: ()=>{
+                if (annotations) {
+                    // Cursor left the chart canvas — guarantee the annotation tooltip is dismissed.
+                    setHoveredAnnotation(null);
+                }
             }
         };
     }, [
-        onDataZoom,
-        setTooltipPinnedCoords
+        annotations,
+        onDataZoom
+    ]);
+    // Generate annotation series for ECharts markArea (range), markLine (point), and markPoint (markers under X-axis)
+    const annotationSeries = (0, _react.useMemo)(()=>(0, _AnnotationTooltip.buildAnnotationSeries)(annotations), [
+        annotations
     ]);
     const { noDataOption } = chartsTheme;
     const option = (0, _react.useMemo)(()=>{
@@ -165,8 +202,12 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
         });
         const updatedSeriesMapping = enablePinning && pinnedCrosshair !== null ? [
             ...seriesMapping,
-            pinnedCrosshair
-        ] : seriesMapping;
+            pinnedCrosshair,
+            ...annotationSeries
+        ] : [
+            ...seriesMapping,
+            ...annotationSeries
+        ];
         const option = {
             dataset: dataset,
             series: updatedSeriesMapping,
@@ -218,6 +259,7 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
     }, [
         data,
         seriesMapping,
+        annotationSeries,
         timeScale,
         yAxis,
         format,
@@ -258,6 +300,34 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
         //   e.preventDefault(); // Prevent the default behaviour when right clicked
         // }}
         onClick: (e)=>{
+            // If clicking while hovering an annotation, toggle the annotation tooltip pin
+            // instead of pinning the TimeChartTooltip, so pinned TimeChartTooltip is preserved.
+            if (hoveredAnnotation !== null && e.target instanceof HTMLCanvasElement) {
+                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
+                };
+                setPinnedAnnotation((current)=>{
+                    if (current === hoveredAnnotation) {
+                        setPinnedAnnotationPos(null);
+                        return null;
+                    }
+                    setPinnedAnnotationPos(pinnedPos);
+                    return hoveredAnnotation;
+                });
+                return;
+            }
             // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down
             const isControlKeyPressed = e.ctrlKey || e.metaKey;
             if (isControlKeyPressed) {
@@ -350,6 +420,8 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
             if (tooltipPinnedCoords === null) {
                 setShowTooltip(false);
             }
+            // Defensive: clear hovered annotation in case ECharts missed a mouseout event.
+            setHoveredAnnotation(null);
             if (chartRef.current !== undefined) {
                 (0, _components1.clearHighlightedSeries)(chartRef.current);
             }
@@ -372,7 +444,7 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
             }
         },
         children: [
-            showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.TimeChartTooltip, {
+            showTooltip === true && (tooltipPinnedCoords !== null || hoveredAnnotation === null) && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.TimeChartTooltip, {
                 containerId: chartsTheme.tooltipPortalContainerId,
                 chartRef: chartRef,
                 data: data,
@@ -389,6 +461,17 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
                     setPinnedCrosshair(null);
                 }
             }),
+            (pinnedAnnotation ?? hoveredAnnotation) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_AnnotationTooltip.AnnotationTooltip, {
+                annotation: pinnedAnnotation ?? hoveredAnnotation,
+                containerId: chartsTheme.tooltipPortalContainerId,
+                formatWithUserTimeZone: formatWithUserTimeZone,
+                pinnedPos: pinnedAnnotation !== null ? pinnedAnnotationPos : null,
+                enablePinning: isPinningEnabled,
+                onUnpinClick: ()=>{
+                    setPinnedAnnotation(null);
+                    setPinnedAnnotationPos(null);
+                }
+            }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.EChart, {
                 sx: {
                     width: '100%',

package/lib/cjs/TimeSeriesChartPanel.js

@@ -26,10 +26,12 @@ const _material = require("@mui/material");
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
+const _dashboards = require("@perses-dev/dashboards");
 const _timeserieschartmodel = require("./time-series-chart-model");
 const _datatransform = require("./utils/data-transform");
 const _palettegen = require("./utils/palette-gen");
 const _TimeSeriesChartBase = require("./TimeSeriesChartBase");
+const _annotation = require("./utils/annotation");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -107,6 +109,10 @@ function TimeSeriesChartPanel(props) {
     const [selectedLegendItems, setSelectedLegendItems] = (0, _react.useState)('ALL');
     const [legendSorting, setLegendSorting] = (0, _react.useState)();
     const { setTimeRange } = (0, _pluginsystem.useTimeRange)();
+    const annotationsWithData = (0, _dashboards.useAnnotationsWithData)();
+    const annotations = (0, _react.useMemo)(()=>(0, _annotation.convertAnnotationToTimeSeriesAnnotation)(annotationsWithData), [
+        annotationsWithData
+    ]);
     // Populate series data based on query results
     const { timeScale, timeChartData, timeSeriesMapping, legendItems, seriesFormatMap: computedSeriesFormatMap, maxValuesByFormat } = (0, _react.useMemo)(()=>{
         const timeScale = (0, _datatransform.getCommonTimeScaleForQueries)(queryResults);
@@ -197,9 +203,21 @@ function TimeSeriesChartPanel(props) {
                                 }
                             }
                         }
+                        // When negativeY is set on this query, negate the rendered values so the
+                        // series renders below the X axis. The original (positive) values are
+                        // preserved in `timeSeries.values` (used for legend calculations) and in
+                        // `queryResults` (used for CSV export).
+                        const baseValues = (0, _components.getTimeSeriesValues)(timeSeries, timeScale);
+                        const renderedValues = querySettings?.negativeY ? baseValues.map((tuple)=>{
+                            const [t, v] = tuple;
+                            return [
+                                t,
+                                v === null ? null : -v
+                            ];
+                        }) : baseValues;
                         timeChartData.push({
                             name: formattedSeriesName,
-                            values: (0, _components.getTimeSeriesValues)(timeSeries, timeScale)
+                            values: renderedValues
                         });
                     }
                     if (legend && legendItems) {
@@ -355,8 +373,10 @@ function TimeSeriesChartPanel(props) {
             end: new Date(event.end)
         });
     };
-    // Used to opt in to ECharts trigger item which show subgroup data accurately
-    const isStackedBar = visual.display === 'bar' && visual.stack === 'all';
+    // Used to opt in to ECharts trigger item which show subgroup data accurately.
+    // Derived from the actual series mapping rather than `visual.stack` alone so that
+    // bar charts stacked only via per-query overrides also use the right tooltip mode.
+    const isStackedBar = visual.display === 'bar' && timeSeriesMapping.some((s)=>s?.type === 'bar' && s.stack === 'all');
     // Turn on tooltip pinning by default but opt out for stacked bar or if explicitly set in tooltip panel spec
     let enablePinning = true;
     if (isStackedBar) {
@@ -414,6 +434,7 @@ function TimeSeriesChartPanel(props) {
                             height: height,
                             data: timeChartData,
                             seriesMapping: timeSeriesMapping,
+                            annotations: annotations,
                             timeScale: timeScale,
                             yAxis: multipleYAxes ?? echartsYAxis,
                             format: format,