格式化 Ember 个图表的数据。

Question

我正在使用 ember-charts 应用程序来显示来自同一模型的多个不同图表。 Ember-charts 获取以特定方式格式化的数据；对象数组，如下面的代码所示。
我一直在使用 computed properties 将数据格式化为 ember-charts 喜欢的格式。
这行得通。
但是鉴于会有很多图表，而且格式化数据的方式也很相似，我对重复代码的数量很不满意，想知道是否有人有更好的方法为 ember-图表格式化数据。
我现在使用 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

所以我转向的一个解决方案是 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);
    }
});

Answer 2

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

更改外部组件：
templates/components/chart-wrapper.hbs

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

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

然后在组件中：
components/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';
    }),
});

格式化 Ember 个图表的数据。

Formatting Data for Ember Charts.

javascript

ember.js

ember.js-2

ember-charts