Adds charts. Switching to version 0.0.2

- adds 3 types of charts using plotly.js
nikolio · Aug 21, 2017 · 62eaf6e · 62eaf6e
1 parent fbc14cc
commit 62eaf6e
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 4 deletions.
diff --git a/assets/css/charts.css b/assets/css/charts.css
@@ -0,0 +1,12 @@
+.chart-container {
+  height: 600px;
+  overflow-y:auto;
+  margin:0 auto;
+}
+.table {
+  display: table
+}
+.table-cell {
+  display: table-cell;
+  vertical-align: middle;
+}
diff --git a/assets/html/includes.html b/assets/html/includes.html
@@ -1,5 +1,6 @@
 <link rel="stylesheet" href="../../node_modules/angular-material/angular-material.css">
 <link rel="stylesheet" href="../css/accordion.css">
+<link rel="stylesheet" href="../css/charts.css">
 <script src="../../node_modules/angular/angular.js"></script>
 <script src="../../node_modules/angular-ui-router/release/angular-ui-router.js"></script>
 <script src="../../node_modules/angular-aria/angular-aria.js"></script>
@@ -11,4 +12,5 @@
 <script src="../../node_modules/xlsx/dist/xlsx.js"></script>
 <script src="../../node_modules/xlsx/dist/xlsx.core.min.js"></script>
 <script src="../../node_modules/nedb/index.js"></script>
+<script src="../../node_modules/plotly.js/dist/plotly-with-meta.js" charset="utf-8"></script>
 <script src="../js/app.js"></script>
diff --git a/assets/html/partials/charts.html b/assets/html/partials/charts.html
@@ -0,0 +1,14 @@
+<a ui-sref="import-file">
+<md-button aria-label="Import spreadsheet files" class="md-accent md-fab md-fab-bottom-right">
+  <md-icon md-svg-src="../../node_modules/material-design-icons/content/svg/production/ic_add_48px.svg"></md-icon>
+</md-button>
+</a>
+<div class="chart-container">
+  <div class="table">
+    <div class="table-cell">
+      <div id="studentCourseStats"><!-- Plotly chart will be drawn inside this DIV --></div>
+      <div id="examStats"></div>
+      <div id="studentsSuccessStats"></div>
+  </div>
+</div>
+</div>
diff --git a/assets/html/partials/spreadSheetImport.html b/assets/html/partials/spreadSheetImport.html
@@ -21,6 +21,11 @@
 <a ui-sref="students">
 <md-button aria-label="Import spreadsheet files" class="md-accent md-fab md-fab-bottom-right"  >
   <md-icon md-svg-src="../../node_modules/material-design-icons/action/svg/production/ic_timeline_48px.svg" > </md-icon>
+</md-button>
+</a>
 
+<a ui-sref="charts">
+<md-button aria-label="Import spreadsheet files" class="md-accent md-fab md-fab-bottom-left"  >
+  <md-icon md-svg-src="../../node_modules/material-design-icons/action/svg/production/ic_timeline_48px.svg" > </md-icon>
 </md-button>
 </a>
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -2,6 +2,7 @@ var XLSX = require("xlsx")
 const hasha = require('hasha');
 const path = require('path');
 var Datastore = require('nedb')
+var Plotly = require('plotly.js/dist/plotly-with-meta.js');
 db = new Datastore({ filename: `${__dirname}/../../db/gradeStats.db`, autoload: true });
 importedFilesDb = new Datastore({ filename: `${__dirname}/../../db/importedFiles.db`, autoload: true });
 var gradeStats = angular.module('GradeStats', ['ngMaterial', 'ngFileUpload', 'ui.router']);
@@ -19,15 +20,22 @@ gradeStats.config(function($stateProvider, $urlRouterProvider){
     templateUrl:'../html/partials/about.html',
     controller: 'AboutController'
   }
-  var StudentsState = {
+  var studentsState = {
     name: 'students',
     url: '/students',
     templateUrl:'../html/partials/studentInfo.html',
     controller: 'StudentInfoController'
   }
+  var chartState = {
+    name: 'charts',
+    url: '/charts',
+    templateUrl:'../html/partials/charts.html',
+    controller: 'ChartController'
+  }
   $stateProvider.state(importFileState);
   $stateProvider.state(aboutState);
-  $stateProvider.state(StudentsState);
+  $stateProvider.state(studentsState);
+  $stateProvider.state(chartState);
   $urlRouterProvider.otherwise('/import-file');
 });
 dbInsert = function (db, document) {
@@ -105,6 +113,69 @@ gradeStats.controller('AboutController', ['$scope', function($scope) {
   $scope.chrome=process.versions.chrome;
   $scope.electron=process.versions.electron;
   $scope.node= process.versions.node;
+}]);
+gradeStats.controller('ChartController', ['$scope', function($scope) {
+    var studentCourseStatsData = [
+      {
+        x: [2007, 2008, 2009],
+        y: [6, 10, 2],
+        error_y: {
+          type: 'data',
+          array: [1, 2, 3],
+          visible: true
+        },
+        type: 'scatter'
+      }
+    ];
+    var studentCourseStatsLayout = {
+      title: 'Course statistics graph',
+      yaxis: {title: 'Average grade of all student in the course'},
+      xaxis: {title: 'Exam period',
+              type: 'category'
+              }
+    };
+    var modeBarButtonOptions = {
+      modeBarButtonsToRemove: [ 'sendDataToCloud'],
+      displaylogo: false
+    };
+    Plotly.newPlot('studentCourseStats', studentCourseStatsData, studentCourseStatsLayout, modeBarButtonOptions);
+
+    // y axis 0.40 is like 40 %
+    var examStatsData = [
+      {
+        type: 'bar',
+        x: [1, 2, 3, 5.5, 10],
+        y: [0.40, 0.15, 0.05, 0.31, 0.04]
+      }
+    ];
+    var examStatsLayout = {
+      title: 'Exam period Jan 2017',
+      yaxis: {
+              title: 'Students percentage',
+              tickformat: ',.0%',
+              range: [0,1]
+            },
+      xaxis: {title: 'Grades'}
+    };
+    Plotly.plot('examStats', examStatsData, examStatsLayout, modeBarButtonOptions);
+
+    var studentsSuccessStatsData = [
+      {
+        type: 'bar',
+        x: [1, 2, 3, 5, 10],
+        y: [0.40, 0.15, 0.05, 0.31, 0.04]
+      }
+    ];
+    var studentsSuccessStatsLayout = {
+      title: 'Students success in a course',
+      yaxis: {
+              title: 'Students percentage',
+              tickformat: ',.0%',
+              range: [0,1]
+            },
+      xaxis: {title: 'Success after exam period'}
+    };
+    Plotly.plot('studentsSuccessStats', studentsSuccessStatsData, studentsSuccessStatsLayout, modeBarButtonOptions);
 
 }]);
 gradeStats.controller('StudentInfoController', ['$scope', function($scope) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gradestats",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Import from xls spredsheets, store and analyze student grade data",
   "main": "assets/js/main.js",
   "repository": {
@@ -28,7 +28,7 @@
     "copyright": "© 2016 - 2017 nikolio",
     "linux": {
       "icon": "assets/icons",
-      "category":"Utility",
+      "category": "Utility",
       "target": [
         "rpm",
         "deb",
@@ -59,6 +59,7 @@
     "material-design-icons": "^3.0.1",
     "nedb": "^1.8.0",
     "ng-file-upload": "^12.0.4",
+    "plotly.js": "^1.29.3",
     "unoconv": "^0.1.2",
     "xlsx": "^0.8.0"
   },