wetrade-design
Version:
一款多语言支持Vue3的UI框架
235 lines (234 loc) • 9.47 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.XAxisProps = void 0;
var _vue = require("vue");
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
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 _classNames3 = _interopRequireDefault(require("../../_util/classNames"));
var _wetradeTools = require("wetrade-tools");
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, _mainRef$value, _classNames2;
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, _classNames3.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls.value + '__item', true), (0, _defineProperty2.default)(_classNames, prefixCls.value + '__ellipsis', props.xLabelOverflow), _classNames));
var paddingLeft = parseFloat(wrapperStyle.paddingLeft);
var paddingRight = parseFloat(wrapperStyle.paddingRight);
var wrapperWidth = ((_mainRef$value = mainRef.value) === null || _mainRef$value === void 0 ? void 0 : _mainRef$value.offsetWidth) - paddingLeft - paddingRight;
var unitPixel = props.isShowTooltipAxis === 'shadow' ? wrapperWidth / list.length : wrapperWidth / (list.length - 1);
var unitPixelPercent = unitPixel / wrapperWidth * 100;
var renderWidth = 0;
// 处理渲染列表
var renderList = list.reduce(function (prev, cur, index) {
if (cur.isShow) {
var textWidth = (0, _wetradeTools.getTextWidth)({
text: cur.text
});
renderWidth += Math.max(unitPixel, textWidth);
var translateX = '0px';
if (props.isShowTooltipAxis !== 'shadow') {
if (cur.textAlign === 'center') {
translateX = '-50%';
} else if (cur.textAlign === 'right') {
translateX = '-100%';
}
}
var textPercent = Math.max(unitPixelPercent, textWidth / wrapperWidth * 100);
var totalPercent = prev.length ? prev[prev.length - 1].totalPercent : 0;
var item = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, cur), {}, {
index: index,
translateX: translateX,
textPercent: textPercent,
textWidth: textWidth,
left: unitPixelPercent * index,
totalPercent: totalPercent + textPercent,
unitPixel: unitPixel
});
return [].concat((0, _toConsumableArray2.default)(prev), [item]);
}
return prev;
}, []);
var otherLen = list.length - renderList.length;
if (props.isShowTooltipAxis === 'shadow' && otherLen > 0) {
var otherWrapperWidth = wrapperWidth - renderWidth;
var otherUnitPixel = otherWrapperWidth / (list.length - renderList.length);
var otherUnitPixelPercent = otherUnitPixel / wrapperWidth * 100; // 这个需要重新计算
renderList.forEach(function (item, index) {
var otherPixelPercent = (item.index - index) * otherUnitPixelPercent;
item.left = item.totalPercent - item.textPercent + otherPixelPercent;
});
}
var labelWidth = wrapperWidth / renderList.length / wrapperWidth * 100;
var className = (0, _classNames3.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, prefixCls.value, true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls.value, "__flex"), otherLen === 0), _classNames2));
var vNode;
if (otherLen === 0) {
// 显示全部的时候用flex布局
vNode = (0, _vue.createVNode)(_vue.Fragment, null, [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])]);
})]);
} else {
vNode = (0, _vue.createVNode)("div", {
"class": "".concat(prefixCls.value, "__box")
}, [renderList.map(function (arr) {
var w;
if (props.isShowTooltipAxis !== 'shadow') {
w = labelWidth;
} else {
w = arr.textPercent;
}
// 宽度和平移必须用百分比，否则在图表宽度变化时x轴label定位不会发生变化
var style = {
width: w + '%',
textAlign: arr.textAlign,
left: arr.left + '%',
transform: "translateX(".concat(arr.translateX, ")")
};
return (0, _vue.createVNode)("span", {
"class": itemClassName,
"key": arr.index,
"style": style
}, [(0, _vue.createVNode)("span", null, [(0, _vue.createTextVNode)(" "), arr.text])]);
})]);
}
return (0, _vue.createVNode)("div", {
"class": className,
"ref": mainRef,
"style": wrapperStyle
}, [vNode]);
};
}
});
var _default2 = XAxis;
exports.default = _default2;