Main.vue

<script>
import { defaultsDeep, forEach, has, set } from 'lodash';
import { loadAddGrids, setAvgGrid } from './helpers/grids';
import defaults from './defaults/index.js';
import applyCustomValuesInC3Instanse from './helpers/apply-custom-values-in-c3-instanse.js';
import formatTooltipValue from './helpers/format-tooltip-value';

const charts = {};

export default {
  data() {
    return {
      instance: Symbol('instance'),
    };
  },
  ready() {
    charts[this.instance] = c3.generate(this.getArgs());
  },
  destroyed() {
    charts[this.instance].destroy();
  },
  watch: {
    avg() {
      if (this.avg !== undefined) {
        setAvgGrid(charts[this.instance], this.avg);
      }
    },
  },
  events: {
    'receive:data'(data, loadGrid = true) {
      charts[this.instance].load(data);
      if (loadGrid) {
        loadAddGrids(charts[this.instance], data);
      }
    },
    'receive:rawdata'(data) {
      const x = [];
      const rows = ['sum'];

      forEach(data, row => {
        rows.push(row.value);
        x.push(row.key);
      });

      const loadGrid = rows.length && this.avg === undefined;
      const loadData = {
        categories: x,
        columns: [rows],
        unload: true,
      };

      applyCustomValuesInC3Instanse(charts[this.instance], rows.length > 0);

      this.$emit('receive:data', loadData, loadGrid);
    },
  },
  methods: {
    getArgs() {
      const axis = this.axis;
      const data = this.data;
      const legend = this.legend;
      const args = defaultsDeep({}, this.args || {}, {
        bindto: this.$els.domInstance,
        axis,
        data,
        legend,
      });

      if (!has(args, 'tooltip.format.value')) {
        set(args, 'tooltip.format.value', formatTooltipValue);
      }

      return args;
    },
  },
  props: {
    data: {
      required: true,
      twoWay: false,
    },
    avg: {
      required: false,
    },
    axis: {
      default() {
        return defaultsDeep({}, defaults.axis);
      },
      coerce(value) {
        return defaultsDeep({}, value, defaults.axis);
      },
    },
    legend: {
      default() {
        return {
          show: false,
        };
      },
    },
    args: {
      default() {
        return {};
      },
    },
  },
};
</script>

<template lang="html">
  <div v-el:dom-instance></div>
</template>