From 9d22adf8fbc6af88cac0fd5370c3629a91cc6c94 Mon Sep 17 00:00:00 2001 From: Jack Foltz Date: Wed, 15 Aug 2018 09:27:32 -0400 Subject: [PATCH] Add angular-chart.js and start dashboard rework --- app/public/css/navbar.css | 23 +++++++++++----- app/public/css/panel.css | 11 ++++++-- app/public/css/subpanel/dash.css | 40 +++++++++++++++++++++++++++ app/public/panel/controllers/DashCtrl.js | 23 ++++++++++++++++ app/public/panel/shimapan-panel.js | 3 +- package-lock.json | 47 ++++++++++++++++++++++++++++++++ package.json | 1 + public/views/panel/dash.html | 36 +++++++++++++++++++++++- 8 files changed, 172 insertions(+), 12 deletions(-) create mode 100644 app/public/css/subpanel/dash.css create mode 100644 app/public/panel/controllers/DashCtrl.js diff --git a/app/public/css/navbar.css b/app/public/css/navbar.css index 1f1f775..6cffe94 100644 --- a/app/public/css/navbar.css +++ b/app/public/css/navbar.css @@ -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;} diff --git a/app/public/css/panel.css b/app/public/css/panel.css index 2917a30..21bf33d 100644 --- a/app/public/css/panel.css +++ b/app/public/css/panel.css @@ -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; } diff --git a/app/public/css/subpanel/dash.css b/app/public/css/subpanel/dash.css new file mode 100644 index 0000000..ecfc15d --- /dev/null +++ b/app/public/css/subpanel/dash.css @@ -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; +} diff --git a/app/public/panel/controllers/DashCtrl.js b/app/public/panel/controllers/DashCtrl.js new file mode 100644 index 0000000..701ade2 --- /dev/null +++ b/app/public/panel/controllers/DashCtrl.js @@ -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' + } + ] + } + }; + + +}]); \ No newline at end of file diff --git a/app/public/panel/shimapan-panel.js b/app/public/panel/shimapan-panel.js index a23790c..901e4da 100644 --- a/app/public/panel/shimapan-panel.js +++ b/app/public/panel/shimapan-panel.js @@ -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; diff --git a/package-lock.json b/package-lock.json index 66b8d37..c547fca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 5465a16..0f73b34 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/views/panel/dash.html b/public/views/panel/dash.html index 464f78b..fd1856e 100644 --- a/public/views/panel/dash.html +++ b/public/views/panel/dash.html @@ -1 +1,35 @@ -

Dashboard

+
+
+
+ +
+
+ +
+
+
+
+
+ Uploads + +
+ +
+
+
+ Uploaded Size + +
+ +
+
+
+ Views + +
+ +
+
+