Question

我使用ember-charts为应用程序呈现来自相同模型的多个不同图表。 Ember-charts采用特定方式格式化的数据;一系列对象，如下面的代码所示我一直在使用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

所以，鉴于控制器即将问世，我真的不想使用它们，所以我想出的是：

更改外部组件：
的 模板/组件/图表-wrapper.hbs

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

然后将内部组件添加到上面的组件模板中：
的 模板/组件/图表-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'; }), });

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

格式化Ember图表的数据。

2 个答案: