@alicloud/cloud-charts/es/common/rectXAxis.js


'use strict';

import _extends from "@babel/runtime/helpers/extends";
import { merge, customFormatter, pxToNumber, containsChinese } from './common';
import ellipsisLabel, { getMatrixByAngle } from './ellipsisLabel';
import themes from '../themes';
/**
 * rectXAxis 直角坐标系的X轴配置
 *
 * @param {this} ctx 组件实例 this 指针
 * @param {Chart} chart 图表实例
 * @param {Object} config 配置项
 * @param {Object} defaultConfig 组件的自定义配置
 * */
export default function (ctx, chart, config, defaultConfig) {
  if (config.xAxis === false || config.xAxis && config.xAxis.visible === false) {
    chart.axis('x', false);
  } else {
    var _config$xAxis, _config$xAxis$type, _config$xAxis2;
    var _ref = config.xAxis || {},
      alias = _ref.alias,
      _ref$overlapOrder = _ref.overlapOrder,
      overlapOrder = _ref$overlapOrder === void 0 ? ['autoEllipsis', 'autoHide', 'autoRotate'] : _ref$overlapOrder,
      _ref$autoRotate = _ref.autoRotate,
      autoRotate = _ref$autoRotate === void 0 ? false : _ref$autoRotate,
      rotate = _ref.rotate,
      _ref$autoHide = _ref.autoHide,
      autoHide = _ref$autoHide === void 0 ? (_config$xAxis = config.xAxis) !== null && _config$xAxis !== void 0 && (_config$xAxis$type = _config$xAxis.type) !== null && _config$xAxis$type !== void 0 && _config$xAxis$type.includes('time') ? {
        cfg: {
          // 自动采样最小间距为20
          minGap: 20
        }
      } : false : _ref$autoHide,
      autoEllipsis = _ref.autoEllipsis,
      label = _ref.label,
      labelFormatter = _ref.labelFormatter,
      _ref$tickLine = _ref.tickLine,
      tickLine = _ref$tickLine === void 0 ? true : _ref$tickLine,
      customConfig = _ref.customConfig;
    var myTickLine = null;
    if (typeof tickLine === 'boolean' && tickLine) {
      myTickLine = {};
    }
    var xAxisConfig = _extends({}, defaultConfig, {
      title: null,
      // 默认不展示坐标轴的标题
      tickLine: myTickLine,
      overlapOrder: overlapOrder,
      label: label === undefined ? {
        autoRotate: autoRotate,
        rotate: rotate,
        autoHide: autoHide,
        autoEllipsis: ellipsisLabels(autoEllipsis, config === null || config === void 0 ? void 0 : (_config$xAxis2 = config.xAxis) === null || _config$xAxis2 === void 0 ? void 0 : _config$xAxis2.type, config, chart),
        formatter: labelFormatter || customFormatter(config.xAxis || {}),
        style: function style(item, index, items) {
          var width = pxToNumber(themes['widgets-font-size-1']) * item.length * 0.6;
          var canvasWidth = chart.coordinateBBox.x + chart.coordinateBBox.width;

          // 需要额外判断刻度之间的距离
          // 目前至少会有2个刻度点, 但怕用户自定义
          // 且第一个刻度和最后一个刻度必须是在画布的两端 - 这个无法判断所以不能全量开放
          // 直角坐标系 且 没有转置的时候
          if (chart.coordinateInstance.isRect && !chart.coordinateInstance.isTransposed) {
            if (items.length === 2 || items.length === 3) {
              if (index === 0) {
                var currentX = items[index].point.x;
                var nextX = items[index + 1].point.x;
                var dis = nextX - (currentX + width);
                return {
                  textAlign: dis < 80 || currentX > width / 2 ? 'center' : 'start'
                };
              } else if (index === items.length - 1) {
                var _currentX = items[index].point.x;
                var preX = items[index - 1].point.x;
                var _dis = _currentX - (preX + width);
                var disCanvas = canvasWidth - _currentX;
                return {
                  textAlign: _dis < 80 || disCanvas > width / 2 ? 'center' : 'end'
                };
              }
            }
          }
          return {};
        }
      } : label
    });

    // if (rotate) {
    //   xAxisConfig.label.style = {
    //     textAlign: 'start',
    //     rotate,
    //   };
    // }

    // 网格线
    if (config.grid) {
      xAxisConfig.grid = {
        line: {
          style: {
            stroke: themes['widgets-axis-grid'],
            lineWidth: 1
          }
        }
        // lineStyle: {
        //   stroke: themes['widgets-axis-grid'],
        //   lineWidth: 1,
        //   // lineDash: null
        // },
        // // hideFirstLine: true
      };
    }

    // 开启坐标轴标题
    if (alias) {
      xAxisConfig.title = {
        // position: 'center',
        // offset: 38,
        // textStyle: {
        //   rotate: 0,
        // },
      };
    }

    // if (componentConfig) {
    //   Object.assign(xAxisConfig, componentConfig);
    // }

    if (customConfig) {
      merge(xAxisConfig, customConfig);
    }
    chart.axis('x', xAxisConfig);
  }
}

