New Twiddle

components.dope-chart.js

import Ember from 'ember';

export default Ember.Component.extend({
  fillGradient: null,
  strokeGradient: null,
  online: [
    6,
    6,
    2,
    6,
    8,
    4,
    3,
    9,
    9,
    1,
    7,
    7,
    1,
    7,
    8
  ],
  national: [
    6,
    6,
    2,
    6,
    8,
    4,
    3,
    9,
    9,
    1,
    7,
    7,
    1,
    7,
    8
  ],
  realthreadData: [
    6,
    5,
    9,
    6,
    5,
    7,
    7.5,
    1,
    8,
    8,   // Min quantity
    3,   // Fulfillment
    1.5, // Location
    5,   // Website UX
    1,   // Social Impact
    6    // Policies
  ],
  labels: [
    'Price',
    'Turnaround',
    'Soft Printing',
    'Customer Service',
    'Ordering Convenience',
    'Blank Range',
    'Additional Services',
    'Additional Product Categories',
    'Brand Value',
    'Minimum Quantity',
    'Fulfillment',
    'Location',
    'Website UX',
    'Social Impact',
    'International',
    'Policies'
  ],

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

    const strokeGradient = ctx.createLinearGradient(0,0,ctx.canvas.width,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)');
    
    const fillGradient = ctx.createLinearGradient(0,0,ctx.canvas.width,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() {
    const fillGradient = this.get('fillGradient');
    const strokeGradient = this.get('strokeGradient');
    const realthreadData = this.get('realthreadData');
  	const labels = this.get('labels');
    const national = this.get('national');
    const online = this.get('online');
    
    const data = {
      labels: labels,
      datasets: [
        {
          fillColor: "transparent",
          strokeColor : "rgba(34,113,238,1)",
          pointColor : "#fff",
          pointStrokeColor : "rgba(34,113,238,1)",
          pointHighlightFill: "rgba(34,113,238,1)",
          pointHighlightStroke: "#fff",
          data : national
        },
        {
          fillColor : "transparent",
          strokeColor : "rgba(124,98,206,1)",
          pointColor : "#fff",
          pointStrokeColor : "rgba(124,98,206,1)",
          pointHighlightFill: "rgba(124,98,206,1)",
          pointHighlightStroke: "#fff",
          data : realthreadData
        },
        {
          fillColor : "transparent",
          strokeColor : "rgba(236,44,137,1)",
          pointColor : "#fff",
          pointStrokeColor : "rgba(236,44,137,1)",
          pointHighlightFill: "rgba(236,44,137,1)",
          pointHighlightStroke: "#fff",
          data : online
        }
      ]
    };

    return data;
  }),
  chartOptions: Ember.computed(function() {
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Gradient Chart Test</h1>
<br>
<br>
{{outlet}}
{{dope-chart}}
<br>
<br>

templates.components.dope-chart.hbs

{{#if fillGradient}}
	{{ember-chart type="line" data=chartData options=chartOptions width=500 height=400}}
{{else}}
  <canvas id="for-gradient" width="400" height="400"></canvas>
{{/if}}

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {
    "ember-cli-chart": "2.0.6"
  }
}