695 lines
28 KiB
Java
695 lines
28 KiB
Java
|
import { __assign, __extends } from "tslib";
|
|||
|
|
import { deepMix, each, get, isUndefined } from '@antv/util';
|
|||
|
|
import { COMPONENT_TYPE, DIRECTION, LAYER } from '../../constant';
|
|||
|
|
import { CircleAxis, CircleGrid, LineAxis, LineGrid } from '../../dependents';
|
|||
|
|
import { DEFAULT_ANIMATE_CFG } from '../../animate/';
|
|||
|
|
import { getAxisDirection, getAxisFactorByRegion, getAxisRegion, getAxisThemeCfg, getAxisTitleText, getCircleAxisCenterRadius } from '../../util/axis';
|
|||
|
|
import { getAxisOption } from '../../util/axis';
|
|||
|
|
import { getCircleGridItems, getGridThemeCfg, getLineGridItems, showGrid } from '../../util/grid';
|
|||
|
|
import { omit } from '../../util/helper';
|
|||
|
|
import { Controller } from './base';
|
|||
|
|
// update 组件的时候，忽略的数据更新
|
|||
|
|
var OMIT_CFG = ['container'];
|
|||
|
|
// 坐标轴默认动画配置
|
|||
|
|
var AXIS_DEFAULT_ANIMATE_CFG = __assign(__assign({}, DEFAULT_ANIMATE_CFG), { appear: null });
|
|||
|
|
/**
|
|||
|
|
* @ignore
|
|||
|
|
* G2 Axis controller, will:
|
|||
|
|
* - create component
|
|||
|
|
* - axis
|
|||
|
|
* - grid
|
|||
|
|
* - life circle
|
|||
|
|
*/
|
|||
|
|
var Axis = /** @class */ (function (_super) {
|
|||
|
|
__extends(Axis, _super);
|
|||
|
|
function Axis(view) {
|
|||
|
|
var _this = _super.call(this, view) || this;
|
|||
|
|
/** 使用 object 存储组件 */
|
|||
|
|
_this.cache = new Map();
|
|||
|
|
// 先创建 gridContainer，将 grid 放到 axis 底层
|
|||
|
|
_this.gridContainer = _this.view.getLayer(LAYER.BG).addGroup();
|
|||
|
|
_this.axisContainer = _this.view.getLayer(LAYER.BG).addGroup();
|
|||
|
|
return _this;
|
|||
|
|
}
|
|||
|
|
Object.defineProperty(Axis.prototype, "name", {
|
|||
|
|
get: function () {
|
|||
|
|
return 'axis';
|
|||
|
|
},
|
|||
|
|
enumerable: false,
|
|||
|
|
configurable: true
|
|||
|
|
});
|
|||
|
|
Axis.prototype.init = function () { };
|
|||
|
|
Axis.prototype.render = function () {
|
|||
|
|
this.option = this.view.getOptions().axes;
|
|||
|
|
this.createXAxes();
|
|||
|
|
this.createYAxes();
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* 更新组件布局，位置大小
|
|||
|
|
*/
|
|||
|
|
Axis.prototype.layout = function () {
|
|||
|
|
var _this = this;
|
|||
|
|
var coordinate = this.view.getCoordinate();
|
|||
|
|
each(this.getComponents(), function (co) {
|
|||
|
|
var component = co.component, direction = co.direction, type = co.type, extra = co.extra;
|
|||
|
|
var dim = extra.dim, scale = extra.scale, alignTick = extra.alignTick;
|
|||
|
|
var updated;
|
|||
|
|
if (type === COMPONENT_TYPE.AXIS) {
|
|||
|
|
if (coordinate.isPolar) {
|
|||
|
|
if (dim === 'x') {
|
|||
|
|
updated = coordinate.isTransposed ? getAxisRegion(coordinate, direction) : getCircleAxisCenterRadius(coordinate);
|
|||
|
|
}
|
|||
|
|
else if (dim === 'y') {
|
|||
|
|
updated = coordinate.isTransposed ? getCircleAxisCenterRadius(coordinate) : getAxisRegion(coordinate, direction);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
updated = getAxisRegion(coordinate, direction);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else if (type === COMPONENT_TYPE.GRID) {
|
|||
|
|
if (coordinate.isPolar) {
|
|||
|
|
var items = void 0;
|
|||
|
|
if (coordinate.isTransposed) {
|
|||
|
|
items = dim === 'x' ?
|
|||
|
|
getCircleGridItems(coordinate, _this.view.getYScales()[0], scale, alignTick, dim) :
|
|||
|
|
getLineGridItems(coordinate, scale, dim, alignTick);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
items = dim === 'x' ?
|
|||
|
|
getLineGridItems(coordinate, scale, dim, alignTick) :
|
|||
|
|
getCircleGridItems(coordinate, _this.view.getXScale(), scale, alignTick, dim);
|
|||
|
|
}
|
|||
|
|
updated = {
|
|||
|
|
items: items,
|
|||
|
|
// coordinate 更新之后，center 也变化了
|
|||
|
|
center: _this.view.getCoordinate().getCenter(),
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
updated = { items: getLineGridItems(coordinate, scale, dim, alignTick) };
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
component.update(updated);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* 更新 axis 组件
|
|||
|
|
*/
|
|||
|
|
Axis.prototype.update = function () {
|
|||
|
|
this.option = this.view.getOptions().axes;
|
|||
|
|
var updatedCache = new Map();
|
|||
|
|
this.updateXAxes(updatedCache);
|
|||
|
|
this.updateYAxes(updatedCache);
|
|||
|
|
// 处理完成之后，销毁删除的
|
|||
|
|
// 不在处理中的
|
|||
|
|
var newCache = new Map();
|
|||
|
|
this.cache.forEach(function (co, key) {
|
|||
|
|
if (updatedCache.has(key)) {
|
|||
|
|
newCache.set(key, co);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// 不存在，则是所有需要被销毁的组件
|
|||
|
|
co.component.destroy();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 更新缓存
|
|||
|
|
this.cache = newCache;
|
|||
|
|
};
|
|||
|
|
Axis.prototype.clear = function () {
|
|||
|
|
_super.prototype.clear.call(this);
|
|||
|
|
this.cache.clear();
|
|||
|
|
this.gridContainer.clear();
|
|||
|
|
this.axisContainer.clear();
|
|||
|
|
};
|
|||
|
|
Axis.prototype.destroy = function () {
|
|||
|
|
_super.prototype.destroy.call(this);
|
|||
|
|
this.gridContainer.remove(true);
|
|||
|
|
this.axisContainer.remove(true);
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* @override
|
|||
|
|
*/
|
|||
|
|
Axis.prototype.getComponents = function () {
|
|||
|
|
var co = [];
|
|||
|
|
this.cache.forEach(function (value) {
|
|||
|
|
co.push(value);
|
|||
|
|
});
|
|||
|
|
return co;
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* 更新 x axis
|
|||
|
|
* @param updatedCache
|
|||
|
|
*/
|
|||
|
|
Axis.prototype.updateXAxes = function (updatedCache) {
|
|||
|
|
// x axis
|
|||
|
|
var scale = this.view.getXScale();
|
|||
|
|
// @ts-ignore
|
|||
|
|
if (!scale || scale.isIdentity) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var field = scale.field;
|
|||
|
|
var xAxisOption = getAxisOption(this.option, scale.field);
|
|||
|
|
if (xAxisOption === false) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var coordinate = this.view.getCoordinate();
|
|||
|
|
var axisId = this.getId('axis', field);
|
|||
|
|
var gridId = this.getId('grid', field);
|
|||
|
|
var direction = getAxisDirection(xAxisOption, DIRECTION.BOTTOM);
|
|||
|
|
var layer = LAYER.BG;
|
|||
|
|
var dim = 'x';
|
|||
|
|
if (coordinate.isRect) {
|
|||
|
|
// 1. do axis update
|
|||
|
|
var axis = this.cache.get(axisId);
|
|||
|
|
// 存在则更新
|
|||
|
|
if (axis) {
|
|||
|
|
var cfg = this.getLineAxisCfg(scale, xAxisOption, direction);
|
|||
|
|
omit(cfg, OMIT_CFG);
|
|||
|
|
axis.component.update(cfg);
|
|||
|
|
updatedCache.set(axisId, axis);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// 不存在，则创建
|
|||
|
|
axis = this.createLineAxis(scale, xAxisOption, layer, direction, dim);
|
|||
|
|
this.cache.set(axisId, axis);
|
|||
|
|
updatedCache.set(axisId, axis);
|
|||
|
|
}
|
|||
|
|
// 2. do grid update
|
|||
|
|
var grid = this.cache.get(gridId);
|
|||
|
|
// 存在则更新
|
|||
|
|
if (grid) {
|
|||
|
|
var cfg = this.getLineGridCfg(scale, xAxisOption, direction, dim);
|
|||
|
|
omit(cfg, OMIT_CFG);
|
|||
|
|
grid.component.update(cfg);
|
|||
|
|
updatedCache.set(gridId, grid);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// 不存在则创建
|
|||
|
|
grid = this.createLineGrid(scale, xAxisOption, layer, direction, dim);
|
|||
|
|
if (grid) {
|
|||
|
|
this.cache.set(gridId, grid);
|
|||
|
|
updatedCache.set(gridId, grid);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else if (coordinate.isPolar) {
|
|||
|
|
// 1. do axis update
|
|||
|
|
var axis = this.cache.get(axisId);
|
|||
|
|
// 存在则更新
|
|||
|
|
if (axis) {
|
|||
|
|
var cfg = coordinate.isTransposed ?
|
|||
|
|
// @ts-ignore
|
|||
|
|
this.getLineAxisCfg(scale, xAxisOption, 'radius') :
|
|||
|
|
this.getCircleAxisCfg(scale, xAxisOption, direction);
|
|||
|
|
omit(cfg, OMIT_CFG);
|
|||
|
|
axis.component.update(cfg);
|
|||
|
|
updatedCache.set(axisId, axis);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// 不存在，则创建
|
|||
|
|
if (coordinate.isTransposed) {
|
|||
|
|
if (isUndefined(xAxisOption)) {
|
|||
|
|
// 默认不渲染转置极坐标下的坐标轴
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// @ts-ignore
|
|||
|
|
axis = this.createLineAxis(scale, xAxisOption, layer, 'radius', dim);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
axis = this.createCircleAxis(scale, xAxisOption, layer, direction, dim);
|
|||
|
|
}
|
|||
|
|
this.cache.set(axisId, axis);
|
|||
|
|
updatedCache.set(axisId, axis);
|
|||
|
|
}
|
|||
|
|
// 2. do grid update
|
|||
|
|
var grid = this.cache.get(gridId);
|
|||
|
|
// 存在则更新
|
|||
|
|
if (grid) {
|
|||
|
|
var cfg = coordinate.isTransposed ?
|
|||
|
|
// @ts-ignore
|
|||
|
|
this.getCircleGridCfg(scale, xAxisOption, 'radius', dim) :
|
|||
|
|
// @ts-ignore
|
|||
|
|
this.getLineGridCfg(scale, xAxisOption, 'circle', dim);
|
|||
|
|
omit(cfg, OMIT_CFG);
|
|||
|
|
grid.component.update(cfg);
|
|||
|
|
updatedCache.set(gridId, grid);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// 不存在则创建
|
|||
|
|
if (coordinate.isTransposed) {
|
|||
|
|
if (isUndefined(xAxisOption)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// @ts-ignore
|
|||
|
|
grid = this.createCircleGrid(scale, xAxisOption, layer, 'radius', dim);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// @ts-ignore
|
|||
|
|
grid = this.createLineGrid(scale, xAxisOption, layer, 'circle', dim);
|
|||
|
|
}
|
|||
|
|
if (grid) {
|
|||
|
|
this.cache.set(gridId, grid);
|
|||
|
|
updatedCache.set(gridId, grid);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// helix and other, do not draw axis
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
Axis.prototype.updateYAxes = function (updatedCache) {
|
|||
|
|
var _this = this;
|
|||
|
|
// y axes
|
|||
|
|
var yScales = this.view.getYScales();
|
|||
|
|
each(yScales, function (scale, idx) {
|
|||
|
|
// @ts-ignore
|
|||
|
|
if (!scale || scale.isIdentity) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var field = scale.field;
|
|||
|
|
var yAxisOption = getAxisOption(_this.option, field);
|
|||
|
|
if (yAxisOption !== false) {
|
|||
|
|
var layer = LAYER.BG;
|
|||
|
|
var dim = 'y';
|
|||
|
|
var axisId = _this.getId('axis', field);
|
|||
|
|
var gridId = _this.getId('grid', field);
|
|||
|
|
var coordinate = _this.view.getCoordinate();
|
|||
|
|
if (coordinate.isRect) {
|
|||
|
|
var direction = getAxisDirection(yAxisOption, idx === 0 ? DIRECTION.LEFT : DIRECTION.RIGHT);
|
|||
|
|
// 1. do axis update
|
|||
|
|
var axis = _this.cache.get(axisId);
|
|||
|
|
// 存在则更新
|
|||
|
|
if (axis) {
|
|||
|
|
var cfg = _this.getLineAxisCfg(scale, yAxisOption, direction);
|
|||
|
|
omit(cfg, OMIT_CFG);
|
|||
|
|
axis.component.update(cfg);
|
|||
|
|
updatedCache.set(axisId, axis);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// 不存在，则创建
|
|||
|
|
axis = _this.createLineAxis(scale, yAxisOption, layer, direction, dim);
|
|||
|
|
_this.cache.set(axisId, axis);
|
|||
|
|
updatedCache.set(axisId, axis);
|
|||
|
|
}
|
|||
|
|
// 2. do grid update
|
|||
|
|
var grid = _this.cache.get(gridId);
|
|||
|
|
// 存在则更新
|
|||
|
|
if (grid) {
|
|||
|
|
var cfg = _this.getLineGridCfg(scale, yAxisOption, direction, dim);
|
|||
|
|
omit(cfg, OMIT_CFG);
|
|||
|
|
grid.component.update(cfg);
|
|||
|
|
updatedCache.set(gridId, grid);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// 不存在则创建
|
|||
|
|
grid = _this.createLineGrid(scale, yAxisOption, layer, direction, dim);
|
|||
|
|
if (grid) {
|
|||
|
|
_this.cache.set(gridId, grid);
|
|||
|
|
updatedCache.set(gridId, grid);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else if (coordinate.isPolar) {
|
|||
|
|
// 1. do axis update
|
|||
|
|
var axis = _this.cache.get(axisId);
|
|||
|
|
// 存在则更新
|
|||
|
|
if (axis) {
|
|||
|
|
var cfg = coordinate.isTransposed ?
|
|||
|
|
// @ts-ignore
|
|||
|
|
_this.getCircleAxisCfg(scale, yAxisOption, 'circle') :
|
|||
|
|
// @ts-ignore
|
|||
|
|
_this.getLineAxisCfg(scale, yAxisOption, 'radius');
|
|||
|
|
// @ts-ignore
|
|||
|
|
omit(cfg, OMIT_CFG);
|
|||
|
|
axis.component.update(cfg);
|
|||
|
|
updatedCache.set(axisId, axis);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// 不存在，则创建
|
|||
|
|
if (coordinate.isTransposed) {
|
|||
|
|
if (isUndefined(yAxisOption)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// @ts-ignore
|
|||
|
|
axis = _this.createCircleAxis(scale, yAxisOption, layer, 'circle', dim);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// @ts-ignore
|
|||
|
|
axis = _this.createLineAxis(scale, yAxisOption, layer, 'radius', dim);
|
|||
|
|
}
|
|||
|
|
_this.cache.set(axisId, axis);
|
|||
|
|
updatedCache.set(axisId, axis);
|
|||
|
|
}
|
|||
|
|
// 2. do grid update
|
|||
|
|
var grid = _this.cache.get(gridId);
|
|||
|
|
// 存在则更新
|
|||
|
|
if (grid) {
|
|||
|
|
var cfg = coordinate.isTransposed ?
|
|||
|
|
// @ts-ignore
|
|||
|
|
_this.getLineGridCfg(scale, yAxisOption, 'circle', dim) :
|
|||
|
|
// @ts-ignore
|
|||
|
|
_this.getCircleGridCfg(scale, yAxisOption, 'radius', dim);
|
|||
|
|
omit(cfg, OMIT_CFG);
|
|||
|
|
grid.component.update(cfg);
|
|||
|
|
updatedCache.set(gridId, grid);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// 不存在则创建
|
|||
|
|
if (coordinate.isTransposed) {
|
|||
|
|
if (isUndefined(yAxisOption)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// @ts-ignore
|
|||
|
|
grid = _this.createLineGrid(scale, yAxisOption, layer, 'circle', dim);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// @ts-ignore
|
|||
|
|
grid = _this.createCircleGrid(scale, yAxisOption, layer, 'radius', dim);
|
|||
|
|
}
|
|||
|
|
if (grid) {
|
|||
|
|
_this.cache.set(gridId, grid);
|
|||
|
|
updatedCache.set(gridId, grid);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// helix and other, do not draw axis
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* 创建 x axis 组件
|
|||
|
|
*/
|
|||
|
|
Axis.prototype.createXAxes = function () {
|
|||
|
|
// x axis
|
|||
|
|
var scale = this.view.getXScale();
|
|||
|
|
if (!scale || scale.isIdentity) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var xAxisOption = getAxisOption(this.option, scale.field);
|
|||
|
|
if (xAxisOption !== false) {
|
|||
|
|
var direction = getAxisDirection(xAxisOption, DIRECTION.BOTTOM);
|
|||
|
|
var layer = LAYER.BG;
|
|||
|
|
var dim = 'x';
|
|||
|
|
var coordinate = this.view.getCoordinate();
|
|||
|
|
var axisId = this.getId('axis', scale.field);
|
|||
|
|
var gridId = this.getId('grid', scale.field);
|
|||
|
|
if (coordinate.isRect) {
|
|||
|
|
// axis
|
|||
|
|
var axis = this.createLineAxis(scale, xAxisOption, layer, direction, dim);
|
|||
|
|
this.cache.set(axisId, axis);
|
|||
|
|
// grid
|
|||
|
|
var grid = this.createLineGrid(scale, xAxisOption, layer, direction, dim);
|
|||
|
|
if (grid) {
|
|||
|
|
this.cache.set(gridId, grid);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else if (coordinate.isPolar) {
|
|||
|
|
var axis = void 0;
|
|||
|
|
var grid = void 0;
|
|||
|
|
if (coordinate.isTransposed) {
|
|||
|
|
if (isUndefined(xAxisOption)) {
|
|||
|
|
// 默认不渲染转置极坐标的坐标轴
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// 如果用户打开了隐藏的坐标轴 chart.axis(true)/chart.axis('x', true)
|
|||
|
|
// 那么对于转置了的极坐标，半径轴显示的是 x 轴对应的数据
|
|||
|
|
// @ts-ignore
|
|||
|
|
axis = this.createLineAxis(scale, xAxisOption, layer, 'radius', dim);
|
|||
|
|
// @ts-ignore
|
|||
|
|
grid = this.createCircleGrid(scale, xAxisOption, layer, 'radius', dim);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
axis = this.createCircleAxis(scale, xAxisOption, layer, direction, dim);
|
|||
|
|
// grid，极坐标下的 x 轴网格线沿着半径方向绘制
|
|||
|
|
// @ts-ignore
|
|||
|
|
grid = this.createLineGrid(scale, xAxisOption, layer, 'circle', dim);
|
|||
|
|
}
|
|||
|
|
this.cache.set(axisId, axis);
|
|||
|
|
if (grid) {
|
|||
|
|
this.cache.set(gridId, grid);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// helix and other, do not draw axis
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* create y axis
|
|||
|
|
*/
|
|||
|
|
Axis.prototype.createYAxes = function () {
|
|||
|
|
var _this = this;
|
|||
|
|
// y axes
|
|||
|
|
var yScales = this.view.getYScales();
|
|||
|
|
each(yScales, function (scale, idx) {
|
|||
|
|
// @ts-ignore
|
|||
|
|
if (!scale || scale.isIdentity) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var field = scale.field;
|
|||
|
|
var yAxisOption = getAxisOption(_this.option, field);
|
|||
|
|
if (yAxisOption !== false) {
|
|||
|
|
var layer = LAYER.BG;
|
|||
|
|
var dim = 'y';
|
|||
|
|
var axisId = _this.getId('axis', field);
|
|||
|
|
var gridId = _this.getId('grid', field);
|
|||
|
|
var coordinate = _this.view.getCoordinate();
|
|||
|
|
if (coordinate.isRect) {
|
|||
|
|
var direction = getAxisDirection(yAxisOption, idx === 0 ? DIRECTION.LEFT : DIRECTION.RIGHT);
|
|||
|
|
// axis
|
|||
|
|
var axis = _this.createLineAxis(scale, yAxisOption, layer, direction, dim);
|
|||
|
|
_this.cache.set(axisId, axis);
|
|||
|
|
// grid
|
|||
|
|
var grid = _this.createLineGrid(scale, yAxisOption, layer, direction, dim);
|
|||
|
|
if (grid) {
|
|||
|
|
_this.cache.set(gridId, grid);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else if (coordinate.isPolar) {
|
|||
|
|
var axis = void 0;
|
|||
|
|
var grid = void 0;
|
|||
|
|
if (coordinate.isTransposed) {
|
|||
|
|
if (isUndefined(yAxisOption)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// @ts-ignore
|
|||
|
|
axis = _this.createCircleAxis(scale, yAxisOption, layer, 'circle', dim);
|
|||
|
|
// @ts-ignore
|
|||
|
|
grid = _this.createLineGrid(scale, yAxisOption, layer, 'circle', dim);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// @ts-ignore
|
|||
|
|
axis = _this.createLineAxis(scale, yAxisOption, layer, 'radius', dim);
|
|||
|
|
// @ts-ignore
|
|||
|
|
grid = _this.createCircleGrid(scale, yAxisOption, layer, 'radius', dim);
|
|||
|
|
}
|
|||
|
|
_this.cache.set(_this.getId('axis', scale.field), axis);
|
|||
|
|
if (grid) {
|
|||
|
|
_this.cache.set(gridId, grid);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// helix and other, do not draw axis
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* 创建 line axis
|
|||
|
|
* @param scale
|
|||
|
|
* @param option
|
|||
|
|
* @param layer
|
|||
|
|
* @param direction
|
|||
|
|
* @param dim
|
|||
|
|
*/
|
|||
|
|
Axis.prototype.createLineAxis = function (scale, option, layer, direction, dim) {
|
|||
|
|
// axis
|
|||
|
|
var axis = {
|
|||
|
|
component: new LineAxis(this.getLineAxisCfg(scale, option, direction)),
|
|||
|
|
layer: layer,
|
|||
|
|
// @ts-ignore
|
|||
|
|
direction: direction === 'radius' ? DIRECTION.NONE : direction,
|
|||
|
|
type: COMPONENT_TYPE.AXIS,
|
|||
|
|
extra: { dim: dim, scale: scale },
|
|||
|
|
};
|
|||
|
|
axis.component.set('field', scale.field);
|
|||
|
|
axis.component.init();
|
|||
|
|
return axis;
|
|||
|
|
};
|
|||
|
|
Axis.prototype.createLineGrid = function (scale, option, layer, direction, dim) {
|
|||
|
|
var cfg = this.getLineGridCfg(scale, option, direction, dim);
|
|||
|
|
if (cfg) {
|
|||
|
|
var grid = {
|
|||
|
|
component: new LineGrid(cfg),
|
|||
|
|
layer: layer,
|
|||
|
|
direction: DIRECTION.NONE,
|
|||
|
|
type: COMPONENT_TYPE.GRID,
|
|||
|
|
extra: {
|
|||
|
|
dim: dim,
|
|||
|
|
scale: scale,
|
|||
|
|
alignTick: get(cfg, 'alignTick', true),
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
grid.component.init();
|
|||
|
|
return grid;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
Axis.prototype.createCircleAxis = function (scale, option, layer, direction, dim) {
|
|||
|
|
var axis = {
|
|||
|
|
component: new CircleAxis(this.getCircleAxisCfg(scale, option, direction)),
|
|||
|
|
layer: layer,
|
|||
|
|
direction: direction,
|
|||
|
|
type: COMPONENT_TYPE.AXIS,
|
|||
|
|
extra: { dim: dim, scale: scale },
|
|||
|
|
};
|
|||
|
|
axis.component.set('field', scale.field);
|
|||
|
|
axis.component.init();
|
|||
|
|
return axis;
|
|||
|
|
};
|
|||
|
|
Axis.prototype.createCircleGrid = function (scale, option, layer, direction, dim) {
|
|||
|
|
var cfg = this.getCircleGridCfg(scale, option, direction, dim);
|
|||
|
|
if (cfg) {
|
|||
|
|
var grid = {
|
|||
|
|
component: new CircleGrid(cfg),
|
|||
|
|
layer: layer,
|
|||
|
|
direction: DIRECTION.NONE,
|
|||
|
|
type: COMPONENT_TYPE.GRID,
|
|||
|
|
extra: {
|
|||
|
|
dim: dim,
|
|||
|
|
scale: scale,
|
|||
|
|
alignTick: get(cfg, 'alignTick', true),
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
grid.component.init();
|
|||
|
|
return grid;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* generate line axis cfg
|
|||
|
|
* @param scale
|
|||
|
|
* @param axisOption
|
|||
|
|
* @param direction
|
|||
|
|
* @return line axis cfg
|
|||
|
|
*/
|
|||
|
|
Axis.prototype.getLineAxisCfg = function (scale, axisOption, direction) {
|
|||
|
|
var container = this.axisContainer;
|
|||
|
|
var coordinate = this.view.getCoordinate();
|
|||
|
|
var region = getAxisRegion(coordinate, direction);
|
|||
|
|
var titleText = getAxisTitleText(scale, axisOption);
|
|||
|
|
var axisThemeCfg = getAxisThemeCfg(this.view.getTheme(), direction);
|
|||
|
|
// the cfg order should be ensure
|
|||
|
|
var optionWithTitle = get(axisOption, ['title'])
|
|||
|
|
? deepMix({ title: { style: { text: titleText } } }, axisOption)
|
|||
|
|
: axisOption;
|
|||
|
|
var cfg = deepMix(__assign(__assign({ container: container }, region), { ticks: scale.getTicks().map(function (tick) { return ({ id: "" + tick.tickValue, name: tick.text, value: tick.value }); }), verticalFactor: coordinate.isPolar
|
|||
|
|
? getAxisFactorByRegion(region, coordinate.getCenter()) * -1
|
|||
|
|
: getAxisFactorByRegion(region, coordinate.getCenter()) }), axisThemeCfg, optionWithTitle);
|
|||
|
|
var _a = this.getAnimateCfg(cfg), animate = _a.animate, animateOption = _a.animateOption;
|
|||
|
|
cfg.animateOption = animateOption;
|
|||
|
|
cfg.animate = animate;
|
|||
|
|
return cfg;
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* generate line grid cfg
|
|||
|
|
* @param scale
|
|||
|
|
* @param axisOption
|
|||
|
|
* @param direction
|
|||
|
|
* @param dim
|
|||
|
|
* @return line grid cfg
|
|||
|
|
*/
|
|||
|
|
Axis.prototype.getLineGridCfg = function (scale, axisOption, direction, dim) {
|
|||
|
|
if (!showGrid(getAxisThemeCfg(this.view.getTheme(), direction), axisOption)) {
|
|||
|
|
return undefined;
|
|||
|
|
}
|
|||
|
|
var gridThemeCfg = getGridThemeCfg(this.view.getTheme(), direction);
|
|||
|
|
// the cfg order should be ensure
|
|||
|
|
// grid 动画以 axis 为准
|
|||
|
|
var gridCfg = deepMix({
|
|||
|
|
container: this.gridContainer,
|
|||
|
|
}, gridThemeCfg, get(axisOption, 'grid'), this.getAnimateCfg(axisOption));
|
|||
|
|
gridCfg.items = getLineGridItems(this.view.getCoordinate(), scale, dim, get(gridCfg, 'alignTick', true));
|
|||
|
|
return gridCfg;
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* generate circle axis cfg
|
|||
|
|
* @param scale
|
|||
|
|
* @param axisOption
|
|||
|
|
* @param direction
|
|||
|
|
* @return circle axis cfg
|
|||
|
|
*/
|
|||
|
|
Axis.prototype.getCircleAxisCfg = function (scale, axisOption, direction) {
|
|||
|
|
var container = this.axisContainer;
|
|||
|
|
var coordinate = this.view.getCoordinate();
|
|||
|
|
var ticks = scale.getTicks().map(function (tick) { return ({ id: "" + tick.tickValue, name: tick.text, value: tick.value }); });
|
|||
|
|
if (!scale.isCategory && Math.abs(coordinate.endAngle - coordinate.startAngle) === Math.PI * 2) {
|
|||
|
|
// x 轴对应的值如果是非 cat 类型，在整圆的情况下坐标轴第一个和最后一个文本会重叠，默认只展示第一个文本
|
|||
|
|
ticks.pop();
|
|||
|
|
}
|
|||
|
|
var titleText = getAxisTitleText(scale, axisOption);
|
|||
|
|
var axisThemeCfg = getAxisThemeCfg(this.view.getTheme(), 'circle');
|
|||
|
|
// the cfg order should be ensure
|
|||
|
|
var optionWithTitle = get(axisOption, ['title'])
|
|||
|
|
? deepMix({ title: { style: { text: titleText } } }, axisOption)
|
|||
|
|
: axisOption;
|
|||
|
|
var cfg = deepMix(__assign(__assign({ container: container }, getCircleAxisCenterRadius(this.view.getCoordinate())), { ticks: ticks, verticalFactor: 1 }), axisThemeCfg, optionWithTitle);
|
|||
|
|
var _a = this.getAnimateCfg(cfg), animate = _a.animate, animateOption = _a.animateOption;
|
|||
|
|
cfg.animate = animate;
|
|||
|
|
cfg.animateOption = animateOption;
|
|||
|
|
return cfg;
|
|||
|
|
};
|
|||
|
|
/**
|
|||
|
|
* generate circle grid cfg
|
|||
|
|
* @param scale
|
|||
|
|
* @param axisOption
|
|||
|
|
* @param direction
|
|||
|
|
* @return circle grid cfg
|
|||
|
|
*/
|
|||
|
|
Axis.prototype.getCircleGridCfg = function (scale, axisOption, direction, dim) {
|
|||
|
|
if (!showGrid(getAxisThemeCfg(this.view.getTheme(), direction), axisOption)) {
|
|||
|
|
return undefined;
|
|||
|
|
}
|
|||
|
|
// the cfg order should be ensure
|
|||
|
|
// grid 动画以 axis 为准
|
|||
|
|
// @ts-ignore
|
|||
|
|
var gridThemeCfg = getGridThemeCfg(this.view.getTheme(), 'radius');
|
|||
|
|
var gridCfg = deepMix({
|
|||
|
|
container: this.gridContainer,
|
|||
|
|
center: this.view.getCoordinate().getCenter(),
|
|||
|
|
}, gridThemeCfg, get(axisOption, 'grid'), this.getAnimateCfg(axisOption));
|
|||
|
|
var alignTick = get(gridCfg, 'alignTick', true);
|
|||
|
|
var verticalScale = dim === 'x' ? this.view.getYScales()[0] : this.view.getXScale();
|
|||
|
|
gridCfg.items = getCircleGridItems(this.view.getCoordinate(), verticalScale, scale, alignTick, dim);
|
|||
|
|
// the cfg order should be ensure
|
|||
|
|
// grid 动画以 axis 为准
|
|||
|
|
return gridCfg;
|
|||
|
|
};
|
|||
|
|
Axis.prototype.getId = function (name, key) {
|
|||
|
|
var coordinate = this.view.getCoordinate();
|
|||
|
|
// 坐标系类型也作为组件的 key
|
|||
|
|
return name + "-" + key + "-" + coordinate.type;
|
|||
|
|
};
|
|||
|
|
Axis.prototype.getAnimateCfg = function (cfg) {
|
|||
|
|
return {
|
|||
|
|
animate: this.view.getOptions().animate && get(cfg, 'animate'),
|
|||
|
|
animateOption: cfg && cfg.animateOption ? deepMix({}, AXIS_DEFAULT_ANIMATE_CFG, cfg.animateOption) : AXIS_DEFAULT_ANIMATE_CFG,
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
return Axis;
|
|||
|
|
}(Controller));
|
|||
|
|
export default Axis;
|
|||
|
|
//# sourceMappingURL=axis.js.map
|