foltik/shimapan
1
0
Fork 0
mirror of https://github.com/Foltik/Shimapan synced 2025-01-05 15:58:03 -05:00
Code Issues Releases Wiki Activity

Add angular-chart.js and start dashboard rework

Browse Source
This commit is contained in:
Jack Foltz 2018-08-15 09:27:32 -04:00
parent 9c1e7b864c
commit 9d22adf8fb
Signed by: foltik
GPG Key ID: 303F88F996E95541
8 changed files with 172 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/public/css/navbar.css
View File

@ -1,25 +1,38 @@
/* SHIMAPAN title */
.sidebar-title {
grid-row-start: 1;
grid-row-end: 1;
place-self: center;
color: #2a9fd6;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 60px;
/*border-bottom: 1px solid #999;*/
}
.sidebar-title span {
color: #2a9fd6;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 6px;
}
/* Nav Container */
.sidebar {
grid-row-start: 2;
grid-row-end: 2;
}
/* Nav Elements */
.nav li {
cursor: pointer;
display: flex;
align-items: center;
}
.nav li a {
flex: 1;
outline: none;
@ -29,8 +42,6 @@
color: #666;
text-decoration: none;
}
.nav li span {
background: #0d0d0d;
width: 35px;
@ -41,18 +52,16 @@
justify-content: center;
margin-left: 20px;
}
.nav-icon {
font: 14px fontawesome;
color: #fff;
}
.nav li a:hover {
color: #fff;
}
.nav li a.active {
color: #fff;
}
/* Prevent annoying outline on firefox */
::-moz-focus-inner {border: 0;}

11
app/public/css/panel.css
View File

@ -2,7 +2,10 @@
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
@import "sidebar.css";
@import "navbar.css";
/* Subpanels */
@import "subpanel/dash.css";
*, *:before, *:after {
margin: 0;
@ -18,8 +21,8 @@ body {
.container {
display: grid;
grid-template-columns: 240px 100%;
grid-template-rows: 60px 100%;
grid-template-columns: 240px auto;
grid-template-rows: 60px auto;
width: 100vw;
height: 100vh;
}
@ -29,6 +32,8 @@ body {
grid-column-start: 2;
background: #121212;
padding: 20px;
border-left: 1px solid #2a9fd6;
border-top: 1px solid #2a9fd6;
}

40
app/public/css/subpanel/dash.css Normal file
View File

@ -0,0 +1,40 @@
#dash-container {
display: flex;
flex-direction: column;
}
.dash-row {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.dash-card {
background: #020202;
border-radius: 4px;
padding: 30px;
margin: 8px;
flex-grow: 1;
display: flex;
align-items: center;
}
.dash-card.dash-card-singlestat {
justify-content: space-between;
}
.dash-stat {
align-self: flex-start;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.dash-stat-title {
font-size: 18px;
}
.dash-stat-value {
font-size: 48px;
}
.dash-stat-icon {
color: #2a9fd6;
}

23
app/public/panel/controllers/DashCtrl.js Normal file
View File

@ -0,0 +1,23 @@
var angular = require('angular');
angular.module('DashCtrl', ['chart.js']).controller('DashController', ['$scope', $scope => {
$scope.uploadColors = ['#2a9fd6'];
$scope.uploadLabels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.uploadSeries = ['Uploads'];
$scope.uploadData = [[65, 59, 80, 81, 56, 55, 40]];
$scope.uploadDatasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.uploadOptions = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
}
]
}
};
}]);

3
app/public/panel/shimapan-panel.js
View File

@ -1,6 +1,7 @@
var angular = require('angular');
var uirouter = require('angular-ui-router');
var app = angular.module('shimapan-panel', ['ui.router', 'AuthSvc', 'KeySvc', 'InviteSvc', 'UserSvc', 'KeyCtrl', 'InviteCtrl', 'UserCtrl', 'NavCtrl', 'PanelRoutes']);
var chart = require('angular-chart.js');
var app = angular.module('shimapan-panel', ['ui.router', 'AuthSvc', 'KeySvc', 'InviteSvc', 'UserSvc', 'KeyCtrl', 'InviteCtrl', 'UserCtrl', 'NavCtrl', 'DashCtrl', 'PanelRoutes']);
app.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;

