@alicloud/cloud-charts
Version:
317 lines (311 loc) • 17.8 kB
JavaScript
'use strict';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.Wsunburst = exports.WmultiPie = exports.Sunburst = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _util = require("@antv/util");
var _Base2 = _interopRequireDefault(require("../common/Base"));
var _common = require("../common/common");
var _rectTooltip = _interopRequireDefault(require("../common/rectTooltip"));
var _rectLegend = _interopRequireDefault(require("../common/rectLegend"));
var _geomStyle = _interopRequireDefault(require("../common/geomStyle"));
var _polarLegendLayout = _interopRequireDefault(require("../common/polarLegendLayout"));
var _updateChildrenPosition = _interopRequireDefault(require("../common/updateChildrenPosition"));
var _errorWrap = _interopRequireDefault(require("../common/errorWrap"));
var _transformTreeNodeData = require("../common/utils/transformTreeNodeData");
var _constants = require("../constants");
var _Wnumber = _interopRequireDefault(require("../Wnumber"));
var _index = _interopRequireDefault(require("../themes/index"));
var _drillDown = require("../common/interaction/drill-down");
require("./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(_constants.FullCrossName + "-children")) === null || _dom$getElementsByCla === void 0 ? void 0 : _dom$getElementsByCla[0];
if (container) {
dom.removeChild(container);
}
container = document.createElement('div');
return container;
}
var Sunburst = exports.Sunburst = /*#__PURE__*/function (_Base) {
(0, _inheritsLoose2["default"])(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: _index["default"].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 = (0, _transformTreeNodeData.computeData)(data, config, this),
source = _computeData.source,
total = _computeData.total;
this.totalData = (0, _common.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);
(0, _rectLegend["default"])(this, chart, config, {
items: newItems
}, 'single', null, true);
// tooltip
(0, _rectTooltip["default"])(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 = (0, _common.numberDecimal)(item.value / rootNode.value, 4);
if (config.tooltip.valueFormatter) {
item.value = config.tooltip.valueFormatter(item.value, (0, _extends2["default"])({
percent: percent
}, pointData), index, items);
}
if (config.tooltip.nameFormatter) {
item.name = config.tooltip.nameFormatter(item.name, (0, _extends2["default"])({
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
};
});
(0, _geomStyle["default"])(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: _index["default"]['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');
(0, _polarLegendLayout["default"])(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 = _constants.FullCrossName + "-children";
var firstChild = this.chartDom.firstChild;
this.chartDom.insertBefore(container, firstChild);
var content = /*#__PURE__*/React.createElement(_Wnumber["default"], {
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 : ''
}, (0, _common.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["default"].render(content, container);
} else if (!this.props.children) {
// 删去中心内容
deleteChildren(this.chartDom);
}
chart.on('afterpaint', function () {
(0, _updateChildrenPosition["default"])(chart, _this2.chartDom);
});
(0, _drillDown.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 = (0, _util.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 = _constants.FullCrossName + "-children";
var _firstChild = _this2.chartDom.firstChild;
_this2.chartDom.insertBefore(newContainer, _firstChild);
var _content = /*#__PURE__*/React.createElement(_Wnumber["default"], {
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["default"].render(_content, newContainer);
(0, _updateChildrenPosition["default"])(chart, _this2.chartDom);
}
});
};
_proto.changeData = function changeData(chart, config, data) {
var _computeData2 = (0, _transformTreeNodeData.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 = _constants.FullCrossName + "-children";
var firstChild = this.chartDom.firstChild;
this.chartDom.insertBefore(container, firstChild);
var content = /*#__PURE__*/React.createElement(_Wnumber["default"], {
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["default"].render(content, container);
(0, _updateChildrenPosition["default"])(chart, this.chartDom);
}
};
return Sunburst;
}(_Base2["default"]);
var WmultiPie = exports.WmultiPie = (0, _errorWrap["default"])(Sunburst);
var Wsunburst = exports.Wsunburst = (0, _errorWrap["default"])(Sunburst);