You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2018/04/18 17:35:44 UTC

[incubator-echarts] 01/02: Disable visualMap for large mode. And add test case for bar stream.

This is an automated email from the ASF dual-hosted git repository.

sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git

commit faa78f738a722d7f2173fe765b654dbe4bae25d9
Author: sushuang <su...@gmail.com>
AuthorDate: Thu Apr 19 01:11:17 2018 +0800

    Disable visualMap for large mode. And add test case for bar stream.
---
 src/component/visualMap/visualEncoding.js |  5 +-
 src/layout/barGrid.js                     |  1 -
 src/visual/visualSolution.js              |  3 +-
 test/-cases.js                            |  2 +
 test/bar-stream-large.html                | 81 ++++++++++++++++++++++++++
 test/candlestick-large2.html              | 97 +++++++++++++++----------------
 6 files changed, 136 insertions(+), 53 deletions(-)

diff --git a/src/component/visualMap/visualEncoding.js b/src/component/visualMap/visualEncoding.js
index f19c78c..45be9fb 100644
--- a/src/component/visualMap/visualEncoding.js
+++ b/src/component/visualMap/visualEncoding.js
@@ -10,7 +10,10 @@ echarts.registerVisual(VISUAL_PRIORITY, {
     reset: function (seriesModel, ecModel) {
         var resetDefines = [];
         ecModel.eachComponent('visualMap', function (visualMapModel) {
-            if (!visualMapModel.isTargetSeries(seriesModel)) {
+            var pipelineContext = seriesModel.pipelineContext;
+            if (!visualMapModel.isTargetSeries(seriesModel)
+                || (pipelineContext && pipelineContext.large)
+            ) {
                 return;
             }
 
diff --git a/src/layout/barGrid.js b/src/layout/barGrid.js
index f23c3fb..2dab497 100644
--- a/src/layout/barGrid.js
+++ b/src/layout/barGrid.js
@@ -367,7 +367,6 @@ export var largeLayout = {
         return {progress: progress};
 
         function progress(params, data) {
-
             var largePoints = new LargeArr(params.count * 2);
             var dataIndex;
             var coord = [];
diff --git a/src/visual/visualSolution.js b/src/visual/visualSolution.js
index 13446c6..80de6d4 100644
--- a/src/visual/visualSolution.js
+++ b/src/visual/visualSolution.js
@@ -170,7 +170,8 @@ export function incrementalApplyVisual(stateList, visualMappings, getValueState,
             data.setItemVisual(dataIndex, key, value);
         }
 
-        for (var dataIndex = params.start; dataIndex < params.end; dataIndex++) {
+        var dataIndex;
+        while ((dataIndex = params.next()) != null) {
             var rawDataItem = data.getRawDataItem(dataIndex);
 
             // Consider performance
diff --git a/test/-cases.js b/test/-cases.js
index 826f18d..a5fb568 100644
--- a/test/-cases.js
+++ b/test/-cases.js
@@ -40,6 +40,8 @@
             'scatter-random-stream-fix-axis.html',
             'scatter-gps.html',
             'scatter-weibo.html',
+            'bar-stream-large.html',
+            'candlestick-large1.html',
             'lines-flight.html',
             'lines-stream-large.html',
             'lines-stream-not-large.html',
diff --git a/test/bar-stream-large.html b/test/bar-stream-large.html
new file mode 100644
index 0000000..9164410
--- /dev/null
+++ b/test/bar-stream-large.html
@@ -0,0 +1,81 @@
+<html>
+    <head>
+        <meta charset='utf-8'>
+        <script src='lib/esl.js'></script>
+        <script src='lib/config.js'></script>
+        <script src='lib/jquery.min.js'></script>
+        <script src='lib/testHelper.js'></script>
+        <link rel="stylesheet" href="lib/reset.css" />
+        <meta name='viewport' content='width=device-width, initial-scale=1' />
+    </head>
+    <body>
+        <style>
+            html, body, #main0 {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+            }
+        </style>
+        <div id='main0'></div>
+        <script>
+
+        require(['echarts'], function (echarts) {
+
+            var count = 2e5;
+
+            var data = [];
+
+            for (var i = 0; i < count; i++) {
+                data.push(['c' + i, Math.sin(i / 180 * Math.PI)]);
+            }
+
+            var option = {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {},
+                xAxis: {
+                    type: 'category',
+                    min: 0,
+                    max: count - 1,
+                    axisLabel: {
+                        showMaxLabel: true,
+                        showMinLabel: true
+                    }
+                },
+                yAxis: {},
+                dataZoom: [{}, {type: 'inside'}],
+                series: [{
+                    type: 'bar',
+                    name: 'bar',
+                    color: ['green'],
+                    progressiveChunkMode: 'sequential',
+                    large: true,
+                    data: data
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    count + ' points should be rendered from left to right.',
+                    '(1) Check all bars rendered (full of xAxis)',
+                    '(2) And check roam.',
+                    '(3) Check click legend',
+                    '(4) "finished" should be printed on console'
+                ],
+                option: option,
+                info: {
+                    xAxis: option.xAxis,
+                    series: {progressiveChunkMode: 'sequential'}
+                }
+            });
+
+            chart.on('finished', function () {
+                console.log('finished');
+            });
+
+        });
+
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/test/candlestick-large2.html b/test/candlestick-large2.html
index e91528f..9a8262b 100644
--- a/test/candlestick-large2.html
+++ b/test/candlestick-large2.html
@@ -38,7 +38,6 @@
 
             function run() {
                 var data = generateOHLC(rawDataCount);
-                // var result = reorder(data);
                 init(data);
             }
 
@@ -69,17 +68,37 @@
 
                     // ['open', 'close', 'lowest', 'highest', 'volumn']
                     // [1, 4, 3, 2]
-                    data.push([
+                    data[i] = [
                         echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', xValue += minute),
                         +boxVals[openIdx].toFixed(2), // open
                         +boxVals[3].toFixed(2), // highest
                         +boxVals[0].toFixed(2), // lowest
                         +boxVals[closeIdx].toFixed(2),  // close
-                        volumn.toFixed(0)
-                    ]);
+                        volumn.toFixed(0),
+                        getSign(data, i, +boxVals[openIdx], +boxVals[closeIdx], 4) // sign
+                    ];
                 }
 
                 return data;
+
+                function getSign(data, dataIndex, openVal, closeVal, closeDimIdx) {
+                    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[dataIndex - 1][closeDimIdx] <= closeVal ? 1 : -1)
+                            // No record of previous, set to be positive
+                            : 1;
+                    }
+
+                    return sign;
+                }
             }
 
             function calculateMA(dayCount, data) {
@@ -112,7 +131,6 @@
                         source: rawData
                     },
                     backgroundColor: '#eee',
-                    // animation: false,
                     legend: {
                         left: 0
                     },
@@ -127,9 +145,9 @@
                             dataZoom: {
                                 yAxisIndex: false
                             },
-                            brush: {
-                                type: ['polygon', 'rect', 'lineX', 'lineY', 'keep', 'clear']
-                            }
+                            // brush: {
+                            //     type: ['polygon', 'rect', 'lineX', 'lineY', 'keep', 'clear']
+                            // }
                         }
                     },
                     // brush: {
@@ -211,12 +229,22 @@
                             end: 100
                         }
                     ],
+                    visualMap: {
+                        show: false,
+                        seriesIndex: 1,
+                        dimension: 6,
+                        pieces: [{
+                            value: 1,
+                            color: downColor
+                        }, {
+                            value: -1,
+                            color: upColor
+                        }]
+                    },
                     series: [
                         {
                             name: 'Data Amount: ' + echarts.format.addCommas(rawDataCount),
                             type: 'candlestick',
-                            // progressiveMode: 'linear',
-                            // data: data,
                             itemStyle: {
                                 color: upColor,
                                 color0: downColor,
@@ -226,51 +254,16 @@
                             encode: {
                                 x: 0,
                                 y: [1, 4, 3, 2]
-                            },
-                            // progressive: false
-                            // progressive: progressive
+                            }
                         },
-                        // {
-                        //     name: 'MA5',
-                        //     type: 'line',
-                        //     data: calculateMA(5, data),
-                        //     smooth: true,
-                        //     lineStyle: {
-                        //         normal: {opacity: 0.5}
-                        //     }
-                        // },
-                        // {
-                        //     name: 'MA10',
-                        //     type: 'line',
-                        //     data: calculateMA(10, data),
-                        //     smooth: true,
-                        //     lineStyle: {
-                        //         normal: {opacity: 0.5}
-                        //     }
-                        // },
-                        // {
-                        //     name: 'MA20',
-                        //     type: 'line',
-                        //     data: calculateMA(20, data),
-                        //     smooth: true,
-                        //     lineStyle: {
-                        //         normal: {opacity: 0.5}
-                        //     }
-                        // },
-                        // {
-                        //     name: 'MA30',
-                        //     type: 'line',
-                        //     data: calculateMA(30, data),
-                        //     smooth: true,
-                        //     lineStyle: {
-                        //         normal: {opacity: 0.5}
-                        //     }
-                        // },
                         {
                             name: 'Volumn',
                             type: 'bar',
                             xAxisIndex: 1,
                             yAxisIndex: 1,
+                            itemStyle: {
+                                color: '#7fbe9e'
+                            },
                             large: true,
                             encode: {
                                 x: 0,
@@ -282,7 +275,11 @@
 
                 var panel = document.getElementById('panel0');
                 var chart = testHelper.create(echarts, 'main0', {
-                    title: 'Progressive by mod',
+                    title: [
+                        'Progressive by mod',
+                        '(1) Check click legend',
+                        '(2) Check visualMap after zoomed to normal mode'
+                    ],
                     option: option,
                     height: 550
                 });

-- 
To stop receiving notification emails like this one, please contact
sushuang@apache.org.

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org