wetrade-design
Version:
一款多语言支持Vue3的UI框架
115 lines (114 loc) • 7.38 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.combineTooltipFormatter = combineTooltipFormatter;
var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
var _bignumber = _interopRequireDefault(require("bignumber.js"));
var _const = require("./const");
var _wetradeTools = require("wetrade-tools");
// 柱状图、折线图tooltip浮层处理
function combineTooltipFormatter(ev) {
var params = ev.params,
props = ev.props;
var headerText = ''; // tooltip的顶部显示
var astr = '';
var spanList = [];
if (props.showTipHeaderText) headerText = params[0].name;
params.map(function (item, index) {
var _item$data, _item$data2, _item$data3, _item$data4, _item$data5;
var unit = props.unit || '';
// isNullShow：为null的数据是否绘制为0；为true时，需要找到value的原始值
var original = props.chartData.data[index][params[index].dataIndex];
var value = props.isNullShow ? (original === null || original === void 0 ? void 0 : original.value) || (typeof original === 'number' ? original : item.value) || item.value : item.value;
// 是否显示小数位
var pointerNum = props.pointerNum.length > 0 && typeof props.pointerNum !== 'number' ? props.pointerNum[params[index].componentIndex] : props.pointerNum;
// 是否显示千位符
var sign = props.thousandthSign.length > 0 && typeof props.thousandthSign !== 'string' ? props.thousandthSign[params[index].componentIndex] : props.thousandthSign;
// 单位
if (unit.length > 0 && typeof unit !== 'string') {
unit = unit[params[index].componentIndex];
}
// 是否要转换为万、亿
var isConversion = typeof props.isTooltipConversion === 'boolean' ? props.isTooltipConversion : props.isTooltipConversion[params[index].componentIndex];
// 不显示默认数值，处理小数位、千位符、是否截断
if (!props.showDefaultNum) {
value = props.isNullShow && value === null ? null : (0, _wetradeTools.numberFormat)(item.value || (props.isNumberDefault ? 0 : item.value), {
decimal: pointerNum,
t: sign === 'on',
r: isConversion ? _bignumber.default.ROUND_HALF_UP : props.roundDown ? _bignumber.default.ROUND_DOWN : _bignumber.default.ROUND_HALF_UP,
os: isConversion
});
}
// 设置了isNullShow为true，要把数据为null的值转换成'0.00', false 为 '--
if (props.isNullShow) value = value === null ? '--' : value;
// 获取label名字
var getLabelName = function getLabelName() {
var _props$customLegend;
if (props.showTooltipCurName) {
return props.chartData.x[item.dataIndex];
}
if ((_props$customLegend = props.customLegend) !== null && _props$customLegend !== void 0 && _props$customLegend.length) {
return props.customLegend[index];
}
return item.seriesName;
};
var valueSpan = "".concat(props.showStringValue ? (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.showValue : (_item$data2 = item.data) !== null && _item$data2 !== void 0 && _item$data2.isNegative ? (0, _wetradeTools.numberFormat)(((_item$data3 = item.data) === null || _item$data3 === void 0 ? void 0 : _item$data3.realValue) === null ? 0 : (_item$data4 = item.data) === null || _item$data4 === void 0 ? void 0 : _item$data4.realValue, {
decimal: pointerNum,
t: sign
}) : value).concat(value === '--' || props.showStringValue && ((_item$data5 = item.data) === null || _item$data5 === void 0 ? void 0 : _item$data5.showValue) === '--' ? '' : unit); // 值显示
var seriesName = getLabelName(); // lable名字处理
var findIndexs = seriesName.indexOf('[');
if (findIndexs > -1 && props.isLabelRemoveId) {
seriesName = seriesName.substring(0, findIndexs);
}
spanList.push(seriesName + '：' + value + unit);
var isLine = (typeof props.scene === 'string' ? props.scene : props.scene[index]) === _const.SeriesType.LINE; // 是否是折线图
var width = "width:".concat(isLine ? '10px' : '8px', "; margin: ").concat(isLine ? '0 9px 0 -1px' : '1px 10px 0 0', ";");
var height = "height:".concat(isLine ? '3px' : '8px', ";");
var marker = "<span style=\"display:inline-block;background-color:".concat(item.color, ";").concat(width, " ").concat(height, "\"></span>");
var divDom = "<div style=\"display:flex;align-items:center; margin-top: 10px;height: 18px;line-height: 18px;font-weight:400;\">".concat(marker).concat(seriesName, " \uFF1A<span style=\"font-family:custom-fonts\">").concat(valueSpan, "</span> ").concat(props.toolTipPatchFunc ? props.toolTipPatchFunc(item) || '' : '', "</div>");
astr += divDom;
});
// tooltip换列处理
var bodyH = document.body.clientHeight * 0.7; // tooltip最高占屏幕的70%
var columnNum = Math.ceil((props.chartData.data.length + (props.showTipHeaderText ? 1 : 0)) * 28 / bodyH);
var boxH = Math.ceil(props.chartData.data.length / columnNum) * 28; // 每列真实占高
var oneColumnNum = Math.ceil(boxH / 28); // 每列条数
var boxW = 16 + (columnNum - 1) * 16; // 基础宽度
// 是否需要多列显示，只有一列，直接返回dom；多列，计算宽度、高度，每列数量尽量相等
for (var i = 0, length = columnNum; i < length; i++) {
var tooltipMaxW = 0;
// 数组 每列的数据
var list = spanList.slice(i * oneColumnNum, i === length - 1 ? spanList.length : (i + 1) * oneColumnNum);
var _iterator = (0, _createForOfIteratorHelper2.default)(list),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var item = _step.value;
tooltipMaxW = Math.max(tooltipMaxW, (0, _wetradeTools.getTextWidth)({
text: item
}) + 14); // 根据每列计算出最大宽度
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
boxW += tooltipMaxW;
}
if (props.bottomText !== '' && props.bottomValueList.length) {
var _props$pointerNum, _props$isTooltipConve;
var curVal = props.bottomValueList[params[0].dataIndex];
astr += "<div style=\"padding-left:18px; margin-top:10px; font-weight:400\">".concat(props.bottomText, " \uFF1A <span>").concat((0, _wetradeTools.numberFormat)(curVal, {
decimal: typeof props.pointerNum !== 'number' ? props.pointerNum[((_props$pointerNum = props.pointerNum) === null || _props$pointerNum === void 0 ? void 0 : _props$pointerNum.length) - 1] : props.pointerNum,
t: true,
r: props.roundDown ? _bignumber.default.ROUND_DOWN : _bignumber.default.ROUND_HALF_UP,
os: typeof props.isTooltipConversion === 'boolean' ? props.isTooltipConversion : props.isTooltipConversion[((_props$isTooltipConve = props.isTooltipConversion) === null || _props$isTooltipConve === void 0 ? void 0 : _props$isTooltipConve.length) - 1]
}), "</span></div>");
}
if (columnNum <= 1) return props.showTipHeaderText ? headerText + astr : astr;
var finallyBox = '<div style="width: ' + boxW + 'px;' + ' max-height: ' + boxH + 'px;display: flex; flex-direction: column; flex-wrap:wrap; overflow: hidden;">' + astr + '</div>';
return props.showTipHeaderText ? headerText + finallyBox : finallyBox;
}