feat(sampling-in-dataZoom): initial commit

Author: biggates

src/component/dataZoom/SliderZoomModel.ts

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

src/component/dataZoom/SliderZoomView.ts

@@ -384,50 +384,91 @@ class SliderZoomView extends DataZoomView {
             ];
             const otherShadowExtent = [0, size[1]];
             const thisShadowExtent = [0, size[0]];
-
-            const areaPoints = [[size[0], 0], [0, 0]];
-            const linePoints: number[][] = [];
-            const step = thisShadowExtent[1] / (data.count() - 1);
-            let thisCoord = 0;
+            let lastIsEmpty: boolean;
 
             // 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;
-                }
-
-                // FIXME
-                // Should consider axis.min/axis.max when drawing dataShadow.
-
-                // FIXME
-                // 应该使用统一的空判断？还是在list里进行空判断？
-                const isEmpty = value == null || isNaN(value as number) || value === '';
-                // See #4235.
-                const otherCoord = isEmpty
-                    ? 0 : linearMap(value as number, otherDataExtent, otherShadowExtent, true);
-
-                // Attempt to draw data shadow precisely when there are empty value.
-                if (isEmpty && !lastIsEmpty && index) {
-                    areaPoints.push([areaPoints[areaPoints.length - 1][0], 0]);
-                    linePoints.push([linePoints[linePoints.length - 1][0], 0]);
-                }
-                else if (!isEmpty && lastIsEmpty) {
-                    areaPoints.push([thisCoord, 0]);
-                    linePoints.push([thisCoord, 0]);
+            const coordSys = seriesModel.coordinateSystem;
+            const sampling = this.dataZoomModel.get('sampling');
+            if (data.count() > 10 && coordSys.type === 'cartesian2d' && (sampling && sampling !== 'none')) {
+                const baseAxis = coordSys.getBaseAxis();
+                const valueAxis = coordSys.getOtherAxis(baseAxis);
+
+                let downsampled = data;
+                if (sampling === 'lttb') {
+                    downsampled = data.lttbDownSample(data.mapDimension(valueAxis.dim), 1 / stride);
                 }
+                // TODO: 支持其他类型的 sampling
+
+                const lp = [[size[0], 0], [0, 0]];
+                const ap: number[][] = [];
+                downsampled.each([otherDim], function (value: ParsedValue, index) {
+                    const isEmpty = value == null || isNaN(value as number) || value === '';
+                    // See #4235.
+                    const otherCoord = isEmpty
+                        ? 0 : linearMap(value as number, otherDataExtent, otherShadowExtent, true);
+
+                    // Attempt to draw data shadow precisely when there are empty value.
+                    if (isEmpty && !lastIsEmpty && index) {
+                        ap.push([ap[ap.length - 1][0], 0]);
+                        lp.push([lp[lp.length - 1][0], 0]);
+                    }
+                    else if (!isEmpty && lastIsEmpty) {
+                        ap.push([index, 0]);
+                        lp.push([index, 0]);
+                    }
+
+                    ap.push([index, otherCoord]);
+                    lp.push([index, otherCoord]);
+
+                    lastIsEmpty = isEmpty;
+                });
 
-                areaPoints.push([thisCoord, otherCoord]);
-                linePoints.push([thisCoord, otherCoord]);
+                polygonPts = this._shadowPolygonPts = ap;
+                polylinePts = this._shadowPolylinePts = lp;
+            }
+            else {
+                const areaPoints = [[size[0], 0], [0, 0]];
+                const linePoints: number[][] = [];
+                const step = thisShadowExtent[1] / (data.count() - 1);
+                let thisCoord = 0;
+
+                data.each([otherDim], function (value: ParsedValue, index) {
+                    if (stride > 0 && (index % stride)) {
+                        thisCoord += step;
+                        return;
+                    }
+
+                    // FIXME
+                    // Should consider axis.min/axis.max when drawing dataShadow.
+
+                    // FIXME
+                    // 应该使用统一的空判断？还是在list里进行空判断？
+                    const isEmpty = value == null || isNaN(value as number) || value === '';
+                    // See #4235.
+                    const otherCoord = isEmpty
+                        ? 0 : linearMap(value as number, otherDataExtent, otherShadowExtent, true);
+
+                    // Attempt to draw data shadow precisely when there are empty value.
+                    if (isEmpty && !lastIsEmpty && index) {
+                        areaPoints.push([areaPoints[areaPoints.length - 1][0], 0]);
+                        linePoints.push([linePoints[linePoints.length - 1][0], 0]);
+                    }
+                    else if (!isEmpty && lastIsEmpty) {
+                        areaPoints.push([thisCoord, 0]);
+                        linePoints.push([thisCoord, 0]);
+                    }
+
+                    areaPoints.push([thisCoord, otherCoord]);
+                    linePoints.push([thisCoord, otherCoord]);
 
-                thisCoord += step;
-                lastIsEmpty = isEmpty;
-            });
+                    thisCoord += step;
+                    lastIsEmpty = isEmpty;
+                });
 
-            polygonPts = this._shadowPolygonPts = areaPoints;
-            polylinePts = this._shadowPolylinePts = linePoints;
+                polygonPts = this._shadowPolygonPts = areaPoints;
+                polylinePts = this._shadowPolylinePts = linePoints;
+            }
 
         }
         this._shadowData = data;