[FEATURE] Add horizontal crosshair option to TimeSeriesChart plugin

docs/timeserieschart/model.md

@@ -24,6 +24,15 @@ See [common plugin definitions](https://perses.dev/perses/docs/plugins/common/#c
 
 ```yaml
 enablePinning: <boolean | default = false> # Optional
+axisPointer: <AxisPointer specification> # Optional
+```
+
+### AxisPointer specification
+
+```yaml
+# "cross" adds a horizontal line at the cursor's y position while hovering the panel.
+# The horizontal line only shows on the hovered panel.
+type: <enum = "cross"> # Optional
 ```
 
 ## YAxis specification

timeserieschart/schemas/tests/invalid/time-series-tooltip-axis-pointer-invalid-type.json

@@ -0,0 +1,10 @@
+{
+  "kind": "TimeSeriesChart",
+  "spec": {
+    "tooltip": {
+      "axisPointer": {
+        "type": "shadow"
+      }
+    }
+  }
+}

timeserieschart/schemas/tests/valid/time-series-tooltip-cross.json

@@ -0,0 +1,11 @@
+{
+  "kind": "TimeSeriesChart",
+  "spec": {
+    "tooltip": {
+      "enablePinning": true,
+      "axisPointer": {
+        "type": "cross"
+      }
+    }
+  }
+}

timeserieschart/schemas/time-series.cue

@@ -29,6 +29,9 @@ spec: close({
 
 #tooltip: {
 	enablePinning?: bool
+	axisPointer?: {
+		type?: "cross"
+	}
 }
 
 #palette: {

timeserieschart/src/TimeSeriesChartBase.tsx

@@ -67,6 +67,7 @@ import type { MouseEvent } from 'react';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 
 import { AnnotationTooltip, buildAnnotationSeries } from './annotations/AnnotationTooltip';
+import type { TooltipAxisPointerOptions } from './time-series-chart-model';
 import type { TimeSeriesAnnotation } from './utils/annotation';
 import { createTimezoneAwareAxisFormatter } from './utils/timezone-formatter';
 
@@ -99,6 +100,7 @@ export interface TimeChartProps {
   seriesFormatMap?: Map<string, FormatOptions>;
   grid?: GridComponentOption;
   tooltipConfig?: TooltipConfig;
+  axisPointer?: TooltipAxisPointerOptions;
   noDataVariant?: 'chart' | 'message';
   syncGroup?: string;
   isStackedBar?: boolean;
@@ -120,6 +122,7 @@ export const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(fun
     grid,
     isStackedBar = false,
     tooltipConfig = DEFAULT_TOOLTIP_CONFIG,
+    axisPointer,
     noDataVariant = 'message',
     syncGroup,
     onDataZoom,
@@ -133,6 +136,7 @@ export const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(fun
   const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
   const chartRef = useRef<EChartsInstance>();
   const [showTooltip, setShowTooltip] = useState<boolean>(true);
+  const [isHovered, setIsHovered] = useState<boolean>(false);
   const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);
   const [pinnedCrosshair, setPinnedCrosshair] = useState<LineSeriesOption | null>(null);
   const [isDragging, setIsDragging] = useState(false);
@@ -252,6 +256,8 @@ export const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(fun
 
   const { noDataOption } = chartsTheme;
 
+  const axisPointerType = axisPointer?.type;
+
   const option: EChartsCoreOption = useMemo(() => {
     // The "chart" `noDataVariant` is only used when the `timeSeries` is an
     // empty array because a `null` value will throw an error.
@@ -273,6 +279,16 @@ export const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(fun
         ? [...seriesMapping, pinnedCrosshair, ...annotationSeries]
         : [...seriesMapping, ...annotationSeries];
 
+    const tooltip: TooltipComponentOption = {
+      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,
+      ...(axisPointerType && isHovered ? { axisPointer: { type: axisPointerType, label: { show: false } } } : {}),
+    };
+
     const option: EChartsCoreOption = {
       dataset: dataset,
       series: updatedSeriesMapping,
@@ -291,14 +307,7 @@ export const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(fun
       // If yAxis is already an array (multiple Y axes), use it directly; otherwise use getFormattedAxis
       yAxis: Array.isArray(yAxis) ? yAxis : 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,
-      },
+      tooltip,
       // https://echarts.apache.org/en/option.html#axisPointer
       axisPointer: {
         type: 'line',
@@ -338,6 +347,8 @@ export const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(fun
     enablePinning,
     pinnedCrosshair,
     getTimezoneAwareAxisFormatter,
+    axisPointerType,
+    isHovered,
   ]);
 
   // Update adjacent charts so tooltip is unpinned when current chart is clicked.
@@ -481,6 +492,7 @@ export const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(fun
         setShowTooltip(true);
       }}
       onMouseLeave={() => {
+        setIsHovered(false);
         if (tooltipPinnedCoords === null) {
           setShowTooltip(false);
         }
@@ -491,6 +503,7 @@ export const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(fun
         }
       }}
       onMouseEnter={() => {
+        setIsHovered(true);
         setShowTooltip(true);
         if (chartRef.current !== undefined) {
           enableDataZoom(chartRef.current);

timeserieschart/src/TimeSeriesChartPanel.tsx

@@ -478,6 +478,7 @@ export function TimeSeriesChartPanel(props: TimeSeriesChartProps): ReactElement
     ...DEFAULT_TOOLTIP_CONFIG,
     enablePinning,
   };
+  const axisPointer = isStackedBar ? undefined : tooltip?.axisPointer;
 
   return (
     <Box sx={{ padding: `${contentPadding}px` }}>
@@ -525,6 +526,7 @@ export function TimeSeriesChartPanel(props: TimeSeriesChartProps): ReactElement
                 grid={gridOverrides}
                 isStackedBar={isStackedBar}
                 tooltipConfig={tooltipConfig}
+                axisPointer={axisPointer}
                 syncGroup="default-panel-group" // TODO: make configurable from dashboard settings and per panel-group overrides
                 onDataZoom={handleDataZoom}
                 //  Show an empty chart when there is no data because the user unselected all items in

timeserieschart/src/time-series-chart-model.ts

@@ -66,8 +66,13 @@ export interface TimeSeriesChartYAxisOptions {
   logBase?: LOG_BASE;
 }
 
+export interface TooltipAxisPointerOptions {
+  type?: 'cross';
+}
+
 export interface TooltipSpecOptions {
   enablePinning: boolean;
+  axisPointer?: TooltipAxisPointerOptions;
 }
 
 export interface TimeSeriesChartPaletteOptions {