fix(Echarts): Echarts Legend Scroll fix (#33779)

Co-authored-by: Amaan Nawab <nelsondrew07@gmail.com>

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

@@ -57,6 +57,7 @@ export default function EchartsTimeseries({
   refs,
   emitCrossFilters,
   coltypeMapping,
+  onLegendScroll,
 }: TimeseriesChartTransformedProps) {
   const { stack } = formData;
   const echartRef = useRef<EchartsHandler | null>(null);
@@ -159,6 +160,9 @@ export default function EchartsTimeseries({
     mouseover: params => {
       onFocusedSeries(params.seriesName);
     },
+    legendscroll: payload => {
+      onLegendScroll?.(payload.scrollDataIndex);
+    },
     legendselectchanged: payload => {
       onLegendStateChanged?.(payload.selected);
     },

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -122,6 +122,7 @@ export default function transformProps(
     theme,
     inContextMenu,
     emitCrossFilters,
+    legendIndex,
   } = chartProps;
 
   let focusedSeries: string | null = null;
@@ -467,6 +468,7 @@ export default function transformProps(
     setControlValue = () => {},
     onContextMenu,
     onLegendStateChanged,
+    onLegendScroll,
   } = hooks;
 
   const addYAxisLabelOffset = !!yAxisTitle;
@@ -642,6 +644,7 @@ export default function transformProps(
         legendState,
         padding,
       ),
+      scrollDataIndex: legendIndex || 0,
       data: legendData as string[],
     },
     series: dedupSeries(reorderForecastSeries(series) as SeriesOption[]),
@@ -710,5 +713,6 @@ export default function transformProps(
     },
     refs,
     coltypeMapping: dataTypes,
+    onLegendScroll,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/types.ts

@@ -138,6 +138,7 @@ export interface BaseTransformedProps<F> {
   width: number;
   emitCrossFilters?: boolean;
   coltypeMapping?: Record<string, number>;
+  onLegendScroll?: (currentIndex: number) => void;
 }
 
 export type CrossFilterTransformedProps = {