@alicloud/cloud-charts
Version:
315 lines (309 loc) • 16.8 kB
JavaScript
'use strict';
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import ReactDOM from 'react-dom';
import { get } from '@antv/util';
import Base from '../common/Base';
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 { computeData } from '../common/utils/transformTreeNodeData';
import { FullCrossName } from '../constants';
import Wnumber from '../Wnumber';
import themes from '../themes/index';
import { drillDown } from '../common/interaction/drill-down';
import "./index.css";
function dodgeItems(data, config) {
var _config$legend, _config$legend2, _config$legend3, _config$legend4, _config$legend5, _config$legend6, _config$legend7;
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)) {
newItems = [];
// 这里用处理后的树数据
// 默认只展示第一层
// 暂时不支持自定义颜色
data.forEach(function (subData) {
if (subData.depth === 1) {
var _subData$id;
newItems.push({
id: (_subData$id = subData === null || subData === void 0 ? void 0 : subData.id) !== null && _subData$id !== void 0 ? _subData$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: subData.color,
lineAppendWidth: 0,
fillOpacity: 1
}
},
unchecked: false
});
}
});
} else if (config !== null && config !== void 0 && (_config$legend4 = config.legend) !== null && _config$legend4 !== void 0 && _config$legend4.table && !(config !== null && config !== void 0 && (_config$legend5 = config.legend) !== null && _config$legend5 !== void 0 && _config$legend5.foldable) && !(config !== null && config !== void 0 && (_config$legend6 = config.legend) !== null && _config$legend6 !== void 0 && _config$legend6.dodge)) {
newItems = [];
data.forEach(function (subData) {
var _subData$id2;
newItems.push({
id: (_subData$id2 = subData === null || subData === void 0 ? void 0 : subData.id) !== null && _subData$id2 !== void 0 ? _subData$id2 : 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: subData.color,
lineAppendWidth: 0,
fillOpacity: 1
}
},
unchecked: false
});
});
} else if (config !== null && config !== void 0 && (_config$legend7 = config.legend) !== null && _config$legend7 !== void 0 && _config$legend7.items) {
// 自定义优先级高于内置配置
newItems = config.legend.items;
}
return newItems;
}
function deleteChildren(dom) {
var _dom$getElementsByCla;
var container = (_dom$getElementsByCla = dom.getElementsByClassName(FullCrossName + "-children")) === null || _dom$getElementsByCla === void 0 ? void 0 : _dom$getElementsByCla[0];
if (container) {
dom.removeChild(container);
}
container = document.createElement('div');
return container;
}
export var Sunburst = /*#__PURE__*/function (_Base) {
_inheritsLoose(Sunburst, _Base);
function Sunburst() {
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 = 'id';
_this.convertData = false;
_this.totalData = 0;
_this.dataView = null;
_this.data = [];
return _this;
}
var _proto = Sunburst.prototype;
_proto.getDefaultConfig = function getDefaultConfig() {
return {
colors: themes.category_12,
// padding: [20, 20, 20, 20],
legend: {
position: 'right',
align: 'center',
// nameFormatter: null, // 可以强制覆盖，手动设置label
// valueFormatter: null,
// dodge: true,
// showData: true,
table: {
statistics: ['current'],
hideTitle: true
},
clickable: false
},
tooltip: {
nameFormatter: null,
valueFormatter: null
},
cycle: false,
innerRadius: 0.6,
// 内环半径大小，仅cycle为true时可用
outerRadius: 0.8,
// 饼图半径大小，初始化时可用
innerContent: true,
autoSort: true,
// 默认按大 -> 小排序
reverse: false,
// 是否逆序
showSpacing: true,
// 显示间隔
select: true // 选中下钻
// drawPadding: [10, 10, 10, 10],
};
};
_proto.init = function init(chart, config, data) {
var _ref,
_config$legend$decima,
_config$legend8,
_config$tooltip,
_this2 = this;
var _computeData = computeData(data, config, this),
source = _computeData.source,
total = _computeData.total;
this.totalData = numberDecimal(total, (_ref = (_config$legend$decima = config === null || config === void 0 ? void 0 : (_config$legend8 = config.legend) === null || _config$legend8 === void 0 ? void 0 : _config$legend8.decimal) !== null && _config$legend$decima !== void 0 ? _config$legend$decima : config === null || config === void 0 ? void 0 : (_config$tooltip = config.tooltip) === null || _config$tooltip === void 0 ? void 0 : _config$tooltip.decimal) !== null && _ref !== void 0 ? _ref : 2);
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 newItems = dodgeItems(source, config);
rectLegend(this, chart, config, {
items: newItems
}, 'single', 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) {
var _pointData$parentList;
if (typeof config.tooltip === 'boolean') {
return;
}
var pointData = item.data;
var rootNode = pointData === null || pointData === void 0 ? void 0 : (_pointData$parentList = pointData.parentList) === null || _pointData$parentList === void 0 ? void 0 : _pointData$parentList[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({
// TODO 控制每一层的宽度占比
// 多层饼图配置不生效
// multiplePieWidthRatio: 1
}).position('x*y')
// 暂不支持自定义颜色
.color('name*color', function (xVal, yVal) {
return yVal;
}).tooltip('name*value*rawValue*depth', function (name, value) {
return {
name: name,
value: value
};
});
geomStyle(geom, config.geomStyle, function () {
var value = (arguments.length <= 1 ? undefined : arguments[1]) || (arguments.length <= 2 ? undefined : arguments[2]);
var deep = arguments.length <= 3 ? undefined : arguments[3];
var percent = arguments.length <= 4 ? undefined : arguments[4];
return {
// 增加圆环边线装饰
stroke: themes['widgets-color-background'],
lineWidth: config.showSpacing && value !== 0 && percent > 0.005 ? 1 : 0,
cursor: config.select && deep === 1 && !_this2.isEmpty ? 'pointer' : 'default'
};
}, 'name*value*rawValue*depth*percent');
polarLegendLayout(chart);
// 环图中心内容
if (config.cycle && config.innerContent && !this.props.children && !this.isEmpty && !this.props.loading && !this.props.errorInfo) {
var _config$innerContent$, _config$innerContent, _this$rawData, _config$innerContent$2, _config$innerContent2, _config$innerContent$3, _config$innerContent3, _ref2, _config$legend$decima2, _config$legend9, _config$tooltip2;
var container = deleteChildren(this.chartDom);
container.className = FullCrossName + "-children";
var firstChild = this.chartDom.firstChild;
this.chartDom.insertBefore(container, firstChild);
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$rawData = this.rawData) === null || _this$rawData === void 0 ? void 0 : _this$rawData.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 : ''
}, numberDecimal((_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, (_ref2 = (_config$legend$decima2 = config === null || config === void 0 ? void 0 : (_config$legend9 = config.legend) === null || _config$legend9 === void 0 ? void 0 : _config$legend9.decimal) !== null && _config$legend$decima2 !== void 0 ? _config$legend$decima2 : config === null || config === void 0 ? void 0 : (_config$tooltip2 = config.tooltip) === null || _config$tooltip2 === void 0 ? void 0 : _config$tooltip2.decimal) !== null && _ref2 !== void 0 ? _ref2 : 2));
ReactDOM.render(content, container);
} else if (!this.props.children) {
// 删去中心内容
deleteChildren(this.chartDom);
}
chart.on('afterpaint', function () {
updateChildrenPosition(chart, _this2.chartDom);
});
drillDown(chart, function (context, isCenter) {
var _view$filteredData;
var view = context.view;
var filterData = (_view$filteredData = view.filteredData) !== null && _view$filteredData !== void 0 ? _view$filteredData : [];
var eventData = get(context, ['event', 'data', 'data']);
if (!_this2.isEmpty) {
var _ref3, _config$innerContent$4, _config$innerContent4, _this2$rawData, _config$innerContent$5, _config$innerContent5, _config$innerContent$6, _config$innerContent6;
var sum = 0;
if (isCenter) {
sum = _this2.totalData;
} else {
filterData.forEach(function (el) {
if (!(el !== null && el !== void 0 && el.children)) {
var _el$value;
sum += (_el$value = el === null || el === void 0 ? void 0 : el.value) !== null && _el$value !== void 0 ? _el$value : 0;
}
});
}
var newContainer = deleteChildren(_this2.chartDom);
newContainer.className = FullCrossName + "-children";
var _firstChild = _this2.chartDom.firstChild;
_this2.chartDom.insertBefore(newContainer, _firstChild);
var _content = /*#__PURE__*/React.createElement(Wnumber, {
bottomTitle: (_ref3 = (_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 : eventData === null || eventData === void 0 ? void 0 : eventData.name) !== null && _ref3 !== void 0 ? _ref3 : _this2 === null || _this2 === void 0 ? void 0 : (_this2$rawData = _this2.rawData) === null || _this2$rawData === void 0 ? void 0 : _this2$rawData.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 : sum);
ReactDOM.render(_content, newContainer);
updateChildrenPosition(chart, _this2.chartDom);
}
});
};
_proto.changeData = function changeData(chart, config, data) {
var _computeData2 = computeData(data, config, this),
source = _computeData2.source,
total = _computeData2.total;
this.totalData = total;
// 多重圆环为自定义图例，需要根据数据重新计算
var newItems = dodgeItems(source, config);
chart.legend({
items: newItems
});
chart.changeData(source);
// 环图中心内容
if (config.cycle && config.innerContent && !this.props.children && !this.props.loading && !this.props.errorInfo) {
var _config$innerContent$7, _config$innerContent7, _this$rawData2, _config$innerContent$8, _config$innerContent8, _config$innerContent$9, _config$innerContent9;
var container = deleteChildren(this.chartDom);
container.className = FullCrossName + "-children";
var firstChild = this.chartDom.firstChild;
this.chartDom.insertBefore(container, firstChild);
var content = /*#__PURE__*/React.createElement(Wnumber, {
bottomTitle: (_config$innerContent$7 = config === null || config === void 0 ? void 0 : (_config$innerContent7 = config.innerContent) === null || _config$innerContent7 === void 0 ? void 0 : _config$innerContent7.title) !== null && _config$innerContent$7 !== void 0 ? _config$innerContent$7 : (_this$rawData2 = this.rawData) === null || _this$rawData2 === void 0 ? void 0 : _this$rawData2.name,
unit: (_config$innerContent$8 = config === null || config === void 0 ? void 0 : (_config$innerContent8 = config.innerContent) === null || _config$innerContent8 === void 0 ? void 0 : _config$innerContent8.unit) !== null && _config$innerContent$8 !== void 0 ? _config$innerContent$8 : ''
}, (_config$innerContent$9 = config === null || config === void 0 ? void 0 : (_config$innerContent9 = config.innerContent) === null || _config$innerContent9 === void 0 ? void 0 : _config$innerContent9.value) !== null && _config$innerContent$9 !== void 0 ? _config$innerContent$9 : this.totalData);
ReactDOM.render(content, container);
updateChildrenPosition(chart, this.chartDom);
}
};
return Sunburst;
}(Base);
var WmultiPie = errorWrap(Sunburst);
var Wsunburst = errorWrap(Sunburst);
export { WmultiPie, Wsunburst };