Working on a widget design for the dashboard index

app/Http/Controllers/Admin/DashboardController.php

@@ -12,8 +12,11 @@
 namespace CachetHQ\Cachet\Http\Controllers\Admin;
 
 use CachetHQ\Cachet\Models\Component;
+use CachetHQ\Cachet\Models\Incident;
 use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\View;
+use stdClass;
 
 class DashboardController extends Controller
 {
@@ -25,9 +28,11 @@ class DashboardController extends Controller
     public function showDashboard()
     {
         $components = Component::orderBy('order')->get();
+        $incidents = $this->getIncidents();
 
         return View::make('dashboard.index')
-            ->withComponents($components);
+            ->withComponents($components)
+            ->withIncidents($incidents);
     }
 
     /**
@@ -40,4 +45,24 @@ class DashboardController extends Controller
         return View::make('dashboard.notifications.index')
             ->withPageTitle(trans('dashboard.notifications.notifications').' '.trans('dashboard.dashboard'));
     }
+
+    /**
+     * Fetches all of the incidents over the last 30 days.
+     *
+     * @return \Illuminate\Support\Collection
+     */
+    protected function getIncidents()
+    {
+        $incidents = Incident::select(DB::raw('COUNT(id) AS counter'))->groupBy(DB::raw('DATE_FORMAT(created_at, "%d%m%y")'))->get();
+        $range = (30 - $incidents->count()) - 1;
+
+        $fake = new stdClass();
+        $fake->counter = 0;
+
+        foreach (range(1, $range) as $key) {
+            $incidents->prepend($fake);
+        }
+
+        return $incidents;
+    }
 }

bower.json

@@ -1,20 +1,21 @@
 {
     "name": "Cachet",
     "dependencies": {
+        "animate-sass": "~0.6.2",
         "autosize": "~2.0.0",
         "bootstrap-sass": "~3.3.5",
+        "chartjs": "~1.0.1",
+        "eonasdan-bootstrap-datetimepicker": "~3.1.3",
         "humane-js": "~3.2.2",
         "ionicons": "~2.0.0",
         "jquery": "~2.1.1",
         "jquery-minicolors": "~2.1.10",
         "jquery-serialize-object": "~2.4.3",
+        "jquery-sparkline": "~2.1.3",
+        "livestampjs": "~1.1.2",
         "lodash": "~2.4",
         "messenger": "~1.4.1",
-        "Sortable": "~1.0.0",
-        "animate-sass": "~0.6.2",
         "moment": "~2.9",
-        "livestampjs": "~1.1.2",
+        "Sortable": "~1.0.0"
-        "chartjs": "~1.0.1",
-        "eonasdan-bootstrap-datetimepicker": "~3.1.3"
     }
 }

gulpfile.js

@@ -22,6 +22,7 @@ elixir(function (mix) {
             'vendor/bower_components/jquery-minicolors/jquery.minicolors.js',
             'vendor/bower_components/jquery-serialize-object/jquery.serialize-object.js',
             'vendor/bower_components/chartjs/Chart.js',
+            'vendor/bower_components/jquery-sparkline/dist/jquery.sparkline.js',
             'resources/assets/js/app.js',
             'resources/assets/js/**/*.js'
         ], 'public/dist/js/all.js', './')

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
-  "dist/css/all.css": "dist/css/all-53bf6fe7e4.css",
+  "dist/css/all.css": "dist/css/all-e08b327ba2.css",
-  "dist/js/all.js": "dist/js/all-d557ec2d69.js"
+  "dist/js/all.js": "dist/js/all-3891213cd6.js"
 }

resources/assets/js/app.js

@@ -296,6 +296,42 @@ $(function() {
         }
     });
 
+    // Sparkline
+    if ($.fn.sparkline) {
+        var sparkLine = function () {
+            $('.sparkline').each(function () {
+                var data = $(this).data();
+                data.valueSpots = {
+                    '0:': data.spotColor
+                };
+
+                $(this).sparkline(data.data, data);
+                var composite = data.compositedata;
+
+                if (composite) {
+                    var stlColor = $(this).attr("data-stack-line-color"),
+                        stfColor = $(this).attr("data-stack-fill-color"),
+                        sptColor = $(this).attr("data-stack-spot-color"),
+                        sptRadius = $(this).attr("data-stack-spot-radius");
+
+                    $(this).sparkline(composite, {
+                        composite: true,
+                        lineColor: stlColor,
+                        fillColor: stfColor,
+                        spotColor: sptColor,
+                        highlightSpotColor: sptColor,
+                        spotRadius: sptRadius,
+                        valueSpots: {
+                            '0:': sptColor
+                        }
+                    });
+                };
+            });
+        };
+
+        sparkLine(false);
+    }
+
     function goToStep(current, next) {
         // validation was ok. We can go on next step.
         $('.block-' + current)

resources/assets/sass/modules/_stats.scss

@@ -0,0 +1,70 @@
+.stats-widget {
+    text-align: center;
+    margin-bottom: 30px;
+    background-color: #fff;
+    border: #eee 1px solid;
+
+    &.full-stats-block {
+        .stats-bottom {
+            border-top: 0 !important;
+            color: #fff;
+            position: relative;
+            margin-top: -1px;
+            z-index: 1000;
+        }
+    }
+
+    .stats-top {
+        padding: 20px;
+
+        > span {
+            display: block;
+            text-align: center;
+
+            &.stats-value {
+                font-size: 24px;
+                font-weight: 400;
+            }
+
+            &.stats-label {
+                padding-top: 5px;
+                font-size: 14px;
+                font-weight: 300;
+                color: #777;
+            }
+        }
+    }
+
+    .stats-chart {
+        margin-top: -20px;
+        padding-top: 10px;
+    }
+
+    .stats-bottom {
+        border-top: #eee 1px solid;
+        color: #777;
+        padding: 12px 10px;
+        text-align: center;
+        background-color: #f9f9f9;
+
+        &.bg-green {
+            background-color: $cachet-green;
+            color: white;
+        }
+
+        &.bg-blue {
+            background-color: $cachet-blue;
+            color: white;
+        }
+
+        &.bg-red {
+            background-color: $cachet-red;
+            color: white;
+        }
+
+        &.bg-teal {
+            background-color: $cachet-teal;
+            color: white;
+        }
+    }
+}

resources/assets/sass/pages/_dashboard.scss

@@ -6,3 +6,5 @@
         font-weight: normal;
     }
 }
+
+@import "modules/stats";

resources/views/dashboard/index.blade.php

@@ -43,6 +43,21 @@
                 </div>
             </div>
         </div>
+
+        <div class="row">
+            <div class="col-lg-6">
+                <div class="stats-widget full-stats-block">
+                    <div class="stats-top">
+                        <span class="stats-value">{{ $incidents->map(function($incident) { return $incident->counter; })->sum() }}</span>
+                        <span class="stats-label">{{ trans('dashboard.incidents.incidents') }}</span>
+                    </div>
+                    <div class="stats-chart">
+                        <div class="sparkline" data-type="line" data-resize="true" data-height="80" data-width="100%" data-line-width="2" data-min-spot-color="#e65100" data-max-spot-color="#ffb300" data-line-color="#3498db" data-spot-color="#00838f" data-fill-color="#3498db" data-highlight-line-color="#00acc1" data-highlight-spot-color="#ff8a65" data-spot-radius="false" data-data="[{{ $incidents->implode('counter', ',') }}]"></div>
+                    </div>
+                    <div class="stats-bottom bg-blue"></div>
+                </div>
+            </div>
+        </div>
     </div>
     @if(Session::get('setup.done'))
     @include('dashboard.partials.welcome-modal')