@alicloud/cloud-charts
Version:
262 lines (207 loc) • 11.9 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/index';
import { isBigDataInit } from './bigData';
import { classifyChart } from './classification';
import { PrefixName } from '../constants';
/** 图表初始化时运行的规则 */
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-capacity-background-error'];
}
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$props5, _chartObj$props7;
if (!chartObj.chartRule) {
return;
} // 空数据处理
if (chartObj.isEmpty && !chartObj.props.children) {
var _chartObj$props4;
// 设置背景色
if (chartObj.chartRule.emptyData === EmptyDataProcess.Background) {
chartObj.chartDom.style.backgroundColor = themes['widgets-color-layout-background'];
} // 加暂无数据提示
chartObj.chart.annotation().html({
html: "\n <div style=\"display: flex; align-items: center;\">\n <svg width=\"14px\" height=\"14px\" viewBox=\"0 0 1024 1024\"><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\"></path></svg>\n <span style=\"font-size: 12px;color: #808080; margin-left: 5px;\">" + getText('empty', ((_chartObj$props4 = chartObj.props) === null || _chartObj$props4 === void 0 ? void 0 : _chartObj$props4.language) || chartObj.context.language, chartObj.context.locale) + "<span>\n </div>\n ",
alignX: 'middle',
alignY: 'middle',
position: ['50%', '50%']
});
} // loading
else if (chartObj !== null && chartObj !== void 0 && (_chartObj$props5 = chartObj.props) !== null && _chartObj$props5 !== void 0 && _chartObj$props5.loading && !chartObj.props.children) {
var _chartObj$props6;
// 设置背景色
if (chartObj.chartRule.emptyData === EmptyDataProcess.Background) {
chartObj.chartDom.style.backgroundColor = themes['widgets-color-layout-background'];
} // 加loading提示
var prefix = PrefixName + "-wplaceholder-loading";
chartObj.chart.annotation().html({
html: "\n <div class=\"" + prefix + "\" style=\"background: none;\">\n <div class=\"" + prefix + "-right-tip\">\n <div class=\"" + prefix + "-indicator\">\n <div class=\"" + prefix + "-fusion-reactor\">\n <span class=\"" + prefix + "-dot\"></span>\n <span class=\"" + prefix + "-dot\"></span>\n <span class=\"" + prefix + "-dot\"></span>\n <span class=\"" + prefix + "-dot\"></span>\n </div>\n </div>\n <div class=\"" + prefix + "-tip-content\">" + getText('loading', ((_chartObj$props6 = chartObj.props) === null || _chartObj$props6 === void 0 ? void 0 : _chartObj$props6.language) || chartObj.context.language, chartObj.context.locale) + "</div>\n </div>\n </div>\n ",
alignX: 'middle',
alignY: 'middle',
position: ['50%', '50%']
});
} // error
else if (chartObj !== null && chartObj !== void 0 && (_chartObj$props7 = chartObj.props) !== null && _chartObj$props7 !== void 0 && _chartObj$props7.errorInfo && !chartObj.props.children) {
var _chartObj$props8;
// 设置背景色
if (chartObj.chartRule.emptyData === EmptyDataProcess.Background) {
chartObj.chartDom.style.backgroundColor = themes['widgets-capacity-background-error'];
} // 加错误提示
chartObj.chart.annotation().html({
html: "\n <div style=\"display: flex; align-items: center;\">\n <svg width=\"13.990234375px\" height=\"13.990234375px\" viewBox=\"0 0 13.990234375 13.990234375\">\n <g>\n <path\n d=\"M13.2992,4.0833C12.1972,1.5882,9.71352,0.00200162,6.99922,0C5.33879,-0.00111527,3.72987,0.576434,2.44922,1.6333L12.3659,11.55C14.1045,9.4635,14.497,6.5439,13.2992,4.0833ZM11.55,12.3667L1.6333,2.44995C0.576382,3.73057,-0.00117366,5.33951,0,6.99995C0.00200179,9.71425,1.5883,12.198,4.0833,13.3C6.544,14.4978,9.4635,14.1053,11.55,12.3667Z\"\n fillRule=\"evenodd\"\n fill=\"" + themes['widgets-error-svg-color'] + "\"\n />\n </g>\n </svg>\n <span style=\"font-size: 12px;color: #808080; margin-left: 5px;\">" + ((_chartObj$props8 = chartObj.props) === null || _chartObj$props8 === void 0 ? void 0 : _chartObj$props8.errorInfo) + "<span>\n </div>\n ",
alignX: 'middle',
alignY: 'middle',
position: ['50%', '50%']
});
} else {
// 当不是无数据状态时需要删除对应背景色
chartObj.chartDom.style.removeProperty('background-color');
} // 大数据处理
// 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)) {
// 有数据变成空数据不作处理
chartObj.isEmpty = true;
return false;
} else {
// 空数据变成有数据需要重绘
needRerender = chartObj.isEmpty;
chartObj.isEmpty = false;
}
if (needRerender) {
return needRerender;
} // 极端数据处理
// 仅检测，不作处理
if (chartRule.extremeData) {
var extremeProcess = chartRule.extremeData;
var _extremeProcess2 = extremeProcess === null || extremeProcess === void 0 ? void 0 : extremeProcess(chartObj, config, data),
isExtreme = _extremeProcess2.isExtreme;
needRerender = chartObj.isExtreme !== isExtreme;
chartObj.isExtreme = isExtreme;
}
return needRerender;
}