@alicloud/cloud-charts
Version:
339 lines (286 loc) • 14.2 kB
JavaScript
'use strict';
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import { View as DataView } from '@antv/data-set/lib/view';
import '@antv/data-set/lib/api/hierarchy';
import '@antv/data-set/lib/connector/hierarchy';
import '@antv/data-set/lib/transform/hierarchy/partition';
import Base from '../common/Base';
import themes from '../themes/index';
import { numberDecimal } from '../common/common';
import rectTooltip from '../common/rectTooltip';
import rectLegend from '../common/rectLegend';
import geomStyle from '../common/geomStyle';
import polarLegendLayout from '../common/polarLegendLayout';
import updateChildrenPosition from '../common/updateChildrenPosition';
import errorWrap from '../common/errorWrap';
import ReactDOM from 'react-dom';
import { FullCrossName } from '../constants';
import Wnumber from '../Wnumber';
import "./index.css";
function getParentList(node, target) {
if (target === void 0) {
target = [];
}
var parentNode = node.parent; // 需要存储根节点，所以一直到 parentNode===null（此时在根节点上）
if (!parentNode) {
return target;
}
target.unshift({
name: parentNode.data.name,
value: parentNode.value,
rawValue: parentNode.data.value,
depth: parentNode.depth
});
return getParentList(parentNode, target);
}
function computeData(ctx, data) {
var _dv$root$value, _dv, _dv$root;
var dv = null;
if (ctx.dataView) {
dv = ctx.dataView;
dv.source(data, {
type: 'hierarchy'
});
} else {
dv = new DataView();
ctx.dataView = dv;
dv.source(data, {
type: 'hierarchy'
}).transform({
type: 'hierarchy.partition',
// 根据树形数据生成相邻层次图 Adjacency Diagram 布局
as: ['x', 'y']
});
}
var source = [];
dv.getAllNodes().forEach(function (node) {
if (node.depth === 0) {
// 父节点不展示
return;
} // var obj = {};
// obj.name = node.data.name;
// obj.rawValue = node.data.value;
// obj.value = node.value;
// obj.x = node.x;
// obj.y = node.y;
source.push({
name: node.data.name,
value: node.value,
rawValue: node.data.value,
depth: node.depth,
parent: getParentList(node),
x: node.x,
y: node.y
});
return node;
}); // 挂载转换后的数据
ctx.data = source;
return {
source: source,
total: (_dv$root$value = (_dv = dv) === null || _dv === void 0 ? void 0 : (_dv$root = _dv.root) === null || _dv$root === void 0 ? void 0 : _dv$root.value) !== null && _dv$root$value !== void 0 ? _dv$root$value : 0
};
}
export var MultiPie = /*#__PURE__*/function (_Base) {
_inheritsLoose(MultiPie, _Base);
function MultiPie() {
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 = 'G2MultiPie';
_this.legendField = 'name';
_this.convertData = false;
_this.totalData = 0;
_this.dataView = null;
_this.data = [];
return _this;
}
var _proto = MultiPie.prototype;
_proto.getDefaultConfig = function getDefaultConfig() {
return {
colors: themes.category_12,
// padding: [20, 20, 20, 20],
legend: {
position: 'right',
align: '',
nameFormatter: null,
// 可以强制覆盖，手动设置label
valueFormatter: null
},
tooltip: {
nameFormatter: null,
valueFormatter: null
},
cycle: false,
innerRadius: 0.6,
// 内环半径大小，仅cycle为true时可用
outerRadius: 0.8 // 饼图半径大小，初始化时可用
// drawPadding: [10, 10, 10, 10],
};
};
_proto.init = function init(chart, config, data) {
var _config$legend,
_config$legend2,
_config$legend3,
_config$legend4,
_this2 = this;
var _computeData = computeData(this, data),
source = _computeData.source,
total = _computeData.total;
this.totalData = total;
chart.data(source);
var thetaConfig = {
radius: Math.max(Math.min(config.outerRadius, 1), 0.01)
};
if (config.startAngle !== undefined) {
thetaConfig.startAngle = config.startAngle;
}
if (config.endAngle !== undefined) {
thetaConfig.endAngle = config.endAngle;
}
if (config.cycle) {
thetaConfig.innerRadius = Math.max(Math.min(config.innerRadius, 1), 0);
}
chart.coordinate('polar', thetaConfig);
chart.axis(false); // 需要保证原始数据传入的时候按分组顺序传入
// 这个是分组的顺序
var dodgeGroups = []; // 如果开启图例分组，先判定数据中有分组信息
var newItems = undefined;
if (config !== null && config !== void 0 && (_config$legend = config.legend) !== null && _config$legend !== void 0 && _config$legend.dodge && !(config !== null && config !== void 0 && (_config$legend2 = config.legend) !== null && _config$legend2 !== void 0 && _config$legend2.foldable) && !(config !== null && config !== void 0 && (_config$legend3 = config.legend) !== null && _config$legend3 !== void 0 && _config$legend3.table)) {
var _this$rawData;
newItems = []; // 目前不遍历，和设计师沟通只做前两层
if ((_this$rawData = this.rawData) !== null && _this$rawData !== void 0 && _this$rawData.children) {
var _this$rawData2, _this$rawData2$childr, _this$rawData3, _this$rawData3$childr;
(_this$rawData2 = this.rawData) === null || _this$rawData2 === void 0 ? void 0 : (_this$rawData2$childr = _this$rawData2.children) === null || _this$rawData2$childr === void 0 ? void 0 : _this$rawData2$childr.forEach(function (subData) {
var _newItems, _newItems$filter;
if (subData !== null && subData !== void 0 && subData.dodge && ((_newItems = newItems) === null || _newItems === void 0 ? void 0 : (_newItems$filter = _newItems.filter(function (el) {
return el.dodge === (subData === null || subData === void 0 ? void 0 : subData.dodge);
})) === null || _newItems$filter === void 0 ? void 0 : _newItems$filter.length) == 0) {
dodgeGroups.push((subData === null || subData === void 0 ? void 0 : subData.dodge) || (subData === null || subData === void 0 ? void 0 : subData.facet));
}
});
(_this$rawData3 = this.rawData) === null || _this$rawData3 === void 0 ? void 0 : (_this$rawData3$childr = _this$rawData3.children) === null || _this$rawData3$childr === void 0 ? void 0 : _this$rawData3$childr.sort(function (a, b) {
return dodgeGroups.indexOf(a === null || a === void 0 ? void 0 : a.dodge) - dodgeGroups.indexOf(b === null || b === void 0 ? void 0 : b.dodge);
}).forEach(function (subData, index) {
var rawColor; // 函数暂时不做处理，和默认数组处理方式保持一致
if (typeof (config === null || config === void 0 ? void 0 : config.colors) === 'string') {
rawColor = config === null || config === void 0 ? void 0 : config.colors;
} else if (typeof (config === null || config === void 0 ? void 0 : config.colors) === 'object') {
var _config$colors;
rawColor = config === null || config === void 0 ? void 0 : (_config$colors = config.colors) === null || _config$colors === void 0 ? void 0 : _config$colors[index];
} else if (typeof (config === null || config === void 0 ? void 0 : config.colors) === 'function') {
rawColor = themes.category_12[index];
}
newItems.push({
id: subData === null || subData === void 0 ? void 0 : subData.name,
name: subData === null || subData === void 0 ? void 0 : subData.name,
value: subData === null || subData === void 0 ? void 0 : subData.name,
marker: {
symbol: 'circle',
spacing: 4,
style: {
r: 3,
fill: rawColor,
lineAppendWidth: 0,
fillOpacity: 1
}
},
unchecked: false
});
});
}
} else if (config !== null && config !== void 0 && (_config$legend4 = config.legend) !== null && _config$legend4 !== void 0 && _config$legend4.items) {
// 自定义优先级高于内置配置
newItems = config.legend.items;
}
rectLegend(this, chart, config, {
items: newItems
}, true, null, true); // tooltip
rectTooltip(this, chart, config, {
showTitle: false,
showMarkers: false,
showCrosshairs: false,
shared: false
}, function (ev) {
var items = ev.data.items;
items.forEach(function (item, index) {
if (typeof config.tooltip === 'boolean') {
return;
}
var pointData = item.data;
var rootNode = pointData.parent[0];
var percent = numberDecimal(item.value / rootNode.value, 4);
if (config.tooltip.valueFormatter) {
item.value = config.tooltip.valueFormatter(item.value, _extends({
percent: percent
}, pointData), index, items);
}
if (config.tooltip.nameFormatter) {
item.name = config.tooltip.nameFormatter(item.name, _extends({
percent: percent
}, pointData), index, items);
}
});
}, {
showTitle: false,
showMarkers: false,
showCrosshairs: false,
shared: false
});
var geom = chart.polygon().position('x*y').color('name', config.colors).tooltip('name*value*rawValue*depth', function (name, value) {
return {
name: name,
value: value
};
});
geomStyle(geom, config.geomStyle, undefined, 'name*value*rawValue*depth');
polarLegendLayout(chart); // 环图中心内容
if (config.cycle && config.innerContent && !this.props.children && !this.isEmpty && !this.props.loading && !this.props.errorInfo) {
var _config$innerContent$, _config$innerContent, _this$rawData4, _config$innerContent$2, _config$innerContent2, _config$innerContent$3, _config$innerContent3;
var container = document.createElement('div');
container.className = FullCrossName + "-children";
this.chartDom.appendChild(container);
var content = /*#__PURE__*/React.createElement(Wnumber, {
bottomTitle: (_config$innerContent$ = config === null || config === void 0 ? void 0 : (_config$innerContent = config.innerContent) === null || _config$innerContent === void 0 ? void 0 : _config$innerContent.title) !== null && _config$innerContent$ !== void 0 ? _config$innerContent$ : (_this$rawData4 = this.rawData) === null || _this$rawData4 === void 0 ? void 0 : _this$rawData4.name,
unit: (_config$innerContent$2 = config === null || config === void 0 ? void 0 : (_config$innerContent2 = config.innerContent) === null || _config$innerContent2 === void 0 ? void 0 : _config$innerContent2.unit) !== null && _config$innerContent$2 !== void 0 ? _config$innerContent$2 : ''
}, (_config$innerContent$3 = config === null || config === void 0 ? void 0 : (_config$innerContent3 = config.innerContent) === null || _config$innerContent3 === void 0 ? void 0 : _config$innerContent3.value) !== null && _config$innerContent$3 !== void 0 ? _config$innerContent$3 : this.totalData);
ReactDOM.render(content, container);
} else if (!this.props.children) {
var _this$chartDom$getEle;
// 删去中心内容
var _container = (_this$chartDom$getEle = this.chartDom.getElementsByClassName(FullCrossName + "-children")) === null || _this$chartDom$getEle === void 0 ? void 0 : _this$chartDom$getEle[0];
if (_container) {
this.chartDom.removeChild(_container);
}
}
chart.on('afterpaint', function () {
updateChildrenPosition(chart, _this2.chartDom);
});
};
_proto.changeData = function changeData(chart, config, data) {
var _computeData2 = computeData(this, data),
source = _computeData2.source,
total = _computeData2.total;
this.totalData = total;
chart.changeData(source); // 环图中心内容
if (config.cycle && config.innerContent && !this.props.children && !this.props.loading && !this.props.errorInfo) {
var _this$chartDom$getEle2, _config$innerContent$4, _config$innerContent4, _this$rawData5, _config$innerContent$5, _config$innerContent5, _config$innerContent$6, _config$innerContent6;
var container = (_this$chartDom$getEle2 = this.chartDom.getElementsByClassName(FullCrossName + "-children")) === null || _this$chartDom$getEle2 === void 0 ? void 0 : _this$chartDom$getEle2[0];
if (!container) {
container = document.createElement('div');
container.className = FullCrossName + "-children";
this.chartDom.appendChild(container);
}
var content = /*#__PURE__*/React.createElement(Wnumber, {
bottomTitle: (_config$innerContent$4 = config === null || config === void 0 ? void 0 : (_config$innerContent4 = config.innerContent) === null || _config$innerContent4 === void 0 ? void 0 : _config$innerContent4.title) !== null && _config$innerContent$4 !== void 0 ? _config$innerContent$4 : (_this$rawData5 = this.rawData) === null || _this$rawData5 === void 0 ? void 0 : _this$rawData5.name,
unit: (_config$innerContent$5 = config === null || config === void 0 ? void 0 : (_config$innerContent5 = config.innerContent) === null || _config$innerContent5 === void 0 ? void 0 : _config$innerContent5.unit) !== null && _config$innerContent$5 !== void 0 ? _config$innerContent$5 : ''
}, (_config$innerContent$6 = config === null || config === void 0 ? void 0 : (_config$innerContent6 = config.innerContent) === null || _config$innerContent6 === void 0 ? void 0 : _config$innerContent6.value) !== null && _config$innerContent$6 !== void 0 ? _config$innerContent$6 : this.totalData);
ReactDOM.render(content, container);
}
};
return MultiPie;
}(Base);
var WmultiPie = errorWrap(MultiPie);
export default WmultiPie;