Permalink
Browse files

performance: optimize the process of data.

  • Loading branch information...
simaQ committed Aug 8, 2018
1 parent 50b2740 commit 6f00f7ecb7e820420502bd7f157a5a09c0f8adb0
Showing with 134 additions and 95 deletions.
  1. +20 −2 src/animation/group-action.js
  2. +1 −43 src/animation/util.js
  3. +57 −32 src/chart/chart.js
  4. +24 −18 src/chart/controller/scale.js
  5. +32 −0 src/util/helper.js
@@ -3,6 +3,7 @@
* @author sima.zhang
*/
const Util = require('./util');
const Helper = require('../util/helper');
const { Shape } = require('../graphic/index');

function _groupScaleIn(container, animateCfg, coord, zeroY, type) {
@@ -91,14 +92,31 @@ function shapesScaleInXY(container, animateCfg) {
}

function groupWaveIn(container, animateCfg, coord) {
const clip = Util.getClip(coord);
const clip = Helper.getClip(coord);
clip.set('canvas', container.get('canvas'));
container.attr('clip', clip);
const onEnd = function() {
container.attr('clip', null);
clip.remove(true);
};
Util.doAnimation(clip, clip.endState, animateCfg, onEnd);
const endState = {};
if (coord.isPolar) {
const { startAngle, endAngle } = coord;
endState.endAngle = endAngle;
clip.attr('endAngle', startAngle);
} else {
const { start, end } = coord;
const width = Math.abs(start.x - end.x);
const height = Math.abs(start.y - end.y);
if (coord.isTransposed) {
clip.attr('height', 0);
endState.height = height;
} else {
clip.attr('width', 0);
endState.width = width;
}
}
Util.doAnimation(clip, endState, animateCfg, onEnd);
}

module.exports = {
@@ -1,7 +1,7 @@
/**
* 动画工具
*/
const { Shape, Matrix } = require('../graphic/index');
const { Matrix } = require('../graphic/index');
const Util = require('../util/common');

const Helpers = {
@@ -90,48 +90,6 @@ const Helpers = {
callback();
});
}
},
getClip(coord) {
const { start, end, width, height } = Helpers.getCoordInfo(coord);
let clip;

if (coord.isPolar) {
const { circleRadius, center, startAngle, endAngle } = coord;
clip = new Shape.Sector({
attrs: {
x: center.x,
y: center.y,
r: circleRadius,
r0: 0,
startAngle,
endAngle: startAngle
}
});
clip.endState = {
endAngle
};
} else {
clip = new Shape.Rect({
attrs: {
x: start.x,
y: end.y,
width: coord.isTransposed ? width : 0,
height: coord.isTransposed ? 0 : height
}
});

if (coord.isTransposed) {
clip.endState = {
height
};
} else {
clip.endState = {
width
};
}
}
clip.isClip = true;
return clip;
}
};

@@ -7,6 +7,7 @@ const ScaleController = require('./controller/scale');
const AxisController = require('./controller/axis');
const Global = require('../global');
const { Canvas } = require('../graphic/index');
const Helper = require('../util/helper');
const TimeUtil = require('@antv/scale/lib/time-util');

