UNPKG

@alicloud/cloud-charts

Version:

![](https://img.shields.io/npm/v/@alicloud/cloud-charts?color=%23ff8200)

391 lines (337 loc) 16.9 kB
import _extends from "@babel/runtime/helpers/extends"; import { warn } from '../common/log'; import themes from '../themes'; /** 柱图极端数据处理 */ export function processBarExtremeData(chartObj, config, data) { var _chartObj$chartRule, _Array$from$length, _Array$from, _Array$from$length2, _Array$from2; var dataSize = chartObj.dataSize, size = chartObj.size; var width = size[0]; var force = chartObj.props.force; var chartName = chartObj === null || chartObj === void 0 ? void 0 : (_chartObj$chartRule = chartObj.chartRule) === null || _chartObj$chartRule === void 0 ? void 0 : _chartObj$chartRule.name; // 图表宽度,50是估算的padding var length = width - 50; // 根据stack、dodgeStack等配置项计算一组柱子的宽度,从而计算至少需要几组柱子 var barWidth = 24; var types = (_Array$from$length = (_Array$from = Array.from(new Set(data === null || data === void 0 ? void 0 : data.map(function (item) { return item === null || item === void 0 ? void 0 : item.type; })))) === null || _Array$from === void 0 ? void 0 : _Array$from.length) !== null && _Array$from$length !== void 0 ? _Array$from$length : 0; var dodges = (_Array$from$length2 = (_Array$from2 = Array.from(new Set(data === null || data === void 0 ? void 0 : data.map(function (item) { return item === null || item === void 0 ? void 0 : item.dodge; })))) === null || _Array$from2 === void 0 ? void 0 : _Array$from2.length) !== null && _Array$from$length2 !== void 0 ? _Array$from$length2 : 1; var groups = config !== null && config !== void 0 && config.dodgeStack ? dodges : config !== null && config !== void 0 && config.stack ? 1 : types; var minCount = Math.floor(length / (groups * barWidth + 80)); if (dataSize < minCount) { var _config$xAxis$type, _config$xAxis, _config$colors, _config$legend, _config$xAxis2; if (force === true || (force === null || force === void 0 ? void 0 : force.extreme) === true) { warn(chartName, '当前柱图数据量较少,推荐关闭force配置项开启极端数据自适应。问题码#08'); return { isExtreme: true }; } // x轴类型 var axisType = (_config$xAxis$type = config === null || config === void 0 ? void 0 : (_config$xAxis = config.xAxis) === null || _config$xAxis === void 0 ? void 0 : _config$xAxis.type) !== null && _config$xAxis$type !== void 0 ? _config$xAxis$type : 'cat'; // 原数据中类型 var dataTypes = Array.from(new Set(data.map(function (x) { return x.type; }))); // 颜色 var colors = (_config$colors = config === null || config === void 0 ? void 0 : config.colors) !== null && _config$colors !== void 0 ? _config$colors : themes.category_20; if (Array.isArray(colors) && colors.length < dataTypes.length) { var _themes$category_, _themes$category_2; if (!(colors.length === 12 && (_themes$category_ = themes.category_12) !== null && _themes$category_ !== void 0 && _themes$category_.every(function (val, index) { var _colors; return val === ((_colors = colors) === null || _colors === void 0 ? void 0 : _colors[index]); })) && !(colors.length === 20 && (_themes$category_2 = themes.category_20) !== null && _themes$category_2 !== void 0 && _themes$category_2.every(function (val, index) { var _colors2; return val === ((_colors2 = colors) === null || _colors2 === void 0 ? void 0 : _colors2[index]); }))) { var _themes$category_3; colors = [].concat(colors, ((_themes$category_3 = themes.category_20) === null || _themes$category_3 === void 0 ? void 0 : _themes$category_3.slice(colors.length, dataTypes.length)) || []); } while (colors.length < dataTypes.length) { colors = [].concat(colors, colors.slice(0, dataTypes.length - colors.length)); } } var newData = [].concat(data); var newColors = colors; var xAxis = {}; var _ref = force !== null && force !== void 0 ? force : {}, extreme = _ref.extreme; var needColor = false; var alignLeft = false; var showPlaceholder = false; // 计算最后一个柱子的y值 var xValues = Array.from(new Set(data.map(function (item) { return item.x; }))); var lastX = xValues[xValues.length - 1]; var _dodges = Array.from(new Set(data.map(function (item) { return item.dodge; }))); var lastDodge = _dodges[_dodges.length - 1]; var lastY = 0; if (config.dodgeStack && lastDodge) { lastY = data.filter(function (item) { return item.x === lastX && item.dodge === lastDodge; }).map(function (item) { return item.y || 0; }).reduce(function (pre, cur) { return pre + cur; }); } else if (config.stack) { lastY = data.filter(function (item) { return item.x === lastX; }).map(function (item) { return item.y || 0; }).reduce(function (pre, cur) { return pre + cur; }); } else if (config.dodge && lastDodge) { var filteredData = data.filter(function (item) { return item.x === lastX && item.dodge === lastDodge; }); lastY = filteredData[filteredData.length - 1].y; } else { var _filteredData = data.filter(function (item) { return item.x === lastX; }); lastY = _filteredData[_filteredData.length - 1].y; } // 分类数据 if (axisType === 'cat') { // 分类数据默认隐藏占位 // 是否左对齐 // 优先级: 用户配置>特殊情况(数据量为1)>默认配置 /* alignLeft = force === false || extreme === false || extreme?.alignLeft === false ? true : extreme === true || extreme?.alignLeft === true ? false : dataSize === 1; */ alignLeft = force === false || extreme === false || (extreme === null || extreme === void 0 ? void 0 : extreme.alignLeft) === false; // 是否显示占位 // 优先级:用户配置>默认配置 showPlaceholder = force === false || extreme === false || (extreme === null || extreme === void 0 ? void 0 : extreme.showPlaceholder) === false; // 左对齐,无占位 if (alignLeft && !showPlaceholder) { var values = Array.from(new Set(data.map(function (item) { return item.x; }))); for (var i = 0; i < minCount - dataSize; i += 1) { values.push("widgets-pad-" + i); } xAxis = { values: values }; warn(chartName, '当前数据量较少,已默认开启左对齐,推荐通过extreme配置项开启占位补全。问题码#08'); } // 左对齐且显示占位 else if (alignLeft && showPlaceholder) { for (var _i = 0; _i < minCount - dataSize; _i += 1) { newData.push({ x: "widgets-pad-" + _i, y: lastY, type: 'widgets-pad-type' }); } needColor = true; warn(chartName, '当前数据量较少,已默认开启左对齐与占位补全,可通过extreme配置项进行关闭。问题码#08'); } // 无特殊处理 else { warn(chartName, '当前数据量较少,推荐通过extreme配置项开启左对齐与占位补全。问题码#08'); } } // 时间分类数据 else if (axisType === 'timeCat') { // 计算最后一个柱子的y值 /* let lastY = data?.[0]?.y ?? 0; let curMax = data?.[0]?.x ?? 0; data.forEach((item: any) => { if (item.x > curMax) { curMax = item.x; lastY = item.y; } }); */ // 时间分类数据默认开启 // 是否左对齐 // 优先级: 用户配置>默认配置 //alignLeft = !(extreme === true || extreme?.alignLeft === true); alignLeft = force === false || extreme === false || (extreme === null || extreme === void 0 ? void 0 : extreme.alignLeft) === false; // 是否显示占位 // 优先级:用户配置>默认配置 showPlaceholder = !(extreme === true || (extreme === null || extreme === void 0 ? void 0 : extreme.showPlaceholder) === true); var _values = Array.from(new Set(data.map(function (item) { return item.x; }))); var minX = Math.min.apply(Math, _values); var maxX = Math.max.apply(Math, _values); var step = maxX !== minX ? Math.floor((maxX - minX) / dataSize) : 100; // 左对齐,无占位 if (alignLeft && !showPlaceholder) { var newValues = [].concat(_values); for (var _i2 = 0; _i2 < minCount - dataSize; _i2 += 1) { newValues.push(maxX + step * (_i2 + 1)); } xAxis = { values: newValues, ticks: _values }; warn(chartName, '当前数据量较少,已默认开启左对齐,推荐通过extreme配置项开启占位补全。问题码#08'); } // 左对齐且显示占位 else if (alignLeft && showPlaceholder) { for (var _i3 = 0; _i3 < minCount - dataSize; _i3 += 1) { newData.push({ x: maxX + step * (_i3 + 1), y: lastY, type: 'widgets-pad-type' }); } xAxis = { ticks: _values }; needColor = true; warn(chartName, '当前数据量较少,已默认开启左对齐与占位补全,可通过extreme配置项进行关闭。问题码#08'); } // 无特殊处理 else { warn(chartName, '当前数据量较少,推荐通过extreme配置项开启左对齐与占位补全。问题码#08'); } } if (needColor) { // 颜色处理 if (Array.isArray(colors)) { newColors = [].concat(colors.slice(0, dataTypes.length), [themes['widgets-color-container-background']]); } else if (typeof colors === 'string') { newColors = [].concat(dataTypes.map(function () { return colors; }), [themes['widgets-color-container-background']]); } else if (typeof colors === 'function') { newColors = function newColors(type) { if (type === 'widgets-pad-type') { return themes['widgets-color-container-background']; } else { return colors(type); } }; } } return { isExtreme: true, data: newData, config: _extends({}, alignLeft ? { legend: (config === null || config === void 0 ? void 0 : config.legend) === false || (config === null || config === void 0 ? void 0 : (_config$legend = config.legend) === null || _config$legend === void 0 ? void 0 : _config$legend.visible) === false ? false : _extends({ items: dataTypes.map(function (t, index) { return { name: t, value: t, marker: { symbol: 'square', style: { fill: Array.isArray(newColors) ? newColors[index] : newColors(t) } } }; }) }, (config === null || config === void 0 ? void 0 : config.legend) || {}), xAxis: (config === null || config === void 0 ? void 0 : config.xAxis) === false || (config === null || config === void 0 ? void 0 : (_config$xAxis2 = config.xAxis) === null || _config$xAxis2 === void 0 ? void 0 : _config$xAxis2.visible) === false ? false : _extends({}, xAxis, { autoHide: false, autoEllipsis: true }, (config === null || config === void 0 ? void 0 : config.xAxis) || {}) } : {}, alignLeft && showPlaceholder ? { colors: newColors, tooltip: false } : {}) }; } return { isExtreme: false }; } /** 线图极端数据处理 */ export function processLineExtremeData(chartObj, config, data) { var _chartObj$chartRule2; // 此处需要所有数据点的个数,不能直接用dataSize // const { dataSize } = chartObj; var dataSize = (data === null || data === void 0 ? void 0 : data.length) || 0; var chartName = chartObj === null || chartObj === void 0 ? void 0 : (_chartObj$chartRule2 = chartObj.chartRule) === null || _chartObj$chartRule2 === void 0 ? void 0 : _chartObj$chartRule2.name; // 计算线的数量 var lineCount = Array.from(new Set(data.map(function (d) { return d.type; }))).length; var isEqual = false; if (lineCount === 1) { var _data$; var temp = data === null || data === void 0 ? void 0 : (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.y; var filterArr = data === null || data === void 0 ? void 0 : data.filter(function (el) { return (el === null || el === void 0 ? void 0 : el.y) !== temp; }); if (!(filterArr !== null && filterArr !== void 0 && filterArr[length]) && temp !== null && temp !== undefined) { isEqual = true; } } // 只有一个点的时候,在Y轴中间,并开启label与symbol if (lineCount === 1 && dataSize === 1) { var _data$2, _data$3, _data$4, _data$5; warn(chartName, '当前线图数据较少,为优化展示,已自动开启标记和文本。'); return { config: { yAxis: _extends({}, config.yAxis, { min: (data === null || data === void 0 ? void 0 : (_data$2 = data[0]) === null || _data$2 === void 0 ? void 0 : _data$2.y) > 0 ? 0 : (data === null || data === void 0 ? void 0 : (_data$3 = data[0]) === null || _data$3 === void 0 ? void 0 : _data$3.y) * 2, max: (data === null || data === void 0 ? void 0 : (_data$4 = data[0]) === null || _data$4 === void 0 ? void 0 : _data$4.y) > 0 ? (data === null || data === void 0 ? void 0 : (_data$5 = data[0]) === null || _data$5 === void 0 ? void 0 : _data$5.y) * 2 : 0 }), // label判断自定义 label: _extends({}, typeof (config === null || config === void 0 ? void 0 : config.label) === 'object' ? config === null || config === void 0 ? void 0 : config.label : {}, { visible: true }), symbol: _extends({}, typeof (config === null || config === void 0 ? void 0 : config.symbol) === 'object' ? config === null || config === void 0 ? void 0 : config.symbol : {}, { visible: true }) }, isExtreme: true }; } else if (dataSize === lineCount) { // 多条线,每条线一个点时,开启symbol,label暂不开启 warn(chartName, '当前线图数据较少,为优化展示,已自动开启标记。'); return { config: { // label: { // ...(typeof config?.label === 'object' ? config?.label : {}), // visible: true, // }, symbol: _extends({}, typeof (config === null || config === void 0 ? void 0 : config.symbol) === 'object' ? config === null || config === void 0 ? void 0 : config.symbol : {}, { visible: true }) }, isExtreme: true }; } else if (lineCount === 1 && dataSize === 2) { // 一条线两个点,开启area、symbol和label warn(chartName, '当前线图数据较少,为优化展示,已自动开启面积、标记、文本。'); return { config: { // label判断自定义 label: _extends({}, typeof (config === null || config === void 0 ? void 0 : config.label) === 'object' ? config === null || config === void 0 ? void 0 : config.label : {}, { visible: true }), symbol: _extends({}, typeof (config === null || config === void 0 ? void 0 : config.symbol) === 'object' ? config === null || config === void 0 ? void 0 : config.symbol : {}, { visible: true }), area: true }, isExtreme: true }; } else if (lineCount === 1 && isEqual) { var _data$6, _data$7, _data$8, _data$9; return { config: { yAxis: _extends({}, config.yAxis, { min: (data === null || data === void 0 ? void 0 : (_data$6 = data[0]) === null || _data$6 === void 0 ? void 0 : _data$6.y) > 0 ? 0 : (data === null || data === void 0 ? void 0 : (_data$7 = data[0]) === null || _data$7 === void 0 ? void 0 : _data$7.y) * 2, max: (data === null || data === void 0 ? void 0 : (_data$8 = data[0]) === null || _data$8 === void 0 ? void 0 : _data$8.y) > 0 ? (data === null || data === void 0 ? void 0 : (_data$9 = data[0]) === null || _data$9 === void 0 ? void 0 : _data$9.y) * 2 : 0, tickCount: 3 }) }, isExtreme: true }; } else if (lineCount > 3 && !config.stack) { // 当补开启堆叠面积图的时候,且分组数量大于3组 warn(chartName, '当前线图组数超过3组,不适合开启面积图,已自动关闭面积图配置'); return { config: { area: false }, isExtreme: true }; } return { isExtreme: false }; }