Legend scroll echarts

superset-frontend/packages/superset-ui-core/src/chart/models/ChartProps.ts

@@ -67,6 +67,8 @@ type Hooks = {
   setDataMask?: SetDataMaskHook;
   /** handle tooltip */
   setTooltip?: HandlerFunction;
+  /* handle legend scroll changes */
+  onLegendScroll?: HandlerFunction;
 } & PlainObject;
 
 /**
@@ -105,6 +107,8 @@ export interface ChartPropsConfig {
   inputRef?: RefObject<any>;
   /** Theme object */
   theme: SupersetTheme;
+  /* legend index */
+  legendIndex?: number;
 }
 
 const DEFAULT_WIDTH = 800;
@@ -135,6 +139,8 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
 
   legendState?: LegendState;
 
+  legendIndex?: number;
+
   queriesData: QueryData[];
 
   width: number;
@@ -164,6 +170,7 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
       ownState = {},
       filterState = {},
       legendState,
+      legendIndex,
       initialValues = {},
       queriesData = [],
       behaviors = [],
@@ -190,6 +197,7 @@ export default class ChartProps<FormData extends RawFormData = RawFormData> {
     this.ownState = ownState;
     this.filterState = filterState;
     this.legendState = legendState;
+    this.legendIndex = legendIndex;
     this.behaviors = behaviors;
     this.displaySettings = displaySettings;
     this.appSection = appSection;
@@ -215,6 +223,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
     input => input.ownState,
     input => input.filterState,
     input => input.legendState,
+    input => input.legendIndex,
     input => input.behaviors,
     input => input.displaySettings,
     input => input.appSection,
@@ -235,6 +244,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
       ownState,
       filterState,
       legendState,
+      legendIndex,
       behaviors,
       displaySettings,
       appSection,
@@ -255,6 +265,7 @@ ChartProps.createSelector = function create(): ChartPropsSelector {
         ownState,
         filterState,
         legendState,
+        legendIndex,
         width,
         behaviors,
         displaySettings,

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

@@ -56,6 +56,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({
     legendselectall: payload => {
       onLegendStateChanged?.(payload.selected);
     },
+    legendscroll: payload => {
+      onLegendScroll?.(payload.scrollDataIndex);
+    },
     legendinverseselect: payload => {
       onLegendStateChanged?.(payload.selected);
     },

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

@@ -116,6 +116,7 @@ export default function transformProps(
     theme,
     inContextMenu,
     emitCrossFilters,
+    legendIndex,
   } = chartProps;
 
   let focusedSeries: string | null = null;
@@ -184,7 +185,6 @@ export default function transformProps(
     zoomable,
   }: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
   const refs: Refs = {};
-
   const labelMap = Object.entries(label_map).reduce((acc, entry) => {
     if (
       entry[1].length > groupby.length &&
@@ -220,6 +220,7 @@ export default function transformProps(
   );
 
   const isMultiSeries = groupby?.length || metrics?.length > 1;
+  const { timeseriesLimitMetric = '' } = formData;
 
   const [rawSeries, sortedTotalValues, minPositiveValue] = extractSeries(
     rebasedData,
@@ -236,6 +237,7 @@ export default function transformProps(
       xAxisSortSeriesAscending: isMultiSeries
         ? xAxisSortSeriesAscending
         : undefined,
+      timeseriesLimitMetric,
     },
   );
   const showValueIndexes = extractShowValueIndexes(rawSeries, {
@@ -424,6 +426,7 @@ export default function transformProps(
     setControlValue = () => {},
     onContextMenu,
     onLegendStateChanged,
+    onLegendScroll,
   } = hooks;
 
   const addYAxisLabelOffset = !!yAxisTitle;
@@ -566,6 +569,7 @@ export default function transformProps(
         zoomable,
         legendState,
       ),
+      scrollDataIndex: legendIndex || 0,
       data: legendData as string[],
     },
     series: dedupSeries(series),
@@ -575,6 +579,7 @@ export default function transformProps(
       right: TIMESERIES_CONSTANTS.toolboxRight,
       feature: {
         dataZoom: {
+          yAxisIndex: false,
           title: {
             zoom: t('zoom area'),
             back: t('restore zoom'),
@@ -621,5 +626,6 @@ export default function transformProps(
     },
     refs,
     coltypeMapping: dataTypes,
+    onLegendScroll,
   };
 }

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

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

superset-frontend/src/components/Chart/ChartRenderer.jsx

@@ -91,6 +91,7 @@ class ChartRenderer extends React.Component {
           isFeatureEnabled(FeatureFlag.DashboardCrossFilters)),
       inContextMenu: false,
       legendState: undefined,
+      legendIndex: 0,
     };
     this.hasQueryResponseChange = false;
 
@@ -105,6 +106,7 @@ class ChartRenderer extends React.Component {
     this.handleContextMenuClosed = this.handleContextMenuClosed.bind(this);
     this.handleLegendStateChanged = this.handleLegendStateChanged.bind(this);
     this.onContextMenuFallback = this.onContextMenuFallback.bind(this);
+    this.handleLegendScroll = this.handleLegendScroll.bind(this);
 
     this.hooks = {
       onAddFilter: this.handleAddFilter,
@@ -119,6 +121,7 @@ class ChartRenderer extends React.Component {
       setDataMask: dataMask => {
         this.props.actions?.updateDataMask(this.props.chartId, dataMask);
       },
+      onLegendScroll: this.handleLegendScroll,
     };
 
     // TODO: queriesResponse comes from Redux store but it's being edited by
@@ -233,6 +236,10 @@ class ChartRenderer extends React.Component {
     this.setState({ legendState });
   }
 
+  handleLegendScroll(legendIndex) {
+    this.setState({legendIndex})
+  }
+
   // When viz plugins don't handle `contextmenu` event, fallback handler
   // calls `handleOnContextMenu` with no `filters` param.
   onContextMenuFallback(event) {
@@ -362,6 +369,7 @@ class ChartRenderer extends React.Component {
             postTransformProps={postTransformProps}
             emitCrossFilters={emitCrossFilters}
             legendState={this.state.legendState}
+            legendIndex={this.state.legendIndex}
             {...drillToDetailProps}
           />
         </div>