function isFullCircle(coord) {
@@ -277,36 +278,31 @@ class Chart extends Base {
this.get('axisController') && this.get('axisController').clear();
}

_execFilter(data) {
const filters = this.get('filters');
if (filters) {
data = data.filter(function(obj) {
let rst = true;
Util.each(filters, function(fn, k) {
if (fn) {
rst = fn(obj[k], obj);
if (!rst) {
return false;
}
}
});
return rst;
});
}
return data;
}

_initGeoms(geoms) {
const coord = this.get('coord');
const data = this.get('filteredData');
_filterDataOutOfRange(data) {
// 优化绘制性能,过滤不再列定义范围内的数据,为了体验,area line path 图表例外
const colDefs = this.get('colDefs');
if (!colDefs) return data;

const geoms = this.get('geoms');
let isSpecialGeom = false;
Util.each(geoms, geom => {
if ([ 'area', 'line', 'path' ].indexOf(geom.get('type')) !== -1) {
isSpecialGeom = true;
return false;
}
});

const fields = [];
Util.each(colDefs, (def, key) => {
if (def && (def.values || def.min || def.max)) {
if (!isSpecialGeom && def && (def.values || def.min || def.max)) {
fields.push(key);
}
});

if (fields.length === 0) {
return data;
}

const geomData = [];
Util.each(data, obj => {
let flag = true;
@@ -333,9 +329,37 @@ class Chart extends Base {
}
});

return geomData;
}

_execFilter(data) {
data = this._filterDataOutOfRange(data);
const filters = this.get('filters');
if (filters) {
data = data.filter(function(obj) {
let rst = true;
Util.each(filters, function(fn, k) {
if (fn) {
rst = fn(obj[k], obj);
if (!rst) {
return false;
}
}
});
return rst;
});
}
return data;
}

_initGeoms(geoms) {
const coord = this.get('coord');
const data = this.get('filteredData');
const colDefs = this.get('colDefs');

for (let i = 0, length = geoms.length; i < length; i++) {
const geom = geoms[i];
geom.set('data', geomData);
geom.set('data', data);
geom.set('coord', coord);
geom.set('colDefs', colDefs);
geom.init();
@@ -415,14 +439,6 @@ class Chart extends Base {
}));
}

// initColDefs() {
// const colDefs = this.get('colDefs');
// if (colDefs) {
// const scaleController = this.get('scaleController');
// Util.mix(scaleController.defs, colDefs);
// }
// }

_init() {
const self = this;
self._initCanvas();
@@ -555,6 +571,15 @@ class Chart extends Base {
Chart.plugins.notify(self, 'beforeGeomDraw');
self._renderAxis();

// 将 geom 限制在绘图区域内
if (self.get('limitInPlot')) {
const middlePlot = self.get('middlePlot');
const coord = self.get('coord');
const clip = Helper.getClip(coord);
clip.set('canvas', middlePlot.get('canvas'));
middlePlot.attr('clip', clip);
}

// 绘制 geom
for (let i = 0, length = geoms.length; i < length; i++) {
const geom = geoms[i];
@@ -32,7 +32,10 @@ class ScaleController {
return def;
}

_getDefaultType(field, data) {
_getDefaultType(field, data, def) {
if (def && def.type) {
return def.type;
}
let type = 'linear';
let value = Util.Array.firstValue(data, field);
if (Util.isArray(value)) {
@@ -44,18 +47,27 @@ class ScaleController {
return type;
}

_getScaleCfg(type, field, data) {
_getScaleCfg(type, field, data, def) {
let values;
if (def && def.values) {
values = def.values;
} else {
values = Util.Array.values(data, field);
}
const cfg = {
field
field,
values
};
const values = Util.Array.values(data, field);
cfg.values = values;

if (type !== 'cat' && type !== 'timeCat') {
const { min, max } = Util.Array.getRange(values);
cfg.min = min;
cfg.max = max;
cfg.nice = true; // 默认数值类型 linear 开启 nice
if (!def || !(def.min && def.max)) {
const { min, max } = Util.Array.getRange(values);
cfg.min = min;
cfg.max = max;
cfg.nice = true; // 默认数值类型 linear 开启 nice
}
}

return cfg;
}

@@ -89,15 +101,9 @@ class ScaleController {
values: [ field ]
});
} else { // 如果已经定义过这个度量
let type;
if (def) {
type = def.type;
}
type = type || self._getDefaultType(field, data);
const cfg = self._getScaleCfg(type, field, data);
if (def) {
Util.mix(cfg, def);
}
const type = self._getDefaultType(field, data, def);
const cfg = self._getScaleCfg(type, field, data, def);
def && Util.mix(cfg, def);
scale = new Scale[SCALE_TYPES_MAP[type]](cfg);
}
return scale;
@@ -1,4 +1,36 @@
const { Shape } = require('../graphic/index');
module.exports = {
getClip(coord) {
const start = coord.start;
const end = coord.end;
const width = end.x - start.x;
const height = Math.abs(end.y - start.y);
let clip;
if (coord.isPolar) {
const { circleRadius, center, startAngle, endAngle } = coord;
clip = new Shape.Sector({
attrs: {
x: center.x,
y: center.y,
r: circleRadius,
r0: 0,
startAngle,
endAngle
}
});
} else {
clip = new Shape.Rect({
attrs: {
x: start.x,
y: end.y,
width,
height
}
});
}
clip.isClip = true;
return clip;
},
isPointInPlot(point, plot) {
const { x, y } = point;
const { tl, tr, br } = plot;

0 comments on commit 6f00f7e

Please sign in to comment.