UNPKG

iep-ui

Version:

An enterprise-class UI design language and Vue-based implementation

155 lines (148 loc) 4.17 kB
import _extends from 'babel-runtime/helpers/extends'; import PropTypes from '../_util/vue-types'; import ChartTemplate from '../chart-template'; import { mergeProps } from '../_util/props-util'; import { isEmpty, omit } from 'lodash'; export default { name: 'IepRowBar', props: mergeProps({ data: PropTypes.array.def(function () { return []; }), axis: PropTypes.array.def(function () { return []; }), unit: PropTypes.array.def(function () { return []; }), theme: PropTypes.oneOf(['dark', 'light']).def('dark'), mixinOptions: PropTypes.object.def(function () {}) }, ChartTemplate.props), data: function data() { return { chartOptions: {}, themeColor: ['#0F6EFF', '#34D59B', '#FF9540', '#A36AFF', '#FFD240', '#80D8FF', '#FB4848', '#B8C32C', '#FF7BB8', '#82A8FF'] }; }, computed: { factor: function factor() { var _$props = this.$props, data = _$props.data, axis = _$props.axis, loading = _$props.loading, theme = _$props.theme; return { data: data, axis: axis, loading: loading, theme: theme }; } }, watch: { factor: { handler: function handler(e) { var _this = this; var _$props2 = this.$props, theme = _$props2.theme, mixinOptions = _$props2.mixinOptions; var emptyData = [12]; var emptyAxis = ['']; var tooltip = isEmpty(e.data) ? {} : { trigger: 'axis', axisPointer: { type: 'shadow' }, className: 'iep-chart-tooltip-' + theme }; var xAxisData = isEmpty(e.data) ? { type: 'value', min: isEmpty(e.data) && 400, position: 'top', axisLine: { show: true }, splitLine: { show: false } } : { type: 'value', position: 'top', axisLine: { show: true }, splitLine: { show: false } }; this.chartOptions = _extends({}, omit(this.$props, ['data', 'axis', 'mixinOptions', 'theme']), { theme: theme, loading: e.loading, options: _extends({ color: this.themeColor, tooltip: tooltip, grid: [{ top: '16%', bottom: '6%', left: '6%', right: '6%', containLabel: true }], axisPointer: { link: { xAxisIndex: 'all' }, label: { backgroundColor: '#777' }, shadowStyle: { color: 'rgba(49,139,255,0.2)' } }, xAxis: xAxisData, yAxis: { type: 'category', axisTick: { show: false }, data: isEmpty(e.data) ? emptyAxis : e.axis }, series: isEmpty(e.data) ? [{ type: 'bar', name: '--', data: emptyData }] : e.data.map(function (item, index) { return { type: 'bar', name: item.name, barCategoryGap: '60%', label: { show: true, position: 'right', color: theme === 'dark' ? '#fff' : '#000' }, data: item.value.map(function (citem, cindex) { return { value: citem.value, itemStyle: _extends({ color: _this.themeColor[index] }, citem) }; }) }; }) }, mixinOptions) }); }, immediate: true, deep: true } }, render: function render() { var h = arguments[0]; var chartOptions = this.chartOptions; if (!isEmpty(chartOptions)) { return h(ChartTemplate, { props: _extends({}, chartOptions) }); } else { return h(ChartTemplate); } } };