echarts 4.0.1 → 4.1.0

package/lib/chart/candlestick/CandlestickSeries.js

@@ -5,6 +5,25 @@ var SeriesModel = require("../../model/Series");
 var _whiskerBoxCommon = require("../helper/whiskerBoxCommon");
 
 var seriesModelMixin = _whiskerBoxCommon.seriesModelMixin;
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
 var CandlestickSeries = SeriesModel.extend({
   type: 'series.candlestick',
   dependencies: ['xAxis', 'yAxis', 'grid'],
@@ -12,7 +31,19 @@ var CandlestickSeries = SeriesModel.extend({
   /**
    * @readOnly
    */
-  defaultValueDimensions: ['open', 'close', 'lowest', 'highest'],
+  defaultValueDimensions: [{
+    name: 'open',
+    defaultTooltip: true
+  }, {
+    name: 'close',
+    defaultTooltip: true
+  }, {
+    name: 'lowest',
+    defaultTooltip: true
+  }, {
+    name: 'highest',
+    defaultTooltip: true
+  }],
 
   /**
    * @type {Array.<string>}
@@ -25,9 +56,7 @@ var CandlestickSeries = SeriesModel.extend({
    */
   defaultOption: {
     zlevel: 0,
-    // 一级层叠
     z: 2,
-    // 二级层叠
     coordinateSystem: 'cartesian2d',
     legendHoverLink: true,
     hoverAnimation: true,
@@ -54,6 +83,11 @@ var CandlestickSeries = SeriesModel.extend({
     barMaxWidth: null,
     barMinWidth: null,
     barWidth: null,
+    large: true,
+    largeThreshold: 600,
+    progressive: 5e3,
+    progressiveThreshold: 1e4,
+    progressiveChunkMode: 'mod',
     animationUpdate: false,
     animationEasing: 'linear',
     animationDuration: 300
@@ -68,7 +102,7 @@ var CandlestickSeries = SeriesModel.extend({
   },
   brushSelector: function (dataIndex, data, selectors) {
     var itemLayout = data.getItemLayout(dataIndex);
-    return selectors.rect(itemLayout.brushRect);
+    return itemLayout && selectors.rect(itemLayout.brushRect);
   }
 });
 zrUtil.mixin(CandlestickSeries, seriesModelMixin, true);

package/lib/chart/candlestick/CandlestickView.js

@@ -4,38 +4,252 @@ var ChartView = require("../../view/Chart");
 
 var graphic = require("../../util/graphic");
 
-var _whiskerBoxCommon = require("../helper/whiskerBoxCommon");
+var Path = require("zrender/lib/graphic/Path");
 
-var viewMixin = _whiskerBoxCommon.viewMixin;
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+var NORMAL_ITEM_STYLE_PATH = ['itemStyle'];
+var EMPHASIS_ITEM_STYLE_PATH = ['emphasis', 'itemStyle'];
+var SKIP_PROPS = ['color', 'color0', 'borderColor', 'borderColor0'];
 var CandlestickView = ChartView.extend({
   type: 'candlestick',
-  getStyleUpdater: function () {
-    return updateStyle;
+  render: function (seriesModel, ecModel, api) {
+    this._updateDrawMode(seriesModel);
+
+    this._isLargeDraw ? this._renderLarge(seriesModel) : this._renderNormal(seriesModel);
+  },
+  incrementalPrepareRender: function (seriesModel, ecModel, api) {
+    this._clear();
+
+    this._updateDrawMode(seriesModel);
+  },
+  incrementalRender: function (params, seriesModel, ecModel, api) {
+    this._isLargeDraw ? this._incrementalRenderLarge(params, seriesModel) : this._incrementalRenderNormal(params, seriesModel);
+  },
+  _updateDrawMode: function (seriesModel) {
+    var isLargeDraw = seriesModel.pipelineContext.large;
+
+    if (this._isLargeDraw == null || isLargeDraw ^ this._isLargeDraw) {
+      this._isLargeDraw = isLargeDraw;
+
+      this._clear();
+    }
+  },
+  _renderNormal: function (seriesModel) {
+    var data = seriesModel.getData();
+    var oldData = this._data;
+    var group = this.group;
+    var isSimpleBox = data.getLayout('isSimpleBox'); // There is no old data only when first rendering or switching from
+    // stream mode to normal mode, where previous elements should be removed.
+
+    if (!this._data) {
+      group.removeAll();
+    }
+
+    data.diff(oldData).add(function (newIdx) {
+      if (data.hasValue(newIdx)) {
+        var el;
+        var itemLayout = data.getItemLayout(newIdx);
+        el = createNormalBox(itemLayout, newIdx, true);
+        graphic.initProps(el, {
+          shape: {
+            points: itemLayout.ends
+          }
+        }, seriesModel, newIdx);
+        setBoxCommon(el, data, newIdx, isSimpleBox);
+        group.add(el);
+        data.setItemGraphicEl(newIdx, el);
+      }
+    }).update(function (newIdx, oldIdx) {
+      var el = oldData.getItemGraphicEl(oldIdx); // Empty data
+
+      if (!data.hasValue(newIdx)) {
+        group.remove(el);
+        return;
+      }
+
+      var itemLayout = data.getItemLayout(newIdx);
+
+      if (!el) {
+        el = createNormalBox(itemLayout, newIdx);
+      } else {
+        graphic.updateProps(el, {
+          shape: {
+            points: itemLayout.ends
+          }
+        }, seriesModel, newIdx);
+      }
+
+      setBoxCommon(el, data, newIdx, isSimpleBox);
+      group.add(el);
+      data.setItemGraphicEl(newIdx, el);
+    }).remove(function (oldIdx) {
+      var el = oldData.getItemGraphicEl(oldIdx);
+      el && group.remove(el);
+    }).execute();
+    this._data = data;
+  },
+  _renderLarge: function (seriesModel) {
+    this._clear();
+
+    createLarge(seriesModel, this.group);
+  },
+  _incrementalRenderNormal: function (params, seriesModel) {
+    var data = seriesModel.getData();
+    var isSimpleBox = data.getLayout('isSimpleBox');
+    var dataIndex;
+
+    while ((dataIndex = params.next()) != null) {
+      var el;
+      var itemLayout = data.getItemLayout(dataIndex);
+      el = createNormalBox(itemLayout, dataIndex);
+      setBoxCommon(el, data, dataIndex, isSimpleBox);
+      el.incremental = true;
+      this.group.add(el);
+    }
+  },
+  _incrementalRenderLarge: function (params, seriesModel) {
+    createLarge(seriesModel, this.group, true);
+  },
+  remove: function (ecModel) {
+    this._clear();
+  },
+  _clear: function () {
+    this.group.removeAll();
+    this._data = null;
   },
   dispose: zrUtil.noop
 });
-zrUtil.mixin(CandlestickView, viewMixin, true); // Update common properties
+var NormalBoxPath = Path.extend({
+  type: 'normalCandlestickBox',
+  shape: {},
+  buildPath: function (ctx, shape) {
+    var ends = shape.points;
+
+    if (this.__simpleBox) {
+      ctx.moveTo(ends[4][0], ends[4][1]);
+      ctx.lineTo(ends[6][0], ends[6][1]);
+    } else {
+      ctx.moveTo(ends[0][0], ends[0][1]);
+      ctx.lineTo(ends[1][0], ends[1][1]);
+      ctx.lineTo(ends[2][0], ends[2][1]);
+      ctx.lineTo(ends[3][0], ends[3][1]);
+      ctx.closePath();
+      ctx.moveTo(ends[4][0], ends[4][1]);
+      ctx.lineTo(ends[5][0], ends[5][1]);
+      ctx.moveTo(ends[6][0], ends[6][1]);
+      ctx.lineTo(ends[7][0], ends[7][1]);
+    }
+  }
+});
+
+function createNormalBox(itemLayout, dataIndex, isInit) {
+  var ends = itemLayout.ends;
+  return new NormalBoxPath({
+    shape: {
+      points: isInit ? transInit(ends, itemLayout) : ends
+    },
+    z2: 100
+  });
+}
+
+function setBoxCommon(el, data, dataIndex, isSimpleBox) {
+  var itemModel = data.getItemModel(dataIndex);
+  var normalItemStyleModel = itemModel.getModel(NORMAL_ITEM_STYLE_PATH);
+  var color = data.getItemVisual(dataIndex, 'color');
+  var borderColor = data.getItemVisual(dataIndex, 'borderColor') || color; // Color must be excluded.
+  // Because symbol provide setColor individually to set fill and stroke
+
+  var itemStyle = normalItemStyleModel.getItemStyle(SKIP_PROPS);
+  el.useStyle(itemStyle);
+  el.style.strokeNoScale = true;
+  el.style.fill = color;
+  el.style.stroke = borderColor;
+  el.__simpleBox = isSimpleBox;
+  var hoverStyle = itemModel.getModel(EMPHASIS_ITEM_STYLE_PATH).getItemStyle();
+  graphic.setHoverStyle(el, hoverStyle);
+}
+
+function transInit(points, itemLayout) {
+  return zrUtil.map(points, function (point) {
+    point = point.slice();
+    point[1] = itemLayout.initBaseline;
+    return point;
+  });
+}
+
+var LargeBoxPath = Path.extend({
+  type: 'largeCandlestickBox',
+  shape: {},
+  buildPath: function (ctx, shape) {
+    // Drawing lines is more efficient than drawing
+    // a whole line or drawing rects.
+    var points = shape.points;
+
+    for (var i = 0; i < points.length;) {
+      if (this.__sign === points[i++]) {
+        var x = points[i++];
+        ctx.moveTo(x, points[i++]);
+        ctx.lineTo(x, points[i++]);
+      } else {
+        i += 3;
+      }
+    }
+  }
+});
 
-var normalStyleAccessPath = ['itemStyle'];
-var emphasisStyleAccessPath = ['emphasis', 'itemStyle'];
+function createLarge(seriesModel, group, incremental) {
+  var data = seriesModel.getData();
+  var largePoints = data.getLayout('largePoints');
+  var elP = new LargeBoxPath({
+    shape: {
+      points: largePoints
+    },
+    __sign: 1
+  });
+  group.add(elP);
+  var elN = new LargeBoxPath({
+    shape: {
+      points: largePoints
+    },
+    __sign: -1
+  });
+  group.add(elN);
+  setLargeStyle(1, elP, seriesModel, data);
+  setLargeStyle(-1, elN, seriesModel, data);
+
+  if (incremental) {
+    elP.incremental = true;
+    elN.incremental = true;
+  }
+}
 
-function updateStyle(itemGroup, data, idx) {
-  var itemModel = data.getItemModel(idx);
-  var normalItemStyleModel = itemModel.getModel(normalStyleAccessPath);
-  var color = data.getItemVisual(idx, 'color');
-  var borderColor = data.getItemVisual(idx, 'borderColor') || color; // Color must be excluded.
+function setLargeStyle(sign, el, seriesModel, data) {
+  var suffix = sign > 0 ? 'P' : 'N';
+  var borderColor = data.getVisual('borderColor' + suffix) || data.getVisual('color' + suffix); // Color must be excluded.
   // Because symbol provide setColor individually to set fill and stroke
 
-  var itemStyle = normalItemStyleModel.getItemStyle(['color', 'color0', 'borderColor', 'borderColor0']);
-  var whiskerEl = itemGroup.childAt(itemGroup.whiskerIndex);
-  whiskerEl.useStyle(itemStyle);
-  whiskerEl.style.stroke = borderColor;
-  var bodyEl = itemGroup.childAt(itemGroup.bodyIndex);
-  bodyEl.useStyle(itemStyle);
-  bodyEl.style.fill = color;
-  bodyEl.style.stroke = borderColor;
-  var hoverStyle = itemModel.getModel(emphasisStyleAccessPath).getItemStyle();
-  graphic.setHoverStyle(itemGroup, hoverStyle);
+  var itemStyle = seriesModel.getModel(NORMAL_ITEM_STYLE_PATH).getItemStyle(SKIP_PROPS);
+  el.useStyle(itemStyle);
+  el.style.fill = null;
+  el.style.stroke = borderColor; // No different
+  // el.style.lineWidth = .5;
 }
 
 var _default = CandlestickView;

package/lib/chart/candlestick/candlestickLayout.js

@@ -1,120 +1,180 @@
-var zrUtil = require("zrender/lib/core/util");
+var _graphic = require("../../util/graphic");
 
-var _number = require("../../util/number");
+var subPixelOptimize = _graphic.subPixelOptimize;
 
-var parsePercent = _number.parsePercent;
+var createRenderPlanner = require("../helper/createRenderPlanner");
 
-var _graphic = require("../../util/graphic");
+var _number = require("../../util/number");
 
-var subPixelOptimize = _graphic.subPixelOptimize;
-var retrieve2 = zrUtil.retrieve2;
+var parsePercent = _number.parsePercent;
 
-function _default(ecModel) {
-  ecModel.eachSeriesByType('candlestick', function (seriesModel) {
+var _util = require("zrender/lib/core/util");
+
+var retrieve2 = _util.retrieve2;
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+var LargeArr = typeof Float32Array !== 'undefined' ? Float32Array : Array;
+var _default = {
+  seriesType: 'candlestick',
+  plan: createRenderPlanner(),
+  reset: function (seriesModel) {
     var coordSys = seriesModel.coordinateSystem;
     var data = seriesModel.getData();
     var candleWidth = calculateCandleWidth(seriesModel, data);
-    var chartLayout = seriesModel.get('layout');
-    var variableDim = chartLayout === 'horizontal' ? 0 : 1;
-    var constDim = 1 - variableDim;
+    var cDimIdx = 0;
+    var vDimIdx = 1;
     var coordDims = ['x', 'y'];
-    var vDims = [];
-    var cDim;
-    zrUtil.each(data.dimensions, function (dimName) {
-      var dimInfo = data.getDimensionInfo(dimName);
-      var coordDim = dimInfo.coordDim;
-
-      if (coordDim === coordDims[constDim]) {
-        vDims.push(dimName);
-      } else if (coordDim === coordDims[variableDim]) {
-        cDim = dimName;
-      }
+    var cDim = data.mapDimension(coordDims[cDimIdx]);
+    var vDims = data.mapDimension(coordDims[vDimIdx], true);
+    var openDim = vDims[0];
+    var closeDim = vDims[1];
+    var lowestDim = vDims[2];
+    var highestDim = vDims[3];
+    data.setLayout({
+      candleWidth: candleWidth,
+      // The value is experimented visually.
+      isSimpleBox: candleWidth <= 1.3
     });
 
     if (cDim == null || vDims.length < 4) {
       return;
     }
 
-    var dataIndex = 0;
-    data.each([cDim].concat(vDims), function () {
-      var args = arguments;
-      var axisDimVal = args[0];
-      var idx = args[vDims.length + 1];
-      var openVal = args[1];
-      var closeVal = args[2];
-      var lowestVal = args[3];
-      var highestVal = args[4];
-      var ocLow = Math.min(openVal, closeVal);
-      var ocHigh = Math.max(openVal, closeVal);
-      var ocLowPoint = getPoint(ocLow);
-      var ocHighPoint = getPoint(ocHigh);
-      var lowestPoint = getPoint(lowestVal);
-      var highestPoint = getPoint(highestVal);
-      var whiskerEnds = [[subPixelOptimizePoint(highestPoint), subPixelOptimizePoint(ocHighPoint)], [subPixelOptimizePoint(lowestPoint), subPixelOptimizePoint(ocLowPoint)]];
-      var bodyEnds = [];
-      addBodyEnd(ocHighPoint, 0);
-      addBodyEnd(ocLowPoint, 1);
-      var sign;
-
-      if (openVal > closeVal) {
-        sign = -1;
-      } else if (openVal < closeVal) {
-        sign = 1;
-      } else {
-        // If close === open, compare with close of last record
-        if (dataIndex > 0) {
-          sign = data.getItemModel(dataIndex - 1).get()[2] <= closeVal ? 1 : -1;
-        } else {
-          // No record of previous, set to be positive
-          sign = 1;
-        }
+    return {
+      progress: seriesModel.pipelineContext.large ? largeProgress : normalProgress
+    };
+
+    function normalProgress(params, data) {
+      var dataIndex;
+
+      while ((dataIndex = params.next()) != null) {
+        var axisDimVal = data.get(cDim, dataIndex);
+        var openVal = data.get(openDim, dataIndex);
+        var closeVal = data.get(closeDim, dataIndex);
+        var lowestVal = data.get(lowestDim, dataIndex);
+        var highestVal = data.get(highestDim, dataIndex);
+        var ocLow = Math.min(openVal, closeVal);
+        var ocHigh = Math.max(openVal, closeVal);
+        var ocLowPoint = getPoint(ocLow, axisDimVal);
+        var ocHighPoint = getPoint(ocHigh, axisDimVal);
+        var lowestPoint = getPoint(lowestVal, axisDimVal);
+        var highestPoint = getPoint(highestVal, axisDimVal);
+        var ends = [];
+        addBodyEnd(ends, ocHighPoint, 0);
+        addBodyEnd(ends, ocLowPoint, 1);
+        ends.push(subPixelOptimizePoint(highestPoint), subPixelOptimizePoint(ocHighPoint), subPixelOptimizePoint(lowestPoint), subPixelOptimizePoint(ocLowPoint));
+        data.setItemLayout(dataIndex, {
+          sign: getSign(data, dataIndex, openVal, closeVal, closeDim),
+          initBaseline: openVal > closeVal ? ocHighPoint[vDimIdx] : ocLowPoint[vDimIdx],
+          // open point.
+          ends: ends,
+          brushRect: makeBrushRect(lowestVal, highestVal, axisDimVal)
+        });
       }
 
-      data.setItemLayout(idx, {
-        chartLayout: chartLayout,
-        sign: sign,
-        initBaseline: openVal > closeVal ? ocHighPoint[constDim] : ocLowPoint[constDim],
-        // open point.
-        bodyEnds: bodyEnds,
-        whiskerEnds: whiskerEnds,
-        brushRect: makeBrushRect()
-      });
-      ++dataIndex;
-
-      function getPoint(val) {
+      function getPoint(val, axisDimVal) {
         var p = [];
-        p[variableDim] = axisDimVal;
-        p[constDim] = val;
+        p[cDimIdx] = axisDimVal;
+        p[vDimIdx] = val;
         return isNaN(axisDimVal) || isNaN(val) ? [NaN, NaN] : coordSys.dataToPoint(p);
       }
 
-      function addBodyEnd(point, start) {
+      function addBodyEnd(ends, point, start) {
         var point1 = point.slice();
         var point2 = point.slice();
-        point1[variableDim] = subPixelOptimize(point1[variableDim] + candleWidth / 2, 1, false);
-        point2[variableDim] = subPixelOptimize(point2[variableDim] - candleWidth / 2, 1, true);
-        start ? bodyEnds.push(point1, point2) : bodyEnds.push(point2, point1);
+        point1[cDimIdx] = subPixelOptimize(point1[cDimIdx] + candleWidth / 2, 1, false);
+        point2[cDimIdx] = subPixelOptimize(point2[cDimIdx] - candleWidth / 2, 1, true);
+        start ? ends.push(point1, point2) : ends.push(point2, point1);
       }
 
-      function makeBrushRect() {
-        var pmin = getPoint(Math.min(openVal, closeVal, lowestVal, highestVal));
-        var pmax = getPoint(Math.max(openVal, closeVal, lowestVal, highestVal));
-        pmin[variableDim] -= candleWidth / 2;
-        pmax[variableDim] -= candleWidth / 2;
+      function makeBrushRect(lowestVal, highestVal, axisDimVal) {
+        var pmin = getPoint(lowestVal, axisDimVal);
+        var pmax = getPoint(highestVal, axisDimVal);
+        pmin[cDimIdx] -= candleWidth / 2;
+        pmax[cDimIdx] -= candleWidth / 2;
         return {
           x: pmin[0],
           y: pmin[1],
-          width: constDim ? candleWidth : pmax[0] - pmin[0],
-          height: constDim ? pmax[1] - pmin[1] : candleWidth
+          width: vDimIdx ? candleWidth : pmax[0] - pmin[0],
+          height: vDimIdx ? pmax[1] - pmin[1] : candleWidth
         };
       }
 
       function subPixelOptimizePoint(point) {
-        point[variableDim] = subPixelOptimize(point[variableDim], 1);
+        point[cDimIdx] = subPixelOptimize(point[cDimIdx], 1);
         return point;
       }
-    }, true);
-  });
+    }
+
+    function largeProgress(params, data) {
+      // Structure: [sign, x, yhigh, ylow, sign, x, yhigh, ylow, ...]
+      var points = new LargeArr(params.count * 5);
+      var offset = 0;
+      var point;
+      var tmpIn = [];
+      var tmpOut = [];
+      var dataIndex;
+
+      while ((dataIndex = params.next()) != null) {
+        var axisDimVal = data.get(cDim, dataIndex);
+        var openVal = data.get(openDim, dataIndex);
+        var closeVal = data.get(closeDim, dataIndex);
+        var lowestVal = data.get(lowestDim, dataIndex);
+        var highestVal = data.get(highestDim, dataIndex);
+
+        if (isNaN(axisDimVal) || isNaN(lowestVal) || isNaN(highestVal)) {
+          points[offset++] = NaN;
+          offset += 4;
+          continue;
+        }
+
+        points[offset++] = getSign(data, dataIndex, openVal, closeVal, closeDim);
+        tmpIn[cDimIdx] = axisDimVal;
+        tmpIn[vDimIdx] = lowestVal;
+        point = coordSys.dataToPoint(tmpIn, null, tmpOut);
+        points[offset++] = point ? point[0] : NaN;
+        points[offset++] = point ? point[1] : NaN;
+        tmpIn[vDimIdx] = highestVal;
+        point = coordSys.dataToPoint(tmpIn, null, tmpOut);
+        points[offset++] = point ? point[1] : NaN;
+      }
+
+      data.setLayout('largePoints', points);
+    }
+  }
+};
+
+function getSign(data, dataIndex, openVal, closeVal, closeDim) {
+  var sign;
+
+  if (openVal > closeVal) {
+    sign = -1;
+  } else if (openVal < closeVal) {
+    sign = 1;
+  } else {
+    sign = dataIndex > 0 // If close === open, compare with close of last record
+    ? data.get(closeDim, dataIndex - 1) <= closeVal ? 1 : -1 : // No record of previous, set to be positive
+    1;
+  }
+
+  return sign;
 }
 
 function calculateCandleWidth(seriesModel, data) {