import Ember from 'ember';

export default Ember.Component.extend({
  fillGradient: null,
  strokeGradient: null,

  didInsertElement() {
    /*** Create Gradients ***/
    const ctx = this.$().find('#for-gradient')[0].getContext('2d');

    var strokeGradient = ctx.createLinearGradient(0,0,200,0);
      strokeGradient.addColorStop(0, 'rgba(34,113,238,1)');
      strokeGradient.addColorStop(0.5, 'rgba(124,98,206,1)');
      strokeGradient.addColorStop(1, 'rgba(236,44,137,1)');

    var fillGradient = ctx.createLinearGradient(0,0,200,0);
      fillGradient.addColorStop(0, 'rgba(34,113,238,0.25)');
      fillGradient.addColorStop(0.5, 'rgba(124,98,206,0.25)');
      fillGradient.addColorStop(1, 'rgba(236,44,137,0.25)');

    this.set('fillGradient', fillGradient);
    this.set('strokeGradient', strokeGradient);
  },
  chartData: Ember.computed('fillGradient', 'strokeGradient', function() {
    let fillGradient = this.get('fillGradient');
    let strokeGradient = this.get('strokeGradient');
    let data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          fillColor : fillGradient, // Put the gradient here as a fill color
          strokeColor : strokeGradient,
          pointColor : "#fff",
          pointStrokeColor : strokeGradient,
          pointHighlightFill: strokeGradient,
          pointHighlightStroke: "#fff",
          data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
        }
      ]
    };

    return data;
  }),
  chartOptions: []
});