Fix #18754 - [Feature] Adds sampling support to dataZoomSlider

src/component/dataZoom/SliderZoomModel.ts

@@ -24,15 +24,19 @@ import {
     LineStyleOption,
     AreaStyleOption,
     ItemStyleOption,
-    LabelOption
+    LabelOption,
+    SeriesSamplingOptionMixin
 } from '../../util/types';
 import { inheritDefaultOption } from '../../util/component';
 
 interface SliderHandleLabelOption {
     show?: boolean
 }
 
-export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMixin {
+export interface SliderDataZoomOption extends
+    DataZoomOption,
+    BoxLayoutOptionMixin,
+    SeriesSamplingOptionMixin {
 
     show?: boolean
     /**
@@ -217,8 +221,10 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
             moveHandleStyle: {
                 color: '#8FB0F7'
             }
-        }
+        },
+
+        sampling: 'none'
     } as SliderDataZoomOption);
 }
 
-export default SliderZoomModel;
+export default SliderZoomModel;

src/component/dataZoom/SliderZoomView.ts

@@ -43,6 +43,7 @@ import { PointLike } from 'zrender/src/core/Point';
 import Displayable from 'zrender/src/graphic/Displayable';
 import {createTextStyle} from '../../label/labelStyle';
 import SeriesData from '../../data/SeriesData';
+import { doDataSampling } from '../../processor/dataSample';
 
 const Rect = graphic.Rect;
 
@@ -393,10 +394,34 @@ class SliderZoomView extends DataZoomView {
             // Optimize for large data shadow
             const stride = Math.round(data.count() / size[0]);
             let lastIsEmpty: boolean;
-            data.each([otherDim], function (value: ParsedValue, index) {
-                if (stride > 0 && (index % stride)) {
-                    thisCoord += step;
-                    return;
+
+            const coordSys = seriesModel.coordinateSystem;
+            const sampling = this.dataZoomModel.get('sampling');
+            let sampledData = data;
+
+            let useOldSampling = true;
+            if (data.count() > 10 && coordSys.type === 'cartesian2d' && (sampling && sampling !== 'none')) {
+                const downsampled = doDataSampling(
+                    data,
+                    sampling,
+                    seriesModel.coordinateSystem,
+                    this.api.getDevicePixelRatio()
+                );
+                if (downsampled) {
+                    useOldSampling = false;
+                    sampledData = downsampled;
+                }
+            }
+
+            sampledData.each([otherDim], function (value: ParsedValue, index) {
+                if (useOldSampling) {
+                    if (stride > 0 && (index % stride)) {
+                        thisCoord += step;
+                        return;
+                    }
+                }
+                else {
+                    thisCoord = index;
                 }
 
                 // FIXME

src/processor/dataSample.ts

@@ -21,6 +21,8 @@ import { StageHandler, SeriesOption, SeriesSamplingOptionMixin } from '../util/t
 import { Dictionary } from 'zrender/src/core/types';
 import SeriesModel from '../model/Series';
 import { isFunction, isString } from 'zrender/src/core/util';
+import SeriesData from '../data/SeriesData';
+import { CoordinateSystem } from '../coord/CoordinateSystem';
 
 
 type Sampler = (frame: ArrayLike<number>) => number;
@@ -72,6 +74,47 @@ const indexSampler = function (frame: ArrayLike<number>) {
     return Math.round(frame.length / 2);
 };
 
+export function doDataSampling(
+    data: SeriesData,
+    sampling: SeriesSamplingOptionMixin['sampling'],
+    coordSys: CoordinateSystem,
+    dpr: number
+) {
+    const count = data.count();
+    // Only cartesian2d support down sampling. Disable it when there is few data.
+    if (count > 10 && coordSys.type === 'cartesian2d' && sampling) {
+        const baseAxis = coordSys.getBaseAxis();
+        const valueAxis = coordSys.getOtherAxis(baseAxis);
+        const extent = baseAxis.getExtent();
+        // Coordinste system has been resized
+        const size = Math.abs(extent[1] - extent[0]) * (dpr || 1);
+        const rate = Math.round(count / size);
+
+        if (isFinite(rate) && rate > 1) {
+            if (sampling === 'lttb') {
+                return data.lttbDownSample(data.mapDimension(valueAxis.dim), 1 / rate);
+            }
+            else if (sampling === 'minmax') {
+                return data.minmaxDownSample(data.mapDimension(valueAxis.dim), 1 / rate);
+            }
+            let sampler;
+            if (isString(sampling)) {
+                sampler = samplers[sampling];
+            }
+            else if (isFunction(sampling)) {
+                sampler = sampling;
+            }
+            if (sampler) {
+                // Only support sample the first dim mapped from value axis.
+                return data.downSample(
+                    data.mapDimension(valueAxis.dim), 1 / rate, sampler, indexSampler
+                );
+            }
+        }
+    }
+    return null;
+}
+
 export default function dataSample(seriesType: string): StageHandler {
     return {
 
@@ -84,38 +127,10 @@ export default function dataSample(seriesType: string): StageHandler {
             const data = seriesModel.getData();
             const sampling = seriesModel.get('sampling');
             const coordSys = seriesModel.coordinateSystem;
-            const count = data.count();
-            // Only cartesian2d support down sampling. Disable it when there is few data.
-            if (count > 10 && coordSys.type === 'cartesian2d' && sampling) {
-                const baseAxis = coordSys.getBaseAxis();
-                const valueAxis = coordSys.getOtherAxis(baseAxis);
-                const extent = baseAxis.getExtent();
-                const dpr = api.getDevicePixelRatio();
-                // Coordinste system has been resized
-                const size = Math.abs(extent[1] - extent[0]) * (dpr || 1);
-                const rate = Math.round(count / size);
-
-                if (isFinite(rate) && rate > 1) {
-                    if (sampling === 'lttb') {
-                        seriesModel.setData(data.lttbDownSample(data.mapDimension(valueAxis.dim), 1 / rate));
-                    }
-                    else if (sampling === 'minmax') {
-                        seriesModel.setData(data.minmaxDownSample(data.mapDimension(valueAxis.dim), 1 / rate));
-                    }
-                    let sampler;
-                    if (isString(sampling)) {
-                        sampler = samplers[sampling];
-                    }
-                    else if (isFunction(sampling)) {
-                        sampler = sampling;
-                    }
-                    if (sampler) {
-                        // Only support sample the first dim mapped from value axis.
-                        seriesModel.setData(data.downSample(
-                            data.mapDimension(valueAxis.dim), 1 / rate, sampler, indexSampler
-                        ));
-                    }
-                }
+            const dpr = api.getDevicePixelRatio();
+            const resampled = doDataSampling(data, sampling, coordSys, dpr);
+            if (resampled) {
+                seriesModel.setData(resampled);
             }
         }
     };