iep-ui/es/bar-chart/BarChart.js

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

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: 'IepBarChart',
  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 emptyAxis = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23: 00', '24:00'];
        var emptyData = [emptyAxis.map(function () {
          return 0;
        }), emptyAxis.map(function () {
          return 0;
        })];
        var tooltip = isEmpty(e.data) ? {} : {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          className: 'iep-chart-tooltip-' + theme
        };
        var color = e.data.some(function (item) {
          return item.color !== undefined;
        }) ? e.data.map(function (item, index) {
          return item.color && item.color.colorStops ? item.color.colorStops[0].color : item.color ? item.color : _this.themeColor[index];
        }) : this.themeColor.map(function (item, index) {
          return _this.themeColor[index];
        });
        var yAxisData = isEmpty(e.data) ? {
          type: 'value',
          min: isEmpty(e.data) && 400,
          splitLine: {
            lineStyle: {
              color: 'rgba(153, 153, 153, 0.2)'
            }
          }
        } : {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(153, 153, 153, 0.2)'
            }
          }
        };

        this.chartOptions = _extends({}, omit(this.$props, ['data', 'axis', 'mixinOptions', 'theme']), {
          theme: theme,
          loading: e.loading,
          options: _extends({
            tooltip: tooltip,
            color: color,
            legend: {
              data: isEmpty(e.data) ? ['--'] : e.data.map(function (item) {
                return item.name;
              }),
              itemHeight: 14,
              itemWidth: 14,
              selectedMode: isEmpty(e.data) ? false : true,
              itemStyle: {
                color: isEmpty(e.data) ? '#e5e5e5' : 'inherit'
              },
              textStyle: {
                color: isEmpty(e.data) ? '#e5e5e5' : theme === 'light' ? '#000' : '#fff'
              }
            },
            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: {
              type: 'category',
              data: isEmpty(e.data) ? emptyAxis : e.axis,
              axisTick: {
                show: false
              }
            },
            yAxis: yAxisData,
            series: isEmpty(e.data) ? [{
              type: 'bar',
              name: '--',
              data: emptyData[0]
            }] : e.data.map(function (item, index) {
              return {
                type: 'bar',
                name: item.name,
                barCategoryGap: '60%',
                data: item.value.map(function (citem) {
                  return {
                    value: citem,
                    itemStyle: _extends({
                      color: _this.themeColor[index]
                    }, item)
                  };
                })
              };
            })
          }, 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);
    }
  }
};