wetrade-design/es/bar-line-chart/src/computed.js

一款多语言支持Vue3的UI框架

import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
import BigNumber from 'bignumber.js';
import { SeriesType } from './const';
import { getTextWidth, numberFormat } from 'wetrade-tools';
// 柱状图、折线图tooltip浮层处理
export 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 : numberFormat(item.value || (props.isNumberDefault ? 0 : item.value), {
        decimal: pointerNum,
        t: sign === 'on',
        r: isConversion ? BigNumber.ROUND_HALF_UP : props.roundDown ? BigNumber.ROUND_DOWN : BigNumber.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 ? 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]) === 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 = _createForOfIteratorHelper(list),
      _step;
    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var item = _step.value;
        tooltipMaxW = Math.max(tooltipMaxW, 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(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.ROUND_DOWN : BigNumber.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;
}