1

我在应用程序中使用ember-charts来呈现来自同一模型的多个不同图表。Ember-charts 采用特定方式格式化的数据；如下代码中的对象数组。
我一直在使用computed properties将数据格式化为ember-charts喜欢的格式。
这行得通。
但考虑到会有很多图表，并且格式化数据的方式非常相似，我对重复代码的数量不满意，并且想知道是否有人有更好的方法来格式化 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>
4

2 回答 2

1

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

更改外部组件：
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';
    }),
});
于 2016-04-06T16:51:45.527 回答
0

所以我搬到的一个解决方案是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);
    }
});
于 2016-04-06T13:42:54.017 回答