iep-ui/es/double-value-progress/main.js

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

import PropTypes from '../_util/vue-types';
import * as zrender from 'zrender';
import { debounce, isEmpty } from 'lodash';
import ResizeListener from 'element-resize-detector';

export default {
  name: 'IepDoubleValueProgress',
  props: {
    value: PropTypes.number.def(0),
    valueBgColor: PropTypes.string.def('#61DDAA'),
    valueTextColor: PropTypes.string.def('#2C3542'),
    bgColor: PropTypes.string.def('#65789B'),
    textColor: PropTypes.string.def('#fff')
  },
  data: function data() {
    return {
      isEmpty: isEmpty,
      chart: null
    };
  },
  created: function created() {
    this.handleWindowResize = debounce(this.handleWindowResize, 300);
  },
  mounted: function mounted() {
    var _this = this;

    window.addEventListener('resize', this.handleWindowResize);
    this.addChartResizeListener();
    this.watchData = this.$watch('value', function (e) {
      if (e > 0) {
        if (_this.chart) {
          _this.chart.clear();
        }

        var _$refs$chartDom$getBo = _this.$refs.chartDom.getBoundingClientRect(),
            width = _$refs$chartDom$getBo.width,
            height = _$refs$chartDom$getBo.height;

        _this.renderChartView(width, height);
      }
    }, {
      immediate: true,
      deep: true
    });
  },
  beforeDestroy: function beforeDestroy() {
    window.removeEventListener('resize', this.handleWindowResize);
    this.watchData();
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },

  methods: {
    handleWindowResize: function handleWindowResize() {
      if (!this.chart) return;

      var _$refs$chartDom$getBo2 = this.$refs.chartDom.getBoundingClientRect(),
          width = _$refs$chartDom$getBo2.width,
          height = _$refs$chartDom$getBo2.height;

      this.renderChartView(width, height);
    },
    addChartResizeListener: function addChartResizeListener() {
      var _this2 = this;

      var instance = ResizeListener({
        strategy: 'scroll',
        callOnAdd: true
      });

      instance.listenTo(this.$el, function () {
        if (!_this2.chart) return;

        var _$refs$chartDom$getBo3 = _this2.$refs.chartDom.getBoundingClientRect(),
            width = _$refs$chartDom$getBo3.width,
            height = _$refs$chartDom$getBo3.height;

        _this2.renderChartView(width, height);
      });
    },
    renderChartView: function renderChartView(width, height) {
      var _$props = this.$props,
          value = _$props.value,
          valueBgColor = _$props.valueBgColor,
          valueTextColor = _$props.valueTextColor,
          bgColor = _$props.bgColor,
          textColor = _$props.textColor;

      var dom = this.$refs.chartDom;
      if (isEmpty(dom) || !dom) {
        return false;
      }
      this.chart = zrender.init(dom);
      var scale = width / 100;
      var rightValue = parseInt(100 * 100 - value * 100) / 100;
      var panelTop = new zrender.Rect({
        shape: {
          width: width,
          height: height,
          r: 3.2
        },
        style: {
          fill: bgColor
        }
      });
      var leftText = new zrender.Text({
        style: {
          text: value + '%',
          lineHeight: height,
          x: scale * value / 2 - (value + '%').length * 9 / 2 < 0 ? 0 : scale * value / 2 - (value + '%').length * 9 / 2,
          z: 2,
          fontSize: 12,
          fill: value <= 0 ? 'rgba(0,0,0,0)' : valueTextColor
        }
      });
      var panelBottom = new zrender.Rect({
        shape: {
          width: scale * value,
          height: height,
          r: 3.2
        },
        style: {
          fill: valueBgColor
        }
      });
      var rightText = new zrender.Text({
        style: {
          text: rightValue + '%',
          x: scale * value + (width - scale * value) / 2 - (rightValue + '%').length * 9 / 2 > width - (rightValue + '%').length * 9 ? width - (rightValue + '%').length * 9 : scale * value + (width - scale * value) / 2 - (rightValue + '%').length * 9 / 2,
          lineHeight: height,
          z: 2,
          fontSize: 12,
          fill: rightValue <= 0 ? 'rgba(0,0,0,0)' : textColor
        }
      });
      this.chart.add(panelTop);
      this.chart.add(panelBottom);
      this.chart.add(leftText);
      this.chart.add(rightText);
    }
  },
  render: function render() {
    var h = arguments[0];

    return h('div', { ref: 'chartDom' });
  }
};