vue-chartjs-reactive/es/mixins/index.js

Vue.js wrapper for chart.js for creating beautiful charts.

function _watchChartData() {
  var _this = this;

  var firstWatch = true;
  this._unWatchChartData = this.$watch('chartData', function () {
    if (firstWatch) {
      firstWatch = false;
    } else {
      dataHandler.call(_this);
    }
  }, {
    deep: true
  });
}

function dataHandler() {
  if (!this.$data._chart) {
    this.renderChart(this.chartData, this.options);
  } else if (!this._updatingChart) {
    this._unWatchChartData();

    this.$data._chart.update();

    this._watchChartData();
  }
}

export var reactiveData = {
  data: function data() {
    return {
      _unWatchChartData: null,
      _updatingChart: false,
      chartData: null
    };
  },
  mounted: function mounted() {
    this._watchChartData();
  },
  methods: {
    _watchChartData: _watchChartData
  }
};
export var reactiveProp = {
  data: function data() {
    return {
      _unWatchChartData: null,
      _updatingChart: false
    };
  },
  props: {
    chartData: {
      required: true
    }
  },
  mounted: function mounted() {
    this._watchChartData();
  },
  methods: {
    _watchChartData: _watchChartData
  }
};
export default {
  reactiveData: reactiveData,
  reactiveProp: reactiveProp
};