Working on a widget design for the dashboard index

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')