@alicloud/cloud-charts
Version:
1,138 lines (1,075 loc) • 45.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import { BigDataJudgement, processBarBigData, processLineBigData, processPieBigData } from './bigData';
import { DataStructure } from './data';
import { EmptyDataProcess } from './emptyData';
import { processBarExtremeData, processLineExtremeData, processLPieExtremeData } from './extremeData';
import { runDataRules } from './dataRules';
import { numberDecimal } from '../common/common';
/** 坐标系 */
export var Coordinate = /*#__PURE__*/function (Coordinate) {
Coordinate[Coordinate["Cartesian"] = 0] = "Cartesian";
Coordinate[Coordinate["Polar"] = 1] = "Polar";
Coordinate[Coordinate["Others"] = 2] = "Others";
return Coordinate;
}({});
/** 柱图 */
var barChart = {
id: 'bar_chart',
name: '柱状图',
coord: Coordinate.Cartesian,
mainAxis: 'x',
dataStructure: DataStructure.Common,
// 将父类分成子类的分类函数
classify: function classify(data, config) {
var _code;
// 判断方向，横向还是纵向
var isColumn = (config === null || config === void 0 ? void 0 : config.column) === undefined || (config === null || config === void 0 ? void 0 : config.column) === true;
// 判断是否是区间柱图
var isInterval = data === null || data === void 0 ? void 0 : data.some(function (item) {
return Array.isArray(item.y);
});
// 判断是否是极坐标柱图
var isPolar = !!(config !== null && config !== void 0 && config.polar);
// 判断是否是镜面柱图
var isFacet = !!(config !== null && config !== void 0 && config.facet) && new Set(data.map(function (item) {
return item.facet;
})).size > 1;
// 判断是否是百分比柱图
var isPercentage = !!(config !== null && config !== void 0 && config.percentage);
// 判断是否是分组堆叠
var hasDodges = new Set(data.map(function (item) {
return item.dodge;
})).size > 1;
var isDodgeStack = !!(config !== null && config !== void 0 && config.dodgeStack) && hasDodges;
// 判断是否是堆叠图
var isStack = !isDodgeStack && !!(config !== null && config !== void 0 && config.stack);
// 判断是否是分组柱图
var isDodge = !isDodgeStack && !isStack && !!(config !== null && config !== void 0 && config.dodge) && hasDodges;
// 编码
var code = "" + (isColumn ? 1 : 0) + (isInterval ? 1 : 0) + (isPolar ? 1 : 0) + (isFacet ? 1 : 0) + (isPercentage ? 1 : 0) + (isDodgeStack ? 1 : 0) + (isStack ? 1 : 0) + (isDodge ? 1 : 0);
// 映射
var chartMap = {
// 普通柱图
'10000000': 'bar_chart',
// 横向柱图
'00000000': 'horizontal_bar_chart',
// 区间柱状图
'11000000': 'interval_bar_chart',
// 横向区间柱状图
'01000000': 'horizontal_interval_bar_chart',
// 堆叠柱状图
'10000010': 'stacked_bar_chart',
// 横向堆叠柱状图
'00000010': 'horizontal_stacked_bar_chart',
// 百分比堆叠柱状图
'10001010': 'percentage_bar_chart',
// 分组堆叠柱状图
'10000100': 'grouped_stacked_bar_chart',
// 分组百分比堆叠柱状图
'10001100': 'grouped_percentage_stack_bar_chart',
// 镜面柱面
'10010000': 'facet_bar_chart',
// 横向镜面柱图
'00010000': 'horizontal_facet_bar_chart',
// 极坐标柱状图
'10100000': 'polar_bar_chart',
// 玉玦图（极坐标横向柱状图）
'00100000': 'polar_horizontal_bar_chart',
// 极坐标堆叠柱状图
'10100010': 'polar_stacked_bar_chart'
};
return (_code = chartMap === null || chartMap === void 0 ? void 0 : chartMap[code]) !== null && _code !== void 0 ? _code : 'bar_chart';
},
emptyData: EmptyDataProcess.Axis,
bigData: {
judgements: [{
type: BigDataJudgement.Length,
threshold: 15,
message: '该柱图柱子过于密集，会影响展示效果，建议减少数据量或加大图表宽度。推荐开启缩略轴slider配置或滚动条scrollbar配置，问题码#05-2'
}, {
type: BigDataJudgement.Number,
threshold: 30,
message: '该柱图柱子数量过多，不利于数据间的比较，建议减少数据量或加大图表宽度。推荐开启缩略轴slider配置或滚动条scrollbar配置，如轴文本太长也可开启autoEllipsis配置项。问题码#05-2'
}],
process: processBarBigData
},
extremeData: processBarExtremeData,
children: {
horizontal_bar_chart: {
id: 'horizontal_bar_chart',
name: '横向柱状图',
mainAxis: 'y',
bigData: {
judgements: [{
type: BigDataJudgement.Length,
threshold: 30,
message: '该柱图柱子过于密集，会影响展示效果，建议减少数据量或加大图表高度'
}, {
type: BigDataJudgement.Number,
threshold: 15,
message: '该柱图柱子数量过多，不利于数据间的比较，建议减少数据量或加大图表高度'
}]
},
extremeData: null
},
interval_bar_chart: {
id: 'interval_bar_chart',
name: '区间柱状图',
extremeData: null
},
horizontal_interval_bar_chart: {
id: 'horizontal_interval_bar_chart',
name: '横向区间柱状图',
mainAxis: 'y',
bigData: {
judgements: [{
type: BigDataJudgement.Length,
threshold: 30,
message: '该柱图柱子过于密集，会影响展示效果，建议减少数据量或加大图表高度'
}, {
type: BigDataJudgement.Number,
threshold: 15,
message: '该柱图柱子数量过多，不利于数据间的比较，建议减少数据量或加大图表高度'
}]
},
extremeData: null
},
stacked_bar_chart: {
id: 'stacked_bar_chart',
name: '堆叠柱状图'
},
horizontal_stacked_bar_chart: {
id: 'horizontal_stacked_bar_chart',
name: '横向堆叠柱状图',
mainAxis: 'y',
bigData: {
judgements: [{
type: BigDataJudgement.Length,
threshold: 30,
message: '该柱图柱子过于密集，会影响展示效果，建议减少数据量或加大图表高度'
}, {
type: BigDataJudgement.Number,
threshold: 15,
message: '该柱图柱子数量过多，不利于数据间的比较，建议减少数据量或加大图表高度'
}]
},
extremeData: null
},
percentage_bar_chart: {
id: 'percentage_bar_chart',
name: '百分比堆叠柱状图'
},
grouped_stacked_bar_chart: {
id: 'grouped_stacked_bar_chart',
name: '分组堆叠柱状图'
},
grouped_percentage_stack_bar_chart: {
id: 'grouped_percentage_stack_bar_chart',
name: '分组百分比堆叠柱状图'
},
facet_bar_chart: {
id: 'facet_bar_chart',
name: '镜面柱图',
extremeData: null
},
horizontal_facet_bar_chart: {
id: 'horizontal_facet_bar_chart',
name: '横向镜面柱图',
mainAxis: 'y',
extremeData: null
},
polar_bar_chart: {
id: 'polar_bar_chart',
name: '极坐标柱状图',
coord: Coordinate.Polar,
bigData: {
judgements: [{
type: BigDataJudgement.Polar,
threshold: 100,
message: '该极坐标柱图半径过小，会影响展示效果，建议加大图表尺寸'
}, {
type: BigDataJudgement.Number,
threshold: 15,
message: '该极坐标柱图柱子数量过多，不利于数据间的比较，建议减少数据量或改用普通柱图'
}]
},
extremeData: null
},
polar_horizontal_bar_chart: {
id: 'polar_horizontal_bar_chart',
name: '极坐标横向柱状图',
bigData: {
judgements: [{
type: BigDataJudgement.Polar,
threshold: 100,
message: '该极坐标柱图半径过小，会影响展示效果，建议加大图表尺寸'
}, {
type: BigDataJudgement.Number,
threshold: 10,
message: '该极坐标横向柱图柱子数量过多，不利于数据间的比较，建议减少数据量或改用普通柱图'
}]
},
extremeData: null
},
polar_stacked_bar_chart: {
id: 'polar_stacked_bar_chart',
name: '极坐标堆叠柱图',
bigData: {
judgements: [{
type: BigDataJudgement.Polar,
threshold: 100,
message: '该极坐标柱图半径过小，会影响展示效果，建议加大图表尺寸'
}, {
type: BigDataJudgement.Number,
threshold: 15,
message: '该极坐标柱图柱子数量过多，不利于数据间的比较，建议减少数据量或改用普通柱图'
}]
},
extremeData: null
}
},
processConfig: function processConfig(config) {
var _finalConfig2, _finalConfig5, _finalConfig6, _finalConfig6$label, _finalConfig7, _finalConfig8, _finalConfig8$yAxis, _finalConfig9, _finalConfig9$yAxis, _finalConfig9$yAxis$, _finalConfig10, _finalConfig11, _finalConfig12, _finalConfig12$yAxis;
var finalConfig = config;
// 如果没有配置最大值，但是有辅助线，则默认增加最大值
if (finalConfig.yAxis && finalConfig.guide) {
var _finalConfig;
var guideYMax = null;
Object.keys(finalConfig.guide).forEach(function (key) {
var guideItem = finalConfig.guide[key];
if (Array.isArray(guideItem)) {
guideItem.forEach(function (subItem) {
if ((subItem === null || subItem === void 0 ? void 0 : subItem.axis) === 'y' && (subItem !== null && subItem !== void 0 && subItem.value || (subItem === null || subItem === void 0 ? void 0 : subItem.value) === 0)) {
if (guideYMax === null || subItem.value > guideYMax) {
guideYMax = subItem.value;
}
}
});
} else {
if ((guideItem === null || guideItem === void 0 ? void 0 : guideItem.axis) === 'y' && (guideItem !== null && guideItem !== void 0 && guideItem.value || (guideItem === null || guideItem === void 0 ? void 0 : guideItem.value) === 0)) {
if (guideYMax === null || guideItem.value > guideYMax) {
guideYMax = guideItem.value;
}
}
}
});
// 双轴不做处理
if (guideYMax !== null && !Array.isArray((_finalConfig = finalConfig) === null || _finalConfig === void 0 ? void 0 : _finalConfig.yAxis)) {
finalConfig.yAxis.max = Math.max(finalConfig.yAxis.max, guideYMax);
}
}
// 处理百分比柱图的y轴%展示
if (!Array.isArray((_finalConfig2 = finalConfig) === null || _finalConfig2 === void 0 ? void 0 : _finalConfig2.yAxis) && finalConfig.percentage && !finalConfig.yAxis.labelFormatter) {
var _finalConfig$yAxis, _finalConfig3;
var customFormatter = (_finalConfig$yAxis = finalConfig.yAxis) === null || _finalConfig$yAxis === void 0 ? void 0 : _finalConfig$yAxis.labelFormatter;
finalConfig = _extends({}, finalConfig, {
yAxis: _extends({}, (_finalConfig3 = finalConfig) === null || _finalConfig3 === void 0 ? void 0 : _finalConfig3.yAxis, {
min: 0,
max: 1,
labelFormatter: function labelFormatter(value) {
var _finalConfig4;
return customFormatter ? customFormatter(value) : numberDecimal(value * 100, (_finalConfig4 = finalConfig) === null || _finalConfig4 === void 0 ? void 0 : _finalConfig4.decimal) + '%';
}
})
});
}
// 线图与柱图当同时使用自定义legend与slider时，切换为默认legend
// 临时方案，自定义legend与slider无法兼容，待修复bug后删除
// if (
// (finalConfig?.legend?.foldable ||
// finalConfig?.legend?.table ||
// finalConfig?.legend?.gradient) &&
// finalConfig?.slider
// ) {
// finalConfig = {
// ...finalConfig,
// legend: {
// ...finalConfig?.legend,
// foldable: false,
// table: false,
// gradient: false,
// },
// };
// }
// 处理label展示不全问题
var appendPadding = null;
if ((_finalConfig5 = finalConfig) !== null && _finalConfig5 !== void 0 && _finalConfig5.label && ((_finalConfig6 = finalConfig) === null || _finalConfig6 === void 0 ? void 0 : (_finalConfig6$label = _finalConfig6.label) === null || _finalConfig6$label === void 0 ? void 0 : _finalConfig6$label.visible) !== false) {
appendPadding = [20, 20, 0, 0];
}
// 隐藏左y轴时，需要左padding
if (appendPadding && (Array.isArray((_finalConfig7 = finalConfig) === null || _finalConfig7 === void 0 ? void 0 : _finalConfig7.yAxis) && (((_finalConfig8 = finalConfig) === null || _finalConfig8 === void 0 ? void 0 : (_finalConfig8$yAxis = _finalConfig8.yAxis) === null || _finalConfig8$yAxis === void 0 ? void 0 : _finalConfig8$yAxis[0]) === false || ((_finalConfig9 = finalConfig) === null || _finalConfig9 === void 0 ? void 0 : (_finalConfig9$yAxis = _finalConfig9.yAxis) === null || _finalConfig9$yAxis === void 0 ? void 0 : (_finalConfig9$yAxis$ = _finalConfig9$yAxis[0]) === null || _finalConfig9$yAxis$ === void 0 ? void 0 : _finalConfig9$yAxis$.visible) === false) || !Array.isArray((_finalConfig10 = finalConfig) === null || _finalConfig10 === void 0 ? void 0 : _finalConfig10.yAxis) && (((_finalConfig11 = finalConfig) === null || _finalConfig11 === void 0 ? void 0 : _finalConfig11.yAxis) === false || ((_finalConfig12 = finalConfig) === null || _finalConfig12 === void 0 ? void 0 : (_finalConfig12$yAxis = _finalConfig12.yAxis) === null || _finalConfig12$yAxis === void 0 ? void 0 : _finalConfig12$yAxis.visible) === false))) {
appendPadding[3] = appendPadding[0];
}
if (appendPadding) {
var _finalConfig13;
finalConfig = _extends({}, finalConfig, {
appendPadding: ((_finalConfig13 = finalConfig) === null || _finalConfig13 === void 0 ? void 0 : _finalConfig13.appendPadding) || appendPadding
});
}
return finalConfig;
},
processData: function processData(data, config) {
return runDataRules(data, config);
}
};
/** 线图 */
var lineChart = {
id: 'line_chart',
name: '线图',
coord: Coordinate.Cartesian,
mainAxis: 'x',
dataStructure: DataStructure.Common,
classify: function classify(data, config) {
var _code2;
// 是否是阶梯线图
var isStep = !!(config !== null && config !== void 0 && config.step);
// 是否是平滑线图
var isSpline = !!(config !== null && config !== void 0 && config.spline);
// 是否是面积图
var isArea = !!(config !== null && config !== void 0 && config.area);
// 是否堆叠（仅area时生效)
var isStack = !!(config !== null && config !== void 0 && config.stack);
// 是否是区域线图
var isInterval = data === null || data === void 0 ? void 0 : data.some(function (item) {
return Array.isArray(item.y);
});
// 编码
var code = "" + (isStep ? 1 : 0) + (isSpline ? 1 : 0) + (isArea ? 1 : 0) + (isStack ? 1 : 0) + (isInterval ? 1 : 0);
// 映射
var chartMap = {
// 普通线图
'00000': 'line_chart',
// 阶梯线图
'10000': 'step_line_chart',
// 平滑线图
'01000': 'smooth_line_chart',
// 面积图
'00100': 'area_chart',
// 平滑面积图
'01100': 'smooth_area_chart',
// 堆叠面积图
'00110': 'stacked_area_chart',
// 平滑堆叠面积图
'01110': 'smooth_stacked_area_chart',
// 区域线图
'00101': 'area_line_chart'
};
return (_code2 = chartMap === null || chartMap === void 0 ? void 0 : chartMap[code]) !== null && _code2 !== void 0 ? _code2 : 'line_chart';
},
emptyData: EmptyDataProcess.Axis,
bigData: {
judgements: [{
type: BigDataJudgement.Length,
threshold: 4,
message: '该线图数据过于密集，会影响展示效果，建议减少数据量或加大图表宽度。已自动关闭标记点、圆滑曲线、面积图等配置项，若要关闭可加force配置项。推荐开启缩略轴slider配置，问题码#05-1'
}],
process: processLineBigData
},
extremeData: processLineExtremeData,
children: {
step_line_chart: {
id: 'step_line_chart',
name: '阶梯线图'
},
smooth_line_chart: {
id: 'smooth_line_chart',
name: '平滑线图'
},
area_chart: {
id: 'area_chart',
name: '面积图'
},
smooth_area_chart: {
id: 'smooth_area_chart',
name: '平滑面积图'
},
stacked_area_chart: {
id: 'stacked_area_chart',
name: '堆叠面积图'
},
smooth_stacked_area_chart: {
id: 'smooth_stacked_area_chart',
name: '平滑堆叠面积图'
},
area_line_chart: {
id: 'area_line_chart',
name: '区域线图'
}
},
processConfig: function processConfig(config) {
var _finalConfig14, _finalConfig15, _finalConfig15$label, _finalConfig16, _finalConfig17, _finalConfig18, _finalConfig18$yAxis, _finalConfig19, _finalConfig19$yAxis, _finalConfig19$yAxis$, _finalConfig20, _finalConfig21, _finalConfig22, _finalConfig22$yAxis;
var finalConfig = config;
if (finalConfig.stack) {
finalConfig = _extends({}, finalConfig, {
area: true
});
}
// 处理label和symbol展示不全问题
var appendPadding = null;
if ((_finalConfig14 = finalConfig) !== null && _finalConfig14 !== void 0 && _finalConfig14.label && ((_finalConfig15 = finalConfig) === null || _finalConfig15 === void 0 ? void 0 : (_finalConfig15$label = _finalConfig15.label) === null || _finalConfig15$label === void 0 ? void 0 : _finalConfig15$label.visible) !== false) {
appendPadding = [20, 20, 0, 0];
} else if ((_finalConfig16 = finalConfig) !== null && _finalConfig16 !== void 0 && _finalConfig16.symbol) {
appendPadding = [10, 10, 0, 0];
}
// 隐藏左y轴时，需要左padding
if (appendPadding && (Array.isArray((_finalConfig17 = finalConfig) === null || _finalConfig17 === void 0 ? void 0 : _finalConfig17.yAxis) && (((_finalConfig18 = finalConfig) === null || _finalConfig18 === void 0 ? void 0 : (_finalConfig18$yAxis = _finalConfig18.yAxis) === null || _finalConfig18$yAxis === void 0 ? void 0 : _finalConfig18$yAxis[0]) === false || ((_finalConfig19 = finalConfig) === null || _finalConfig19 === void 0 ? void 0 : (_finalConfig19$yAxis = _finalConfig19.yAxis) === null || _finalConfig19$yAxis === void 0 ? void 0 : (_finalConfig19$yAxis$ = _finalConfig19$yAxis[0]) === null || _finalConfig19$yAxis$ === void 0 ? void 0 : _finalConfig19$yAxis$.visible) === false) || !Array.isArray((_finalConfig20 = finalConfig) === null || _finalConfig20 === void 0 ? void 0 : _finalConfig20.yAxis) && (((_finalConfig21 = finalConfig) === null || _finalConfig21 === void 0 ? void 0 : _finalConfig21.yAxis) === false || ((_finalConfig22 = finalConfig) === null || _finalConfig22 === void 0 ? void 0 : (_finalConfig22$yAxis = _finalConfig22.yAxis) === null || _finalConfig22$yAxis === void 0 ? void 0 : _finalConfig22$yAxis.visible) === false))) {
appendPadding[3] = appendPadding[0];
}
if (appendPadding) {
var _finalConfig23;
finalConfig = _extends({}, finalConfig, {
appendPadding: ((_finalConfig23 = finalConfig) === null || _finalConfig23 === void 0 ? void 0 : _finalConfig23.appendPadding) || appendPadding
});
}
// 线图与柱图当同时使用自定义legend与slider时，切换为默认legend
// 临时方案，自定义legend与slider无法兼容，待修复bug后删除
// if (
// (finalConfig?.legend?.foldable ||
// finalConfig?.legend?.table ||
// finalConfig?.legend?.gradient) &&
// finalConfig?.slider
// ) {
// finalConfig = {
// ...finalConfig,
// legend: {
// ...finalConfig?.legend,
// foldable: false,
// table: false,
// gradient: false,
// },
// };
// }
// 如果没有配置最大值，但是有辅助线，则默认增加最大值
if (finalConfig.yAxis && finalConfig.guide) {
var _finalConfig24;
var guideYMax = null;
Object.keys(finalConfig.guide).forEach(function (key) {
var guideItem = finalConfig.guide[key];
if (Array.isArray(guideItem)) {
guideItem.forEach(function (subItem) {
if ((subItem === null || subItem === void 0 ? void 0 : subItem.axis) === 'y' && (subItem !== null && subItem !== void 0 && subItem.value || (subItem === null || subItem === void 0 ? void 0 : subItem.value) === 0)) {
if (guideYMax === null || subItem.value > guideYMax) {
guideYMax = subItem.value;
}
}
});
} else {
if ((guideItem === null || guideItem === void 0 ? void 0 : guideItem.axis) === 'y' && (guideItem !== null && guideItem !== void 0 && guideItem.value || (guideItem === null || guideItem === void 0 ? void 0 : guideItem.value) === 0)) {
if (guideYMax === null || guideItem.value > guideYMax) {
guideYMax = guideItem.value;
}
}
}
});
// 双轴不做处理
if (guideYMax !== null && !Array.isArray((_finalConfig24 = finalConfig) === null || _finalConfig24 === void 0 ? void 0 : _finalConfig24.yAxis)) {
finalConfig.yAxis.max = Math.max(finalConfig.yAxis.max, guideYMax);
}
}
return finalConfig;
},
processData: function processData(data, config) {
return runDataRules(data, config);
}
};
/** 饼图 */
var pieChart = {
id: 'pie_chart',
name: '饼图',
coord: Coordinate.Polar,
dataStructure: DataStructure.Common,
classify: function classify(data, config) {
if (config !== null && config !== void 0 && config.cycle) {
return 'donut_chart';
}
return 'pie_chart';
},
emptyData: EmptyDataProcess.Polar,
bigData: {
judgements: [{
type: BigDataJudgement.Polar,
threshold: 100,
message: '该饼图半径过小，会影响展示效果，建议加大图表半径'
}, {
type: BigDataJudgement.Number,
threshold: 10,
message: '该饼图分块过多，会影响可读性，推荐开启autoFormat进行数据收敛，问题码#05-3'
}],
process: processPieBigData
},
extremeData: processLPieExtremeData,
children: {
donut_chart: {
id: 'donut_chart',
name: '环图'
}
}
};
/** 直方图 */
var histogram = {
id: 'histogram',
name: '直方图',
coord: Coordinate.Cartesian,
mainAxis: 'x',
dataStructure: DataStructure.Common,
classify: function classify(data, config) {
var _code3;
// 方向，横向还是纵向
var isColumn = (config === null || config === void 0 ? void 0 : config.column) === undefined || (config === null || config === void 0 ? void 0 : config.column) === true;
// 是否是极坐标
var isPolar = !!(config !== null && config !== void 0 && config.polar);
// 是否归一化
var isNormalize = !!(config !== null && config !== void 0 && config.normalize);
// 编码
var code = "" + (isColumn ? 1 : 0) + (isPolar ? 1 : 0) + (isNormalize ? 1 : 0);
// 映射
var chartMap = {
// 普通直方图
'100': 'histogram',
// 水平直方图
'000': 'horizontal_histogram',
// 归一化直方图
'101': 'normalized_histogram',
// 极坐标直方图
'110': 'polar_histogram'
};
return (_code3 = chartMap === null || chartMap === void 0 ? void 0 : chartMap[code]) !== null && _code3 !== void 0 ? _code3 : 'histogram';
},
emptyData: EmptyDataProcess.Axis,
children: {
horizontal_histogram: {
id: 'horizontal_histogram',
name: '水平直方图',
mainAxis: 'y'
},
normalized_histogram: {
id: 'normalized_histogram',
name: '归一化直方图'
},
polar_histogram: {
id: 'polar_histogram',
name: '极坐标直方图',
coord: Coordinate.Polar
}
},
processData: function processData(data, config) {
return runDataRules(data, config);
}
};
/** 线柱图 */
var lineBarChart = {
id: 'line_bar_chart',
name: '线柱图',
coord: Coordinate.Cartesian,
mainAxis: 'x',
dataStructure: DataStructure.Origin,
classify: function classify(data, config) {
var _code4;
// 判断是否是分组堆叠，此处简化处理，不判断数据
var isDodgeStack = !!(config !== null && config !== void 0 && config.dodgeStack);
// 判断是否是堆叠图
var isStack = !isDodgeStack && !!(config !== null && config !== void 0 && config.stack);
// 是否面积图
var isArea = !!(config !== null && config !== void 0 && config.area);
// 编码
var code = "" + (isDodgeStack ? 1 : 0) + (isStack ? 1 : 0) + (isArea ? 1 : 0);
// 映射
var chartMap = {
'000': 'line_bar_chart',
// 堆叠线柱图
'010': 'stacked_line_bar_chart',
// 分组堆叠线柱图
'100': 'grouped_stacked_line_bar_chart',
// 面积线柱图
'001': 'area_bar_chart',
// 堆叠面积线柱图
'011': 'stacked_area_bar_chart',
// 分组堆叠面积线柱图
'101': 'grouped_stacked_area_bar_chart'
};
return (_code4 = chartMap === null || chartMap === void 0 ? void 0 : chartMap[code]) !== null && _code4 !== void 0 ? _code4 : 'line_bar_chart';
},
emptyData: EmptyDataProcess.Axis,
bigData: {
judgements: [{
type: BigDataJudgement.Length,
threshold: 15,
message: '该线柱图数据过于密集，会影响展示效果，建议减少数据量或加大图表宽度'
}]
},
children: {
stacked_line_bar_chart: {
id: 'stacked_line_bar_chart',
name: '堆叠线柱图'
},
grouped_stacked_line_bar_chart: {
id: 'grouped_stacked_line_bar_chart',
name: '分组堆叠线柱图'
},
area_bar_chart: {
id: 'area_bar_chart',
name: '面积线柱图'
},
stacked_area_bar_chart: {
id: 'stacked_area_bar_chart',
name: '堆叠面积线柱图'
},
grouped_stacked_area_bar_chart: {
id: 'grouped_stacked_area_bar_chart',
name: '分组堆叠面积线柱图'
}
},
processConfig: function processConfig(config) {
var _finalConfig25, _finalConfig26, _finalConfig26$lineLa, _finalConfig27, _finalConfig28, _finalConfig28$barLab, _finalConfig29, _finalConfig30, _finalConfig31, _finalConfig31$yAxis, _finalConfig32, _finalConfig32$yAxis, _finalConfig32$yAxis$, _finalConfig33, _finalConfig34, _finalConfig35, _finalConfig35$yAxis;
var finalConfig = config;
// 处理label和symbol展示不全问题
var appendPadding = null;
if ((_finalConfig25 = finalConfig) !== null && _finalConfig25 !== void 0 && _finalConfig25.lineLabel && ((_finalConfig26 = finalConfig) === null || _finalConfig26 === void 0 ? void 0 : (_finalConfig26$lineLa = _finalConfig26.lineLabel) === null || _finalConfig26$lineLa === void 0 ? void 0 : _finalConfig26$lineLa.visible) !== false || (_finalConfig27 = finalConfig) !== null && _finalConfig27 !== void 0 && _finalConfig27.barLabel && ((_finalConfig28 = finalConfig) === null || _finalConfig28 === void 0 ? void 0 : (_finalConfig28$barLab = _finalConfig28.barLabel) === null || _finalConfig28$barLab === void 0 ? void 0 : _finalConfig28$barLab.visible) !== false) {
appendPadding = [20, 20, 0, 0];
} else if ((_finalConfig29 = finalConfig) !== null && _finalConfig29 !== void 0 && _finalConfig29.symbol) {
appendPadding = [10, 10, 0, 0];
}
// 隐藏左y轴时，需要左padding
if (appendPadding && (Array.isArray((_finalConfig30 = finalConfig) === null || _finalConfig30 === void 0 ? void 0 : _finalConfig30.yAxis) && (((_finalConfig31 = finalConfig) === null || _finalConfig31 === void 0 ? void 0 : (_finalConfig31$yAxis = _finalConfig31.yAxis) === null || _finalConfig31$yAxis === void 0 ? void 0 : _finalConfig31$yAxis[0]) === false || ((_finalConfig32 = finalConfig) === null || _finalConfig32 === void 0 ? void 0 : (_finalConfig32$yAxis = _finalConfig32.yAxis) === null || _finalConfig32$yAxis === void 0 ? void 0 : (_finalConfig32$yAxis$ = _finalConfig32$yAxis[0]) === null || _finalConfig32$yAxis$ === void 0 ? void 0 : _finalConfig32$yAxis$.visible) === false) || !Array.isArray((_finalConfig33 = finalConfig) === null || _finalConfig33 === void 0 ? void 0 : _finalConfig33.yAxis) && (((_finalConfig34 = finalConfig) === null || _finalConfig34 === void 0 ? void 0 : _finalConfig34.yAxis) === false || ((_finalConfig35 = finalConfig) === null || _finalConfig35 === void 0 ? void 0 : (_finalConfig35$yAxis = _finalConfig35.yAxis) === null || _finalConfig35$yAxis === void 0 ? void 0 : _finalConfig35$yAxis.visible) === false))) {
appendPadding[3] = appendPadding[0];
}
if (appendPadding) {
var _finalConfig36;
finalConfig = _extends({}, finalConfig, {
appendPadding: ((_finalConfig36 = finalConfig) === null || _finalConfig36 === void 0 ? void 0 : _finalConfig36.appendPadding) || appendPadding
});
}
return finalConfig;
},
processData: function processData(data, config) {
return runDataRules(data, config);
}
};
/** 线点图 */
var lineScatterChart = {
id: 'line_scatter_chart',
name: '线点图',
coord: Coordinate.Cartesian,
mainAxis: 'x',
dataStructure: DataStructure.Origin,
classify: function classify(data, config) {
if (config !== null && config !== void 0 && config.area) {
return 'area_scatter_chart';
}
return 'line_scatter_chart';
},
emptyData: EmptyDataProcess.Axis,
bigData: {
judgements: [{
type: BigDataJudgement.Length,
threshold: 10,
message: '该线点图数据过于密集，会影响展示效果，建议减少数据量或加大图表宽度'
}]
},
children: {
area_scatter_chart: {
id: 'area_scatter_chart',
name: '面积线点图'
}
},
processConfig: function processConfig(config) {
var _finalConfig37, _finalConfig38, _finalConfig38$lineLa, _finalConfig39, _finalConfig40, _finalConfig40$scatte, _finalConfig41, _finalConfig42, _finalConfig43, _finalConfig43$yAxis, _finalConfig44, _finalConfig44$yAxis, _finalConfig44$yAxis$, _finalConfig45, _finalConfig46, _finalConfig47, _finalConfig47$yAxis;
var finalConfig = config;
// 处理label和symbol展示不全问题
var appendPadding = null;
if ((_finalConfig37 = finalConfig) !== null && _finalConfig37 !== void 0 && _finalConfig37.lineLabel && ((_finalConfig38 = finalConfig) === null || _finalConfig38 === void 0 ? void 0 : (_finalConfig38$lineLa = _finalConfig38.lineLabel) === null || _finalConfig38$lineLa === void 0 ? void 0 : _finalConfig38$lineLa.visible) !== false || (_finalConfig39 = finalConfig) !== null && _finalConfig39 !== void 0 && _finalConfig39.scatterLabel && ((_finalConfig40 = finalConfig) === null || _finalConfig40 === void 0 ? void 0 : (_finalConfig40$scatte = _finalConfig40.scatterLabel) === null || _finalConfig40$scatte === void 0 ? void 0 : _finalConfig40$scatte.visible) !== false) {
appendPadding = [20, 20, 0, 0];
} else if ((_finalConfig41 = finalConfig) !== null && _finalConfig41 !== void 0 && _finalConfig41.symbol) {
appendPadding = [10, 10, 0, 0];
}
// 隐藏左y轴时，需要左padding
if (appendPadding && (Array.isArray((_finalConfig42 = finalConfig) === null || _finalConfig42 === void 0 ? void 0 : _finalConfig42.yAxis) && (((_finalConfig43 = finalConfig) === null || _finalConfig43 === void 0 ? void 0 : (_finalConfig43$yAxis = _finalConfig43.yAxis) === null || _finalConfig43$yAxis === void 0 ? void 0 : _finalConfig43$yAxis[0]) === false || ((_finalConfig44 = finalConfig) === null || _finalConfig44 === void 0 ? void 0 : (_finalConfig44$yAxis = _finalConfig44.yAxis) === null || _finalConfig44$yAxis === void 0 ? void 0 : (_finalConfig44$yAxis$ = _finalConfig44$yAxis[0]) === null || _finalConfig44$yAxis$ === void 0 ? void 0 : _finalConfig44$yAxis$.visible) === false) || !Array.isArray((_finalConfig45 = finalConfig) === null || _finalConfig45 === void 0 ? void 0 : _finalConfig45.yAxis) && (((_finalConfig46 = finalConfig) === null || _finalConfig46 === void 0 ? void 0 : _finalConfig46.yAxis) === false || ((_finalConfig47 = finalConfig) === null || _finalConfig47 === void 0 ? void 0 : (_finalConfig47$yAxis = _finalConfig47.yAxis) === null || _finalConfig47$yAxis === void 0 ? void 0 : _finalConfig47$yAxis.visible) === false))) {
appendPadding[3] = appendPadding[0];
}
if (appendPadding) {
var _finalConfig48;
finalConfig = _extends({}, finalConfig, {
appendPadding: ((_finalConfig48 = finalConfig) === null || _finalConfig48 === void 0 ? void 0 : _finalConfig48.appendPadding) || appendPadding
});
}
return finalConfig;
},
processData: function processData(data, config) {
return runDataRules(data, config);
}
};
/** 散点图 */
// todo: 散点图数据量计算方式及大数据判断调整
var scatterChart = {
id: 'scatter_chart',
name: '散点图',
coord: Coordinate.Cartesian,
mainAxis: 'x',
dataStructure: DataStructure.Common,
classify: function classify(data, config) {
if (config !== null && config !== void 0 && config.jitter) {
return 'jitter_scatter_chart';
}
return 'scatter_chart';
},
emptyData: EmptyDataProcess.Axis,
bigData: {
judgements: [{
type: BigDataJudgement.Length,
threshold: 2,
message: '该散点图数据过于密集，会影响展示效果，建议减少数据量或加大图表尺寸'
}]
},
children: {
jitter_scatter_chart: {
id: 'jitter_scatter_chart',
name: '扰动点图'
}
},
processConfig: function processConfig(config) {
var _finalConfig51, _finalConfig52, _finalConfig52$yAxis, _finalConfig53, _finalConfig53$yAxis, _finalConfig53$yAxis$, _finalConfig54, _finalConfig55, _finalConfig56, _finalConfig56$yAxis;
var finalConfig = config;
// 处理label和symbol展示不全问题
var appendPadding = null;
if (!finalConfig.jitter) {
var _finalConfig49, _finalConfig50, _finalConfig50$label;
if ((_finalConfig49 = finalConfig) !== null && _finalConfig49 !== void 0 && _finalConfig49.label && ((_finalConfig50 = finalConfig) === null || _finalConfig50 === void 0 ? void 0 : (_finalConfig50$label = _finalConfig50.label) === null || _finalConfig50$label === void 0 ? void 0 : _finalConfig50$label.visible) !== false) {
appendPadding = [20, 20, 0, 0];
} else {
appendPadding = [10, 10, 0, 0];
}
}
// 隐藏左y轴时，需要左padding
if (appendPadding && (Array.isArray((_finalConfig51 = finalConfig) === null || _finalConfig51 === void 0 ? void 0 : _finalConfig51.yAxis) && (((_finalConfig52 = finalConfig) === null || _finalConfig52 === void 0 ? void 0 : (_finalConfig52$yAxis = _finalConfig52.yAxis) === null || _finalConfig52$yAxis === void 0 ? void 0 : _finalConfig52$yAxis[0]) === false || ((_finalConfig53 = finalConfig) === null || _finalConfig53 === void 0 ? void 0 : (_finalConfig53$yAxis = _finalConfig53.yAxis) === null || _finalConfig53$yAxis === void 0 ? void 0 : (_finalConfig53$yAxis$ = _finalConfig53$yAxis[0]) === null || _finalConfig53$yAxis$ === void 0 ? void 0 : _finalConfig53$yAxis$.visible) === false) || !Array.isArray((_finalConfig54 = finalConfig) === null || _finalConfig54 === void 0 ? void 0 : _finalConfig54.yAxis) && (((_finalConfig55 = finalConfig) === null || _finalConfig55 === void 0 ? void 0 : _finalConfig55.yAxis) === false || ((_finalConfig56 = finalConfig) === null || _finalConfig56 === void 0 ? void 0 : (_finalConfig56$yAxis = _finalConfig56.yAxis) === null || _finalConfig56$yAxis === void 0 ? void 0 : _finalConfig56$yAxis.visible) === false))) {
appendPadding[3] = appendPadding[0];
}
if (appendPadding) {
var _finalConfig57;
finalConfig = _extends({}, finalConfig, {
appendPadding: ((_finalConfig57 = finalConfig) === null || _finalConfig57 === void 0 ? void 0 : _finalConfig57.appendPadding) || appendPadding
});
}
return finalConfig;
},
processData: function processData(data, config) {
return runDataRules(data, config);
}
};
/** 玫瑰图 */
var nightingaleRoseChart = {
id: 'nightingale_rose_chart',
name: '南丁格尔玫瑰图',
coord: Coordinate.Polar,
dataStructure: DataStructure.Common,
classify: function classify(data, config) {
if (config !== null && config !== void 0 && config.cycle) {
return 'nightingale_rose_donut_chart';
}
return 'nightingale_rose_chart';
},
emptyData: EmptyDataProcess.Polar,
bigData: {
judgements: [{
type: BigDataJudgement.Polar,
threshold: 100,
message: '该玫瑰图半径过小，会影响展示效果，建议加大图表半径'
}, {
type: BigDataJudgement.Number,
threshold: 15,
message: '该玫瑰图分块过多，会影响可读性，建议减少数据量或改用其他图表'
}]
},
children: {
nightingale_rose_donut_chart: {
id: 'nightingale_rose_donut_chart',
name: '玫瑰环图'
}
}
};
/** 雷达图 */
var radarChart = {
id: 'radar_chart',
name: '雷达图',
coord: Coordinate.Polar,
dataStructure: DataStructure.Common,
classify: function classify(data, config) {
if (config !== null && config !== void 0 && config.area) {
return 'radar_area_chart';
}
return 'radar_chart';
},
emptyData: EmptyDataProcess.Polar,
bigData: {
judgements: [{
type: BigDataJudgement.Polar,
threshold: 100,
message: '该雷达图数据过于密集，会影响展示效果，建议减少数据量或加大图表半径'
}, {
type: BigDataJudgement.Number,
threshold: 30,
message: '该雷达图分块过多，会影响可读性，建议减少数据量或改用其他图表'
}]
},
children: {
radar_area_chart: {
id: 'radar_area_chart',
name: '雷达面积图'
}
}
};
/** 漏斗图 */
var funnelChart = {
id: 'funnel_chart',
name: '漏斗图',
coord: Coordinate.Cartesian,
mainAxis: 'y',
dataStructure: DataStructure.Common,
classify: function classify(data, config) {
var _code5;
// 方向
var isColumn = !(config !== null && config !== void 0 && config.direction) || (config === null || config === void 0 ? void 0 : config.direction) === 'vertical';
// 是否尖顶
var isPyramid = !!(config !== null && config !== void 0 && config.pyramid);
// 编码
var code = "" + (isColumn ? 1 : 0) + (isPyramid ? 1 : 0);
// 映射
var chartMap = {
// 普通漏斗图
'10': 'funnel_chart',
// 水平漏斗图
'00': 'horizontal_funnel_chart',
// 尖顶漏斗图
'11': 'pyramid_funnel_chart',
// 水平尖顶漏斗图
'01': 'horizontal_pyramid_funnel_chart'
};
return (_code5 = chartMap === null || chartMap === void 0 ? void 0 : chartMap[code]) !== null && _code5 !== void 0 ? _code5 : 'funnel_chart';
},
emptyData: EmptyDataProcess.Background,
bigData: {
judgements: [{
type: BigDataJudgement.Length,
threshold: 30,
message: '该漏斗图数据过于密集，会影响展示效果，建议减少数据量或加大图表尺寸'
}, {
type: BigDataJudgement.Number,
threshold: 10,
message: '该漏斗图数据量过多，会影响可读性，建议减少数据量或改用其他图表'
}]
},
children: {
horizontal_funnel_chart: {
id: 'horizontal_funnel_chart',
name: '水平漏斗图',
mainAxis: 'x'
},
pyramid_funnel_chart: {
id: 'pyramid_funnel_chart',
name: '尖顶漏斗图'
},
horizontal_pyramid_funnel_chart: {
id: 'horizontal_pyramid_funnel_chart',
name: '水平尖顶漏斗图',
mainAxis: 'x'
}
}
};
/** 多重饼图 */
var multiPieChart = {
id: 'multi_pie_chart',
name: '多重饼图',
coord: Coordinate.Polar,
dataStructure: DataStructure.Tree,
classify: function classify(data, config) {
if (config !== null && config !== void 0 && config.cycle) {
return 'multi_donut_chart';
}
return 'multi_pie_chart';
},
emptyData: EmptyDataProcess.Polar,
bigData: {
judgements: [{
type: BigDataJudgement.Polar,
threshold: 100,
message: '该多重饼图数据过于密集，会影响展示效果，建议加大图表半径'
}, {
type: BigDataJudgement.Number,
threshold: 20,
message: '该多重饼图分块过多，会影响可读性，建议减少数据量或改用其他图表'
}]
},
children: {
multi_donut_chart: {
id: 'multi_donut_chart',
name: '多重环图'
}
}
};
/** 矩形树图 */
var treemap = {
id: 'treemap',
name: '矩形树图',
coord: Coordinate.Cartesian,
dataStructure: DataStructure.Tree,
classify: function classify(data, config) {
if (config !== null && config !== void 0 && config.polar) {
return 'polar_treemap';
}
return 'treemap';
},
emptyData: EmptyDataProcess.Background,
children: {
polar_treemap: {
id: 'polar_treemap',
name: '极坐标树图',
coord: Coordinate.Polar
}
}
};
/** 相邻层次图 */
var hierarchyChart = {
id: 'hierarchy_chart',
name: '相邻层次图',
coord: Coordinate.Cartesian,
dataStructure: DataStructure.Tree,
classify: function classify(data, config) {
if (config !== null && config !== void 0 && config.polar) {
return 'polar_hierarchy_chart';
}
return 'hierarchy_chart';
},
emptyData: EmptyDataProcess.Background,
children: {
polar_hierarchy_chart: {
id: 'polar_hierarchy_chart',
name: '旭日图',
coord: Coordinate.Polar
}
}
};
/** 箱型图 */
var boxChart = {
id: 'box_chart',
name: '箱型图',
coord: Coordinate.Cartesian,
dataStructure: DataStructure.Common,
mainAxis: 'x',
emptyData: EmptyDataProcess.Axis,
bigData: {
judgements: [{
type: BigDataJudgement.Length,
threshold: 50,
message: '该箱型图数据过于密集，会影响展示效果，建议减少数据量或加大图表宽度'
}, {
type: BigDataJudgement.Number,
threshold: 20,
message: '该箱型图数据量过多，不利于数据间的比较，建议减少数据量或改用其他图表'
}]
}
};
/** 烛形图 */
var candlestickChart = {
id: 'candlestick_chart',
name: '烛形图',
coord: Coordinate.Cartesian,
dataStructure: DataStructure.Common,
mainAxis: 'x',
emptyData: EmptyDataProcess.Axis,
bigData: {
judgements: [{
type: BigDataJudgement.Length,
threshold: 8,
message: '该烛形图数据过于密集，会影响展示效果，建议减少数据量或加大图表宽度'
}, {
type: BigDataJudgement.Number,
threshold: 100,
message: '该烛形图数据量过多，会影响可读性，建议减少数据量或改用其他图表'
}]
}
};
/** 多重圆环 */
var multiCircle = {
id: 'multi_circle',
name: '多重圆环',
coord: Coordinate.Polar,
dataStructure: DataStructure.Common,
emptyData: EmptyDataProcess.Polar,
bigData: {
judgements: [{
type: BigDataJudgement.Polar,
threshold: 100,
message: '该多重圆环图半径过小，会影响展示效果，建议加大图表半径'
}, {
type: BigDataJudgement.Number,
threshold: 10,
message: '该多重圆环数据过多，会影响可读性，建议减少数据量或改用其他图表'
}]
}
};
/** 热力图 */
var heatmap = {
id: 'heatmap',
name: '热力图',
coord: Coordinate.Cartesian,
dataStructure: DataStructure.Common,
emptyData: EmptyDataProcess.Background
};
/** 箱型线图 */
var lineBoxChart = {
id: 'line_box_chart',
name: '箱型线图',
coord: Coordinate.Cartesian,
mainAxis: 'x',
dataStructure: DataStructure.Origin,
emptyData: EmptyDataProcess.Axis,
bigData: {
judgements: [{
type: BigDataJudgement.Length,
threshold: 50,
message: '该箱型线图数据过于密集，会影响展示效果，建议减少数据量或加大图表宽度'
}, {
type: BigDataJudgement.Number,
threshold: 20,
message: '该箱型线图数据量过多，不利于数据间的比较，建议减少数据量或改用其他图表'
}]
}
};
/** 分箱图 */
var rectangleChart = {
id: 'rectangle_chart',
name: '矩形分箱图',
coord: Coordinate.Cartesian,
mainAxis: 'x',
dataStructure: DataStructure.Common,
emptyData: EmptyDataProcess.Background
};
/** 桑基图 */
var sankeyChart = {
id: 'sankey_chart',
name: '桑基图',
coord: Coordinate.Cartesian,
dataStructure: DataStructure.Graph,
emptyData: EmptyDataProcess.Background
};
export default {
G2Bar: barChart,
G2Line: lineChart,
G2Pie: pieChart,
G2Histogram: histogram,
G2LineBar: lineBarChart,
G2LineScatter: lineScatterChart,
G2Scatter: scatterChart,
G2Nightingale: nightingaleRoseChart,
G2Radar: radarChart,
G2Funnel: funnelChart,
G2MultiPie: multiPieChart,
G2Treemap: treemap,
G2Hierarchy: hierarchyChart,
G2Box: boxChart,
G2Wcandlestick: candlestickChart,
G2MultiCircle: multiCircle,
G2Heatmap: heatmap,
G2Linebox: lineBoxChart,
G2Rectangle: rectangleChart,
G2Sankey: sankeyChart
};