Domember/app/components/heater-listview.js

import fetch from 'fetch';
import Ember from 'ember';
import config from '../config/environment';
import jQuery from 'jquery';

export default Ember.Component.extend({
  classNames: ['col-md-3'],
  heater: null,
  isSaving: false,

  actions: {
    formSetConsign() {
      let target = this.get('heater.consign');
      let id = this.get('heater.id');
      let data="consign="+target;
      let headers = {"Content-Type": "application/x-www-form-urlencoded"};

      this.set("isSaving", true);

      if (config.apiAuth !== '') {
        headers.Authorization = config.apiAuth;
      }
      fetch(config.api+"/effectors/heaters/"+id,
        { method: "PUT",
          body: data,
          headers: headers
        }).then((response) => {
          if (response.ok) {
            this.setChartDataConsign(id, target);
            this.set("isSaving", false);
          }
        }).catch((error) => {
          window.alert(error);
          this.set("isSaving", false);
        });
    },
  },
  // defining graph
  chartOptions: [],
  chartOptions_default: {
    chart: {
      type: 'gauge',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false
    },
    title: {
      text: 'Temperature'
    },
    pane: {
      startAngle: -150,
      endAngle: 150,
      background: [{
        backgroundColor: {
          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
          stops: [
                  [0, '#FFF'],
                  [1, '#333']
          ]
        },
        borderWidth: 0,
        outerRadius: '109%'
      },
      {
        backgroundColor: {
          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
          stops: [
                        [0, '#333'],
                        [1, '#FFF']
          ]
        },
        borderWidth: 1,
        outerRadius: '107%'
      },
      {
                // default background
      },
      {
        backgroundColor: '#DDD',
        borderWidth: 0,
        outerRadius: '105%',
        innerRadius: '103%'
      }]
    },
    // the value axis
    yAxis: {
      min: -10,
      max: 40,
      minorTickInterval: 'auto',
      minorTickWidth: 1,
      minorTickLength: 10,
      minorTickPosition: 'inside',
      minorTickColor: '#666',
      tickPixelInterval: 30,
      tickWidth: 2,
      tickPosition: 'inside',
      tickLength: 10,
      tickColor: '#666',
      labels: {
        step: 2,
        rotation: 'auto'
      },
      title: {
        text: '°C'
      },
      plotBands: [{
        from: -10,
        to: 7,
        color: {
          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
          stops: [
                        [0, 'white'],
                        [1, 'blue']
          ]
        }
      },
      {
      	from: 7,
        to: 40,
        color: {
          linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
          stops: [
                        [0, 'white'],
                        [1, 'red']
          ]
        }
      }]
    }
  },
  chartData: [],
  chartData_default: [{
    name: 'Temperature',
    data: [10],
    color: 'black',
    tooltip: {
      valueSuffix: '°C'
    },
    dataLabels: { enabled: true }
  },
  {
  	name: 'Consign',
  	data: [20],
    color: 'red',
  	tooltip: {
  	   valueSuffix: '°C'
  },
    backgroundColor:"blue",
    dataLabels: { enabled: false },
    dial:{
  	  backgroundColor: "red",
      rearLength: 0,
    	baseWidth: 4,
    	radius: "60%"
    }
  }
  ],
  init() {
    this._super();
    let heater = this.get('heater');
    let chartOptions=this.get('chartOptions');
    chartOptions[heater.id] = jQuery.extend( true, {}, this.get('chartOptions_default'));
    chartOptions[heater.id].title.text = heater.name;
    let chartData=this.get('chartData');
    chartData[heater.id] = jQuery.extend( true, [], this.get('chartData_default'));
    chartData[heater.id][0].data=[heater.temp];
    chartData[heater.id][1].data=[heater.consign];
  },
  setChartDataConsign(heaterId, consign) {
    let data = this.get('chartData')[heaterId];
    Ember.set(data[1], "isLoaded", false);
    data[1].data = [parseInt(consign, 10)];
    Ember.set(data[1], "isLoaded", true);
  }

});