c3chart.js

import Ember from 'ember';
import Component from '@ember/component';
import { get } from '@ember/object';
import { set } from '@ember/object';
import { getProperties } from '@ember/object';
import { debounce, later, scheduleOnce } from '@ember/runloop';
import c3 from 'c3';
import { inject } from '@ember/service';
//import ResizeAware from 'ember-resize/mixins/resize-aware';

export default Component.extend({
  eventBus: inject(),
  chartToShow: null,
  chartArray: null,
  tagName: 'div',
  fousAction:'focusAction',
  classNames: ['c3-chart-component'],
  // focusAction:'focusAction',
  // triggered when data is updated by didUpdateAttrs
  _reload() {
    const chart = get(this, 'c3chart');

    // if data should not be appended
    // e.g. when using a pie or donut chart
    if (get(this, 'unloadDataBeforeChange')) {
      chart.unload();
      // default animation is 350ms
      // t/f data must by loaded after unload animation (400)
      // or chart will not properly render
      later(this, function() {
        chart.load(
          // data, axis, color are only mutable elements
          get(this, 'data'), get(this, 'axis'), get(this, 'color'));
      }, 400);
    } else {
      chart.load(get(this, 'data'), get(this, 'axis'), get(this, 'color'));
    }
  },

  // triggered when component added by didInsertElement
  _setupc3() {
    // get all base c3 properties
    const chartConfig = getProperties(this, [
      'data',
      'axis',
      'regions',
      'bar',
      'pie',
      'donut',
      'gauge',
      'grid',
      'legend',
      'tooltip',
      'subchart',
      'zoom',
      'point',
      'line',
      'area',
      'size',
      'padding',
      'color',
      'transition'
    ]);

    // debugger;

    // bind c3 chart to component's DOM element
    chartConfig.bindto = get(this, 'element')

    // emit events to controller
    callbacks.call(this);

    function callbacks() {
      const that = this;
      const c3events = [
        'oninit',
        'onrendered',
        'onmouseover',
        'onmouseout',
        'onresize',
        'onresized'
      ];
      c3events.forEach((event) => {
        chartConfig[event] = function() {
          that.sendAction(event, that);
        };
      });
    }

    //set the chart as a component property
    //so we can get it and resize it
    this.set('chartToShow', c3.generate(chartConfig));
    // render the initial chart
    set(this, 'c3chart', this.get('chartToShow'));
  },
  toggle(id) {
      this.get('c3chart').toggle(id);
  },

  onrendered(context){
    d3.select('.widget').insert('div', '.chart').attr('class', 'legend').selectAll('span').data(['data1', 'data2', 'data3'])
      .enter().append('span')
      .attr('data-id', function (id) { return id; })
      .html(function (id) { return id; })
      .each(function (id) {
          d3.select(this).style('background-color', '#000000');
        })
      .on('mouseover', function (id) {
        debugger;
        context.sendAction('focusAction',id)
        //focus
      })
      .on('mouseout', function (id) {
          context.sendAction('focusAction',id)
          //revert
      })
      .on('click', function (id) {
          context.sendAction('focusAction',id)
          //toggle
      });
  },

  focusAction(id){
    // get(this,'c3chart');
    // or 
    // this.get('c3chart')
    debugger;
  },

  /***
   * Component lifecycle hooks to control rendering actions
   ***/
  init() {
    this._super(...arguments);
    this.set('chartArray', []);
  },

  didInsertElement() {
    const self = this;
    //get the fired event!
    this.get('eventBus').on('numberOfWidgetsChanged', function() {
      //this is a way to know if the chart is deleted
      if (!Ember.isEmpty(self.get('chartToShow.internal.d3'))) {

        let chart = self.get('chartToShow');
        chart.resize();
        chart.flush();
      }
    });
  },

  didReceiveAttrs() {
    // if DOM is not ready when component is inserted,
    // rendering issues can occur
    // t/f use 'afterRender' property to ensure
    // state readiness
    try {
      scheduleOnce('afterRender', this, this._setupc3);
    } catch (err) {
      console.log(err);
    }
  },

  didUpdateAttrs() {
    // if data proprety is dependent on async relationships,
    // animations can cause buggy renders, therefore debounce
    // component update to ensure proper visualization
    debounce(this, this._reload, 360);
  },

  willDestroyElement() {
    // execute teardown method
    this._super();
    this.get('chartToShow').destroy();
  },




  actions: {
  }
});