From 0ab7a4cf0bf45c86583262ea57a76360a2d37f3b Mon Sep 17 00:00:00 2001
From: pah100 <sushuang0322@gmail.com>
Date: Fri, 27 May 2016 21:39:26 +0800
Subject: [PATCH] parallel support smooth, progressive

---
 src/chart/parallel/ParallelSeries.js |  11 +-
 src/chart/parallel/ParallelView.js   | 132 ++++++----------
 src/component/tooltip/TooltipView.js |   4 +-
 src/data/List.js                     |   3 +-
 src/util/model.js                    |   2 +-
 test/parallel-nutrients.html         | 219 +++++++++++++++++++++++++++
 6 files changed, 280 insertions(+), 91 deletions(-)
 create mode 100644 test/parallel-nutrients.html

diff --git a/src/chart/parallel/ParallelSeries.js b/src/chart/parallel/ParallelSeries.js
index d283d9b26..193cf1f91 100644
--- a/src/chart/parallel/ParallelSeries.js
+++ b/src/chart/parallel/ParallelSeries.js
@@ -32,6 +32,9 @@ define(function(require) {
                     translateCategoryValue(axisModel, dim, rawData);
                     return {name: dim, type: 'ordinal'};
                 }
+                else if (modelDimsIndex < 0) {
+                    return {name: dim, type: 'unknown'};
+                }
                 else {
                     return dim;
                 }
@@ -40,6 +43,11 @@ define(function(require) {
             var list = new List(dataDimsInfo, this);
             list.initData(rawData);
 
+            // Anication is forbiden in large data mode.
+            if (this.option.large) {
+                this.option.animation = false;
+            }
+
             return list;
         },
 
@@ -90,7 +98,8 @@ define(function(require) {
                     type: 'solid'
                 }
             },
-            // smooth: false
+            progressive: false, // 100
+            smooth: false,
 
             animationEasing: 'linear'
         }
diff --git a/src/chart/parallel/ParallelView.js b/src/chart/parallel/ParallelView.js
index 2881c70f0..45d381f41 100644
--- a/src/chart/parallel/ParallelView.js
+++ b/src/chart/parallel/ParallelView.js
@@ -2,6 +2,9 @@ define(function (require) {
 
     var graphic = require('../../util/graphic');
     var zrUtil = require('zrender/core/util');
+    var polyHelper = require('../line/poly');
+
+    var SMOOTH = 0.3;
 
     var ParallelView = require('../../view/Chart').extend({
 
@@ -31,6 +34,9 @@ define(function (require) {
             var oldData = this._data;
             var coordSys = seriesModel.coordinateSystem;
             var dimensions = coordSys.dimensions;
+            var option = seriesModel.option;
+            var progressive = option.progressive;
+            var smooth = option.smooth ? SMOOTH : null;
 
             data.diff(oldData)
                 .add(add)
@@ -39,19 +45,18 @@ define(function (require) {
                 .execute();
 
             // Update style
-            data.eachItemGraphicEl(function (elGroup, idx) {
+            data.eachItemGraphicEl(function (line, idx) {
                 var itemModel = data.getItemModel(idx);
                 var lineStyleModel = itemModel.getModel('lineStyle.normal');
-                elGroup.eachChild(function (child) {
-                    child.useStyle(zrUtil.extend(
-                        lineStyleModel.getLineStyle(),
-                        {
-                            fill: null,
-                            stroke: data.getItemVisual(idx, 'color'),
-                            opacity: data.getItemVisual(idx, 'opacity')
-                        }
-                    ));
-                });
+
+                line.useStyle(zrUtil.extend(
+                    lineStyleModel.getLineStyle(),
+                    {
+                        fill: null,
+                        stroke: data.getItemVisual(idx, 'color'),
+                        opacity: data.getItemVisual(idx, 'opacity')
+                    }
+                ));
             });
 
             // First create
@@ -66,64 +71,23 @@ define(function (require) {
             this._data = data;
 
             function add(newDataIndex) {
-                var values = data.getValues(dimensions, newDataIndex);
-                var elGroup = new graphic.Group();
-                dataGroup.add(elGroup);
-
-                eachAxisPair(
-                    values, dimensions, coordSys,
-                    function (pointPair, pairIndex) {
-                        // FIXME
-                        // init animation
-                        if (pointPair) {
-                            elGroup.add(createEl(pointPair));
-                        }
-                    }
-                );
-
-                data.setItemGraphicEl(newDataIndex, elGroup);
+                var points = createLinePoints(data, newDataIndex, dimensions, coordSys);
+                var line = createPoly(points, newDataIndex, progressive, smooth);
+                dataGroup.add(line);
+                data.setItemGraphicEl(newDataIndex, line);
             }
 
             function update(newDataIndex, oldDataIndex) {
-                var values = data.getValues(dimensions, newDataIndex);
-                var elGroup = oldData.getItemGraphicEl(oldDataIndex);
-                var newEls = [];
-                var elGroupIndex = 0;
-
-                eachAxisPair(
-                    values, dimensions, coordSys,
-                    function (pointPair, pairIndex) {
-                        var el = elGroup.childAt(elGroupIndex++);
-
-                        if (pointPair && !el) {
-                            newEls.push(createEl(pointPair));
-                        }
-                        else if (pointPair) {
-                            graphic.updateProps(el, {
-                                shape: {
-                                    points: pointPair
-                                }
-                            }, seriesModel, newDataIndex);
-                        }
-                    }
-                );
-
-                // Remove redundent els
-                for (var i = elGroup.childCount() - 1; i >= elGroupIndex; i--) {
-                    elGroup.remove(elGroup.childAt(i));
-                }
-
-                // Add new els
-                for (var i = 0, len = newEls.length; i < len; i++) {
-                    elGroup.add(newEls[i]);
-                }
-
-                data.setItemGraphicEl(newDataIndex, elGroup);
+                var line = oldData.getItemGraphicEl(oldDataIndex);
+                var points = createLinePoints(data, newDataIndex, dimensions, coordSys);
+                line.shape.points = points;
+                line.dirty();
+                data.setItemGraphicEl(newDataIndex, line);
             }
 
             function remove(oldDataIndex) {
-                var elGroup = oldData.getItemGraphicEl(oldDataIndex);
-                dataGroup.remove(elGroup);
+                var line = oldData.getItemGraphicEl(oldDataIndex);
+                dataGroup.remove(line);
             }
         },
 
@@ -158,35 +122,29 @@ define(function (require) {
         return rectEl;
     }
 
-    function eachAxisPair(values, dimensions, coordSys, cb) {
-        for (var i = 0, len = dimensions.length - 1; i < len; i++) {
-            var dimA = dimensions[i];
-            var dimB = dimensions[i + 1];
-            var valueA = values[i];
-            var valueB = values[i + 1];
-
-            cb(
-                (isEmptyValue(valueA, coordSys.getAxis(dimA).type)
-                    || isEmptyValue(valueB, coordSys.getAxis(dimB).type)
-                )
-                    ? null
-                    : [
-                        coordSys.dataToPoint(valueA, dimA),
-                        coordSys.dataToPoint(valueB, dimB)
-                    ],
-                i
-            );
-        }
+    function createPoly(points, dataIndex, progressive, smooth) {
+        return new polyHelper.Polyline({
+            shape: {
+                points: points,
+                smooth: smooth
+            },
+            silent: true,
+            progressive: progressive ? Math.round(dataIndex / progressive) : 0,
+            z2: 10
+        });
     }
 
-    function createEl(pointPair) {
-        return new graphic.Polyline({
-            shape: {points: pointPair},
-            silent: true
+    function createLinePoints(data, dataIndex, dimensions, coordSys) {
+        var points = [];
+        zrUtil.each(dimensions, function (dimName) {
+            var value = data.get(dimName, dataIndex);
+            if (!isEmptyValue(value, coordSys.getAxis(dimName).type)) {
+                points.push(coordSys.dataToPoint(value, dimName));
+            }
         });
+        return points;
     }
 
-
     // FIXME
     // 公用方法?
     function isEmptyValue(val, axisType) {
diff --git a/src/component/tooltip/TooltipView.js b/src/component/tooltip/TooltipView.js
index 50b0f360a..ddb437cd4 100644
--- a/src/component/tooltip/TooltipView.js
+++ b/src/component/tooltip/TooltipView.js
@@ -1104,7 +1104,9 @@ define(function (require) {
                 });
             }
             else {
-                this.group.hide();
+                if (this.group.children().length) {
+                    this.group.hide();
+                }
             }
         },
 
diff --git a/src/data/List.js b/src/data/List.js
index d1c42ce34..3272dc7fe 100644
--- a/src/data/List.js
+++ b/src/data/List.js
@@ -17,7 +17,8 @@ define(function (require) {
         // Ordinal data type can be string or int
         'ordinal': Array,
         'number': Array,
-        'time': Array
+        'time': Array,
+        'unknown': Array
     };
 
     var Model = require('../model/Model');
diff --git a/src/util/model.js b/src/util/model.js
index 4b9b2339a..b070cd529 100644
--- a/src/util/model.js
+++ b/src/util/model.js
@@ -195,7 +195,7 @@ define(function(require) {
     modelUtil.converDataValue = function (value, dimInfo) {
         // Performance sensitive.
         var dimType = dimInfo && dimInfo.type;
-        if (dimType === 'ordinal') {
+        if (dimType === 'ordinal' || dimType === 'unknown') {
             return value;
         }
 
diff --git a/test/parallel-nutrients.html b/test/parallel-nutrients.html
new file mode 100644
index 000000000..7136cf175
--- /dev/null
+++ b/test/parallel-nutrients.html
@@ -0,0 +1,219 @@
+<!DOCTYPE>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="reset.css">
+    </head>
+    <body>
+        <style>
+            body {
+                background: #333;
+            }
+            #main {
+                height: 400px;
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+
+            var echarts;
+            var colorTool;
+            var chart;
+            var myChart;
+            var groupCategories = [];
+            var groupColors = [];
+
+            require([
+                'echarts',
+                'zrender/tool/color',
+                'echarts/chart/parallel',
+                'echarts/component/legend',
+                'echarts/component/tooltip',
+                'echarts/component/toolbox',
+                'echarts/component/visualMap',
+            ], function (ec, ct) {
+
+                $.getJSON('./data/nutrients.json', function (data) {
+                    echarts = ec;
+                    colorTool = ct;
+
+                    normalizeData(data);
+
+                    chart = myChart = echarts.init(document.getElementById('main'));
+
+                    chart.setOption(getOption(data));
+                });
+
+                var indices = {
+                    name: 0,
+                    group: 1,
+                    id: 16
+                };
+                var schema = [
+                    {name: 'name', index: 0},
+                    {name: 'group', index: 1},
+                    {name: 'protein', index: 2},
+                    {name: 'calcium', index: 3},
+                    {name: 'sodium', index: 4},
+                    {name: 'fiber', index: 5},
+                    {name: 'vitaminc', index: 6},
+                    {name: 'potassium', index: 7},
+                    {name: 'carbohydrate', index: 8},
+                    {name: 'sugars', index: 9},
+                    {name: 'fat', index: 10},
+                    {name: 'water', index: 11},
+                    {name: 'calories', index: 12},
+                    {name: 'saturated', index: 13},
+                    {name: 'monounsat', index: 14},
+                    {name: 'polyunsat', index: 15},
+                    {name: 'id', index: 16}
+                ];
+
+                function normalizeData(originData) {
+                    var groupMap = {};
+                    originData.forEach(row => {
+                        var groupName = row[indices.group];
+                        if (!groupMap.hasOwnProperty(groupName)) {
+                            groupMap[groupName] = 1;
+                        }
+                    });
+
+                    originData.forEach(row => {
+                        row.forEach((item, index) => {
+                            if (index !== indices.name
+                                && index !== indices.group
+                                && index !== indices.id
+                            ) {
+                                // Convert null to zero, as all of them under unit "g".
+                                row[index] = parseFloat(item) || 0;
+                            }
+                        });
+                    });
+
+                    for (var groupName in groupMap) {
+                        if (groupMap.hasOwnProperty(groupName)) {
+                            groupCategories.push(groupName);
+                        }
+                    }
+                    var hStep = Math.round(300 / (groupCategories.length - 1));
+                    for (var i = 0; i < groupCategories.length; i++) {
+                        groupColors.push(colorTool.modifyHSL('#5A94DF', hStep * i));
+                    }
+                }
+
+                function getOption(data) {
+
+                    var lineStyle = {
+                        normal: {
+                            width: 1,
+                            opacity: 0.01
+                            // shadowBlur: 10,
+                            // shadowOffsetX: 0,
+                            // shadowOffsetY: 0,
+                            // shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    };
+
+                    return {
+                        backgroundColor: '#333',
+                        tooltip: {
+                            padding: 10,
+                            backgroundColor: '#222',
+                            borderColor: '#777',
+                            borderWidth: 1,
+                            formatter: function (obj) {
+                                var value = obj[0].value;
+                                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+                                    + schema[1].name + '：' + value[1] + '<br>'
+                                    + schema[2].name + '：' + value[2] + '<br>'
+                                    + schema[3].name + '：' + value[3] + '<br>'
+                                    + schema[4].name + '：' + value[4] + '<br>'
+                                    + schema[5].name + '：' + value[5] + '<br>'
+                                    + schema[6].name + '：' + value[6] + '<br>';
+                            }
+                        },
+                        visualMap: {
+                            show: true,
+                            type: 'piecewise',
+                            categories: groupCategories,
+                            dimension: indices.group,
+                            inRange: {
+                                color: groupColors //['#d94e5d','#eac736','#50a3ba']
+                            },
+                            outOfRange: {
+                                color: groupColors //['#d94e5d','#eac736','#50a3ba']
+                            }
+                        },
+                        parallelAxis: [
+                            {dim: 2, name: schema[2].name},
+                            {dim: 4, name: schema[4].name},
+                            {dim: 3, name: schema[3].name},
+                            {dim: 5, name: schema[5].name},
+                            {dim: 6, name: schema[6].name},
+                            {dim: 7, name: schema[7].name},
+                            {dim: 8, name: schema[8].name},
+                            {dim: 9, name: schema[9].name},
+                            {dim: 10, name: schema[10].name},
+                            {dim: 11, name: schema[11].name},
+                            {dim: 12, name: schema[12].name},
+                            {dim: 13, name: schema[13].name},
+                            {dim: 14, name: schema[14].name},
+                            {dim: 15, name: schema[15].name},
+                            {dim: 16, name: schema[16].name, scale: true}
+                        ],
+                        parallel: {
+                            bottom: 100,
+                            parallelAxisDefault: {
+                                type: 'value',
+                                name: 'nutrients',
+                                nameLocation: 'end',
+                                nameGap: 20,
+                                nameTextStyle: {
+                                    color: '#fff',
+                                    fontSize: 14
+                                },
+                                axisLine: {
+                                    lineStyle: {
+                                        color: '#aaa'
+                                    }
+                                },
+                                axisTick: {
+                                    lineStyle: {
+                                        color: '#777'
+                                    }
+                                },
+                                splitLine: {
+                                    show: false
+                                },
+                                axisLabel: {
+                                    textStyle: {
+                                        color: '#fff'
+                                    }
+                                }
+                            }
+                        },
+                        animation: false,
+                        series: [
+                            {
+                                name: 'nutrients',
+                                type: 'parallel',
+                                lineStyle: lineStyle,
+                                inactiveOpacity: 0,
+                                activeOpacity: 0.01,
+                                progressive: 100,
+                                smooth: true,
+                                data: data
+                            }
+                        ]
+                    };
+                }
+
+            });
+
+        </script>
+    </body>
+</html>
\ No newline at end of file
-- 
GitLab