Formatieren von Daten für Ember-Diagramme.

Question

Ich verwende ember-charts für eine App, um mehrere verschiedene Diagramme aus den gleichen Modellen zu präsentieren. Ember-Charts nehmen Daten auf, die auf eine bestimmte Art und Weise formatiert sind; ein Array von Objekten wie im folgenden Code.
Ich habe computed properties verwendet, um die Daten zu ember-charts liking zu formatieren.
Das funktioniert.
aber vorausgesetzt, dass es viele Diagramme gibt, und dass die Art und Weise der Daten zu formatieren ziemlich ähnlich ist, bin ich unzufrieden mit der Menge an dupliziertem Code und fragte mich, ob jemand eine bessere Möglichkeit zum Formatieren der Daten für Glut hat -Karten.
Im mit Ember 2.4 und ember-cli-mirage gerade jetzt, um meine Modelle zu generieren.

Controller:

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    sqByU: Ember.computed("model.[]", function() { 
     let arr = [], model = this.get('model'); 
     model.content.map(function(item) { 
      let d = item._data; 
      arr.pushObjects([ 
       { "label": 'Manufacturing', "group": d.location, "value": d.manufacturing }, 
       { "label": 'Warehouse', "group": d.location, "value": d.warehouse }, 
       { "label": 'Research & Development', "group": d.location, "value": d.rAndD }, 
       { "label": 'Mechanical Support', "group": d.location, "value": d.mechSupport }, 
       { "label": 'Office', "group": d.location, "value": d.office } 
      ]); 
     }); 
     return arr; 
    }), 
    annualFacilityCost: Ember.computed("model.[]", function() { 
     let arr = [], model = this.get('model'); 
     model.content.map(function(item) { 
      let d = item._data; 
      let facilCost = d.opexSpend/(d.manufacturing + d.warehouse + d.rAndD + d.mechSupport + d.office); 
      arr.pushObjects([ 
       {"label": 'IFMA Benchmark', "group": d.location, "value": d.ifmaBenchmark }, 
       {"label": 'Facility Cost', "group": d.location, "value": facilCost } 
      ]); 
     }); 
     return arr; 
    }), 
}); 

Vorlagen:

<div class="col-md-4"> 
    {{#box-reg title="Square Foot by Utilization"}} 
     {{vertical-bar-chart maxBarThickness=100 selectedSeedColor="rgb(13,71,161)" stackBars=true data=sqByU }} 
    {{/box-reg}} 
</div> 
<div class="col-md-4"> 
    {{#box-reg title="BSC Total Annual Facility Cost/SF"}} 
     {{vertical-bar-chart maxBarThickness=100 selectedSeedColor="rgb(13,71,161)" data=annualFacilityCost }} 
    {{/box-reg}} 
</div> 

Answer 1

So gegeben, dass Controller auf die sind Ausweg Ich möchte sie nicht wirklich benutzen, also was ich mir ausgedacht habe ist:

die äußere Komponente change:
templates/Komponenten/CHART-wrapper.hbs

<div class="col-md-4"> 
    {{box-reg title="Title" model=model type="vertBar" data="sqByU" stackBars=true}} 
</div> 

dann die innere Komponente zu den obigen Komponenten Template hinzu:
templates/Komponenten/chart-comp.hbs

{{#if vertBar}} 
    {{vertical-bar-chart maxBarThickness=100 selectedSeedColor="rgb(13,71,161)" stackBars=stackBars data=graphData }} 
{{/if}} 
{{#if pie}} 
    {{pie-chart data=graphData sortKey="label" selectedSeedColor="rgb(41,98,255)" minSlicePercent=0 maxNumberOfSlices=15}} 
{{/if}} 

dann in der Komponente:
Komponenten/CHART-wrapper.js

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    classNames: "box", 
    stackBars: false, 
    graphData: Ember.computed("model.[]", function() { 
     let model = this.get('model'); 
     let graph = this.get('data'); 
     let sqByU = [], annualFacilityCost = [], area; 
     model.content.map(function(item) { 
      let d = item._data; 
      area = d.manufacturing + d.warehouse + d.rAndD + d.mechSupport + d.office; 
      sqByU.pushObjects([ 
       { "label": 'Manufacturing', "group": d.location, "value": d.manufacturing }, 
       { "label": 'Warehouse', "group": d.location, "value": d.warehouse }, 
       { "label": 'Research & Development', "group": d.location, "value": d.rAndD }, 
       { "label": 'Mechanical Support', "group": d.location, "value": d.mechSupport }, 
       { "label": 'Office', "group": d.location, "value": d.office } 
      ]); 
      annualFacilityCost.pushObjects([ 
       {"label": 'IFMA Benchmark', "group": d.location, "value": d.ifmaBenchmark }, 
       {"label": 'Facility Cost', "group": d.location, "value": d.opexSpend/area } 
      ]); 
     }); 
     if (graph === "sqByU") { 
      return sqByU; 
     } 
     if (graph === "annualFacilityCost") { 
      return annualFacilityCost; 
     } 
    }), 
    vertBar: Ember.computed('type', function(){ 
     return this.get('type') === 'vertBar'; 
    }), 
    pie: Ember.computed('type', function(){ 
     return this.get('type') === 'pie'; 
    }), 
}); 

Answer 2

so eine Lösung, die Ive bewegt, ist zu setupController im `

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model() { 
     return this.store.findAll('plant'); 
    }, 
    setupController: function(controller, model) { 
     this._super(controller, model); 
     let sqByU = [], annualFacilityCost = [], area; 
     model.content.map(function(item) { 
      let d = item._data; 
      area = d.manufacturing + d.warehouse + d.rAndD + d.mechSupport + d.office; 
      sqByU.pushObjects([ 
       { "label": 'Manufacturing', "group": d.location, "value": d.manufacturing }, 
       { "label": 'Warehouse', "group": d.location, "value": d.warehouse }, 
       { "label": 'Research & Development', "group": d.location, "value": d.rAndD }, 
       { "label": 'Mechanical Support', "group": d.location, "value": d.mechSupport }, 
       { "label": 'Office', "group": d.location, "value": d.office } 
      ]); 
      annualFacilityCost.pushObjects([ 
       {"label": 'IFMA Benchmark', "group": d.location, "value": d.ifmaBenchmark }, 
       {"label": 'Facility Cost', "group": d.location, "value": d.opexSpend/area } 
      ]); 
     }); 
     controller.set('sqByU', sqByU); 
     controller.set('annualFacilityCost', annualFacilityCost); 
    } 
});