@alicloud/cloud-charts
Version:
489 lines (406 loc) • 18.2 kB
JavaScript
'use strict';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.Pie = 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 _index = _interopRequireDefault(require("../themes/index"));
var _common = require("../common/common");
require("./index.css");
var _rectTooltip = _interopRequireDefault(require("../common/rectTooltip"));
var _rectLegend = _interopRequireDefault(require("../common/rectLegend"));
var _label = _interopRequireDefault(require("../common/label"));
var _geomStyle = _interopRequireDefault(require("../common/geomStyle"));
var _circleAnnoation = _interopRequireDefault(require("../common/circleAnnoation"));
var _polarLegendLayout = _interopRequireDefault(require("../common/polarLegendLayout"));
var _errorWrap = _interopRequireDefault(require("../common/errorWrap"));
var _updateChildrenPosition = _interopRequireDefault(require("../common/updateChildrenPosition"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _constants = require("../constants");
var _Wnumber = _interopRequireDefault(require("../Wnumber"));
var _react = _interopRequireDefault(require("react"));
// function transformCoord(coord, transform = {}) {
// const { type, param } = transform;
// if (coord[type] && Array.isArray(param)) {
// coord[type](...param);
// }
// }
//
function selectGeom(geom, selectKey) {
// if (!geom || !selectKey || !Array.isArray(this.data)) {
if (!geom) {
return;
}
geom.elements.forEach(function (element) {
// 清除选中效果
if (element.hasState('selected')) {
element.setState('selected', false);
} // 如果selectKey为假值，则只清空选中效果。
if (!selectKey) {
return;
}
var d = element.getData();
if (d.x === selectKey) {
element.setState('selected', true);
}
});
} //
// function paddingNumber(value) {
// return isInvalidNumber(value) ? 0 : Number(value);
// }
//
// export function getDrawPadding(drawPadding, labelConfig, defaultDrawPadding) {
// if (Array.isArray(drawPadding)) {
// return drawPadding;
// } else if (!isInvalidNumber(drawPadding)) {
// return [drawPadding, drawPadding, drawPadding, drawPadding];
// } else if (labelConfig && labelConfig.visible !== false) {
// // 饼图使用 label 时，调整 drawPadding
// return defaultDrawPadding.map(p => Math.max(p, 48));
// } else {
// return defaultDrawPadding;
// }
// }
var Pie = /*#__PURE__*/function (_Base) {
(0, _inheritsLoose2["default"])(Pie, _Base);
function Pie() {
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 = 'G2Pie';
_this.legendField = 'x';
_this.totalData = 0;
_this.sourceData = [];
_this.geom = null;
_this.noDataShape = null;
return _this;
}
var _proto = Pie.prototype;
_proto.getDefaultConfig = function getDefaultConfig() {
return {
colors: _index["default"].category_12,
// padding: [20, 20, 20, 20],
legend: {
position: 'right',
align: '',
showData: true,
nameFormatter: null,
// 可以强制覆盖，手动设置label
valueFormatter: null
},
tooltip: {
nameFormatter: null,
valueFormatter: null
},
// coord: null,
autoSort: true,
cycle: false,
select: false,
innerRadius: 0.8,
// 内环半径大小，仅cycle为true时可用
outerRadius: 0.8,
// 饼图半径大小，初始化时可用
// drawPadding: [10, 10, 10, 10],
label: false
};
};
_proto.changeData = function changeData(chart, config, data) {
// 更新数据总和值，保证百分比的正常
var totalData = 0;
data.forEach(function (d) {
totalData += d.y;
});
this.totalData = totalData;
this.sourceData = data; // 不要忘记排序的状态
if (config.autoSort) {
data.sort(function (a, b) {
return b.y - a.y;
});
}
chart.changeData(data); // 环图中心内容
if (config.cycle && config.innerContent && !this.props.children && !this.props.loading && !this.props.errorInfo) {
var _this$chartDom$getEle, _config$innerContent$, _config$innerContent, _this$rawData, _this$rawData$, _config$innerContent$2, _config$innerContent2, _config$innerContent$3, _config$innerContent3;
var container = (_this$chartDom$getEle = this.chartDom.getElementsByClassName(_constants.FullCrossName + "-children")) === null || _this$chartDom$getEle === void 0 ? void 0 : _this$chartDom$getEle[0];
if (!container) {
container = document.createElement('div');
container.className = _constants.FullCrossName + "-children";
this.chartDom.appendChild(container);
}
var content = /*#__PURE__*/_react["default"].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$ = _this$rawData[0]) === 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 : ''
}, (_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["default"].render(content, container);
}
};
_proto.isChangeEqual = function isChangeEqual(objValue, othValue, key) {
if (key === 'selectData' && objValue !== othValue) {
selectGeom(this.geom, objValue);
return true;
}
return undefined;
};
_proto.init = function init(chart, config, data) {
var _this2 = this;
var defs = {
type: {
type: 'cat'
}
};
if (config.autoSort) {
data.sort(function (a, b) {
return b.y - a.y;
});
} // 计算得总数据
var totalData = 0;
data.forEach(function (d) {
totalData += d.y;
});
this.totalData = totalData; // 处理后的原始数据
this.sourceData = data;
chart.scale(defs);
chart.data(this.sourceData); // 重要：绘制饼图时，必须声明 theta 坐标系
var thetaConfig = {
// radius: 1, // 设置饼图的为100% 大小，具体大小改变在 beforeInit 中diameter的值，目前为0.8
radius: Math.max(Math.min(config.outerRadius, 1), 0.01)
};
if (config.cycle) {
thetaConfig.innerRadius = Math.max(Math.min(config.innerRadius, 1), 0);
}
if (config.startAngle !== undefined) {
thetaConfig.startAngle = config.startAngle;
}
if (config.endAngle !== undefined) {
thetaConfig.endAngle = config.endAngle;
} // coordinate translate 操作会导致饼图变形，暂时换一种方式实现
/*const coord = */
chart.coordinate('theta', thetaConfig); // if (config.coord) {
// const { transform } = config.coord || {};
//
// if (Array.isArray(transform)) {
// transform.forEach((t) => {
// transformCoord(coord, t);
// });
// } else if (transform && typeof transform === 'object') {
// transformCoord(coord, transform);
// }
// }
// const drawPadding = getDrawPadding(config.drawPadding, config.label, this.defaultConfig.drawPadding);
// 设置图例
(0, _rectLegend["default"])(this, chart, config, {// autoCollapse: false,
// position: 'right',
// itemTpl: (value, itemColor, checked, index) => {
// const { nameFormatter, valueFormatter, showData = true } = config.legend || {};
//
// const item = (this.data && this.data[index]) || {};
// const raw = (this.rawData && this.rawData[0]) || {};
// const percent = numberDecimal(item.y / this.totalData, 4);
//
// const result = nameFormatter ? nameFormatter(value, {
// ...raw,
// percent,
// itemColor,
// checked,
// }, index) : value;
//
// if (showData) {
// const number = valueFormatter ? valueFormatter(item.y, {
// ...raw,
// percent,
// itemColor,
// checked,
// }, index) : item.y;
// return `${'<li class="g2-legend-list-item item-{index} {checked}" data-color="{originColor}" data-value="{originValue}">' +
// '<i class="g2-legend-marker" style="background-color:{color};"></i>' +
// '<span class="g2-legend-text">'}${result}</span>` + `<span class="g2-legend-value">${number}</span></li>`;
// }
//
// return `${'<li class="g2-legend-list-item item-{index} {checked}" data-color="{originColor}" data-value="{originValue}">' +
// '<i class="g2-legend-marker" style="background-color:{color};"></i>' +
// '<span class="g2-legend-text">'}${result}</span></li>`;
// },
// 'g2-legend': {
// ...legendHtmlContainer,
// position: 'static',
// overflow: 'auto',
// // inline flex items 不能使用百分比的margin/padding，设置为固定大小
// marginLeft: `${Math.max(pxToNumber(themes['widgets-font-size-4']) - drawPadding[1], 0)}px`,
// },
// 'g2-legend-list-item': {
// ...legendHtmlListItem,
// marginRight: 0,
// },
}, true, null, true, function (item, index) {
var name = item.name;
var raw = _this2.rawData && _this2.rawData[0] || {};
var value = 0;
raw.data && raw.data.forEach(function (r) {
if (Array.isArray(r) && r[0] === name) {
value = r[1];
} else if (typeof r === 'object' && r.x === name) {
value = r.y;
}
});
var percent = _this2.totalData === 0 ? 0 : (0, _common.numberDecimal)(value / _this2.totalData, 4);
return (0, _extends2["default"])({}, raw, {
percent: percent
}, item);
}); // tooltip
(0, _rectTooltip["default"])(this, chart, config, {
showTitle: false,
showMarkers: false,
showCrosshairs: false,
shared: false
}, function (ev) {
var raw = _this2.rawData && _this2.rawData[0] || {};
var items = ev.data.items;
items.forEach(function (item, index) {
var percent = (0, _common.numberDecimal)(item.value / _this2.totalData, 4);
if (typeof config.tooltip === 'boolean') {
return;
}
if (config.tooltip.valueFormatter) {
item.value = config.tooltip.valueFormatter(item.value, (0, _extends2["default"])({}, raw, {
percent: percent
}), index, items);
}
if (config.tooltip.nameFormatter) {
item.name = config.tooltip.nameFormatter(item.name, (0, _extends2["default"])({}, raw, {
percent: percent
}), index, items);
}
});
}, {
showTitle: false,
showMarkers: false,
showCrosshairs: false,
shared: false
});
this.geom = chart.interval().position('y').adjust('stack');
this.geom = this.geom.color('x', config.colors);
if (typeof config.animate === 'object') {
this.geom.animate(config.animate);
}
if (config.select) {
chart.interaction('element-single-selected', {
start: [{
isEnable: function isEnable(context) {
if (context.view.options.data.length > 1) {
return true;
}
return false;
},
trigger: 'element:click',
action: 'element-single-selected:toggle'
}]
});
}
(0, _geomStyle["default"])(this.geom, config.geomStyle);
var labelField = 'y';
(0, _label["default"])({
geom: this.geom,
config: config,
field: labelField,
componentConfig: {
offset: 20,
content: function (v, item, index) {
if (typeof config.label === 'boolean') {
return v[labelField];
}
if (config.label.labelFormatter) {
var percent = (0, _common.numberDecimal)(v[labelField] / _this2.totalData, 4);
return config.label.labelFormatter(v[labelField], (0, _extends2["default"])({}, item, {
percent: percent
}), index);
}
return v[labelField];
}
}
});
(0, _polarLegendLayout["default"])(chart); // 空数据渲染效果
chart.on('beforepaint', function () {
if (_this2.totalData !== 0 && _this2.noDataShape) {
_this2.noDataShape.remove(true);
_this2.noDataShape = null;
}
});
(0, _circleAnnoation["default"])(chart, config, this.size, 'G2Pie'); // 环图中心内容
if (config.cycle && config.innerContent && !this.props.children && !this.isEmpty && !this.props.loading && !this.props.errorInfo) {
var _config$innerContent$4, _config$innerContent4, _this$rawData2, _this$rawData2$, _config$innerContent$5, _config$innerContent5, _config$innerContent$6, _config$innerContent6;
var container = document.createElement('div');
container.className = _constants.FullCrossName + "-children";
this.chartDom.appendChild(container);
var content = /*#__PURE__*/_react["default"].createElement(_Wnumber["default"], {
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$rawData2 = this.rawData) === null || _this$rawData2 === void 0 ? void 0 : (_this$rawData2$ = _this$rawData2[0]) === null || _this$rawData2$ === void 0 ? void 0 : _this$rawData2$.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["default"].render(content, container);
} else if (!this.props.children) {
var _this$chartDom$getEle2;
// 删去中心内容
var _container = (_this$chartDom$getEle2 = this.chartDom.getElementsByClassName(_constants.FullCrossName + "-children")) === null || _this$chartDom$getEle2 === void 0 ? void 0 : _this$chartDom$getEle2[0];
if (_container) {
this.chartDom.removeChild(_container);
}
}
chart.on('afterpaint', function () {
// 默认选中效果
selectGeom(_this2.geom, config.selectData);
(0, _updateChildrenPosition["default"])(chart, _this2.chartDom);
if (_this2.totalData === 0 && !_this2.noDataShape) {
var bgGroup = chart.getLayer('bg');
var coordinate = chart.getCoordinate();
var radius = coordinate.radius,
innerRadius = coordinate.innerRadius;
var _coordinate$getCenter = coordinate.getCenter(),
centerX = _coordinate$getCenter.x,
centerY = _coordinate$getCenter.y;
var pieSize = Math.min(chart.coordinateBBox.width, chart.coordinateBBox.height) * radius;
var outerR = pieSize / 2;
var path = [['M', centerX, centerY - outerR], ['A', outerR, outerR, 0, 1, 1, centerX, centerY + outerR], ['A', outerR, outerR, 0, 1, 1, centerX, centerY - outerR] // ['Z'],
];
if (innerRadius > 0) {
var innerR = pieSize * innerRadius / 2;
path.push(['M', centerX, centerY - innerR], ['A', innerR, innerR, 0, 0, 0, centerX, centerY + innerR], ['A', innerR, innerR, 0, 0, 0, centerX, centerY - innerR] // ['Z'],
);
}
_this2.noDataShape = bgGroup.addShape({
id: 'no-data-path',
name: 'no-data-path',
type: 'path',
attrs: {
path: path,
fill: _index["default"]['widgets-circle-stroke-background']
}
}); // shape.set('tip', 'sdfhsjkdhk');
//
// registerInteraction('no-data-text', {
// start: [
// {
// trigger: 'no-data-path:mousemove',
// action: 'ellipsis-text:show',
// throttle: { wait: 50, leading: true, trailing: false },
// },
// {
// trigger: 'no-data-path:touchstart',
// action: 'ellipsis-text:show',
// throttle: { wait: 50, leading: true, trailing: false },
// },
// ],
// end: [
// { trigger: 'no-data-path:mouseleave', action: 'ellipsis-text:hide' },
// { trigger: 'no-data-path:touchend', action: 'ellipsis-text:hide' },
// ],
// });
}
});
};
return Pie;
}(_Base2["default"]);
exports.Pie = Pie;
var Wpie = (0, _errorWrap["default"])(Pie);
var _default = Wpie;
exports["default"] = _default;