continuous data range, calculable fix

src/component/dataRange/ContinuousView.js

@@ -47,6 +47,11 @@ define(function(require) {
              * @private
              */
             this._orient;
+
+            /**
+             * @private
+             */
+            this._useHandle;
         },
 
         /**
@@ -57,7 +62,9 @@ define(function(require) {
             if (!event || event.type !== 'dataRangeSelected' || event.from !== this.uid) {
                 this._buildView();
             }
-            this._updateView();
+            else {
+                this._updateView();
+            }
         },
 
         /**
@@ -67,18 +74,23 @@ define(function(require) {
             this.group.removeAll();
 
             var dataRangeModel = this.dataRangeModel;
-            var dataRangeText = dataRangeModel.get('text');
             var thisGroup = this.group;
 
             this._orient = dataRangeModel.get('orient');
+            this._useHandle = dataRangeModel.get('calculable');
 
             this._resetInterval();
 
-            this._renderBar(thisGroup, !dataRangeText);
+            this._renderBar(thisGroup);
 
+            var dataRangeText = dataRangeModel.get('text');
             dataRangeText && this._renderEndsText(thisGroup, dataRangeText, 0);
             dataRangeText && this._renderEndsText(thisGroup, dataRangeText, 1);
 
+            // After updating view, inner shapes is built completely,
+            // and then background can be rendered.
+            this._updateView();
+
             this.renderBackground(thisGroup);
 
             this.positionGroup(thisGroup);
@@ -124,13 +136,13 @@ define(function(require) {
         /**
          * @private
          */
-        _renderBar: function (targetGroup, renderHandle) {
+        _renderBar: function (targetGroup) {
             var dataRangeModel = this.dataRangeModel;
             var shapes = this._shapes;
             var itemSize = dataRangeModel.itemSize;
-            var handleEndsMax = [0, itemSize[1]];
             var api = this.api;
             var orient = this._orient;
+            var useHandle = this._useHandle;
 
             var itemAlign = this.getItemAlignByOrient(
                 orient === 'horizontal' ? 'vertical' : 'horizontal',
@@ -142,14 +154,18 @@ define(function(require) {
             // Bar
             barGroup.add(shapes.outOfRange = createPolygon());
             barGroup.add(shapes.inRange = createPolygon(
-                null, zrUtil.bind(this._modifyHandle, this, 'all'), 'move'
+                null,
+                zrUtil.bind(this._modifyHandle, this, 'all'),
+                useHandle ? 'move' : null
             ));
 
             var textRect = dataRangeModel.textStyleModel.getTextRect('国');
             var textSize = Math.max(textRect.width, textRect.height);
 
             // Handle
-            if (renderHandle) {
+            if (useHandle) {
+                var handleEndsMax = [0, itemSize[1]];
+
                 shapes.handleGroups = [];
                 shapes.handleThumbs = [];
                 shapes.handleLabels = [];
@@ -215,6 +231,10 @@ define(function(require) {
          * @private
          */
         _modifyHandle: function (handleIndex, dx, dy) {
+            if (!this._useHandle) {
+                return;
+            }
+
             // Transform dx, dy to bar coordination.
             var vertex = this._applyTransform([dx, dy], this._shapes.barGroup, true);
             this._updateInterval(handleIndex, vertex[1]);
@@ -309,27 +329,21 @@ define(function(require) {
                 .setStyle('fill', visualOutOfRange.barColor)
                 .setShape('points', visualOutOfRange.barPoints);
 
-            each([0, 1], function (handleIndex) {
+            this._useHandle && each([0, 1], function (handleIndex) {
 
-                var handleThumbs = shapes.handleThumbs;
-                if (handleThumbs) {
-                    handleThumbs[handleIndex].setStyle(
-                        'fill', visualInRange.handlesColor[handleIndex]
-                    );
-                }
+                shapes.handleThumbs[handleIndex].setStyle(
+                    'fill', visualInRange.handlesColor[handleIndex]
+                );
 
-                var handleLabels = shapes.handleLabels;
-                if (handleLabels) {
-                    handleLabels[handleIndex].setStyle({
-                        text: dataRangeModel.formatValueText(dataInterval[handleIndex]),
-                        textAlign: this._applyTransform(
-                            this._orient === 'horizontal'
-                                ? (handleIndex === 0 ? 'bottom' : 'top')
-                                : 'left',
-                            shapes.barGroup
-                        )
-                    });
-                }
+                shapes.handleLabels[handleIndex].setStyle({
+                    text: dataRangeModel.formatValueText(dataInterval[handleIndex]),
+                    textAlign: this._applyTransform(
+                        this._orient === 'horizontal'
+                            ? (handleIndex === 0 ? 'bottom' : 'top')
+                            : 'left',
+                        shapes.barGroup
+                    )
+                });
 
             }, this);
 
@@ -404,15 +418,14 @@ define(function(require) {
          * @private
          */
         _updateHandlePosition: function (handleEnds) {
-            var shapes = this._shapes;
-            var handleGroups = shapes.handleGroups;
-
-            if (!handleGroups) {
+            if (!this._useHandle) {
                 return;
             }
 
+            var shapes = this._shapes;
+
             each([0, 1], function (handleIndex) {
-                var handleGroup = handleGroups[handleIndex];
+                var handleGroup = shapes.handleGroups[handleIndex];
                 handleGroup.position[1] = handleEnds[handleIndex];
 
                 // Update handle label location

src/component/dataRange/DataRangeModel.js

@@ -41,8 +41,8 @@ define(function(require) {
             z: 4,                       // 二级层叠
             show: true,
 
-            min: -Infinity,            // 最小值，如果不指定，则是所控制的series的最小值，兼容ec2而保留，不推荐指定
-            max: Infinity,             // 最大值，如果不指定，则是所控制的series的最大值，兼容ec2而保留，不推荐指定
+            min: 0,                     // 最小值，
+            max: 200,                   // 最大值，
             dimension: null,
 
             inRange: null,             // 'color', 'colorH', 'colorS', 'colorL', 'colorA',
@@ -62,6 +62,7 @@ define(function(require) {
             inverse: false,
 
             seriesIndex: null,          // 所控制的series indices，默认所有有value的series.
+            splitNumber: 5,            // 分割段数，默认为5，为0时为线性渐变 (contimous)
             backgroundColor: 'rgba(0,0,0,0)',
             borderColor: '#ccc',       // 值域边框颜色
             contentColor: '#5793f3',
@@ -224,8 +225,12 @@ define(function(require) {
          */
         resetExtent: function () {
             var thisOption = this.option;
-            var dataExtent = [Infinity, -Infinity];
 
+            // Can not calculate data extent by data here.
+            // Because series and data may be modified in processing stage.
+            // So we do not support the feature "auto min/max".
+
+            // var dataExtent = [Infinity, -Infinity];
             // zrUtil.each(thisOption.seriesIndex, function (seriesIndex) {
             //     var data = this.ecModel.getSeriesByIndex(seriesIndex).getData();
             //     // FIXME
@@ -254,7 +259,7 @@ define(function(require) {
             var optDim = this.option.dimension;
             return optDim != null
                 ? optDim
-                : list.dimensions[list.dimensions.length - 1]
+                : list.dimensions[list.dimensions.length - 1];
         },
 
         /**

src/component/dataRange/PiecewiseModel.js

@@ -16,10 +16,10 @@ define(function(require) {
         defaultOption: {
             selected: null,
             align: 'auto',             // 'auto', 'left', 'right'
-            splitNumber: 5,            // 分割段数，默认为5，为0时为线性渐变
             itemWidth: 20,             // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
             itemHeight: 14,            // 值域图形高度，线性渐变垂直布局高度为该值 * 10
             itemSymbol: 'roundRect',
+            splitList: null,
             selectedMode: 'multiple',
             itemGap: 10                // 各个item之间的间隔，单位px，默认为10，
                                        // 横向布局时为水平间隔，纵向布局时为纵向间隔

src/component/dataRange/typeDefaulter.js

 define(function (require) {
 
     require('../../model/Component').registerSubTypeDefaulter('dataRange', function (option) {
+        // Compatible with ec2, when splitNumber === 0, continuous dataRange will be used.
         return (
                 !(
                     option.splitList

test/dataRange-scatter-continuous.html

@@ -75,8 +75,9 @@
                             y: 100,
                             // itemHeight: 100,
                             backgroundColor: '#ddd',
-                            visualSelected: {
-                                data: ['red', 'pink', 'black']
+                            // calculable: true,
+                            inRange: {
+                                color: ['red', 'pink', 'black']
                             }
                         }
                     ],

test/dataRange-scatter-layout2.html

@@ -86,7 +86,7 @@
                     dataRange: [
                         {
                             show: true,
-                            splitNumber: 7,
+                            splitNumber: 0,
                             // selectedMode: 'single',
                             selectedMode: 'multiple',
                             backgroundColor: '#eee',