Use data sources instead of arrays.

angular/components/team-efficiency/team-efficiency.html

@@ -19,7 +19,7 @@
         <div id="employees-list"
             kendo-list-view
             k-selectable="'single'"
-            k-data-source="teamEfficiency.employeeList"
+            k-data-source="teamEfficiency.employeeListDataSource"
             k-on-change="teamEfficiency.changeCurrentEmployee(dataItem)"
         >
            <div class="employee" k-template>
@@ -50,13 +50,13 @@
                     </div>
                     <div class="col-xs-12 col-sm-4">
                         <h3>Quarter to date sales</h3>
-                        <span id="employee-quarter-sales-label">{{teamEfficiency.currentEmployeeQuarterSales[0].Current | currency }}</span>
+                        <span id="employee-quarter-sales-label">{{teamEfficiency.currentEmployeeQuarterSales | currency }}</span>
                         <div class="sparkline-container">
                             <div id="employee-quarter-sales" style="height:30px"
                                 kendo-chart
                                 k-theme="'metro'"
                                 k-tooltip="false"
-                                k-data-source="teamEfficiency.currentEmployeeQuarterSales"
+                                k-data-source="teamEfficiency.employeeQuarterSalesDataSource"
                                 k-series="[{type:'bullet',currentField:'Current',targetField:'Target'}]"
                                 k-legend="{visible:false}"
                                 k-category-axis="{labels:{visible:false},majorGridLines:{visible:false}}"
@@ -74,7 +74,7 @@
                                 k-series="[{type:'line',field:'EmployeeSales',width:1.5,markers:{visible:false}}]"
                                 k-category-axis="{type:'date',field:'Date',visible:false,majorGridLines:{visible:false},majorTicks:{visible:false}}"
                                 k-legend="{visible:false}"
-                                k-data-source="teamEfficiency.currentEmployeeAverageSales"
+                                k-data-source="teamEfficiency.employeeAverageSalesDataSource"
                                 k-value-axis="{type:'numeric',visible:false,labels:{visible:false},majorGridLines:{visible:false},majorTicks:{visible:false}}">
                             </div>
                         </div>
@@ -86,7 +86,7 @@
                     kendo-chart
                     k-theme="'metro'"
                     k-title="{text:'REPRESENTATIVE SALES VS. TOTAL SALES',align:'left',font:'11px',color:'#35373d'}"
-                    k-data-source="teamEfficiency.currentEmployeeTeamSales"
+                    k-data-source="teamEfficiency.employeeTeamSalesDataSource"
                     k-legend="{position:'bottom'}"
                     k-series="[{field:'EmployeeSales',categoryField:'Date',name:'Employee Sales',aggregate:'sum'},{field:'TotalSales',categoryField:'Date',name:'Team Sales',aggregate:'sum'}]"
                     k-category-axis="{type:'date',baseUnit:'months',majorGridLines:{visible:false}}"
@@ -102,7 +102,7 @@
                     k-views="['month']"
                     k-editable="false"
                     k-timezone="Etc/UTC"
-                    k-data-source="teamEfficiency.currentEmployeeSales">
+                    k-data-source="teamEfficiency.employeeSalesDataSource">
                 </div>
             </div>
         </div>

angular/components/team-efficiency/team-efficiency.js

@@ -9,32 +9,59 @@ angular.module('app.team', [])
 
         this.currentEmployee = null;
 
-        this.employeeTeamSales = EmployeeTeamSales.query();
+        var employeeTeamSales = EmployeeTeamSales.query();
 
-        this.employeeAverageSales = EmployeeAverageSales.query();
+        var employeeAverageSales = EmployeeAverageSales.query();
 
-        this.employeeQuarterSales = EmployeeQuarterSales.query();
+        var employeeQuarterSales = EmployeeQuarterSales.query();
 
-        this.employeeList = EmployeeList.query();
+        var employeeList = EmployeeList.query();
 
-        this.employeeSales = EmployeeSales.query();
+        var employeeSales = EmployeeSales.query();
+
+        this.employeeListDataSource = new kendo.data.DataSource();
+
+        this.employeeTeamSalesDataSource = new kendo.data.DataSource();
+
+        this.employeeQuarterSalesDataSource = new kendo.data.DataSource();
+
+        this.employeeAverageSalesDataSource = new kendo.data.DataSource({
+            aggregate: [{
+                field: 'EmployeeSales',
+                aggregate: 'average'
+            }]
+        });
+
+        this.employeeSalesDataSource = new kendo.data.SchedulerDataSource();
 
         this.changeCurrentEmployee = function(employee) {
             this.currentEmployee = employee;
 
-            this.currentEmployeeQuarterSales = this.employeeQuarterSales.filter(function(sale) {
+            var currentEmployeeQuarterSales = employeeQuarterSales.filter(function(sale) {
                 return sale.EmployeeID == employee.EmployeeID;
             })[0].Sales;
 
-            this.currentEmployeeTeamSales = this.employeeTeamSales.filter(function(sale) {
+            this.currentEmployeeQuarterSales = currentEmployeeQuarterSales[0].Current;
+
+            this.employeeQuarterSalesDataSource.data(currentEmployeeQuarterSales);
+
+            var currentEmployeeTeamSales = employeeTeamSales.filter(function(sale) {
                 return sale.EmployeeID == employee.EmployeeID;
             })[0].Sales;
 
-            this.currentEmployeeAverageSales = this.employeeAverageSales.filter(function(sale){
+            this.employeeTeamSalesDataSource.data(currentEmployeeTeamSales);
+
+            var currentEmployeeAverageSales = employeeAverageSales.filter(function(sale){
                 return sale.EmployeeID == employee.EmployeeID;
             });
 
-            this.currentEmployeeSales = this.employeeSales.filter(function(sale) {
+            this.employeeAverageSalesDataSource.data(currentEmployeeAverageSales);
+
+            var aggregates = this.employeeAverageSalesDataSource.aggregates();
+
+            this.currentEmployeeAverageSalesNumber = aggregates.EmployeeSales ? aggregates.EmployeeSales.average : 0;
+
+            var currentEmployeeSales = employeeSales.filter(function(sale) {
                 return sale.EmployeeID == employee.EmployeeID;
             }).map(function(sale) {
                 return {
@@ -45,22 +72,11 @@ angular.module('app.team', [])
                 };
             });
 
-            var dataSource = new kendo.data.DataSource({
-                data: this.currentEmployeeAverageSales,
-                aggregate: [{
-                    field: 'EmployeeSales',
-                    aggregate: 'average'
-                }]
-            });
-
-            dataSource.read();
-
-            var aggregates = dataSource.aggregates();
-
-            this.currentEmployeeAverageSalesNumber = aggregates.EmployeeSales ? aggregates.EmployeeSales.average : 0;
+            this.employeeSalesDataSource.data(currentEmployeeSales);
         };
 
-        $q.all([this.employeeQuarterSales.$promise, this.employeeList.$promise, this.employeeAverageSales.$promise, this.employeeTeamSales.$promise, this.employeeSales.$promise]).then(function() {
-            this.changeCurrentEmployee(this.employeeList[0]);
+        $q.all([employeeQuarterSales.$promise, employeeList.$promise, employeeAverageSales.$promise, employeeTeamSales.$promise, employeeSales.$promise]).then(function() {
+            this.employeeListDataSource.data(employeeList);
+            this.changeCurrentEmployee(employeeList[0]);
         }.bind(this));
     }]);