Im using ember-charts for an app to present multiple different charts from the same models. Ember-charts takes data formatted in a specific way; an array of objects like in the code below.
I have been using computed properties
to format the data to ember-charts
liking.
This works.
but given that there will be many charts, and that the way to format the data is quite similar, I'm unhappy with the amount of duplicated code and was wondering if anyone has a better way to format the data for ember-charts.
Im using Ember 2.4
and ember-cli-mirage
right now to generate my models.
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;
}),
});
Templates:
<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>
Aucun commentaire:
Enregistrer un commentaire