mirror of
https://github.com/CachetHQ/Cachet.git
synced 2025-01-17 05:28:18 +01:00
Working on a widget design for the dashboard index
This commit is contained in:
James Brooks
parent
f13b8debe4
commit
70a5022740
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
11
bower.json
11
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",
|
||||
"chartjs": "~1.0.1",
|
||||
"eonasdan-bootstrap-datetimepicker": "~3.1.3"
|
||||
"Sortable": "~1.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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', './')
|
||||
|
||||
File diff suppressed because one or more lines are too long
27
public/build/dist/js/all-d557ec2d69.js → public/build/dist/js/all-3891213cd6.js
vendored
Executable file → Normal file
27
public/build/dist/js/all-d557ec2d69.js → public/build/dist/js/all-3891213cd6.js
vendored
Executable file → Normal file
File diff suppressed because one or more lines are too long
@ -1,4 +1,4 @@
|
||||
{
|
||||
"dist/css/all.css": "dist/css/all-53bf6fe7e4.css",
|
||||
"dist/js/all.js": "dist/js/all-d557ec2d69.js"
|
||||
"dist/css/all.css": "dist/css/all-e08b327ba2.css",
|
||||
"dist/js/all.js": "dist/js/all-3891213cd6.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)
|
||||
|
||||
70
resources/assets/sass/modules/_stats.scss
Normal file
70
resources/assets/sass/modules/_stats.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -6,3 +6,5 @@
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@import "modules/stats";
|
||||
|
||||
@ -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')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user