灰烬图的格式化数据。

Question

我使用应用程序的余量图来显示同一模型的多个不同图表。 灰烬图采用特定方式格式化数据； 像下面的代码中那样的对象数组。
我一直在使用computed properties对数据进行格式化，以ember-charts顺心。
这可行。
但是鉴于会有很多图表，并且格式化数据的方式非常相似，我对重复代码的数量不满意，并且想知道是否有人有更好的格式化余烬图的方法。
我现在使用Ember 2.4和ember-cli-mirage生成我的模型。

控制器：

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;
    }),
});

范本：

<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

因此，鉴于控制器即将淘汰，我真的不想使用它们，所以我想出的是：

更改外部组件：
模板/组件/chart-wrapper.hbs

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

然后将内部组件添加到上述组件模板中：
模板/组件/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}}

然后在组件中：
组件/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

所以我转移到的一个解决方案是在`中的setupController

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);
    }
});