Tweaks to the dashboard and its components

src/app/dashboard/calendar/calendar.component.ts

@@ -14,15 +14,36 @@ export class Calendar {
         'September', 'October', 'November', 'December'
     ];
 
+    private today: Date;
     private month: number;
     private year: number;
     private calendarDays;
+    private tasks;
 
     constructor() {
-        let today = new Date();
+        this.today = new Date();
 
-        this.month = today.getMonth();
-        this.year = today.getFullYear();
+        this.month = this.today.getMonth();
+        this.year = this.today.getFullYear();
+
+        this.tasks = [];
+        this.tasks[22] = [
+            {
+                title: 'Some work that must get done',
+                points: 5,
+                color: '#bee7f4'
+            },
+            {
+                title: 'Another thing to do',
+                points: 3,
+                color: '#debee8'
+            },
+            {
+                title: 'Testing a date with multiple tasks',
+                points: 8,
+                color: '#ffffe0'
+            }
+        ];
 
         this.generateCalendar();
     }
@@ -50,6 +71,10 @@ export class Calendar {
         this.generateCalendar();
     }
 
+    private getColor(task) {
+        return task.color;
+    }
+
     private generateCalendar(): void {
         let firstDate = new Date(this.year, this.month, 1),
             startingDay = firstDate.getDay(),

src/app/dashboard/calendar/calendar.template.html

@@ -15,8 +15,16 @@
     </thead>
     <tbody>
         <tr *ngFor="let week of calendarDays">
-            <td *ngFor="let day of week" class="day">
+            <td *ngFor="let day of week" class="day"
+                [ngClass]="{ today: today.getMonth() === month && today.getDate() === day }">
                 <span class="date">{{ day }}</span>
+                <span *ngIf="tasks[day]" class="tasks-wrapper">
+                    <span class="task" *ngFor="let task of tasks[day]"
+                        [style.background-color]="getColor(task)">
+                        <span class="points">{{ task.points }}</span>
+                        {{ task.title }}
+                    </span>
+                </span>
             </td>
         </tr>
     </tbody>

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

@@ -66,7 +66,7 @@ export class Charts implements AfterViewInit {
                 onlyInteger: true
             },
             low: 0,
-            height: '200px',
+            height: '300px',
             plugins: [ Chartist.plugins.tooltip({
                 transformTooltipTextFnc: (value) => {
                     return value + ' points remaining'

src/app/dashboard/dashboard.template.html

@@ -97,6 +97,21 @@
             <select>
                 <option>Select Board...</option>
             </select>
+        </div>
+
+        <div class="row">
+            <h3>Task Burndown</h3>
+
+            <label class="inline">Start Date: <input type="date"></label>
+            <label class="inline">End Date: <input type="date"></label>
+
+            <tb-charts chart-name="chartBurndown" chart-type="line"
+                series="29,26,21,18,13,8,3"
+                labels="12/31/2015,1/1/2016,1/2/2016,1/3/2016,1/4/2016,1/5/2016,1/6/2016"
+                table-head="Date"></tb-charts>
+        </div>
+
+        <div class="row">
             <div class="half-page">
                 <h3>Task Distribution by User</h3>
                 <tb-charts chart-name="chartByUser" series="7,13,8,5"
@@ -110,17 +125,7 @@
                     table-head="Column"></tb-charts>
             </div>
         </div>
-        <div class="row">
-            <h3>Task Burndown</h3>
 
-            <label class="inline">Start Date: <input type="date"></label>
-            <label class="inline">End Date: <input type="date"></label>
-
-            <tb-charts chart-name="chartBurndown" chart-type="line"
-                series="21,18,13,8,3"
-                labels="1-2-2016,1-3-2016,1-4-2016,1-5-2016,1-6-2016"
-                table-head="Date"></tb-charts>
-        </div>
         <div class="row">
             <tb-calendar board-id="1"></tb-calendar>
         </div>

src/scss/_dashboard.scss

@@ -13,7 +13,7 @@
 
     .calendar {
         td {
-            width: calc(100% / 7);
+            width: 100px;
         }
 
         th {
@@ -26,15 +26,22 @@
 
         .days {
             background-color: $color-table-row;
+            border-left: 1px solid lighten($color-border, 15%);
+            border-right: 1px solid lighten($color-border, 15%);
+        }
+
+        .today {
+            background-color: $color-table-row;
         }
 
         .day {
-            border-left: 1px solid $color-border;
-            height: 8em;
+            border-left: 1px solid lighten($color-border, 15%);
+            height: 9em;
+            padding-top: 2em;
             position: relative;
 
             &:last-of-type {
-                border-right: 1px solid $color-border;
+                border-right: 1px solid lighten($color-border, 15%);
             }
         }
 
@@ -43,6 +50,29 @@
             position: absolute;
             top: 2px;
         }
+
+        .tasks-wrapper {
+            display: inline-block;
+            height: 6em;
+            overflow: auto;
+            width: 100%;
+        }
+
+        .task {
+            border: 1px solid lighten($color-border, 20%);
+            cursor: pointer;
+            display: inline-block;
+            margin-bottom: .3em;
+            padding-left: 5px;
+            padding-right: 1.2em;
+            width: 100%;
+
+            .points {
+                float: right;
+                font-weight: 700;
+                margin-right: -1em;
+            }
+        }
     }
 }