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 2020/04/29 19:54:02 UTC
[incubator-echarts] 02/02: fix: (1) fix bar incremental render
(brought by a61fd5ab7f434c7e967e107d6435c1e3f4f6d008) (2) add stream test
case.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 95e9b2717cf28c81709933ec8ea8edbabb46cc61
Author: 100pah <su...@gmail.com>
AuthorDate: Thu Apr 30 03:52:59 2020 +0800
fix:
(1) fix bar incremental render (brought by a61fd5ab7f434c7e967e107d6435c1e3f4f6d008)
(2) add stream test case.
---
src/chart/bar/BarView.ts | 5 +-
test/-cases.js | 1 +
test/bar-stream-large.html | 15 +++++-
test/lib/testHelper.js | 19 +++++---
test/stream-basic.css | 39 ++++++++++++++++
test/stream-basic.js | 99 +++++++++++++++++++++++++++++++++++++++
test/stream-basic1.html | 69 +++------------------------
test/stream-basic2.html | 114 +++++++++++++++++++++++++++++++++++++++++++++
8 files changed, 288 insertions(+), 73 deletions(-)
diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index 4565a2b..8bc6103 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -119,6 +119,9 @@ class BarView extends ChartView {
incrementalPrepareRender(seriesModel: BarSeriesModel): void {
this._clear();
this._updateDrawMode(seriesModel);
+ // incremental also need to clip, otherwise might be overlow.
+ // But must not set clip in each frame, otherwise all of the children will be marked redraw.
+ this._updateLargeClip(seriesModel);
}
incrementalRender(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
@@ -288,8 +291,6 @@ class BarView extends ChartView {
private _incrementalRenderLarge(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
this._removeBackground();
createLarge(seriesModel, this.group, true);
- // incremental also need to clip, otherwise might be overlow.
- this._updateLargeClip(seriesModel);
}
private _updateLargeClip(seriesModel: BarSeriesModel): void {
diff --git a/test/-cases.js b/test/-cases.js
index 9f5434f..e4c81b8 100644
--- a/test/-cases.js
+++ b/test/-cases.js
@@ -54,6 +54,7 @@
name: 'stream-cases',
whiteList: [
'stream-basic1.html',
+ 'stream-basic2.html',
'lines-ny-appendData.html',
'scatter-stream-large.html',
'scatter-stream-not-large.html',
diff --git a/test/bar-stream-large.html b/test/bar-stream-large.html
index c2ad31e..d3fcf7b 100644
--- a/test/bar-stream-large.html
+++ b/test/bar-stream-large.html
@@ -25,8 +25,11 @@ under the License.
<script src='lib/config.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='lib/testHelper.js'></script>
+ <!-- <script src="lib/canteen.js"></script> -->
<link rel="stylesheet" href="lib/reset.css" />
<meta name='viewport' content='width=device-width, initial-scale=1' />
+ <link rel="stylesheet" href="./stream-basic.css" />
+ <script src="./stream-basic.js"></script>
</head>
<body>
<style>
@@ -38,9 +41,19 @@ under the License.
}
</style>
<div id='main0'></div>
+ <div id='record'></div>
<img id="snapshot"/>
<script>
+ var chart;
+ var recordContainer = document.getElementById('record');
+ // testHelper.controlFrame({
+ // pauseAt: 20,
+ // onFrame: function (frameNumber) {
+ // window.printIncrementalOnFrame(chart, frameNumber, recordContainer);
+ // }
+ // });
+
require(['echarts'], function (echarts) {
var count = 2e5;
@@ -77,7 +90,7 @@ under the License.
}]
};
- var chart = testHelper.create(echarts, 'main0', {
+ chart = testHelper.create(echarts, 'main0', {
title: [
count + ' points should be rendered from left to right.',
'(1) Check all bars rendered (full of xAxis)',
diff --git a/test/lib/testHelper.js b/test/lib/testHelper.js
index efbe103..5e6c6fe 100644
--- a/test/lib/testHelper.js
+++ b/test/lib/testHelper.js
@@ -285,12 +285,16 @@
var _frameNumber = 0;
var _mounted = false;
+ function getRunBtnText() {
+ return _running ? 'pause' : 'run';
+ }
+
var buttons = [{
- text: 'run',
- onclick: run
- }, {
- text: 'pause',
- onclick: pause
+ text: getRunBtnText(),
+ onclick: function () {
+ buttons[0].el.innerHTML = getRunBtnText();
+ _running ? pause() : run();
+ }
}, {
text: 'next frame',
onclick: nextFrame
@@ -304,7 +308,7 @@
document.body.appendChild(btnPanel);
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
- var btnEl = document.createElement('button');
+ var btnEl = button.el = document.createElement('button');
btnEl.innerHTML = button.text;
btnEl.addEventListener('click', button.onclick);
btnPanel.appendChild(btnEl);
@@ -335,11 +339,12 @@
function nextFrame() {
opt.onFrame && opt.onFrame(_frameNumber);
- infoEl.innerHTML = 'current frame: ' + _frameNumber;
if (pauseAt != null && _frameNumber === pauseAt) {
_running = false;
pauseAt = null;
}
+ infoEl.innerHTML = 'Frame: ' + _frameNumber + ' ( ' + (_running ? 'Running' : 'Paused') + ' )';
+ buttons[0].el.innerHTML = getRunBtnText();
_mounted = false;
var pending = _pendingCbList;
diff --git a/test/stream-basic.css b/test/stream-basic.css
new file mode 100644
index 0000000..55c2311
--- /dev/null
+++ b/test/stream-basic.css
@@ -0,0 +1,39 @@
+
+/*
+* 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.
+*/
+
+.print-incremental-record-title {
+ margin: 10px;
+ font-size: 18px;
+ font-weight: 700;
+}
+.print-incremental-record-title .print-incremental-cmd-count {
+ color: red;
+}
+.print-incremental-record {
+ margin: 5px 20px;
+}
+.print-incremental-record-line {
+ margin: 10px 10px;
+ font-size: 10px;
+}
+.print-incremental-record-line .print-incremental-cmd-count {
+ color: red;
+ font-size: 12px;
+}
diff --git a/test/stream-basic.js b/test/stream-basic.js
new file mode 100644
index 0000000..87360a1
--- /dev/null
+++ b/test/stream-basic.js
@@ -0,0 +1,99 @@
+/*
+* 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.
+*/
+
+(function () {
+
+ var _layersInfoMap = {};
+ var _recordContainer;
+ var CELL_MAX = 160;
+
+ if (window.Canteen) {
+ window.Canteen.globals.STACK_SIZE = 100000000;
+ }
+
+ window.printIncrementalOnFrame = function (chart, frameNumber, recordContainer) {
+ if (!_recordContainer) {
+ _recordContainer = recordContainer;
+ initContainer();
+ }
+ if (!chart) {
+ return;
+ }
+ var layers = chart.getZr().painter.getLayers();
+ for (var zlevel in layers) {
+ if (layers.hasOwnProperty(zlevel)) {
+ printIncremental(zlevel, layers[zlevel], frameNumber);
+ }
+ }
+ }
+
+ function initContainer() {
+ _recordContainer.innerHTML = [
+ '<div class="print-incremental-record-title">',
+ 'In the "incremental layer", each frame: <br>',
+ 'canvas instruction count (<span class="print-incremental-cmd-count">red number</span>) should be the same:',
+ '</div>'
+ ].join('');
+ _recordContainer.className = 'print-incremental-record';
+ }
+
+ function printIncremental(zlevel, layer, frameNumber) {
+ var layerInfo = _layersInfoMap[zlevel];
+ if (!layerInfo) {
+ layerInfo = _layersInfoMap[zlevel] = {
+ recordLineCellCount: 0,
+ recordLineTitle: document.createElement('div'),
+ recordLineContainer: document.createElement('div')
+ };
+ var incrementalText = layer.incremental ? ' (incremental)' : '';
+ layerInfo.recordLineTitle.innerHTML = 'layer ' + zlevel + incrementalText + ': <br>';
+ layerInfo.recordLineContainer.className = 'print-incremental-record-line';
+ _recordContainer.appendChild(layerInfo.recordLineTitle);
+ _recordContainer.appendChild(layerInfo.recordLineContainer);
+ }
+
+ var canvas = layer.dom;
+ var ctx = canvas.getContext('2d');
+ var stackLength = getStackLength(ctx);
+ var thisStackLength = stackLength;
+
+ var cell;
+ if (layerInfo.recordLineCellCount > CELL_MAX) {
+ cell = layerInfo.recordLineContainer.firstChild;
+ }
+ else {
+ cell = document.createElement('span');
+ layerInfo.recordLineCellCount++;
+ }
+ cell.innerHTML = frameNumber + ':<span class="print-incremental-cmd-count">' + thisStackLength + '</span> ';
+ layerInfo.recordLineContainer.appendChild(cell);
+
+ clearStack(ctx);
+ }
+
+ function getStackLength(ctx) {
+ return ctx.stack().length;
+ }
+
+ function clearStack(ctx) {
+ window.printIncrementalLastStack = ctx.stack().slice();
+ ctx.clear();
+ }
+
+})();
diff --git a/test/stream-basic1.html b/test/stream-basic1.html
index bb74ee9..c22321a 100644
--- a/test/stream-basic1.html
+++ b/test/stream-basic1.html
@@ -30,83 +30,26 @@ under the License.
<script src="lib/testHelper.js"></script>
<script src="lib/canteen.js"></script>
<link rel="stylesheet" href="lib/reset.css" />
+ <link rel="stylesheet" href="./stream-basic.css" />
+ <script src="./stream-basic.js"></script>
</head>
<body>
- <style>
- .record-title {
- margin: 10px;
- font-size: 18px;
- font-weight: 700;
- }
- .record {
- margin: 5px 20px;
- }
- .record-unit {
- margin: 10px 10px;
- font-size: 10px;
- }
- .record-unit .cmd-count {
- color: red;
- font-size: 12px;
- }
- .record-title .cmd-count {
- color: red;
- }
- </style>
-
-
<div id="main0"></div>
- <div class="record-title">
- In incremental layer, each frame, <br>
- new canvas command count (<span class="cmd-count">red number</span>) should be the same:</div>
<div id="record"></div>
-
<script>
- window.Canteen.globals.STACK_SIZE = 100000000;
-
var recordContainer = document.getElementById('record');
var chart;
- var layersInfoMap = {};
testHelper.controlFrame({
pauseAt: 120,
onFrame: function (frameNumber) {
- if (chart) {
- var layers = chart.getZr().painter.getLayers();
- for (var zlevel in layers) {
- if (layers.hasOwnProperty(zlevel)) {
- printNewCmds(zlevel, layers[zlevel], frameNumber)
- }
- }
- }
+ window.printIncrementalOnFrame(chart, frameNumber, recordContainer);
}
});
- function printNewCmds(zlevel, layer, frameNumber) {
- var layerInfo = layersInfoMap[zlevel];
- if (!layerInfo) {
- layerInfo = layersInfoMap[zlevel] = {
- lastStackLength: 0,
- recordDom: document.createElement('div')
- };
- layerInfo.recordDom.className = 'record-unit';
- layerInfo.recordDom.innerHTML = 'layer ' + zlevel + ': <br>';
- recordContainer.appendChild(layerInfo.recordDom);
- }
-
- var canvas = layer.dom;
- var ctx = canvas.getContext('2d');
- var stackLength = ctx.stack().length;
- var span = document.createElement('span');
- span.innerHTML = frameNumber + ':<span class="cmd-count">' + (stackLength - layerInfo.lastStackLength) + '</span> ';
- layerInfo.recordDom.appendChild(span);
- layerInfo.lastStackLength = stackLength;
- }
-
-
require(['echarts'], function (echarts) {
var option;
@@ -136,12 +79,12 @@ under the License.
axisLabel: {fontSize: 9, interval: 0},
boundaryGap: false
},
- progressive: progressive,
- progressiveThreshold: 1,
- largeThreshold: 1,
series: {
type: 'scatter',
symbolSize: 2,
+ progressive: progressive,
+ progressiveThreshold: 1,
+ largeThreshold: 1,
data: data
}
};
diff --git a/test/stream-basic2.html b/test/stream-basic2.html
new file mode 100644
index 0000000..a98449f
--- /dev/null
+++ b/test/stream-basic2.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!--
+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.
+-->
+
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/esl.js"></script>
+ <script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <script src="lib/canteen.js"></script>
+ <link rel="stylesheet" href="lib/reset.css" />
+ <link rel="stylesheet" href="./stream-basic.css" />
+ <script src="./stream-basic.js"></script>
+ </head>
+ <body>
+
+ <div id="main0"></div>
+ <div id="record"></div>
+
+ <script>
+
+ var recordContainer = document.getElementById('record');
+ var chart;
+
+ testHelper.controlFrame({
+ pauseAt: 120,
+ onFrame: function (frameNumber) {
+ window.printIncrementalOnFrame(chart, frameNumber, recordContainer);
+ }
+ });
+
+
+ require(['echarts'], function (echarts) {
+ var option;
+
+ var count = 5000;
+ var lineCount = 100;
+ var progressive = 50;
+ var data = [];
+ var yCurr = 5;
+ for (var i = 0; i < count; i++) {
+ // var mod = i % lineCount;
+ // if (mod === 0) {
+ // yCurr += 5;
+ // }
+ // data.push([mod, yCurr]);
+ data.push([i, 5]);
+ }
+
+ option = {
+ color: ['red'],
+ grid: {top: 20, bottom: 80},
+ xAxis: {
+ type: 'category',
+ // axisLabel: {fontSize: 9, interval: 0, rotate: 90, margin: 20},
+ boundaryGap: false
+ },
+ yAxis: {
+ // type: 'category',
+ axisLabel: {fontSize: 9, interval: 0},
+ boundaryGap: false
+ },
+ dataZoom: [{
+ type: 'slider'
+ }, {
+ type: 'inside'
+ }],
+ series: {
+ type: 'bar',
+ progressiveChunkMode: 'sequential',
+ large: true,
+ progressive: progressive,
+ progressiveThreshold: 1,
+ largeThreshold: 1,
+ data: data
+ }
+ };
+
+ chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Click **run** and check the printed records:',
+ ],
+ option: option,
+ height: 450,
+ recordCanvas: true
+ });
+ });
+ </script>
+
+
+ </body>
+</html>
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org