fix(progressive): (1) Fix that candlestick large data progressive rendering was broken by Doji feature. (2) Fix bar large and progressive might throw NPE. (3) Follow the fixing of progressive rendering in zrender#1151 (3) Fix parallels did not clear previous rendered content when switching between progressive and normal mode. (4) Fix that chart.on('finished') event might not be called in some edge case (when multiple iterations are executed in one frame at the end).

Author: 100pah

src/chart/bar/BarSeries.ts

@@ -37,6 +37,9 @@ import { inheritDefaultOption } from '../../util/component';
 importSeriesDatafrom'../../data/SeriesData';
 import{BrushCommonSelectorsForSeries}from'../../component/brush/selector';
 importtokensfrom'../../visual/tokens';
+import{preparePipelineContext}from'../../util/model';
+importtype{Pipeline}from'../../core/Scheduler';
+importtypeChartViewfrom'../../view/Chart';
 
 typePolarBarLabelPositionExtra='start'|'insideStart'|'middle'|'end'|'insideEnd';
 exporttypePolarBarLabelPosition=SeriesLabelOption['position']|PolarBarLabelPositionExtra;
@@ -119,16 +122,18 @@ class BarSeriesModel extends BaseBarSeriesModel<BarSeriesOption> {
 }
 
 /**
- * @override
+ * @implement
  */
