all files / src/ index.js

45.83% Statements 22/48
50% Branches 13/26
83.33% Functions 5/6
47.37% Lines 18/38
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137                                                                                                                                                                                                                                             
import Chartist from 'chartist'
import Base from './base'
 
// rewrite base class for plugin develop
Chartist.Base = Base
Chartist.Line.super.constructor = Base
 
function install (Vue) {
  let options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]
 
  const defaultOptions = {
    messageNoData: ''
  }
  options = Object.assign({}, defaultOptions, options)
 
  Vue.component('chartist', {
    template: '<div v-el:chart :class="[ratio, noData]">{{message}}</div>',
    ready: function ready () {
      this.draw()
    },
 
    props: {
      ratio: {
        type: String
      },
      data: {
        type: Object
      },
      options: {
        type: Object
      },
      type: {
        type: String,
        required: true,
        validator: function validator (val) {
          return val === 'Pie' || val === 'Line' || val === 'Bar'
        }
      },
      eventHandlers: {
        type: Array
      },
      responsiveOptions: {
        type: Object
      }
    },
    data: function data () {
      return {
        Chartist,
        error: {
          onError: false,
          message: ''
        },
        noData: '',
        message: ''
      }
    },
 
    methods: {
      draw: function draw () {
        if (this.data) {
          // data is empty
          if (this.data.series.length < 1 || this.type !== 'Pie' && this.data.labels.length < 1) I{
            // clear the potential old chart
            // eslint-disable-next-line no-new
            new this.Chartist[this.type](this.$els.chart, this.data, this.options, this.responsiveOptions)
            this.setNoData()
            // data is defined
          } else {
            this.noData = '' // remove class ct-nodata
            this.message = '' // remove message no data
            if (this.error.onError) I{
              // clear error
              this.error = {
                onError: false,
                message: ''
              }
            }
            var chart = new this.Chartist[this.type](this.$els.chart, this.data, this.options, this.responsiveOptions)
            if (this.eventHandlers) I{
              var _iteratorNormalCompletion = true
              var _didIteratorError = false
              var _iteratorError
 
              try {
                for (var _iterator = this.eventHandlers[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
                  var item = _step.value
 
                  chart.on(item.event, item.fn)
                }
              } catch (err) {
                _didIteratorError = true
                _iteratorError = err
              } finally {
                try {
                  if (!_iteratorNormalCompletion && _iterator.return) {
                    _iterator.return()
                  }
                } finally {
                  if (_didIteratorError) {
                    // eslint-disable-next-line no-unsafe-finally
                    throw _iteratorError
                  }
                }
              }
            }
          }
        } else E{
          this.setNoData()
        }
      },
      setNoData: function setNoData () {
        this.error = {
          onError: true,
          message: options.messageNoData
        }
        this.noData = 'ct-nodata'
        this.message = this.error.message
      }
    },
    watch: {
      'ratio': 'draw',
      'options': 'draw',
      'data': {
        handler: 'draw',
        deep: true
      },
      'type': 'draw'
    }
  })
}
 
export const VChartist = Chartist
 
export default {
  install
}