ref(echarts): Improve mouse event types and add "onMouseOut" event (#34397)

This improves the echarts mouse event types and adds an additional `onMouseOut` event.

static/app/components/charts/baseChart.tsx

@@ -34,6 +34,7 @@ import {
   EChartEventHandler,
   EChartFinishedHandler,
   EChartHighlightHandler,
+  EChartMouseOutHandler,
   EChartMouseOverHandler,
   EChartRenderedHandler,
   EChartRestoreHandler,
@@ -191,6 +192,7 @@ type Props = {
     selected: Record<string, boolean>;
     type: 'legendselectchanged';
   }>;
+  onMouseOut?: EChartMouseOutHandler;
   onMouseOver?: EChartMouseOverHandler;
   onRendered?: EChartRenderedHandler;
   /**
@@ -318,6 +320,7 @@ function BaseChartUnwrapped({
   onClick,
   onLegendSelectChanged,
   onHighlight,
+  onMouseOut,
   onMouseOver,
   onDataZoom,
   onRestore,
@@ -511,6 +514,7 @@ function BaseChartUnwrapped({
           onClick?.(props, instance);
         },
         highlight: (props, instance) => onHighlight?.(props, instance),
+        mouseout: (props, instance) => onMouseOut?.(props, instance),
         mouseover: (props, instance) => onMouseOver?.(props, instance),
         datazoom: (props, instance) => onDataZoom?.(props, instance),
         restore: (props, instance) => onRestore?.(props, instance),
@@ -519,7 +523,17 @@ function BaseChartUnwrapped({
         legendselectchanged: (props, instance) =>
           onLegendSelectChanged?.(props, instance),
       } as ReactEchartProps['onEvents']),
-    [onclick, onHighlight, onMouseOver, onDataZoom, onRestore, onFinished, onRendered]
+    [
+      onClick,
+      onHighlight,
+      onLegendSelectChanged,
+      onMouseOut,
+      onMouseOver,
+      onDataZoom,
+      onRestore,
+      onFinished,
+      onRendered,
+    ]
   );
 
   return (

static/app/types/echarts.tsx

@@ -37,9 +37,48 @@ export type EChartChartReadyHandler = (instance: ECharts) => void;
 
 export type EChartHighlightHandler = EChartEventHandler<any>;
 
-export type EChartMouseOverHandler = EChartEventHandler<any>;
+/**
+ * XXX: These are incomplete types and can also vary depending on the component type
+ *
+ * Taken from https://echarts.apache.org/en/api.html#events.Mouse%20events
+ */
+interface EChartMouseEventParam {
+  // color of component (make sense when componentType is 'series')
+  color: string;
+  // type of the component to which the clicked glyph belongs
+  // i.e., 'series', 'markLine', 'markPoint', 'timeLine'
+  componentType: string;
+  // incoming raw data item
+  data: Record<string, any>;
+  // data index in incoming data array
+  dataIndex: number;
+  // Some series, such as sankey or graph, maintains more than
+  // one types of data (nodeData and edgeData), which can be
+  // distinguished from each other by dataType with its value
+  // 'node' and 'edge'.
+  // On the other hand, most series has only one type of data,
+  // where dataType is not needed.
+  dataType: string;
+  // data name, category name
+  name: string;
 
-export type EChartClickHandler = EChartEventHandler<any>;
+  seriesId: string;
+  // series index in incoming option.series (make sense when componentType is 'series')
+  seriesIndex: number;
+  // series name (make sense when componentType is 'series')
+  seriesName: string;
+  // series type (make sense when componentType is 'series')
+  // i.e., 'line', 'bar', 'pie'
+  seriesType: string;
+  // incoming data value
+  value: number | number[];
+}
+
+export type EChartMouseOutHandler = EChartEventHandler<EChartMouseEventParam>;
+
+export type EChartMouseOverHandler = EChartEventHandler<EChartMouseEventParam>;
+
+export type EChartClickHandler = EChartEventHandler<EChartMouseEventParam>;
 
 export type EChartDataZoomHandler = EChartEventHandler<{
   /**

static/app/views/releases/list/releasesAdoptionChart.tsx

@@ -36,6 +36,7 @@ import {URL_PARAM} from 'sentry/constants/pageFilters';
 import {t, tct, tn} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization, PageFilters, SessionApiResponse} from 'sentry/types';
+import {EChartClickHandler} from 'sentry/types/echarts';
 import {formatVersion} from 'sentry/utils/formatters';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {getAdoptionSeries, getCount} from 'sentry/utils/sessions';
@@ -114,7 +115,7 @@ class ReleasesAdoptionChart extends Component<Props> {
     }));
   }
 
-  handleClick = (params: {seriesId: string}) => {
+  handleClick: EChartClickHandler = params => {
     const {organization, router, selection, location} = this.props;
 
     const project = selection.projects[0];