@alicloud/cloud-charts
Version:
311 lines (288 loc) • 14.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.runAfterDataChangedRule = runAfterDataChangedRule;
exports.runBeforePaintRule = runBeforePaintRule;
exports.runInitRule = runInitRule;
var _data = require("./data");
var _emptyData = require("./emptyData");
var _common = require("../common/common");
var _index = _interopRequireDefault(require("../themes/index"));
var _ChartProvider = require("../ChartProvider");
var _bigData = require("./bigData");
var _classification = require("./classification");
var _constants = require("../constants");
var _reactDom = _interopRequireDefault(require("react-dom"));
var _react = _interopRequireDefault(require("react"));
var _LoadingStarIcon = _interopRequireDefault(require("../common/LoadingStarIcon"));
/** 图表初始化时运行的规则 */
function runInitRule(chartObj, config, data) {
var _chartObj$props, _chartObj$props2, _chartRule$bigData;
var chartName = chartObj.chartName;
// 1.图表分类，读取该图表所有规则
// 部分子类有与父类不同的规则，需要合并
var chartRule = (0, _classification.classifyChart)(chartName, data, config);
if (!chartRule) {
// console.log(chartName, '没有规则映射');
return {};
}
chartObj.chartRule = chartRule;
// chartObj.errorInfo = '';
var showEmptyChart = false;
// loading状态，与空状态调用同样的规则
if (chartObj !== null && chartObj !== void 0 && (_chartObj$props = chartObj.props) !== null && _chartObj$props !== void 0 && _chartObj$props.loading) {
showEmptyChart = true;
}
// 数据结构检查
// else if (!checkData(chartRule.dataStructure, data)) {
// chartObj.errorInfo = getText('error', chartObj.props?.language || chartObj.context.language, chartObj.context.locale);
// showEmptyChart = true;
// }
// error状态
else if ((_chartObj$props2 = chartObj.props) !== null && _chartObj$props2 !== void 0 && _chartObj$props2.errorInfo) {
showEmptyChart = true;
} else {
// 2.计算数据量
var dataSize = (0, _data.calcDataSize)(chartRule.dataStructure, data);
chartObj.dataSize = dataSize;
// 3.空数据处理
if ((0, _emptyData.isEmptyData)(dataSize)) {
chartObj.isEmpty = true;
showEmptyChart = true;
} else {
chartObj.isEmpty = false;
}
}
// loading、error、空数据状态，进行相同操作
if (showEmptyChart) {
var _chartObj$props3;
var _processEmptyData = (0, _emptyData.processEmptyData)(chartRule.emptyData, chartRule.dataStructure, chartName),
emptyReplaceData = _processEmptyData.data,
emptyReplaceConfig = _processEmptyData.config;
// if (!emptyReplaceData && !emptyReplaceConfig) {
// console.log(chartName, '没有空数据处理');
// }
var newConfig = (0, _common.merge)({}, config, emptyReplaceConfig);
// 双y轴配置项特殊处理
if (Array.isArray(config === null || config === void 0 ? void 0 : config.yAxis) && emptyReplaceConfig !== null && emptyReplaceConfig !== void 0 && emptyReplaceConfig.yAxis) {
newConfig.yAxis = emptyReplaceConfig === null || emptyReplaceConfig === void 0 ? void 0 : emptyReplaceConfig.yAxis;
}
// error状态的颜色特殊处理
if (chartObj !== null && chartObj !== void 0 && (_chartObj$props3 = chartObj.props) !== null && _chartObj$props3 !== void 0 && _chartObj$props3.errorInfo && emptyReplaceConfig !== null && emptyReplaceConfig !== void 0 && emptyReplaceConfig.colors) {
newConfig.colors = _index["default"]['widgets-color-layout-background'];
}
return {
data: emptyReplaceData,
config: newConfig
};
}
// 4.大数据处理
if ((0, _bigData.isBigDataInit)(chartRule === null || chartRule === void 0 ? void 0 : chartRule.name, chartRule === null || chartRule === void 0 ? void 0 : (_chartRule$bigData = chartRule.bigData) === null || _chartRule$bigData === void 0 ? void 0 : _chartRule$bigData.judgements, chartObj.dataSize, chartObj.size[0], chartObj.size[1], chartRule.mainAxis)) {
var _chartRule$bigData2;
chartObj.isBigData = true;
if (chartRule !== null && chartRule !== void 0 && (_chartRule$bigData2 = chartRule.bigData) !== null && _chartRule$bigData2 !== void 0 && _chartRule$bigData2.process) {
var _chartRule$bigData3, _chartRule$bigData3$p;
var _chartRule$bigData$pr = chartRule === null || chartRule === void 0 ? void 0 : (_chartRule$bigData3 = chartRule.bigData) === null || _chartRule$bigData3 === void 0 ? void 0 : (_chartRule$bigData3$p = _chartRule$bigData3.process) === null || _chartRule$bigData3$p === void 0 ? void 0 : _chartRule$bigData3$p.call(_chartRule$bigData3, chartObj, data),
bigReplaceData = _chartRule$bigData$pr.data,
bigDataConfig = _chartRule$bigData$pr.config;
return {
data: bigReplaceData,
config: (0, _common.merge)({}, config, bigDataConfig)
};
}
} else {
chartObj.isBigData = false;
}
// 5.极端数据处理
if (chartRule.extremeData) {
var extremeProcess = chartRule.extremeData;
var _extremeProcess = extremeProcess === null || extremeProcess === void 0 ? void 0 : extremeProcess(chartObj, config, data),
isExtreme = _extremeProcess.isExtreme,
extremeReplaceConfig = _extremeProcess.config,
extremeReplaceData = _extremeProcess.data;
if (isExtreme) {
chartObj.isExtreme = true;
return {
data: extremeReplaceData,
config: (0, _common.merge)({}, config, extremeReplaceConfig)
};
} else {
chartObj.isExtreme = false;
}
}
return {};
}
/** 图表绘制前运行的规则 */
function runBeforePaintRule(chartObj, config, data) {
var _chartObj$chartDom, _chartObj$props4, _chartObj$props6;
if (!chartObj.chartRule) {
return;
}
// 特殊状态的容器
var existedContainer = (_chartObj$chartDom = chartObj.chartDom) === null || _chartObj$chartDom === void 0 ? void 0 : _chartObj$chartDom.querySelector("." + _constants.PrefixName + "-wplaceholder-container");
var container = existedContainer;
if (!container) {
container = document.createElement('div');
container.className = _constants.PrefixName + "-wplaceholder-container";
}
// 状态：error > loading > empty
// error
if (chartObj !== null && chartObj !== void 0 && (_chartObj$props4 = chartObj.props) !== null && _chartObj$props4 !== void 0 && _chartObj$props4.errorInfo && !chartObj.props.children) {
var _chartObj$props5;
// 设置背景色
if (chartObj.chartRule.emptyData === _emptyData.EmptyDataProcess.Background) {
chartObj.chartDom.style.backgroundColor = _index["default"]['widgets-color-layout-background'];
}
// 加错误提示
_reactDom["default"].render( /*#__PURE__*/_react["default"].createElement("div", null, (_chartObj$props5 = chartObj.props) === null || _chartObj$props5 === void 0 ? void 0 : _chartObj$props5.errorInfo), container);
chartObj.chartDom.appendChild(container);
}
// loading
else if (chartObj !== null && chartObj !== void 0 && (_chartObj$props6 = chartObj.props) !== null && _chartObj$props6 !== void 0 && _chartObj$props6.loading && !chartObj.props.children) {
var _chartObj$props7, _chartObj$props8, _chartObj$props9, _chartObj$props10, _chartObj$props11;
// 设置背景色
if (chartObj.chartRule.emptyData === _emptyData.EmptyDataProcess.Background) {
chartObj.chartDom.style.backgroundColor = _index["default"]['widgets-color-layout-background'];
}
// 加loading提示
var prefix = _constants.PrefixName + "-wplaceholder-loading";
var loadingElement = (_chartObj$props7 = chartObj.props) !== null && _chartObj$props7 !== void 0 && _chartObj$props7.loadingInfo ? /*#__PURE__*/_react["default"].createElement("div", null, (_chartObj$props8 = chartObj.props) === null || _chartObj$props8 === void 0 ? void 0 : _chartObj$props8.loadingInfo) : ((_chartObj$props9 = chartObj.props) === null || _chartObj$props9 === void 0 ? void 0 : _chartObj$props9.stateType) === 'ai' ? /*#__PURE__*/_react["default"].createElement("div", {
className: "" + prefix,
style: {
background: 'none'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-right-tip"
}, /*#__PURE__*/_react["default"].createElement(_LoadingStarIcon["default"], null), /*#__PURE__*/_react["default"].createElement("div", null, (0, _ChartProvider.getText)('aiLoading', ((_chartObj$props10 = chartObj.props) === null || _chartObj$props10 === void 0 ? void 0 : _chartObj$props10.language) || chartObj.context.language, chartObj.context.locale)))) : /*#__PURE__*/_react["default"].createElement("div", {
className: "" + prefix,
style: {
background: 'none'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-right-tip"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-indicator"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-fusion-reactor"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: prefix + "-dot"
}), /*#__PURE__*/_react["default"].createElement("span", {
className: prefix + "-dot"
}), /*#__PURE__*/_react["default"].createElement("span", {
className: prefix + "-dot"
}), /*#__PURE__*/_react["default"].createElement("span", {
className: prefix + "-dot"
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-tip-content"
}, (0, _ChartProvider.getText)('loading', ((_chartObj$props11 = chartObj.props) === null || _chartObj$props11 === void 0 ? void 0 : _chartObj$props11.language) || chartObj.context.language, chartObj.context.locale))));
_reactDom["default"].render(loadingElement, container);
chartObj.chartDom.appendChild(container);
}
// 空数据处理
else if (chartObj.isEmpty && !chartObj.props.children) {
var _chartObj$props12, _chartObj$props13, _chartObj$props14;
// 设置背景色
if (chartObj.chartRule.emptyData === _emptyData.EmptyDataProcess.Background) {
chartObj.chartDom.style.backgroundColor = _index["default"]['widgets-color-layout-background'];
}
// 加暂无数据提示
var emptyElement = (_chartObj$props12 = chartObj.props) !== null && _chartObj$props12 !== void 0 && _chartObj$props12.emptyInfo ? /*#__PURE__*/_react["default"].createElement("div", null, (_chartObj$props13 = chartObj.props) === null || _chartObj$props13 === void 0 ? void 0 : _chartObj$props13.emptyInfo) : /*#__PURE__*/_react["default"].createElement("div", {
style: {
display: 'flex',
alignItems: 'center'
}
}, /*#__PURE__*/_react["default"].createElement("svg", {
width: "14px",
height: "14px",
viewBox: "0 0 1024 1024"
}, /*#__PURE__*/_react["default"].createElement("path", {
d: "M512 64c247.424 0 448 200.576 448 448s-200.576 448-448 448-448-200.576-448-448 200.576-448 448-448z m11.2 339.2h-64l-1.3888 0.032A32 32 0 0 0 427.2 435.2l0.032 1.3888A32 32 0 0 0 459.2 467.2h32v227.2H448l-1.3888 0.032A32 32 0 0 0 448 758.4h140.8l1.3888-0.032A32 32 0 0 0 588.8 694.4h-33.6V435.2l-0.032-1.3888A32 32 0 0 0 523.2 403.2zM512 268.8a44.8 44.8 0 1 0 0 89.6 44.8 44.8 0 0 0 0-89.6z",
fill: "#AAAAAA"
})), /*#__PURE__*/_react["default"].createElement("span", {
style: {
fontSize: 12,
color: '#808080',
marginLeft: 5
}
}, (0, _ChartProvider.getText)('empty', ((_chartObj$props14 = chartObj.props) === null || _chartObj$props14 === void 0 ? void 0 : _chartObj$props14.language) || chartObj.context.language, chartObj.context.locale)));
_reactDom["default"].render(emptyElement, container);
chartObj.chartDom.appendChild(container);
} else {
// 当不是无数据状态时需要删除对应背景色
chartObj.chartDom.style.removeProperty('background-color');
// 删除特殊状态的元素
if (existedContainer) {
chartObj.chartDom.removeChild(existedContainer);
}
}
// 大数据处理
// if (
// isBigDataBeforePaint(
// chartObj?.chartRule?.name,
// chartObj?.chartRule?.bigData?.judgements,
// chartObj.chart,
// chartObj.dataSize,
// chartObj.chartRule.mainAxis,
// )
// ) {
// chartObj.isBigData = true;
// // 渲染前只有提示信息，不进行大数据处理
// }
// else {
// chartObj.isBigData = false;
// }
}
// todo
/** 图表绘制后运行的规则 */
/** 数据改变时运行的规则，返回true表示需要重绘 */
function runAfterDataChangedRule(chartObj, config, data) {
var chartRule = chartObj.chartRule;
if (!chartRule) {
return false;
}
var needRerender = false;
// 数据结构检测
// if (!checkData(chartRule.dataStructure, data)) {
// needRerender = !chartObj.errorInfo;
// chartObj.errorInfo = getText(
// 'error',
// chartObj.props?.language || chartObj.context.language,
// chartObj.context.locale,
// );
// return false;
// } else {
// needRerender = !!chartObj.errorInfo;
// chartObj.errorInfo = '';
// }
// if (needRerender) {
// return needRerender;
// }
// 计算数据量
var dataSize = (0, _data.calcDataSize)(chartRule.dataStructure, data);
chartObj.dataSize = dataSize;
// 空数据处理
// 在空数据与有数据之间切换需要重绘
if ((0, _emptyData.isEmptyData)(dataSize)) {
needRerender = !chartObj.isEmpty;
chartObj.isEmpty = true;
return needRerender;
} else {
needRerender = chartObj.isEmpty;
chartObj.isEmpty = false;
}
if (needRerender) {
return needRerender;
}
// 极端数据处理
// 仅检测，不作处理
if (chartRule.extremeData) {
var _chartObj$isExtreme;
var extremeProcess = chartRule.extremeData;
var _extremeProcess2 = extremeProcess === null || extremeProcess === void 0 ? void 0 : extremeProcess(chartObj, config, data),
isExtreme = _extremeProcess2.isExtreme;
// 极端场景与非极端场景之间切换、极端到极端（防止配置项变化）都需要重绘
needRerender = ((_chartObj$isExtreme = chartObj.isExtreme) !== null && _chartObj$isExtreme !== void 0 ? _chartObj$isExtreme : false) !== isExtreme || isExtreme;
chartObj.isExtreme = isExtreme;
}
return needRerender;
}