wetrade-design/lib/bar-line-chart/src/xAxis.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.XAxisProps = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
var _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));
var _classNames2 = _interopRequireDefault(require("../../_util/classNames"));
var XAxisProps = function XAxisProps() {
  return {
    left: {
      type: [String, Number],
      default: '28px'
    },
    right: {
      type: [String, Number],
      default: '4px'
    },
    xLabelList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    // 对齐方式，shadow 居中对齐，line 两端对齐
    isShowTooltipAxis: {
      type: String,
      default: 'shadow'
    },
    // 是否显示全部x轴label
    showCustomXAll: {
      type: Boolean,
      default: false
    },
    // X轴文字是否溢出隐藏
    xLabelOverflow: {
      type: Boolean,
      default: false
    }
  };
};
exports.XAxisProps = XAxisProps;
var XAxis = (0, _vue.defineComponent)({
  name: 'WdXAxis',
  props: XAxisProps(),
  setup: function setup(props, _ref) {
    (0, _objectDestructuringEmpty2.default)(_ref);
    var _useConfigInject = (0, _useConfigInject2.default)('xAxis', props),
      prefixCls = _useConfigInject.prefixCls;
    var mainRef = (0, _vue.ref)();
    var labelList = (0, _vue.ref)([]);
    // 更新X轴
    var updateXLabel = function updateXLabel(xLabel) {
      labelList.value = [];
      var labelLen = xLabel.length;
      for (var i = 0; i < labelLen; i++) {
        // label少于4个 全部显示
        // 是第一个，或最后一个，或处于中间值，显示
        var isFirst = !i,
          isEnd = i === labelLen - 1;
        var isShow = false;
        if ((0, _typeof2.default)(xLabel[i]) === 'object') {
          var _xLabel$i;
          isShow = !!((_xLabel$i = xLabel[i]) !== null && _xLabel$i !== void 0 && _xLabel$i.isShow);
        } else {
          isShow = props.showCustomXAll || isFirst || isEnd || i === Math.ceil((labelLen - 1) / 2) || labelLen <= 4;
        }
        var text = xLabel[i];
        if ((0, _typeof2.default)(xLabel[i]) === 'object') {
          var _xLabel$i2;
          text = ((_xLabel$i2 = xLabel[i]) === null || _xLabel$i2 === void 0 ? void 0 : _xLabel$i2.text) || text;
        }
        labelList.value.push({
          isShow: isShow,
          text: text
        });
        // 如果指示器类型是shadow 阴影，每个模块所占比例都一致，居中对齐
        labelList.value[i].textAlign = props.isShowTooltipAxis === 'shadow' ? 'center' : getTextAlign(isFirst, labelLen, isEnd).textAlign;
        labelList.value[i].flex = props.isShowTooltipAxis === 'shadow' ? 1 : isFirst || isEnd ? 1 : 2;
      }
    };
    // 对齐方式
    function getTextAlign(isFirst, labelLen, isEnd) {
      var textAlignMap = [[function () {
        return isFirst;
      }, function () {
        return {
          textAlign: labelLen === 1 ? 'center' : 'left'
        };
      } // 执行函数
      ], [function () {
        return isEnd;
      }, function () {
        return {
          textAlign: 'right'
        };
      }], [function () {
        return !isFirst && !isEnd;
      }, function () {
        return {
          textAlign: 'center'
        };
      }]];
      // 获取符合条件的子数组
      var getDescribe = textAlignMap.find(function (item) {
        return item[0]();
      });
      // 子数组存在则运行子数组中的第二个元素（执行函数）
      return getDescribe ? getDescribe[1]() : '';
    }
    (0, _vue.watch)(function () {
      return props.xLabelList;
    }, function (val) {
      return updateXLabel(val);
    }, {
      immediate: true
    });
    return function () {
      var _classNames;
      var list = labelList.value || [];
      var wrapperStyle = {
        paddingLeft: typeof props.left === 'string' ? props.left : props.left + 'px',
        paddingRight: typeof props.right === 'string' ? props.right : props.right + 'px'
      };
      var itemClassName = (0, _classNames2.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls.value + '__item', true), (0, _defineProperty2.default)(_classNames, prefixCls.value + '__ellipsis', props.xLabelOverflow), _classNames));
      return (0, _vue.createVNode)("div", {
        "class": "".concat(prefixCls.value),
        "ref": mainRef,
        "style": wrapperStyle
      }, [list.map(function (arr, index) {
        var style = {
          textAlign: arr.textAlign,
          overflow: arr.isShow ? 'visible' : 'hidden',
          flex: arr.flex
        };
        var textStyle = {
          display: arr.isShow ? 'block' : 'none'
        };
        return (0, _vue.createVNode)("span", {
          "class": itemClassName,
          "key": index,
          "style": style
        }, [(0, _vue.createVNode)("span", {
          "style": textStyle
        }, [(0, _vue.createTextVNode)(" "), arr.text])]);
      })]);
    };
  }
});
var _default2 = XAxis;
exports.default = _default2;