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


'use strict';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = _default;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _themes = _interopRequireDefault(require("../themes"));

var _common = require("./common");

var _ellipsisLabel = _interopRequireDefault(require("./ellipsisLabel"));

/**
 * rectXAxis 直角坐标系的X轴配置
 *
 * @param {this} ctx 组件实例 this 指针
 * @param {Chart} chart 图表实例
 * @param {Object} config 配置项
 * @param {Object} defaultConfig 组件的自定义配置
 * */
function _default(ctx, chart, config, defaultConfig) {
  if (config.xAxis === false || config.xAxis && config.xAxis.visible === false) {
    chart.axis('x', false);
  } else {
    var _ref = config.xAxis || {},
        alias = _ref.alias,
        _ref$autoRotate = _ref.autoRotate,
        autoRotate = _ref$autoRotate === void 0 ? false : _ref$autoRotate,
        rotate = _ref.rotate,
        autoHide = _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 = (0, _extends2["default"])({}, defaultConfig, {
      title: null,
      // 默认不展示坐标轴的标题
      tickLine: myTickLine,
      label: label === undefined ? {
        autoRotate: autoRotate,
        rotate: rotate,
        autoHide: autoHide,
        autoEllipsis: transformEllipsis(autoEllipsis),
        formatter: labelFormatter || (0, _common.customFormatter)(config.xAxis || {})
      } : label
    }); // if (rotate) {
    //   xAxisConfig.label.style = {
    //     textAlign: 'start',
    //     rotate,
    //   };
    // }
    // 网格线

    if (config.grid) {
      xAxisConfig.grid = {
        line: {
          style: {
            stroke: _themes["default"]['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) {
      (0, _common.merge)(xAxisConfig, customConfig);
    }

    chart.axis('x', xAxisConfig);
  }
}
/** 自动省略函数，支持head/middle/tail */


function transformEllipsis(autoEllipsis) {
  if (!autoEllipsis) {
    return false;
  }

  var type = autoEllipsis === true ? 'tail' : autoEllipsis;
  return function (isVertical, labelGroup, limitLength) {
    var children = labelGroup.getChildren();
    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 = (0, _ellipsisLabel["default"])(text, limitLength, font, '...', type);
      label.attr('text', ellipsisText);
      label.set('tip', text);
    });
    return true;
  };
}