Dashboard mock-up additions

src/app/dashboard/charts/charts.component.ts

@@ -2,26 +2,43 @@ import { Component, Input, AfterViewInit } from '@angular/core';
 
 @Component({
     selector: 'tb-charts',
-    template: '<div id="{{ chartName }}" class="ct-chart ct-golden-section"></div>'
+    templateUrl: 'app/dashboard/charts/charts.template.html'
 })
 export class Charts implements AfterViewInit {
     @Input('chart-name') chartName: string;
     @Input('series') series: string;
     @Input('labels') labels: string;
+    @Input('table-head') tableHead: string;
+
+    private percentages: number[];
+    private data: number[];
+    private words: string[];
+
+    constructor() {
+        this.percentages = [];
+        this.data = [];
+        this.words = [];
+    }
 
     ngAfterViewInit() {
+        this.data = this.convertToNumberArray(this.series.split(','));
+        this.words = this.labels.split(',');
+
         let data = {
-            series: this.convertToNumberArray(this.series.split(',')),
+            series: this.data,
-            labels: this.labels.split(',')
+            labels: this.words
         },
         options = {
             donut: true,
-            donutWidth: 150,
+            donutWidth: 100,
-            labelInterpolationFnc: function(label, index) {
+            labelInterpolationFnc: (label, index) => {
-                let value = data.series[index];
+                let value = data.series[index],
+                    percent = Math.round(value /
+                        data.series.reduce(Chartist.sum) * 100);
 
-                return label + ' ' + Math.round(value /
+                this.percentages.push(percent);
-                    data.series.reduce(Chartist.sum) * 100) + '%';
+
+                return label + ' ' + percent + '%';
             }
         };
 

src/app/dashboard/charts/charts.template.html

@@ -0,0 +1,19 @@
+<div id="{{ chartName }}" class="ct-chart ct-golden-section"></div>
+
+<table class="alternating">
+    <thead>
+        <tr>
+            <th>{{ tableHead }}</th>
+            <th>Task Count</th>
+            <th>Percentage</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let percent of percentages; let i = index;">
+            <td>{{ words[i] }}</td>
+            <td>{{ data[i] }}</td>
+            <td>{{ percent }}%</td>
+        </tr>
+    </tbody>
+</table>
+

src/app/dashboard/dashboard.template.html

@@ -100,13 +100,58 @@
             <div class="half-page">
                 <h3>Task Distribution by User</h3>
                 <tb-charts chart-name="chartByUser" series="7,13,8,5"
-                    labels="admin, tester, user, another"></tb-charts>
+                    labels="admin,tester,user,another"
+                    table-head="User"></tb-charts>
             </div>
             <div class="half-page">
                 <h3>Task Distribution by Column</h3>
                 <tb-charts chart-name="chartByColumn" series="18,3,7"
-                    labels="To Do,Doing,Done"></tb-charts>
+                    labels="To Do,Doing,Done"
+                    table-head="Column"></tb-charts>
             </div>
         </div>
     </section>
+
+    <section>
+        <h2>Activity Log</h2>
+
+        <div class="row">
+            <table class="alternating">
+                <thead>
+                    <tr>
+                        <th>User</th>
+                        <th>Action</th>
+                        <th>Timestamp</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>admin</td>
+                        <td>admin added task Mockup Dashboard.</td>
+                        <td>5/22/2016 1:31:53 PM</td>
+                        <td><a href="#">View Task</a></td>
+                    </tr>
+                    <tr>
+                        <td>admin</td>
+                        <td>admin added board Test.</td>
+                        <td>5/13/2016 4:16:46 PM</td>
+                        <td><a href="#">View Board</a></td>
+                    </tr>
+                    <tr>
+                        <td>admin</td>
+                        <td>admin removed board Demo.</td>
+                        <td>5/11/2016 9:21:39 AM</td>
+                        <td></td>
+                    </tr>
+                    <tr>
+                        <td>admin</td>
+                        <td>admin added board Demo.</td>
+                        <td>5/11/2016 9:18:26 AM</td>
+                        <td></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
 </div>