@alicloud/cloud-charts
Version:
495 lines (404 loc) • 15.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.Linebox = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _Base2 = _interopRequireDefault(require("../common/Base"));
var _errorWrap = _interopRequireDefault(require("../common/errorWrap"));
var _index = _interopRequireDefault(require("../themes/index"));
var _core = require("@antv/g2/esm/core");
var _common = require("../common/common");
var _dataAdapter = _interopRequireDefault(require("../common/dataAdapter"));
var _rectXAxis = _interopRequireDefault(require("../common/rectXAxis"));
var _rectYAxis = _interopRequireDefault(require("../common/rectYAxis"));
var _autoTimeMask = _interopRequireDefault(require("../common/autoTimeMask"));
var _rectTooltip = _interopRequireDefault(require("../common/rectTooltip"));
var _rectLegend = _interopRequireDefault(require("../common/rectLegend"));
var _legendFilter = _interopRequireDefault(require("../common/legendFilter"));
var _label = _interopRequireDefault(require("../common/label"));
var _geomSize = _interopRequireDefault(require("../common/geomSize"));
var _geomStyle = _interopRequireDefault(require("../common/geomStyle"));
var _interaction = require("../common/interaction");
function getLegendItems(lineData, boxData, lineGeom, boxGeom, config) {
var result = [];
var reMap = {};
var lineColors = config.lineColors,
boxColors = config.boxColors;
function getItems(data, geom, shapeType, colors, style) {
data.forEach(function (d, i) {
var name = d.name,
visible = d.visible,
data = d.data;
if (reMap[name] || !data || data.length === 0) {
return;
} else {
reMap[name] = true;
}
var marker;
var shapeFactory = (0, _core.getShapeFactory)(geom.shapeType);
if (shapeFactory) {
marker = shapeFactory.getMarker(shapeType, {
color: typeof colors === 'string' ? colors : Array.isArray(colors) ? colors[i % colors.length] : colors(name),
isInPolar: false
});
var symbol = marker.symbol; // @ts-ignore
if (typeof symbol === 'string' && MarkerSymbols[symbol]) {
// @ts-ignore
marker.symbol = MarkerSymbols[symbol];
}
}
if (style) {
Object.assign(marker.style, style);
}
result.push({
id: name,
name: name,
value: name,
marker: marker,
unchecked: visible === false
});
});
}
getItems(boxData, boxGeom, 'box', boxColors);
var area = config.area,
spline = config.spline;
var lineShapeType = 'line';
var lineStyle = {};
if (area) {
lineShapeType = 'area';
}
if (spline) {
lineShapeType = 'smooth';
}
if (!area && spline) {
lineStyle.fill = null;
}
getItems(lineData, lineGeom, lineShapeType, lineColors, lineStyle);
return result;
}
var Linebox = /*#__PURE__*/function (_Base) {
(0, _inheritsLoose2["default"])(Linebox, _Base);
function Linebox() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _Base.call.apply(_Base, [this].concat(args)) || this;
_this.chartName = 'G2Linebox';
_this.convertData = false;
_this.rawLineData = [];
_this.lineView = void 0;
_this.rawBoxData = [];
_this.boxView = void 0;
return _this;
}
var _proto = Linebox.prototype;
_proto.getDefaultConfig = function getDefaultConfig() {
return {
lineColors: _index["default"].category_12.slice(1),
boxColors: _index["default"].linear_10,
padding: 'auto',
xAxis: {
type: 'timeCat',
// 默认为线性
mask: 'auto',
labelFormatter: null,
// 可以强制覆盖，手动设置label
categories: null,
// autoRotate: false,
max: null,
min: null
},
yAxis: {
labelFormatter: null,
// 可以强制覆盖，手动设置label
max: null,
min: null
},
legend: {
align: 'left',
nameFormatter: null // 可以强制覆盖，手动设置label
},
tooltip: {
titleFormatter: null,
nameFormatter: null,
valueFormatter: null
},
area: false,
dodge: true,
marginRatio: 0,
grid: false,
symbol: false,
boxSize: null
};
};
_proto.beforeInit = function beforeInit(props) {
return (0, _extends2["default"])({
syncViewPadding: true
}, props);
};
_proto.init = function init(chart, config, data) {
var _this2 = this;
var rawLineData = [];
this.rawLineData = rawLineData;
var rawBoxData = [];
this.rawBoxData = rawBoxData;
(data || []).forEach(function (d) {
if (d.type === 'line') {
rawLineData.push(d);
} else if (d.type === 'box') {
rawBoxData.push(d);
}
});
var lineData = (0, _dataAdapter["default"])(rawLineData, config, {});
var boxData = (0, _dataAdapter["default"])(rawBoxData, config, {});
var defs = {
x: (0, _common.propertyAssign)(_common.propertyMap.axis, {
type: 'cat',
// fix 更新数据时x轴无法清除数据
sync: true
}, config.xAxis),
type: {
type: 'cat'
}
}; // 双轴
if (Array.isArray(config.yAxis)) {
config.yAxis.forEach(function (axis, yIndex) {
defs["y" + yIndex] = (0, _common.propertyAssign)(_common.propertyMap.axis, {
type: 'linear',
tickCount: 5,
nice: true
}, axis);
});
} else {
defs.y = (0, _common.propertyAssign)(_common.propertyMap.axis, {
type: 'linear',
tickCount: 5,
// 单轴时，必须同步度量，否则会两个度量叠加在一起
sync: true,
nice: true
}, config.yAxis);
}
(0, _autoTimeMask["default"])(defs, this.rawData);
chart.scale(defs); // 设置X轴
(0, _rectXAxis["default"])(this, chart, config);
if (Array.isArray(config.yAxis)) {
config.yAxis.forEach(function (axis, yIndex) {
var axisColor = (0, _common.getDataIndexColor)(config.lineColors, rawLineData, yIndex) || (0, _common.getDataIndexColor)(config.boxColors, rawBoxData, yIndex) || _index["default"]['widgets-axis-line'];
var yAxisConfig = {
line: {
style: {
stroke: axisColor
}
}
};
if (yIndex !== 0) {
yAxisConfig.grid = null; // 因为是多个view组成的图表，所以这里需要移动位置
yAxisConfig.position = 'right';
}
(0, _rectYAxis["default"])(_this2, chart, (0, _extends2["default"])({}, config, {
yAxis: axis
}), "y" + yIndex, yAxisConfig);
});
} else {
// 设置单个Y轴
(0, _rectYAxis["default"])(this, chart, config);
}
(0, _rectTooltip["default"])(this, chart, config, {}, null, {
showCrosshairs: false,
showMarkers: false
}); // 正式开始绘图，创建两个不同的view
var boxView = chart.createView({
padding: config.padding === 'auto' ? 'auto' : 0
});
boxView.data(boxData);
this.boxView = boxView; // Tooltip 背景区域
(0, _interaction.activeRegionWithTheme)(boxView);
var lineView = chart.createView({
padding: config.padding === 'auto' ? 'auto' : 0
});
lineView.data(lineData);
this.lineView = lineView; // 关闭一个View的X轴，避免重叠字体变粗
lineView.axis('x', false);
if (Array.isArray(config.yAxis)) {
config.yAxis.forEach(function (asix, yIndex) {
if ((0, _common.getDataIndexColor)(config.boxColors, rawBoxData, yIndex)) {
drawBox(boxView, config, "y" + yIndex, 'type');
}
if ((0, _common.getDataIndexColor)(config.lineColors, rawLineData, yIndex)) {
drawLine(lineView, config, "y" + yIndex, 'type');
}
});
} else {
// 单Y轴时同时关闭一个View的Y轴，避免重叠字体变粗
lineView.axis('y', false);
drawBox(boxView, config, 'y', 'type');
drawLine(lineView, config, 'y', 'type');
} // 绘制辅助线，辅助背景区域
// viewGuide(config, lineView, rawLineData, boxView, rawBoxData);
(0, _legendFilter["default"])(this, boxView, 'rawBoxData');
(0, _legendFilter["default"])(this, lineView, 'rawLineData');
(0, _rectLegend["default"])(this, chart, config, {
items: getLegendItems(rawLineData, rawBoxData, lineView.geometries[0], boxView.geometries[0], config)
}, false);
};
_proto.changeData = function changeData(chart, config, data) {
var rawLineData = [];
this.rawLineData = rawLineData;
var rawBoxData = [];
this.rawBoxData = rawBoxData;
(data || []).forEach(function (d) {
if (d.type === 'line') {
rawLineData.push(d);
} else if (d.type === 'box') {
rawBoxData.push(d);
}
});
var lineData = (0, _dataAdapter["default"])(rawLineData, config, {});
var boxData = (0, _dataAdapter["default"])(rawBoxData, config, {});
this.boxView && this.boxView.data(boxData);
this.lineView && this.lineView.data(lineData);
if (this.boxView && this.lineView) {
var chartOptions = chart.getOptions();
var legend = chart.getController('legend');
var legendCos = legend.getComponents(); // 图例项可见，更新图例项
if (legend.visible && legendCos.length > 0 && typeof chartOptions.legends === 'object') {
chartOptions.legends.items = getLegendItems(rawLineData, rawBoxData, this.lineView.geometries[0], this.boxView.geometries[0], config); // chart.legend({
// items: newItems
// });
}
} // 更新数据后再次render，保证 padding 能正确计算。
chart.render(true);
};
return Linebox;
}(_Base2["default"]);
exports.Linebox = Linebox;
var Wlinebox = (0, _errorWrap["default"])(Linebox);
var _default = Wlinebox;
exports["default"] = _default;
function drawBox(chart, config, yAxisKey, legendKey) {
if (yAxisKey === void 0) {
yAxisKey = 'y';
}
if (legendKey === void 0) {
legendKey = 'type';
}
var marginRatio = config.marginRatio,
dodge = config.dodge,
boxSize = config.boxSize,
boxColors = config.boxColors,
_config$boxMinSize = config.boxMinSize,
boxMinSize = _config$boxMinSize === void 0 ? 20 : _config$boxMinSize,
_config$boxMaxSize = config.boxMaxSize,
boxMaxSize = _config$boxMaxSize === void 0 ? 24 : _config$boxMaxSize;
var geomConfig = {
minColumnWidth: boxMinSize || null,
maxColumnWidth: boxMaxSize || null
};
var intervalGeom = chart.schema(geomConfig).position(['x', 'y']).shape('box').color(legendKey, boxColors).state({
active: {
style: function style(ele) {
var _ele$model;
return {
stroke: ele === null || ele === void 0 ? void 0 : (_ele$model = ele.model) === null || _ele$model === void 0 ? void 0 : _ele$model.color
};
}
},
selected: {
style: function style(ele) {
var _ele$model2;
return {
stroke: ele === null || ele === void 0 ? void 0 : (_ele$model2 = ele.model) === null || _ele$model2 === void 0 ? void 0 : _ele$model2.color
};
}
}
});
;
if (dodge !== false) {
intervalGeom.adjust([{
type: 'dodge',
marginRatio: marginRatio || 0.5 // 数值范围为 0 至 1，用于调整分组中各个柱子的间距
}]);
}
(0, _geomSize["default"])(intervalGeom, boxSize, null, yAxisKey, "x*" + yAxisKey + "*" + legendKey + "*extra");
(0, _geomStyle["default"])(intervalGeom, config.boxGeomStyle, {
lineWidth: 2
}, "x*" + yAxisKey + "*" + legendKey + "*extra");
return intervalGeom;
}
function drawLine(chart, config, yAxisKey, legendKey) {
if (yAxisKey === void 0) {
yAxisKey = 'y';
}
if (legendKey === void 0) {
legendKey = 'type';
}
var areaColors = config.areaColors || config.lineColors;
if (Array.isArray(config.lineColors) && Array.isArray(config.areaColors)) {
areaColors = mergeArray([], config.lineColors, config.areaColors);
}
var lineGeom = null;
var areaGeom = null;
var lineWidth = config.lineWidth; // 区域、堆叠、平滑曲线
var lineShape = config.spline ? 'smooth' : 'line';
var areaShape = config.spline ? 'smooth' : 'area';
var stack = config.stack;
if (config.area && stack) {
areaGeom = chart.area().position(['x', yAxisKey]).color(legendKey, areaColors).tooltip(false).shape(areaShape).adjust('stack');
lineGeom = chart.line().position(['x', yAxisKey]).color(legendKey, config.lineColors).shape(lineShape).adjust('stack');
} else if (config.area && !stack) {
areaGeom = chart.area().position(['x', yAxisKey]).color(legendKey, areaColors).tooltip(false).shape(areaShape);
lineGeom = chart.line().position(['x', yAxisKey]).color(legendKey, config.lineColors).shape(lineShape);
} else {
lineGeom = chart.line().position(['x', yAxisKey]).color(legendKey, config.lineColors).shape(lineShape);
}
if (areaGeom && typeof config.area === 'object') {
if (config.area.geomStyle) {
(0, _geomStyle["default"])(areaGeom, config.area.geomStyle, {}, "x*" + yAxisKey + "*type*extra");
}
}
(0, _geomStyle["default"])(lineGeom, config.lineGeomStyle, {
lineWidth: lineWidth || _index["default"]['widgets-line-width'],
lineJoin: 'round'
}, "x*" + yAxisKey + "*" + legendKey + "*extra");
(0, _label["default"])({
geom: lineGeom,
config: config,
field: yAxisKey,
extraConfigKey: 'lineLabel'
}); // 曲线默认点
if (config.symbol) {
var pointGeom = null;
if (config.area && stack) {
pointGeom = chart.point().adjust('stack').position(['x', yAxisKey]).color(legendKey, config.lineColors).shape('circle').size(3);
} else {
pointGeom = chart.point().position(['x', yAxisKey]).color(legendKey, config.lineColors).shape('circle').size(3);
}
if (typeof config.symbol === 'object') {
(0, _geomSize["default"])(pointGeom, config.symbol.size, 3, yAxisKey, legendKey);
if (config.symbol.geomStyle) {
(0, _geomStyle["default"])(pointGeom, config.symbol.geomStyle, {}, "x*" + yAxisKey + "*" + legendKey + "*extra");
}
}
}
return lineGeom;
}
function mergeArray(target) {
for (var _len2 = arguments.length, source = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
source[_key2 - 1] = arguments[_key2];
}
source.forEach(function (s) {
if (!s || s.length === 0) {
return;
}
s.forEach(function (item, i) {
if (i >= target.length) {
target.push(item);
} else {
target[i] = item;
}
});
});
return target;
}