@alicloud/cloud-charts
Version:
511 lines (433 loc) • 15.7 kB
JavaScript
;
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import Base from "../common/Base";
import { MarkerSymbols } from "@antv/g2/esm/util/marker";
import { getShapeFactory } from "@antv/g2/esm/core";
import errorWrap from '../common/errorWrap';
import themes from '../themes/index';
import { propertyAssign, getDataIndexColor, propertyMap } from '../common/common';
import highchartsDataToG2Data from '../common/dataAdapter';
import { drawGuideArea, drawGuideLine, drawGuideFilter } from '../common/guide';
import rectXAxis from '../common/rectXAxis';
import rectYAxis from '../common/rectYAxis';
import autoTimeMask from '../common/autoTimeMask';
import rectTooltip from '../common/rectTooltip';
import rectLegend from '../common/rectLegend';
import legendFilter from '../common/legendFilter';
import label from '../common/label';
import geomSize from '../common/geomSize';
import geomStyle from '../common/geomStyle';
import { warn } from '../common/log';
import "./index.css";
function getLegendItems(lineData, scatterData, lineGeom, scatterGeom, config) {
var result = [];
var reMap = {};
var lineColors = config.lineColors,
scatterColors = config.scatterColors;
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 = 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(scatterData, scatterGeom, 'point', scatterColors);
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;
}
export var Linescatter = /*#__PURE__*/function (_Base) {
_inheritsLoose(Linescatter, _Base);
function Linescatter() {
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 = 'G2LineScatter';
_this.convertData = false;
_this.rawLineData = [];
_this.lineView = void 0;
_this.rawScatterData = [];
_this.scatterView = void 0;
return _this;
}
var _proto = Linescatter.prototype;
_proto.getDefaultConfig = function getDefaultConfig() {
return {
lineColors: themes.category_12.slice(1),
scatterColors: themes.linear_10,
padding: 'auto',
xAxis: {
type: 'time',
mask: 'auto',
// 上述type为time时，此字段生效
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,
stack: false,
// 仅Area有效
spline: false,
grid: false,
symbol: false,
scatterSize: null
};
};
_proto.beforeInit = function beforeInit(props) {
return _extends({
syncViewPadding: true
}, props);
};
_proto.init = function init(chart, config, data) {
var _this2 = this;
var rawLineData = [];
this.rawLineData = rawLineData;
var rawScatterData = [];
this.rawScatterData = rawScatterData;
(data || []).forEach(function (d) {
if (d.type === 'line') {
rawLineData.push(d);
} else if (d.type === 'scatter') {
rawScatterData.push(d);
}
});
var lineData = highchartsDataToG2Data(rawLineData, config, {// type: 'lineType',
});
var scatterData = highchartsDataToG2Data(rawScatterData, config, {// type: 'scatterType',
});
var defs = {
x: propertyAssign(propertyMap.axis, {
type: 'cat' // fix 更新数据时x轴无法清除数据
// sync: 'x',
}, config.xAxis),
type: {
type: 'cat'
}
};
if (Array.isArray(config.yAxis)) {
config.yAxis.forEach(function (axis, yIndex) {
defs["y" + yIndex] = propertyAssign(propertyMap.axis, {
type: 'linear',
tickCount: 5,
nice: true
}, axis);
});
} else {
defs.y = propertyAssign(propertyMap.axis, {
type: 'linear',
tickCount: 5,
// 单轴时，必须同步度量，否则会两个度量叠加在一起
sync: true,
nice: true
}, config.yAxis);
}
autoTimeMask(defs, this.rawData);
chart.scale(defs); // 设置X轴
rectXAxis(this, chart, config);
if (Array.isArray(config.yAxis)) {
config.yAxis.forEach(function (axis, yIndex) {
var axisColor = getDataIndexColor(config.lineColors, rawLineData, yIndex) || getDataIndexColor(config.scatterColors, rawScatterData, yIndex) || themes['widgets-axis-line'];
var yAxisConfig = {
line: {
style: {
stroke: axisColor
}
}
};
if (yIndex !== 0) {
yAxisConfig.grid = null; // 因为是多个view组成的图表，所以这里需要移动位置
yAxisConfig.position = 'right';
}
rectYAxis(_this2, chart, _extends({}, config, {
yAxis: axis
}), "y" + yIndex, yAxisConfig);
});
} else {
// 设置单个Y轴
rectYAxis(this, chart, config);
} // tooltip
rectTooltip(this, chart, config, {}, null, {// showCrosshairs: false,
// showMarkers: false
}); // 正式开始绘图，创建两个不同的view
var lineView = chart.createView({
padding: config.padding === 'auto' ? 'auto' : 0
});
lineView.data(lineData);
this.lineView = lineView;
var scatterView = chart.createView({
padding: config.padding === 'auto' ? 'auto' : 0
});
scatterView.data(scatterData);
this.scatterView = scatterView; // 关闭一个View的X轴，避免重叠字体变粗
scatterView.axis('x', false);
if (Array.isArray(config.yAxis)) {
config.yAxis.forEach(function (asix, yIndex) {
if (getDataIndexColor(config.scatterColors, rawScatterData, yIndex)) {
drawScatter(scatterView, config, "y" + yIndex, 'type');
}
if (getDataIndexColor(config.lineColors, rawLineData, yIndex)) {
drawLine(lineView, config, "y" + yIndex, 'type');
}
});
} else {
// 单Y轴时同时关闭一个View的Y轴，避免重叠字体变粗
scatterView.axis('y', false);
drawScatter(scatterView, config, 'y', 'type');
drawLine(lineView, config, 'y', 'type');
} // 绘制辅助线，辅助背景区域
viewGuide(config, lineView, rawLineData, scatterView, rawScatterData);
legendFilter(this, scatterView, 'rawScatterData');
legendFilter(this, lineView, 'rawLineData');
rectLegend(this, chart, config, {
items: getLegendItems(rawLineData, rawScatterData, lineView.geometries[0], scatterView.geometries[0], config)
}, false);
};
_proto.changeData = function changeData(chart, config, data) {
var rawLineData = [];
this.rawLineData = rawLineData;
var rawScatterData = [];
this.rawScatterData = rawScatterData;
(data || []).forEach(function (d) {
if (d.type === 'line') {
rawLineData.push(d);
} else if (d.type === 'scatter') {
rawScatterData.push(d);
}
});
var lineData = highchartsDataToG2Data(rawLineData, config, {// type: 'lineType',
});
var scatterData = highchartsDataToG2Data(rawScatterData, config, {// type: 'scatterType',
});
this.scatterView && this.scatterView.data(scatterData);
this.lineView && this.lineView.data(lineData);
if (this.scatterView && 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, rawScatterData, this.lineView.geometries[0], this.scatterView.geometries[0], config); // chart.legend({
// items: newItems
// });
}
} // 更新数据后再次render，保证 padding 能正确计算。
chart.render(true);
};
return Linescatter;
}(Base);
var Wlinescatter = errorWrap(Linescatter);
export default Wlinescatter;
function drawScatter(chart, config, yAxisKey, legendKey) {
if (yAxisKey === void 0) {
yAxisKey = 'y';
}
if (legendKey === void 0) {
legendKey = 'type';
}
var scatterColors = config.scatterColors,
scatterSize = config.scatterSize,
scatterGeomStyle = config.scatterGeomStyle;
var intervalGeom = chart.point().color('type', scatterColors).position(['x', yAxisKey]).shape('circle');
geomStyle(intervalGeom, scatterGeomStyle);
label({
geom: intervalGeom,
config: config,
field: yAxisKey,
extraConfigKey: 'scatterLabel'
});
geomSize(intervalGeom, scatterSize, 4, yAxisKey, "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) {
geomStyle(areaGeom, config.area.geomStyle, {}, "x*" + yAxisKey + "*type*extra");
}
}
geomStyle(lineGeom, config.lineGeomStyle, {
lineWidth: lineWidth || themes['widgets-line-width'],
lineJoin: 'round'
}, "x*" + yAxisKey + "*" + legendKey + "*extra");
label({
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') {
geomSize(pointGeom, config.symbol.size, 3, yAxisKey, legendKey);
if (config.symbol.geomStyle) {
geomStyle(pointGeom, config.symbol.geomStyle, {}, "x*" + yAxisKey + "*" + legendKey + "*extra");
}
}
}
return lineGeom;
}
function viewGuide(config, lineView, rawLineData, scatterView, rawScatterData) {
var guide = config.guide;
if (!guide) {
return;
}
var guideLine = guide.line,
guideArea = guide.area,
guideFilter = guide.filter,
other = _objectWithoutPropertiesLoose(guide, ["line", "area", "filter"]);
if (guideLine) {
if (Array.isArray(guideLine)) {
guideLine.forEach(function (line) {
drawGuideLine(getGuideView(config, line, lineView, rawLineData, scatterView, rawScatterData), line);
});
} else {
drawGuideLine(getGuideView(config, guideLine, lineView, rawLineData, scatterView, rawScatterData), guideLine);
}
}
if (guideArea) {
if (Array.isArray(guideArea)) {
guideArea.forEach(function (area) {
drawGuideArea(getGuideView(config, area, lineView, rawLineData, scatterView, rawScatterData), area);
});
} else {
drawGuideArea(getGuideView(config, guideArea, lineView, rawLineData, scatterView, rawScatterData), guideArea);
}
}
if (guideFilter) {
if (Array.isArray(guideFilter)) {
guideFilter.forEach(function (filter) {
drawGuideFilter(getGuideView(config, filter, lineView, rawLineData, scatterView, rawScatterData), filter);
});
} else {
drawGuideFilter(getGuideView(config, guideFilter, lineView, rawLineData, scatterView, rawScatterData), guideFilter);
}
}
if (!guideLine && !guideArea && !guideFilter && Object.keys(other).length > 0) {
warn('config.guide', '配置异常，请使用 guide.line、guide.area、guide.filter');
}
}
function getGuideView(config, guide, lineView, rawLineData, scatterView, rawScatterData) {
var target = guide.target,
axis = guide.axis,
value = guide.value; // 如果用户指定了绘制目标，直接使用
if (target === 'line') {
return lineView;
} else if (target === 'scatter') {
return scatterView;
}
if (axis && (value || value === 0) && /y\d/.test(axis)) {
var yIndex = Number(axis.replace(/^y/, ''));
if (getDataIndexColor(config.scatterColors, rawScatterData, yIndex)) {
return scatterView;
}
}
return lineView;
}
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;
}