import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'div',
  classNames: ['chart'],

  dataChange: function() {
    this.rerender();
  }.observes('data'),

  willDestroyElement: function() {
    this.$().highcharts().destroy();
  },

  renderChart: function() {
    return this.$().highcharts({
      title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: this.get('xAxisCategories')
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: this.get('seriesData')
    })
  }.on('didInsertElement')
});