@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
376 lines • 12.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var component_1 = require("@antv/component");
var g_1 = require("@antv/g");
var scale_1 = require("@antv/scale");
var _ = tslib_1.__importStar(require("@antv/util"));
var theme_1 = require("../../theme");
var adjustColorConfig_1 = require("./adjustColorConfig");
var padding_1 = require("./padding");
var factory_1 = require("../../components/factory");
var AXIS_GAP = 4;
function getAxisData(viewLayer, props, globalOptions) {
var view = viewLayer.view;
var scales = view.get('scales');
var scalesInfo = [];
var singleGraph = adjustColorConfig_1.isSingleGraph(viewLayer.type, props);
// get xscale info
if (props.xField) {
var xscale = scales[props.xField];
var scaleInfo = {
dim: 'x',
scale: xscale,
originalData: props.data,
};
scalesInfo.push(scaleInfo);
}
// get yscale info
if (props.yField) {
var yscale = scales[props.yField];
var scaleInfo = {
dim: 'y',
scale: yscale,
originalData: props.data,
color: singleGraph && globalOptions.yAxis.colorMapping ? props.color : null,
layer: viewLayer,
};
scalesInfo.push(scaleInfo);
}
return scalesInfo;
}
exports.getAxisData = getAxisData;
function mergeAxisScale(axisInfo, dim, axisOptions) {
if (dim === 'x') {
var xAxisInfo = axisInfo.filter(function (axis) {
if (axis.dim === 'x') {
return axis;
}
});
return mergeXAxis(xAxisInfo);
}
else {
var yAxisInfo = axisInfo.filter(function (axis) {
if (axis.dim === 'y') {
return axis;
}
});
return mergeYAxis(yAxisInfo, axisOptions.synchroTick);
}
}
exports.mergeAxisScale = mergeAxisScale;
function mergeXAxis(axisInfo) {
// 判断是否能够合并度量
var isSameScale = sameScaleTest(axisInfo);
if (!isSameScale) {
return [axisInfo[0].scale];
}
if (axisInfo[0].scale.type === 'cat') {
return getCatScale(axisInfo);
}
else {
return getLinearScale(axisInfo, 5);
}
}
function mergeYAxis(axisInfo, synchroTick) {
var isSameScale = sameScaleTest(axisInfo);
// 默认全部采用左轴的tickCount，具体标度对齐逻辑留待以后优化
var tickCount = axisInfo[0].scale.tickCount;
var LinearScale = scale_1.getScale('linear');
if (!isSameScale) {
return axisInfo.map(function (axis) {
var scale = axis.scale;
var values = calValues(scale, tickCount);
if (synchroTick) {
var linearScale = new LinearScale({
min: scale.min,
max: scale.max,
ticks: values,
tickCount: tickCount,
color: axis.color,
});
linearScale.layer = axis.layer;
return linearScale;
}
else {
scale.layer = axis.layer;
scale.color = axis.color;
return scale;
}
});
}
else {
return getLinearScale(axisInfo, tickCount);
}
}
function getLinearScale(axisInfo, tickCount) {
var scaleMin = axisInfo[0].scale.min;
var scaleMax = axisInfo[0].scale.max;
for (var _i = 0, axisInfo_1 = axisInfo; _i < axisInfo_1.length; _i++) {
var axis = axisInfo_1[_i];
scaleMin = Math.min(scaleMin, axis.scale.min);
scaleMax = Math.max(scaleMax, axis.scale.max);
}
var LinearScale = scale_1.getScale('linear');
var scale = new LinearScale({
min: scaleMin,
max: scaleMax,
tickCount: tickCount,
});
return scale;
}
function getCatScale(axisInfo) {
var scaleValues = [];
for (var _i = 0, axisInfo_2 = axisInfo; _i < axisInfo_2.length; _i++) {
var axis = axisInfo_2[_i];
scaleValues.push.apply(scaleValues, axis.scale.values);
}
// todo: time cat 重新排序
var CatScale = scale_1.getScale('cat');
var scale = new CatScale({
values: _.uniq(scaleValues),
});
return scale;
}
function sameScaleTest(axisInfo) {
var sampleDataSource = axisInfo[0].originalData;
var sampleField = axisInfo[0].scale.field;
for (var _i = 0, axisInfo_3 = axisInfo; _i < axisInfo_3.length; _i++) {
var axis = axisInfo_3[_i];
var data = axis.originalData;
var field = axis.scale.field;
// 判断数据源和scale字段
if (data !== sampleDataSource || field !== sampleField) {
return false;
}
}
return true;
}
function createAxis(scale, dim, canvas, cfg, globalOptions) {
var theme = getTheme(globalOptions);
var isVertical = dim === 'x' ? false : true;
var group;
if (scale.layer) {
group = scale.layer.container.addGroup();
}
else {
group = canvas.addGroup();
}
var ticks = getAxisTicks(scale, dim);
var parser = factory_1.getComponent('axis', {
dim: dim,
plot: {
options: globalOptions,
getPlotTheme: function () {
return theme_1.getGlobalTheme();
},
},
});
var defaultStyle = theme.axis && theme.axis[dim] ? toAxisStyle(theme.axis[dim]) : {};
if (scale.color) {
defaultStyle = adjustColorStyle(scale.color, parser);
}
var axisConfig = _.deepMix({}, parser, {
type: 'line',
group: group,
canvas: canvas,
start: cfg.start,
end: cfg.end,
isVertical: isVertical,
factor: cfg.factor,
ticks: ticks,
label: function (text) {
return {
text: text,
textStyle: parser.label.textStyle,
};
},
}, defaultStyle);
var axis = new component_1.Axis.Line(axisConfig);
axis.layer = scale.layer;
axis.render();
return axis;
}
exports.createAxis = createAxis;
function getAxisTicks(scale, dim) {
var tickValues = [];
var ticks = scale.ticks, range = scale.range;
var step = (range[1] - range[0]) / (ticks.length - 1);
_.each(ticks, function (tick, index) {
var value = dim === 'y' ? 1.0 - (range[0] + step * index) : range[0] + step * index;
tickValues.push({ text: tick, value: value });
});
return tickValues;
}
function calValues(scale, tickCount) {
var values = [];
var min = scale.min, max = scale.max;
var step = (max - min) / tickCount;
for (var i = 0; i < tickCount; i++) {
var value = min + step * i;
values.push(value);
}
return values;
}
function axesLayout(globalOptions, axisInfo, padding, layer, width, height, canvas) {
var bleeding = theme_1.getGlobalTheme().bleeding;
// merge padding and bleeding by zero value
_.each(padding, function (p, index) {
if (p === 0) {
padding[index] = bleeding[index];
}
});
var paddingComponents = [];
// 创建axis
var axes = [];
var xAxisScale;
var xAxis;
var xAxisHeight = 0;
if (globalOptions.xAxis.visible) {
xAxisScale = mergeAxisScale(axisInfo, 'x');
xAxis = createAxis(xAxisScale[0], 'x', canvas, {
start: { x: 0, y: 0 },
end: { x: width, y: 0 },
factor: 1,
}, globalOptions);
xAxisHeight += xAxis.get('group').getBBox().height;
}
if (globalOptions.yAxis.visible) {
var yAxisScale = mergeAxisScale(axisInfo, 'y', globalOptions.yAxis);
_.each(yAxisScale, function (scale, index) {
var factor = index === 0 ? -1 : 1;
var axis = createAxis(scale, 'y', canvas, {
start: { x: 0, y: padding[0] },
end: { x: 0, y: height - xAxisHeight - padding[2] },
factor: factor,
}, globalOptions);
if (index === 0) {
axis.get('group').translate(padding[3], 0);
}
axes.push(axis);
});
axisLayout(axes, paddingComponents, width, padding);
}
if (globalOptions.xAxis.visible) {
var axisPadding = padding_1.getOverlappingPadding(layer, paddingComponents);
var ypos_1 = axes.length === 0 ? height - xAxisHeight - padding[2] : axes[0].get('group').getBBox().maxY;
xAxis.destroy();
xAxis = createAxis(xAxisScale[0], 'x', canvas, {
start: { x: axisPadding[3], y: ypos_1 },
end: { x: width - axisPadding[1], y: ypos_1 },
factor: 1,
}, globalOptions);
paddingComponents.push({
position: 'bottom',
component: xAxis,
getBBox: function () {
var container = xAxis.get('group');
var bbox = container.getBBox();
return new g_1.BBox(bbox.minX, bbox.minY + ypos_1, bbox.width, bbox.height);
},
});
}
return paddingComponents;
}
exports.axesLayout = axesLayout;
function axisLayout(axes, paddingComponents, width, padding) {
// 先处理最左边的
var leftAxis = axes[0];
var leftContainer = leftAxis.get('group');
var leftBbox = leftContainer.getBBox();
leftContainer.translate(leftBbox.width, 0);
paddingComponents.push({
position: 'left',
component: leftAxis,
getBBox: function () {
var matrix = leftContainer.attr('matrix');
return new g_1.BBox(leftBbox.minX + matrix[6], leftBbox.minY, leftBbox.width, leftBbox.height);
},
});
var temp_width = padding[1];
var _loop_1 = function (i) {
var axis = axes[i];
var container = axis.get('group');
var bbox = container.getBBox();
container.translate(width - temp_width - bbox.width, 0);
temp_width += bbox.width + AXIS_GAP;
var component = {
position: 'right',
component: axis,
getBBox: function () {
var matrix = container.attr('matrix');
return new g_1.BBox(bbox.minX + matrix[6], bbox.minX, bbox.width, bbox.height);
},
};
paddingComponents.push(component);
};
// 处理右边的
for (var i = axes.length - 1; i > 0; i--) {
_loop_1(i);
}
}
function adjustColorStyle(color, options) {
return {
line: options.line
? {
stroke: color,
lineWidth: 1,
}
: null,
tickLine: options.tickLine
? {
stroke: color,
lineWidth: 1,
length: 5,
}
: null,
label: options.label
? {
textStyle: {
fill: color,
},
}
: null,
};
}
function drawYGrid(axis, coord, container, globalOptions) {
var theme = getTheme(globalOptions);
var gridCfg = globalOptions.yAxis.grid;
var defaultStyle = theme.axis.y.grid.style;
var style = _.deepMix({}, defaultStyle, gridCfg.style);
var gridGroup = container.addGroup();
var labelItems = axis.get('labelItems');
_.each(labelItems, function (item, index) {
if (index > 0) {
gridGroup.addShape('path', {
attrs: tslib_1.__assign({ path: [
['M', coord.start.x, item.point.y],
['L', coord.end.x, item.point.y],
] }, style),
});
}
});
}
exports.drawYGrid = drawYGrid;
function toAxisStyle(theme) {
var style = {};
_.each(theme, function (t, key) {
if (_.hasKey(t, 'style')) {
style[key] = t.style;
}
});
return style;
}
function getTheme(options) {
var theme = theme_1.getGlobalTheme();
if (options.theme) {
if (_.isString(options.theme)) {
theme = theme_1.getGlobalTheme(options.theme);
}
else if (_.isObject(options.theme)) {
theme = options.theme;
}
}
return theme;
}
//# sourceMappingURL=globalAxis.js.map