iep-ui/lib/chart-template/main.js

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

'use strict';

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

var _toolkits = require('../toolkits');

var _toolkits2 = _interopRequireDefault(_toolkits);

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

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _lodash = require('lodash');

var _elementResizeDetector = require('element-resize-detector');

var _elementResizeDetector2 = _interopRequireDefault(_elementResizeDetector);

var _empty = require('../empty');

var _empty2 = _interopRequireDefault(_empty);

var _spin = require('../spin');

var _spin2 = _interopRequireDefault(_spin);

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

exports['default'] = {
  name: 'IepChartTemplate',
  props: {
    options: _vueTypes2['default'].object.def(function () {}),
    loading: _vueTypes2['default'].bool.def(false),
    image: _vueTypes2['default'].any,
    description: _vueTypes2['default'].any,
    mixinFunc: _vueTypes2['default'].func,
    imageStyle: _vueTypes2['default'].object,
    events: _vueTypes2['default'].object.def(function () {})
  },
  data: function data() {
    return {
      isEmpty: _lodash.isEmpty,
      cachedOptions: {},
      chart: null
    };
  },
  created: function created() {
    this.handleWindowResize = (0, _lodash.debounce)(this.handleWindowResize, 300);
  },

  computed: {
    chartOptions: function chartOptions() {
      return {
        mixinFunc: this.$props.mixinFunc,
        options: this.$props.options
      };
    }
  },
  watch: {
    chartOptions: {
      handler: function handler(val) {
        var _this = this;

        var mixinFunc = val.mixinFunc,
            options = val.options;

        if (!(0, _lodash.isEmpty)(options)) {
          this.cachedOptions = (0, _lodash.isFunction)(mixinFunc) ? mixinFunc(options) : options;
          this.$nextTick(function () {
            if (_this.chart) {
              _this.chart.clear();
            }
            _this.renderChartView();
          });
        }
      },

      immediate: true,
      deep: true
    }
  },
  mounted: function mounted() {
    window.addEventListener('resize', this.handleWindowResize);
    this.addChartResizeListener();
  },
  beforeDestroy: function beforeDestroy() {
    window.removeEventListener('resize', this.handleWindowResize);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },

  methods: {
    handleWindowResize: function handleWindowResize() {
      if (!this.chart) return;
      this.chart.resize();
    },
    addChartResizeListener: function addChartResizeListener() {
      var _this2 = this;

      var instance = (0, _elementResizeDetector2['default'])({
        strategy: 'scroll',
        callOnAdd: true
      });

      instance.listenTo(this.$el, function () {
        if (!_this2.chart) return;
        _this2.chart.resize();
      });
    },
    renderChartView: function renderChartView() {
      var _this3 = this;

      this.chart = _toolkits2['default'].echarts.init(this.$refs.chartDom);

      this.chart.setOption(this.cachedOptions);
      this.chart.on('finished', function () {
        _this3.$emit('load', _this3.chart, _toolkits2['default'].echarts);
      });
      if (!(0, _lodash.isEmpty)(this.events)) {
        Object.keys(this.events).map(function (e) {
          _this3.chart.off(e);
          _this3.chart.on(e, _this3.events[e]);
        });
      }
    },
    getInstance: function getInstance() {
      return this.chart;
    },
    getInstanceDom: function getInstanceDom() {
      return this.$refs.chartDom;
    }
  },
  render: function render() {
    var h = arguments[0];
    var _$props = this.$props,
        imageStyle = _$props.imageStyle,
        image = _$props.image,
        description = _$props.description,
        loading = _$props.loading,
        options = _$props.options;

    var emptyProps = {
      imageStyle: imageStyle,
      image: image,
      description: description
    };
    var chartNodes = h('div', { 'class': 'iep-chart-core-inner', ref: 'chartDom' });
    return h(
      'div',
      { 'class': 'iep-chart' },
      [(0, _lodash.isEmpty)(options) ? h(
        'div',
        { 'class': 'iep-chart-empty' },
        [h(_empty2['default'], { props: emptyProps })]
      ) : null, loading ? h(
        'div',
        { 'class': 'iep-chart-loading' },
        [h(_spin2['default'], {
          attrs: { spinning: loading }
        })]
      ) : null, h(
        'div',
        { 'class': 'iep-chart-core' },
        [chartNodes]
      )]
    );
  }
};