@alicloud/cloud-charts
Version:
305 lines (282 loc) • 13.6 kB
JavaScript
import { calcDataSize } from './data';
import { EmptyDataProcess, isEmptyData, processEmptyData } from './emptyData';
import { merge } from '../common/common';
import themes from '../themes/index';
import { getText } from '../ChartProvider';
import { isBigDataInit } from './bigData';
import { classifyChart } from './classification';
import { PrefixName } from '../constants';
import ReactDOM from 'react-dom';
import React from 'react';
import LoadingStarIcon from '../common/LoadingStarIcon';
/** 图表初始化时运行的规则 */
export function runInitRule(chartObj, config, data) {
var _chartObj$props, _chartObj$props2, _chartRule$bigData;
var chartName = chartObj.chartName;
// 1.图表分类，读取该图表所有规则
// 部分子类有与父类不同的规则，需要合并
var chartRule = 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 = calcDataSize(chartRule.dataStructure, data);
chartObj.dataSize = dataSize;
// 3.空数据处理
if (isEmptyData(dataSize)) {
chartObj.isEmpty = true;
showEmptyChart = true;
} else {
chartObj.isEmpty = false;
}
}
// loading、error、空数据状态，进行相同操作
if (showEmptyChart) {
var _chartObj$props3;
var _processEmptyData = processEmptyData(chartRule.emptyData, chartRule.dataStructure, chartName),
emptyReplaceData = _processEmptyData.data,
emptyReplaceConfig = _processEmptyData.config;
// if (!emptyReplaceData && !emptyReplaceConfig) {
// console.log(chartName, '没有空数据处理');
// }
var newConfig = 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 = themes['widgets-color-layout-background'];
}
return {
data: emptyReplaceData,
config: newConfig
};
}
// 4.大数据处理
if (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: 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: merge({}, config, extremeReplaceConfig)
};
} else {
chartObj.isExtreme = false;
}
}
return {};
}
/** 图表绘制前运行的规则 */
export 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("." + PrefixName + "-wplaceholder-container");
var container = existedContainer;
if (!container) {
container = document.createElement('div');
container.className = 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 === EmptyDataProcess.Background) {
chartObj.chartDom.style.backgroundColor = themes['widgets-color-layout-background'];
}
// 加错误提示
ReactDOM.render( /*#__PURE__*/React.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 === EmptyDataProcess.Background) {
chartObj.chartDom.style.backgroundColor = themes['widgets-color-layout-background'];
}
// 加loading提示
var prefix = PrefixName + "-wplaceholder-loading";
var loadingElement = (_chartObj$props7 = chartObj.props) !== null && _chartObj$props7 !== void 0 && _chartObj$props7.loadingInfo ? /*#__PURE__*/React.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.createElement("div", {
className: "" + prefix,
style: {
background: 'none'
}
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-right-tip"
}, /*#__PURE__*/React.createElement(LoadingStarIcon, null), /*#__PURE__*/React.createElement("div", null, getText('aiLoading', ((_chartObj$props10 = chartObj.props) === null || _chartObj$props10 === void 0 ? void 0 : _chartObj$props10.language) || chartObj.context.language, chartObj.context.locale)))) : /*#__PURE__*/React.createElement("div", {
className: "" + prefix,
style: {
background: 'none'
}
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-right-tip"
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-indicator"
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-fusion-reactor"
}, /*#__PURE__*/React.createElement("span", {
className: prefix + "-dot"
}), /*#__PURE__*/React.createElement("span", {
className: prefix + "-dot"
}), /*#__PURE__*/React.createElement("span", {
className: prefix + "-dot"
}), /*#__PURE__*/React.createElement("span", {
className: prefix + "-dot"
}))), /*#__PURE__*/React.createElement("div", {
className: prefix + "-tip-content"
}, getText('loading', ((_chartObj$props11 = chartObj.props) === null || _chartObj$props11 === void 0 ? void 0 : _chartObj$props11.language) || chartObj.context.language, chartObj.context.locale))));
ReactDOM.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 === EmptyDataProcess.Background) {
chartObj.chartDom.style.backgroundColor = themes['widgets-color-layout-background'];
}
// 加暂无数据提示
var emptyElement = (_chartObj$props12 = chartObj.props) !== null && _chartObj$props12 !== void 0 && _chartObj$props12.emptyInfo ? /*#__PURE__*/React.createElement("div", null, (_chartObj$props13 = chartObj.props) === null || _chartObj$props13 === void 0 ? void 0 : _chartObj$props13.emptyInfo) : /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
alignItems: 'center'
}
}, /*#__PURE__*/React.createElement("svg", {
width: "14px",
height: "14px",
viewBox: "0 0 1024 1024"
}, /*#__PURE__*/React.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.createElement("span", {
style: {
fontSize: 12,
color: '#808080',
marginLeft: 5
}
}, getText('empty', ((_chartObj$props14 = chartObj.props) === null || _chartObj$props14 === void 0 ? void 0 : _chartObj$props14.language) || chartObj.context.language, chartObj.context.locale)));
ReactDOM.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表示需要重绘 */
export 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 = calcDataSize(chartRule.dataStructure, data);
chartObj.dataSize = dataSize;
// 空数据处理
// 在空数据与有数据之间切换需要重绘
if (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;
}