admin dashboard added

.spyproject/config/workspace.ini

@@ -6,5 +6,5 @@ save_non_project_files = False
 
 [main]
 version = 0.2.0
-recent_files = ['app.py', 'request.py', 'models\\sampleModel.py', '.gitignore', 'UI\\index.html', 'dataset\\cleanDs.py']
+recent_files = ['app.py', 'request.py', 'requirements.txt', 'templates\\index.html']
 

app.py

@@ -1 +1,16 @@
 # Importing
+import numpy as np
+from flask import Flask, request, jsonify, render_template
+import pickle
+
+app = Flask(__name__)
+
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+
+
+if __name__ == "__main__":
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,12 @@
+Flask==1.1.1
+gunicorn==19.9.0
+itsdangerous==1.1.0
+Jinja2==2.10.1
+MarkupSafe==1.1.1
+Werkzeug==0.15.5
+numpy>=1.9.2
+scipy>=0.15.1
+scikit-learn>=0.18
+matplotlib>=1.4.3
+pandas>=0.19
+

static/assets/js/dashboard.js

@@ -0,0 +1,125 @@
+( function ( $ ) {
+    "use strict";
+
+
+// const brandPrimary = '#20a8d8'
+const brandSuccess = '#4dbd74'
+const brandInfo = '#63c2de'
+const brandDanger = '#f86c6b'
+
+function convertHex (hex, opacity) {
+  hex = hex.replace('#', '')
+  const r = parseInt(hex.substring(0, 2), 16)
+  const g = parseInt(hex.substring(2, 4), 16)
+  const b = parseInt(hex.substring(4, 6), 16)
+
+  const result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'
+  return result
+}
+
+function random (min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+    var elements = 27
+    var data1 = []
+    var data2 = []
+    var data3 = []
+
+    for (var i = 0; i <= elements; i++) {
+      data1.push(random(50, 200))
+      data2.push(random(80, 100))
+      data3.push(65)
+    }
+
+
+    //Traffic Chart
+    var ctx = document.getElementById( "trafficChart" );
+    //ctx.height = 200;
+    var myChart = new Chart( ctx, {
+        type: 'line',
+        data: {
+            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
+            datasets: [
+            {
+              label: 'My First dataset',
+              backgroundColor: convertHex(brandInfo, 10),
+              borderColor: brandInfo,
+              pointHoverBackgroundColor: '#fff',
+              borderWidth: 2,
+              data: data1
+          },
+          {
+              label: 'My Second dataset',
+              backgroundColor: 'transparent',
+              borderColor: brandSuccess,
+              pointHoverBackgroundColor: '#fff',
+              borderWidth: 2,
+              data: data2
+          },
+          {
+              label: 'My Third dataset',
+              backgroundColor: 'transparent',
+              borderColor: brandDanger,
+              pointHoverBackgroundColor: '#fff',
+              borderWidth: 1,
+              borderDash: [8, 5],
+              data: data3
+          }
+          ]
+        },
+        options: {
+            //   maintainAspectRatio: true,
+            //   legend: {
+            //     display: false
+            // },
+            // scales: {
+            //     xAxes: [{
+            //       display: false,
+            //       categoryPercentage: 1,
+            //       barPercentage: 0.5
+            //     }],
+            //     yAxes: [ {
+            //         display: false
+            //     } ]
+            // }
+
+
+            maintainAspectRatio: true,
+            legend: {
+                display: false
+            },
+            responsive: true,
+            scales: {
+                xAxes: [{
+                  gridLines: {
+                    drawOnChartArea: false
+                  }
+                }],
+                yAxes: [ {
+                      ticks: {
+                        beginAtZero: true,
+                        maxTicksLimit: 5,
+                        stepSize: Math.ceil(250 / 5),
+                        max: 250
+                      },
+                      gridLines: {
+                        display: true
+                      }
+                } ]
+            },
+            elements: {
+                point: {
+                  radius: 0,
+                  hitRadius: 10,
+                  hoverRadius: 4,
+                  hoverBorderWidth: 3
+              }
+          }
+
+
+        }
+    } );
+
+
+} )( jQuery );