updated UI

forecast_dashboard/app.py

@@ -6,7 +6,6 @@
 app = Flask(__name__)
 CORS(app)
 
-
 @app.route('/addrule', methods=['POST'])
 def addrule():
     data = json.loads(request.data)

forecast_dashboard/dashboard/package.json

@@ -10,11 +10,15 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "chart.js": "^2.8.0",
     "chartist": "0.11.2",
     "google-maps": "3.3.0",
     "vue": "2.6.10",
+    "vue-chartist": "^2.2.1",
+    "vue-chartjs": "^3.4.2",
     "vue-clickaway": "2.2.2",
     "vue-github-buttons": "3.1.0",
+    "vue-google-charts": "^0.3.2",
     "vue-material": "1.0.0-beta-11",
     "vue-router": "3.0.6",
     "vue-social-sharing": "2.4.5"

forecast_dashboard/dashboard/src/assets/scss/md/_chartist.scss

@@ -25,7 +25,7 @@
     left: 0;
   }
 }
-
+svg > g > g:last-child { pointer-events: none }
 @mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
   -webkit-box-align: $ct-text-align;
   -webkit-align-items: $ct-text-align;

forecast_dashboard/dashboard/src/components/Cleanup.vue

@@ -3,22 +3,22 @@
     <div class = "md-layout">
 
     <div
-      class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-50"
+      class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-100"
       >
       <md-card>
         <md-card-header data-background-color="red">
           <h4 class="title">Record Cleanup</h4>
           <p class="category">Target model to clean-up</p>
         </md-card-header>
-        <div class="md-layout-item md-small-size-100 md-size-50">
+        <div class="md-layout-item md-small-size-100 md-size-100">
           <md-field>
             <label>Target model</label>
             <md-input v-model="target" type="text"></md-input>
           </md-field>
 
         </div>
 
-        <div class="md-layout-item md-small-size-100 md-size-50">
+        <div class="md-layout-item md-small-size-100 md-size-100">
 
         <md-button class="md-danger" id="post" v-on:click="getJson">Execute</md-button>
         <md-button id="clear" v-on:click="clear">Clear</md-button>
@@ -29,7 +29,7 @@
     </div>
 
     <div
-      class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-50"
+      class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-100"
       >
       <md-card v-if="visible">
         <md-card-header data-background-color="orange">

forecast_dashboard/dashboard/src/components/Forecast.vue

@@ -90,7 +90,9 @@ export default {
       .then(response => {
         this.accounts = response.data;
           for (var option in this.accounts){
-            this.options.push({'value':this.accounts[option],'text':this.accounts[option]})
+            if (!this.accounts[option].includes("forecast")){
+              this.options.push({'value':this.accounts[option],'text':this.accounts[option]})
+            }
           }
       })
   },

forecast_dashboard/dashboard/src/components/SidebarPlugin/SideBar.vue

@@ -50,7 +50,7 @@ export default {
     },
     backgroundImage: {
       type: String,
-      default: require("@/assets/img/sidebar-3.jpg")
+      default: require("@/assets/img/sidebar-2.jpg")
     },
     imgLogo: {
       type: String,

forecast_dashboard/dashboard/src/main.js

@@ -4,6 +4,7 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import App from "./App";
 import axios from "axios";
+import VueGoogleCharts from "vue-google-charts"
 
 // router setup
 import routes from "./routes/routes";
@@ -16,21 +17,22 @@ import Notifications from "./components/NotificationPlugin";
 // MaterialDashboard plugin
 import MaterialDashboard from "./material-dashboard";
 
-import Chartist from "chartist";
+//import Chartist from "chartist";
 
 // configure router
 const router = new VueRouter({
   routes, // short for routes: routes
   linkExactActiveClass: "nav-item active"
 });
 
-Vue.prototype.$Chartist = Chartist;
+//Vue.prototype.$Chartist = Chartist;
 
 Vue.use(VueRouter);
 Vue.use(MaterialDashboard);
 Vue.use(GlobalComponents);
 Vue.use(GlobalDirectives);
 Vue.use(Notifications);
+Vue.use(VueGoogleCharts);
 Vue.prototype.$axios = axios
 
 
@@ -40,6 +42,6 @@ new Vue({
   render: h => h(App),
   router,
   data: {
-    Chartist: Chartist
+    //Chartist: Chartist
   }
 });