wetrade-design
Version:
一款多语言支持Vue3的UI框架
193 lines • 8.1 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { withDirectives as _withDirectives, vShow as _vShow, createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
import { ref, defineComponent, reactive, watch, computed, toRefs, nextTick } from 'vue';
import useConfigInject from '../../_util/hooks/useConfigInject';
import Icon from '../../icon';
import ResizeObserver from '../../vc-resize-observer';
import { SeriesType } from './const';
import classNames from '../../_util/classNames';
import { getColors } from '../../_util/chartsColors';
export var LegendProps = function LegendProps() {
return {
// 图例数据
legendList: {
type: Array,
default: function _default() {
return [];
}
},
// 大于1行时，是否显示左右箭头
isShowTotal: {
type: Boolean,
default: false
},
// 是否显示手势，可点击的图例需要置为true
selectedMode: {
type: Boolean,
default: false
},
// 是否需要截断，不要的字符放在[]里；例：有的银行名称一致，需要加（卡号）区分，显示时需要截断
isLabelRemoveId: {
type: Boolean,
default: false
},
// 颜色队列
colors: {
type: Array,
default: []
},
// 是柱状图还是折线图，银行图例的形状 'line | bar | circle'
scene: {
type: [String, Array],
default: 'bar'
},
/** 边距
* in 图例与文字间的间距
* out 图例与图例间的间距
* */
spacing: {
type: Object,
default: function _default() {
return {
in: 10,
out: 24
};
}
},
onLegendChange: {
type: Function
}
};
};
var ChartLegend = defineComponent({
name: 'WdChartLegend',
props: LegendProps(),
setup: function setup(props, _ref) {
var emit = _ref.emit,
slots = _ref.slots;
var _useConfigInject = useConfigInject('chart-legend', props),
prefixCls = _useConfigInject.prefixCls,
configProvider = _useConfigInject.configProvider;
var legendRef = ref();
var PageType;
(function (PageType) {
PageType[PageType["PREV"] = 0] = "PREV";
PageType[PageType["NEXT"] = 1] = "NEXT";
})(PageType || (PageType = {}));
var data = reactive({
cur: 1,
total: 1
});
var _toRefs = toRefs(data),
cur = _toRefs.cur,
total = _toRefs.total;
// 点击图例
var handleClick = function handleClick(t, index) {
emit('legendChange', t, index);
};
// 计算y方向移动距离
var translateTop = computed(function () {
return !cur.value ? 0 : -((cur.value - 1) * 18);
});
// 截取图例多余文字
var showName = function showName(value) {
var findIndexs = value === null || value === void 0 ? void 0 : value.indexOf('[');
if (findIndexs > -1) {
var seriesName = value.substring(0, findIndexs);
return seriesName;
}
return value;
};
var legendListRef = ref();
var computedWidth = function computedWidth() {
if (!legendListRef.value) return;
var listHeight = legendListRef.value;
var parentHeight = legendRef.value;
total.value = Math.floor(listHeight.clientHeight / parentHeight.clientHeight);
cur.value = cur.value > total.value ? total.value > 0 ? total.value : cur.value : cur.value;
};
// 翻页
var btnClick = function btnClick(t) {
if (t === PageType.PREV) {
cur.value = cur.value > 1 ? cur.value - 1 : cur.value;
return;
}
cur.value = cur.value >= total.value ? total.value : cur.value + 1;
};
watch(function () {
return props.legendList;
}, function () {
nextTick(function () {
return computedWidth();
});
});
return function () {
var _classNames, _classNames2, _classNames3;
var list = props.legendList || [];
var leftIconClass = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls.value + '__icon-top', true), _defineProperty(_classNames, prefixCls.value + '__disabled', cur.value === 1), _classNames));
var rightIconClass = classNames((_classNames2 = {}, _defineProperty(_classNames2, prefixCls.value + '__icon-bottom', true), _defineProperty(_classNames2, prefixCls.value + '__disabled', cur.value === total.value), _classNames2));
var PAGEDOM;
// 是否显示翻页
if (props.isShowTotal) {
PAGEDOM = _withDirectives(_createVNode("div", {
"class": "".concat(prefixCls.value, "__more-btns")
}, [_createVNode(Icon, {
"class": leftIconClass,
"onClick": function onClick() {
return btnClick(PageType.PREV);
},
"icon-class": "wd-icon-direction_caret-up"
}, null), _createVNode("span", null, [cur.value, _createTextVNode("/"), total.value]), _createVNode(Icon, {
"class": rightIconClass,
"onClick": function onClick() {
return btnClick(PageType.NEXT);
},
"icon-class": "wd-icon-direction_caret-down"
}, null)]), [[_vShow, total.value > 1]]);
}
var boxClassName = classNames((_classNames3 = {}, _defineProperty(_classNames3, prefixCls.value + '__list', true), _defineProperty(_classNames3, prefixCls.value + '__has-more', total.value > 1), _classNames3));
return _createVNode("div", {
"ref": legendRef,
"class": "".concat(prefixCls.value)
}, [_createVNode(ResizeObserver, {
"onResize": computedWidth
}, {
default: function _default() {
return [_createVNode("div", {
"class": boxClassName,
"ref": legendListRef,
"style": " transform: translateY(".concat(translateTop.value, "px) ")
}, [list.map(function (item, index) {
var _classNames4, _classNames5, _slots$mark;
var itemClass = classNames((_classNames4 = {}, _defineProperty(_classNames4, prefixCls.value + '__item', true), _defineProperty(_classNames4, prefixCls.value + '__no-selected', !(item !== null && item !== void 0 && item.isShow) && item.hasOwnProperty('isShow')), _classNames4));
var itemStyle = {
cursor: props.selectedMode ? 'pointer' : 'default',
margin: '0 ' + props.spacing.out / 2 + 'px'
};
var symbolClass = classNames((_classNames5 = {}, _defineProperty(_classNames5, prefixCls.value + '__item-symbol', true), _defineProperty(_classNames5, prefixCls.value + '__symbol-' + (typeof props.scene === 'string' ? props.scene : props.scene[index]), true), _classNames5));
var colors = getColors(configProvider === null || configProvider === void 0 ? void 0 : configProvider.mode);
var nColor = props.colors.length > 0 ? props.colors : colors.COMMONCOLOR;
var symbolStyle = {
backgroundColor: nColor[index % nColor.length] || '',
marginRight: ((props.scene === 'string' ? props.scene : props.scene[index]) === SeriesType.LINE ? props.spacing.in - 1 : props.spacing.in) + 'px'
};
return _createVNode("span", {
"class": itemClass,
"onClick": function onClick() {
return handleClick(item, index);
},
"key": (item === null || item === void 0 ? void 0 : item.id) || index,
"style": itemStyle
}, [_createVNode("span", {
"class": symbolClass,
"style": symbolStyle
}, null), _createVNode("span", {
"class": "".concat(prefixCls.value, "__item-text")
}, [props.isLabelRemoveId ? showName((item === null || item === void 0 ? void 0 : item.name) || item) : (item === null || item === void 0 ? void 0 : item.name) || item]), (_slots$mark = slots.mark) === null || _slots$mark === void 0 ? void 0 : _slots$mark.call(slots, item)]);
})])];
}
}), PAGEDOM]);
};
}
});
export default ChartLegend;