47
package-lock.json generated
View File

@ -277,6 +277,15 @@
"resolved": "https://registry.npmjs.org/angular/-/angular-1.7.2.tgz",
"integrity": "sha512-JcKKJbBdybUsmQ6x1M3xWyTYQ/ioVKJhSByEAjqrhmlOfvMFdhfMqAx5KIo8rLGk4DFolYPcCSgssjgTVjCtRQ=="
},
"angular-chart.js": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/angular-chart.js/-/angular-chart.js-1.1.1.tgz",
"integrity": "sha1-SfDhjQgXYrbUyXkeSHr/L7sw9a4=",
"requires": {
"angular": "1.x",
"chart.js": "2.3.x"
}
},
"angular-messages": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/angular-messages/-/angular-messages-1.7.2.tgz",
@ -1364,6 +1373,39 @@
"supports-color": "^2.0.0"
}
},
"chart.js": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.3.0.tgz",
"integrity": "sha1-QEYOSOLEF8BfwzJc2E97AA3H19Y=",
"requires": {
"chartjs-color": "^2.0.0",
"moment": "^2.10.6"
}
},
"chartjs-color": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz",
"integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=",
"requires": {
"chartjs-color-string": "^0.5.0",
"color-convert": "^0.5.3"
},
"dependencies": {
"color-convert": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
"integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
}
}
},
"chartjs-color-string": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz",
"integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==",
"requires": {
"color-name": "^1.0.0"
}
},
"check-error": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
@ -6495,6 +6537,11 @@
}
}
},
"moment": {
"version": "2.22.2",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
"integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
},
"mongodb": {
"version": "2.2.36",
"resolved": "https://registry.npmjs.org/mongodb/-/mongodb-2.2.36.tgz",

1
package.json
View File

@ -3,6 +3,7 @@
"version": "1.0.0",
"dependencies": {
"angular": "^1.7.2",
"angular-chart.js": "^1.1.1",
"angular-messages": "^1.7.2",
"angular-ui-router": "^1.0.19",
"async": "^2.6.1",

36
public/views/panel/dash.html
View File

@ -1 +1,35 @@
<h1>Dashboard</h1>
<div id="dash-container" ng-controller="DashController">
<div id="dash-historical" class="dash-row">
<div class="dash-card dash-card-graph">
<canvas id="dash-upload-historical" class="chart chart-line"
chart-data="uploadData" chart-labels="uploadLabels" chart-series="uploadSeries" chart-options="uploadOptions"
chart-dataset-override="uploadDatasetOverride" chart-click="uploadOnClick" chart-colors="uploadColors"></canvas>
</div>
<div class="dash-card dash-card-graph">
</div>
</div>
<div id="dash-singlestats" class="dash-row" ng-init="statUploads=123;statUploadSize=123;statViews=123;">
<div class="dash-card dash-card-singlestat">
<div class="dash-stat">
<span class="dash-stat-title">Uploads</span>
<span class="dash-stat-value" ng-bind="statUploads"></span>
</div>
<i class="dash-stat-icon fa fa-file fa-3x"></i>
</div>
<div class="dash-card dash-card-singlestat">
<div class="dash-stat">
<span class="dash-stat-title">Uploaded Size</span>
<span class="dash-stat-value" ng-bind="statUploadSize"></span>
</div>
<i class="dash-stat-icon fa fa-database fa-3x"></i>
</div>
<div class="dash-card dash-card-singlestat">
<div class="dash-stat">
<span class="dash-stat-title">Views</span>
<span class="dash-stat-value" ng-bind="statViews"></span>
</div>
<i class="dash-stat-icon fa fa-eye fa-3x"></i>
</div>
</div>
</div>