-getProgressiveThreshold(){
+__preparePipelineContext(
+view: ChartView,
+pipeline: Pick<Pipeline,'progressiveEnabled'|'threshold'>
+){
+constcontext=preparePipelineContext(this,view,pipeline);
 // Do not support progressive in normal mode.
-letprogressiveThreshold=this.get('progressiveThreshold');
-constlargeThreshold=this.get('largeThreshold');
-if(largeThreshold>progressiveThreshold){
-progressiveThreshold=largeThreshold;
+if(context.progressiveRender){
+context.large=true;
 }
-returnprogressiveThreshold;
+returncontext;
 }
 
 brushSelector(dataIndex: number,data: SeriesData,selectors: BrushCommonSelectorsForSeries): boolean{

src/chart/bar/BarView.ts

@@ -69,6 +69,7 @@ import {createSectorCalculateTextPosition, SectorTextPosition, setSectorTextRota
 import{saveOldStyle}from'../../animation/basicTransition';
 importElementfrom'zrender/src/Element';
 import{getSectorCornerRadius}from'../helper/sectorHelper';
+import{getIncrementalId}from'../../util/model';
 
 constmathMax=Math.max;
 constmathMin=Math.min;
@@ -173,7 +174,7 @@ class BarView extends ChartView {
 }
 
 incrementalRender(params: StageHandlerProgressParams,seriesModel: BarSeriesModel): void{
-// Reset
+// Reset for eachRendered
 this._progressiveEls=[];
 // Do not support progressive in normal mode.
 this._incrementalRenderLarge(params,seriesModel);
@@ -1169,13 +1170,14 @@ function createLarge(
 
 constbackgroundModel=seriesModel.getModel('backgroundStyle');
 constbgPoints=data.getLayout('largeBackgroundPoints');
+constincrementalId=incremental ? getIncrementalId(seriesModel) : 0;
 
 if(bgPoints){
 constbgEl=newLargePath({
 shape: {
 points: bgPoints
 },
-incremental: !!incremental,
+incremental: incrementalId,
 silent: true,
 z2: 0
 });
@@ -1190,7 +1192,7 @@ function createLarge(
 
 constel=newLargePath({
 shape: {points: data.getLayout('largePoints')},
-incremental: !!incremental,
+incremental: incrementalId,
 ignoreCoarsePointer: true,
 z2: 1
 });

src/chart/candlestick/CandlestickView.ts

@@ -37,6 +37,7 @@ import { saveOldStyle } from '../../animation/basicTransition';
 importElementfrom'zrender/src/Element';
 import{getBorderColor,getColor}from'./candlestickVisual';
 import{resolveNormalBoxClipping}from'../helper/whiskerBoxCommon';
+import{getIncrementalId}from'../../util/model';
 
 constSKIP_PROPS=['color','borderColor']asconst;
 
@@ -209,7 +210,7 @@ class CandlestickView extends ChartView {
 constel=createNormalBox(itemLayout,dataIndex,transPointDim);
 setBoxCommon(el,data,dataIndex,isSimpleBox);
 
-el.incremental=true;
+el.incremental=getIncrementalId(seriesModel);
 this.group.add(el);
 
 this._progressiveEls.push(el);
@@ -407,12 +408,13 @@ function createLarge(
 setLargeStyle(0,elDoji,seriesModel,data);
 
 if(incremental){
-elP.incremental=true;
-elN.incremental=true;
+elP.incremental=getIncrementalId(seriesModel);
+elN.incremental=getIncrementalId(seriesModel);
+elDoji.incremental=getIncrementalId(seriesModel);
 }
 
 if(progressiveEls){
-progressiveEls.push(elP,elN);
+progressiveEls.push(elP,elN,elDoji);
 }
 }
 

src/chart/custom/CustomView.ts

@@ -108,6 +108,7 @@ import {
 importtypeSeriesModelfrom'../../model/Series';
 import{getCustomSeries}from'./customSeriesRegister';
 importtokensfrom'../../visual/tokens';
+import{getIncrementalId}from'../../util/model';
 
 
 constEMPHASIS='emphasis'asconst;
@@ -289,7 +290,7 @@ export default class CustomChartView extends ChartView {
 
 functionsetIncrementalAndHoverLayer(el: Displayable){
 if(!el.isGroup){
-el.incremental=true;
+el.incremental=getIncrementalId(customSeries);
 el.ensureState('emphasis').hoverLayer=graphicUtil.HOVER_LAYER_FOR_INCREMENTAL;
 }
 }

src/chart/heatmap/HeatmapView.ts

@@ -36,6 +36,7 @@ import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 importtypeElementfrom'zrender/src/Element';
 importtypeMatrixfrom'../../coord/matrix/Matrix';
 import{calcBandWidth}from'../../coord/axisBand';
+import{getIncrementalId}from'../../util/model';
 
 // Coord can be 'geo' 'bmap' 'amap' 'leaflet'...
 interfaceGeoLikeCoordSysextendsCoordinateSystem{
@@ -176,7 +177,7 @@ class HeatmapView extends ChartView {
 api: ExtensionAPI,
 start: number,
 end: number,
-incremental?: boolean
+useIncremental?: boolean
 ){
 constcoordSys=seriesModel.coordinateSystemasCartesian2D|Calendar|Matrix;
 constisCartesian2d=isCoordinateSystemType<Cartesian2D>(coordSys,'cartesian2d');
@@ -342,9 +343,9 @@ class HeatmapView extends ChartView {
 
 toggleHoverEmphasis(rect,focus,blurScope,emphasisDisabled);
 
-rect.incremental=incremental;
+rect.incremental=getIncrementalId(seriesModel,useIncremental);
 // PENDING
-if(incremental){
+if(useIncremental){
 // Rect must use hover layer if it's incremental.
 rect.states.emphasis.hoverLayer=graphic.HOVER_LAYER_FOR_INCREMENTAL;
 }

src/chart/helper/LargeLineDraw.ts

@@ -24,11 +24,12 @@ import * as lineContain from 'zrender/src/contain/line';
 import*asquadraticContainfrom'zrender/src/contain/quadratic';
 import{PathProps}from'zrender/src/graphic/Path';
 importSeriesDatafrom'../../data/SeriesData';
-import{StageHandlerProgressParams,LineStyleOption,ColorString}from'../../util/types';
+import{StageHandlerProgressParams,LineStyleOption,ColorString,SeriesOption}from'../../util/types';
 importModelfrom'../../model/Model';
 import{getECData}from'../../util/innerStore';
 importElementfrom'zrender/src/Element';
 importtokensfrom'../../visual/tokens';
+importDisplayable,{BeforeBrushParam}from'zrender/src/graphic/Displayable';
 
 classLargeLinesPathShape{
 polyline=false;
@@ -73,6 +74,12 @@ class LargeLinesPath extends graphic.Path {
 this._off=0;
 }
 
+beforeBrush(param: BeforeBrushParam){
+if(param&&!param.contentRetained){
+this.reset();
+}
+}
+
 getDefaultStyle(){
 return{
 stroke: tokens.color.neutral99,
@@ -238,18 +245,16 @@ class LargeLineDraw {
 this._setCommon(lineEl,data);
 };
 
-/**
- * @override
- */
 incrementalPrepareUpdate(data: LargeLinesData){
 this.group.removeAll();
 this._clear();
 };
 
-/**
- * @override
- */
-incrementalUpdate(taskParams: StageHandlerProgressParams,data: LargeLinesData){
+incrementalUpdate(
+taskParams: StageHandlerProgressParams,
+data: LargeLinesData,
+incrementalId: Displayable['incremental']
+){
 constlastAdded=this._newAdded[0];
 constlinePoints=data.getLayout('linesPoints');
 
@@ -272,7 +277,7 @@ class LargeLineDraw {
 this._newAdded=[];
 
 constlineEl=this._create();
-lineEl.incremental=true;
+lineEl.incremental=incrementalId;
 lineEl.setShape({
 segs: linePoints
 });

src/chart/helper/LargeSymbolDraw.ts

@@ -31,6 +31,7 @@ import { StageHandlerProgressParams } from '../../util/types';
 import{CoordinateSystemClipArea}from'../../coord/CoordinateSystem';
 import{getECData}from'../../util/innerStore';
 importElementfrom'zrender/src/Element';
+importDisplayable,{BeforeBrushParam}from'zrender/src/graphic/Displayable';
 
 constBOOST_SIZE_THRESHOLD=4;
 
@@ -80,6 +81,12 @@ class LargeSymbolPath extends graphic.Path<LargeSymbolPathProps> {
 this._off=0;
 }
 
+beforeBrush(param: BeforeBrushParam){
+if(param&&!param.contentRetained){
+this.reset();
+}
+}
+
 buildPath(path: PathProxy|CanvasRenderingContext2D,shape: LargeSymbolPathShape){
 constpoints=shape.points;
 constsize=shape.size;
@@ -276,7 +283,12 @@ class LargeSymbolDraw {
 this._clear();
 }
 
-incrementalUpdate(taskParams: StageHandlerProgressParams,data: SeriesData,opt: UpdateOpt){
+incrementalUpdate(
+taskParams: StageHandlerProgressParams,
+data: SeriesData<SeriesModel>,
+incrementalId: Displayable['incremental'],
+opt: UpdateOpt
+){
 constlastAdded=this._newAdded[0];
 constpoints=data.getLayout('points');
 constoldPoints=lastAdded&&lastAdded.shape.points;
@@ -299,7 +311,7 @@ class LargeSymbolDraw {
 constsymbolEl=this._create();
 symbolEl.startIndex=taskParams.start;
 symbolEl.endIndex=taskParams.end;
-symbolEl.incremental=true;
+symbolEl.incremental=incrementalId;
 symbolEl.setShape({
  points
 });

src/chart/helper/LineDraw.ts

@@ -165,13 +165,17 @@ class LineDraw {
 this.group.removeAll();
 };
 
-incrementalUpdate(taskParams: StageHandlerProgressParams,lineData: ListForLineDraw){
+incrementalUpdate(
+taskParams: StageHandlerProgressParams,
+lineData: ListForLineDraw,
+incrementalId: Displayable['incremental']
+){
 
 this._progressiveEls=[];
 
 functionupdateIncrementalAndHover(el: Displayable){
 if(!el.isGroup&&!isEffectObject(el)){
-el.incremental=true;
+el.incremental=incrementalId;
 el.ensureState('emphasis').hoverLayer=graphic.HOVER_LAYER_FOR_INCREMENTAL;
 }
 }

src/chart/helper/SymbolDraw.ts

@@ -282,7 +282,12 @@ class SymbolDraw {
 /**
  * Update symbols draw by new data
  */
-incrementalUpdate(taskParams: StageHandlerProgressParams,data: ListForSymbolDraw,opt?: UpdateOpt){
+incrementalUpdate(
+taskParams: StageHandlerProgressParams,
+data: ListForSymbolDraw,
+incrementalId: Displayable['incremental'],
+opt?: UpdateOpt
+){
 
 // Clear
 this._progressiveEls=[];
@@ -291,7 +296,7 @@ class SymbolDraw {
 
 functionupdateIncrementalAndHover(el: Displayable){
 if(!el.isGroup){
-el.incremental=true;
+el.incremental=incrementalId;
 el.ensureState('emphasis').hoverLayer=graphic.HOVER_LAYER_FOR_INCREMENTAL;
 }
 }

src/chart/lines/LinesView.ts

@@ -35,6 +35,7 @@ import SeriesData from '../../data/SeriesData';
 importtypePolarfrom'../../coord/polar/Polar';
 importtypeCartesian2Dfrom'../../coord/cartesian/Cartesian2D';
 importElementfrom'zrender/src/Element';
+import{getIncrementalId}from'../../util/model';
 
 classLinesViewextendsChartView{
 
@@ -118,7 +119,7 @@ class LinesView extends ChartView {
 seriesModel: LinesSeriesModel,
 ecModel: GlobalModel
 ){
-this._lineDraw.incrementalUpdate(taskParams,seriesModel.getData()asany);
+this._lineDraw.incrementalUpdate(taskParams,seriesModel.getData()asany,getIncrementalId(seriesModel));
 
 this._finished=taskParams.end===seriesModel.getData().count();
 }