// function rotateLabel(autoRotate: boolean | avoidCallback, xAxisType: string) {
//   if (!autoRotate || xAxisType.includes('time')) {
//     return false;
//   }
//   return (isVertical: boolean, labelGroup: IGroup, limitLength: number) => {
//     console.log(111, isVertical, labelGroup, limitLength)
//     return true
//   };
// }

/** 自动省略函数，支持head/middle/tail */
function ellipsisLabels(autoEllipsis, xAxisType, config, chart) {
  if (!autoEllipsis || xAxisType !== null && xAxisType !== void 0 && xAxisType.includes('time') || (config === null || config === void 0 ? void 0 : config.column) === false || typeof (config === null || config === void 0 ? void 0 : config.column) === 'object' || config !== null && config !== void 0 && config.slider || config !== null && config !== void 0 && config.scrollbar) {
    return false;
  }

  // 是否自定义了省略方式
  var hasCustom = typeof autoEllipsis === 'string';
  var type = autoEllipsis === true ? 'middle' : autoEllipsis;
  var minGap = 8;
  return function (isVertical, labelGroup, limitLength) {
    var _children$length, _chart$coordinateBBox, _chart$coordinateBBox2;
    var children = labelGroup.getChildren();
    var childrenCount = (_children$length = children.length) !== null && _children$length !== void 0 ? _children$length : 1;
    var chartCanvasWidth = (_chart$coordinateBBox = chart === null || chart === void 0 ? void 0 : (_chart$coordinateBBox2 = chart.coordinateBBox) === null || _chart$coordinateBBox2 === void 0 ? void 0 : _chart$coordinateBBox2.width) !== null && _chart$coordinateBBox !== void 0 ? _chart$coordinateBBox : 0;
    // const labelCanvasWidth = labelGroup.getBBox().width ?? 0;

    // 判断是否有重叠
    // let first = children[0];
    // // 重叠部分的最大尺寸
    // let maxOverlopGap = 0;
    // let hasOverlap = false;
    // // 数据中最长的字长(在画布中的宽度),考虑用户自定义
    // // 理论上只有一个刻度的时候最大宽度为图表尺寸，现在默认为100，后面再调整
    // let maxTextLength = children.length > 1 ? first.getBBox().width : limitLength;

    // // 中文减少偏移， 暂定一个偏移值
    // if (containsChinese(first.attr('text'))) {
    //   minGap = -16;
    // }

    for (var i = 1; i < children.length; i++) {
      var _children$i$attr;
      // const { isOverlap: isTextOverlap, maxGap } = isOverlap(
      //   isVertical,
      //   i > 1 ? children[i - 1] : first,
      //   children[i],
      //   minGap,
      // );
      var text = (_children$i$attr = children[i].attr('text')) !== null && _children$i$attr !== void 0 ? _children$i$attr : '';
      // maxTextLength = Math.max(maxTextLength, children[i].getBBox().width)
      if (containsChinese(text)) {
        minGap = 12;
      }
      // if (isTextOverlap) {
      //   maxOverlopGap = Math.max(maxOverlopGap, maxGap);
      //   hasOverlap = isTextOverlap;
      // }
    }

    // maxTextLength = Math.min(maxTextLength, limitLength);
    // const tickDistance = children.length > 1 ? children[1].getBBox().x - first.getBBox().x : maxTextLength;
    // 重叠时最大允许宽度为最大字长 - 最大重叠距离 - 刻度值间最小间距
    // 不重叠时取刻度间距 - 最小间距
    // const adjustLimitLength = hasOverlap ? maxTextLength - maxOverlopGap - minGap : tickDistance - minGap;

    var textLengthForCanvas = (chartCanvasWidth - minGap * (childrenCount - 1)) / childrenCount;
    children.forEach(function (label) {
      var _label$attr, _label$attr2;
      var text = (_label$attr = label.attr('text')) !== null && _label$attr !== void 0 ? _label$attr : '';
      var _ref2 = (_label$attr2 = label.attr()) !== null && _label$attr2 !== void 0 ? _label$attr2 : {},
        fontSize = _ref2.fontSize,
        fontFamily = _ref2.fontFamily,
        fontWeight = _ref2.fontWeight,
        fontStyle = _ref2.fontStyle,
        fontVariant = _ref2.fontVariant;
      var font = {
        fontSize: fontSize,
        fontFamily: fontFamily,
        fontWeight: fontWeight,
        fontStyle: fontStyle,
        fontVariant: fontVariant
      };
      var ellipsisText = ellipsisLabel(text, textLengthForCanvas, font, '...', type, hasCustom);
      if (ellipsisText === '...') {
        var x = label.attr('x');
        var y = label.attr('y');
        var matrix = getMatrixByAngle({
          x: x,
          y: y
        }, Math.PI / 4);
        var _ellipsisText = ellipsisLabel(text, 30, font, '...', type, hasCustom);
        label.attr('text', _ellipsisText);
        label.set('tip', text);
        label.attr('matrix', matrix);
        return false;
      }
      label.attr('text', ellipsisText);
      label.set('tip', text);
    });
    return true;
  };
}