iep-ui/lib/doughnut-chart/DoughnutChart.js

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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _vueTypes = require('../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _chartTemplate = require('../chart-template');

var _chartTemplate2 = _interopRequireDefault(_chartTemplate);

var _propsUtil = require('../_util/props-util');

var _lodash = require('lodash');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

exports['default'] = {
  name: 'IepDoughnutChart',
  props: (0, _propsUtil.mergeProps)({
    data: _vueTypes2['default'].object.def(function () {}),
    unit: _vueTypes2['default'].array.def(function () {
      return [];
    }),
    theme: _vueTypes2['default'].oneOf(['dark', 'light']).def('dark'),
    mixinOptions: _vueTypes2['default'].object.def(function () {})
  }, _chartTemplate2['default'].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 _$props2 = this.$props,
            theme = _$props2.theme,
            mixinOptions = _$props2.mixinOptions;

        var tooltip = (0, _lodash.isEmpty)(e.data.value) ? {} : {
          show: true,
          className: 'iep-chart-tooltip-' + theme
        };
        var allValue = (0, _lodash.isEmpty)(e.data.value) ? 1 : (0, _lodash.sum)(e.data.value.map(function (item) {
          return item.value * 1;
        }));
        this.chartOptions = (0, _extends3['default'])({}, (0, _lodash.omit)(this.$props, ['data', 'axis', 'mixinOptions', 'theme']), {
          theme: theme,
          loading: e.loading,
          options: (0, _extends3['default'])({
            color: this.themeColor,
            title: (0, _extends3['default'])({
              text: e.data.name,
              left: 'center',
              align: 'center',
              top: 'middle',
              itemGap: 4,
              textStyle: {
                fontWeight: 'bold',
                fontSize: 14,
                color: theme === 'light' ? '#333' : '#fff'
              },
              subtextStyle: {
                color: theme === 'light' ? '#333' : '#fff'
              }
            }, e.data.title),
            legend: (0, _extends3['default'])({
              itemHeight: 14,
              itemWidth: 14,
              bottom: 4,
              data: (0, _lodash.isEmpty)(e.data.value) ? ['--'] : e.data.value.map(function (item) {
                return item.name;
              }),
              selectedMode: (0, _lodash.isEmpty)(e.data.value) ? false : true,
              itemStyle: {
                color: (0, _lodash.isEmpty)(e.data.value) ? '#e5e5e5' : 'inherit'
              },
              formatter: function formatter(val, index) {
                return '{a|' + val + '} ' + (e.data.legendPer ? (e.data.value.filter(function (item) {
                  return item.name === val;
                })[0].value * 1 / allValue * 100).toFixed(2) + '%' : '');
              },
              textStyle: {
                color: (0, _lodash.isEmpty)(e.data.value) ? '#e5e5e5' : theme === 'light' ? '#000' : '#fff',
                rich: {
                  a: {
                    width: 50
                  }
                }
              }
            }, e.data.legend),
            grid: [{
              top: '6%',
              bottom: '16%',
              left: '6%',
              right: '6%',
              containLabel: true
            }],
            series: [{
              name: e.data.name,
              type: 'pie',
              radius: e.data.radius ? e.data.radius : [40, 120],
              center: e.data.center ? e.data.center : ['50%', '50%'],
              data: e.data.value,
              label: {
                show: e.data.showSeriesLabel,
                color: theme === 'dark' ? '#fff' : '#000',
                formatter: function formatter(val) {
                  return val.name + ' ' + val.percent + '%';
                }
              }
            }],
            tooltip: tooltip
          }, mixinOptions)
        });
      },

      immediate: true,
      deep: true
    }
  },
  render: function render() {
    var h = arguments[0];
    var chartOptions = this.chartOptions;

    if (!(0, _lodash.isEmpty)(chartOptions)) {
      return h(_chartTemplate2['default'], { props: (0, _extends3['default'])({}, chartOptions) });
    } else {
      return h(_chartTemplate2['default']);
    }
  }
};