Organizing route/controllers with chart widgets and grid

Design
1

I’m in the process of rewriting a huge business application in Ember.js. Our application consists of several different modules, and each one of them has a pretty similar layout for the landing pages.

The top of the page contains several chart widgets that give statistical history for the past X days using line charts. Below this is a grid of data that can be filtered and sorted. I’ve been looking at the best ways to sort a grid of data and it looks like using an ArrayController is the best way since sorting is built in. My only problem is that the data being returned by the route is not an array, but looks like this:

{
  widgets: [{
    title: 'Widget 1',
    values: [23, 20, 29, 18, 19]
  }, {
    title: 'Widget 2',
    values: [16, 12, 12, 14, 16]
  }, {
    title: 'Widget 3',
    values: [14, 20, 26, 28, 30]
  }],
  employees: [{
    name: 'Giacomo Guilizzoni',
    age: 37,
    nickname: 'Peldi',
    hireDate: new Date(2014, 0, 1)
  }, {
    name: 'Marco Bottom',
    age: 34,
    nickname: '',
    hireDate: new Date(2007, 2, 12)
  }, {
    name: 'Mariah Machlachlan',
    age: 37,
    nickname: 'Patata',
    hireDate: new Date(1998, 7, 29)
  }]
};

The chart widgets get their data from the widgets property and the grid gets it’s data from the employees property. For now, I have the chart widgets being rendered with components, but I’m still trying to figure out what to do with the grid. If I want to use an ArrayController, how can I also have the chart widgets rendered on the same page? Is there another alternative to using an ArrayController that will easily allow me to sort and filter my data?

2

I finally figured how to design the route and controller for this layout. I ended up making the controller an ArrayController so I could use the built-in sorting. I’m still returning the same data in the route that contains two arrays: widgets and employees. The catch is setting up the controller with the route like this:

App.EmployeesRoute = Ember.Route.extend({
  setupController: function(controller, model) {
      controller.set('model', model.employees);
      controller.set('widgets', model.widgets);
  }
});

This allows my controller to have an array for it’s model, and also allows me to have a model for the widgets at the top of the page. I hope this helps someone else out trying to do this.