wetrade-design
Version:
一款多语言支持Vue3的UI框架
198 lines (197 loc) • 7.23 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.LegendProps = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _lodash = _interopRequireDefault(require("lodash"));
var _bignumber = _interopRequireDefault(require("bignumber.js"));
var _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));
var _scrollbar = _interopRequireDefault(require("../../scrollbar"));
var _classNames3 = _interopRequireDefault(require("../../_util/classNames"));
var _wetradeTools = require("wetrade-tools");
var _chartsColors = require("../../_util/chartsColors");
var LegendProps = function LegendProps() {
return {
// 画布高度
height: {
type: [Number, String],
default: '300px'
},
// 图例数据
legendList: {
type: Array,
default: function _default() {
return [];
}
},
// 保留小数位n位
digits: {
type: Number,
default: 2
},
// 图例是否可以点击
selectedMode: {
type: Boolean,
default: false
},
// 图例选中状态表，动态配置图例显示项，selectedMode=true时生效
selectedModel: {
type: Object,
default: function _default() {
return {};
}
},
// 是否需要截断，不要的字符放在[]里；例：有的银行名称一致，需要加（卡号）区分，显示时需要截断
isLabelRemoveId: {
type: Boolean,
default: false
},
// 颜色队列
colors: {
type: Array,
default: function _default() {
return [];
}
},
legendWidth: {
type: String,
default: ''
},
// 图例的值是数值型还是百分比
isLegendRatio: {
type: Boolean,
default: false
},
// 是否显示千位符
showThousandSign: {
type: Boolean,
default: false
},
// 数据总值
totalValue: {
type: Number,
default: null
},
// 数值是否需要换算，单位有万，亿，万亿，默认不换算
isConversion: {
type: [Boolean, Array],
default: false
},
unit: {
type: [String, Array],
default: ''
},
// 0和null显示为0还是--
valueIsNumber: {
type: Boolean,
default: false
},
legendMarginLeft: {
type: String,
default: ''
},
onLegendChange: {
type: Function
},
isValueComputed: {
type: Boolean,
default: false
}
};
};
exports.LegendProps = LegendProps;
var WdPieChartLegend = (0, _vue.defineComponent)({
name: 'WdPieChartLegend',
props: LegendProps(),
setup: function setup(props, _ref) {
var emit = _ref.emit,
slots = _ref.slots;
var _useConfigInject = (0, _useConfigInject2.default)('pie-chart-legend', props),
prefixCls = _useConfigInject.prefixCls,
configProvider = _useConfigInject.configProvider;
return function () {
var list = props.legendList || [];
var legendClass = (0, _classNames3.default)((0, _defineProperty2.default)({}, prefixCls.value, true));
// 点击图例
var handleClick = function handleClick(t, index) {
emit('legendChange', t, index);
};
// 截取图例多余文字
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 valueFormatter = function valueFormatter(item, index) {
// 显示比例
if (props.isLegendRatio) {
if (![null, undefined].includes(item.percent)) return item.percent;
if (props.totalValue) {
// 如果值已计算好，直接显示
// 如果值未计算，用本项/总值 = 占比
var ratio = props.isValueComputed ? item.value : new _bignumber.default(item.value).div(props.totalValue).times(100).toNumber();
return (0, _wetradeTools.inThanMinOrMax)({
value: ratio || 0,
decimal: props.digits,
isPercent: true
});
}
return props.valueIsNumber ? '0.00%' : '--';
}
// 显示数值，及是否要转换
var isConversion = typeof props.isConversion === 'boolean' ? props.isConversion : props.isConversion[index];
var unit = typeof props.unit === 'string' ? props.unit : props.unit[index];
return item.value < 0.01 && item.value > 0 ? '<0.01' : (0, _wetradeTools.numberFormat)(item.value, {
decimal: props.digits,
t: props.showThousandSign,
os: isConversion
}) + (!_lodash.default.isNil(item.value) ? unit : '');
};
var boxStyle = {
marginLeft: props.legendMarginLeft,
maxWidth: props.legendWidth
};
return (0, _vue.createVNode)("div", {
"class": legendClass,
"style": boxStyle
}, [(0, _vue.createVNode)(_scrollbar.default, {
"maxHeight": props.height,
"class": "".concat(prefixCls.value, "__scroll")
}, {
default: function _default() {
return [list.map(function (item, index) {
var _classNames2, _slots$mark;
var listClass = (0, _classNames3.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, prefixCls.value + '__list', true), (0, _defineProperty2.default)(_classNames2, prefixCls.value + '__list-no-select', props.selectedMode && !props.selectedModel[item.name]), _classNames2));
var colors = (0, _chartsColors.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] || ''
};
return (0, _vue.createVNode)("div", {
"class": listClass,
"onClick": function onClick() {
return handleClick(item, index);
}
}, [(0, _vue.createVNode)("span", {
"style": symbolStyle,
"class": "".concat(prefixCls.value, "__list-dot")
}, null), (0, _vue.createVNode)("span", {
"class": "".concat(prefixCls.value, "__list-label")
}, [props.isLabelRemoveId ? showName((item === null || item === void 0 ? void 0 : item.name) || item) : (item === null || item === void 0 ? void 0 : item.name) || (typeof item === 'string' ? item : '')]), (_slots$mark = slots.mark) === null || _slots$mark === void 0 ? void 0 : _slots$mark.call(slots, item), (0, _vue.createVNode)("span", {
"class": "".concat(prefixCls.value, "__list-value")
}, [valueFormatter(item, index)])]);
})];
}
})]);
};
}
});
var _default2 = WdPieChartLegend;
exports.default = _default2;