From e1fb05b4b2ac301a60542408951cffdadca45900 Mon Sep 17 00:00:00 2001
From: weijianli <leevi1044@outlook.com>
Date: Sun, 29 Sep 2019 11:04:51 -0500
Subject: [PATCH] add plotting function

---
 mock/user.js                                  |  12 ++
 src/api/user.js                               |  10 +-
 src/router/index.js                           |  15 +++
 src/views/VueUploader/index.vue               |  48 ++++---
 .../dashboard/admin/components/LineChart.vue  |  60 ++++-----
 src/views/login/index.vue                     |   7 +-
 src/views/plotTest/plotTest.vue               | 121 ++++++++++++++++++
 7 files changed, 216 insertions(+), 57 deletions(-)
 create mode 100644 src/views/plotTest/plotTest.vue

diff --git a/mock/user.js b/mock/user.js
index aa896b84..9810b161 100644
--- a/mock/user.js
+++ b/mock/user.js
@@ -80,5 +80,17 @@ export default [
         data: 'success'
       }
     }
+  },
+
+  // plot prediction graph
+  {
+    url: '/testpredict',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 20000,
+        token: 'success'
+      }
+    }
   }
 ]
diff --git a/src/api/user.js b/src/api/user.js
index adac38f6..883e00b8 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -3,7 +3,7 @@ import request from '@/utils/request'
 export function login(data) {
   return request({
     url: '/user/login',
-    baseURL: 'http://localhost:8888',
+    baseURL: 'http://localhost:8010',
     method: 'post',
     data
   })
@@ -29,9 +29,9 @@ export function sendAnalyzeRequest(token) {
   return request({
     url: '/testpredict',
     method: 'get',
-    baseURL: 'http://localhost:8888',
-    authorization: token,
-    params: { token }
+    // baseURL: 'http://localhost:8010',
+    // authorization: token,
+    // params: { token }
   })
 }
 
@@ -39,7 +39,7 @@ export function sendAnalyzeOnDateRequest(token, fromDate, toDate) {
   return request({
     url: '/predictOnDate',
     method: 'get',
-    baseURL: 'http://localhost:8888',
+    baseURL: 'http://localhost:8010',
     authorization: token,
     params: { token, fromDate, toDate }
   })
diff --git a/src/router/index.js b/src/router/index.js
index 6eff2127..5aad5f3c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -110,6 +110,21 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/plotTest',
+    hidden: true,
+    component: Layout,
+    props: true,
+    children: [
+      {
+        path: 'plotTest',
+        component: () => import('@/views/plotTest/plotTest'),
+        props: true,
+        name: 'plotTest',
+        meta: { title: 'plotTest', icon: 'chart' }
+      }
+    ]
+  },
   {
     path: '/analyzing',
     hidden: true,
diff --git a/src/views/VueUploader/index.vue b/src/views/VueUploader/index.vue
index 723b6846..9a804818 100644
--- a/src/views/VueUploader/index.vue
+++ b/src/views/VueUploader/index.vue
@@ -114,7 +114,7 @@
       </div>
       <button type="button" class="btn btn-success" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">
         <i class="fa fa-arrow-up" aria-hidden="true"></i>
-        Start Upload 
+        Start Upload
       </button>
       <button type="button" class="btn btn-warning" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="onSendAnalyzeRequest">
         Analyze
@@ -531,25 +531,33 @@ export default {
     },
 
     onSendAnalyzeRequest() {
-        this.$router.push({ name: "analyze" })
-        this.listLoading = true
-        sendAnalyzeRequest().then(response => {
-        // console.log("success!")
-        // this.list = response.data.items
-        // this.listLoading = false
-        var token = response['token']
+        var k = [100, 120, 161, 134, 105, 160, 165,190,200]
+        this.$router.push({ name: "plotTest", params: {
+          past: {
+            yAxisData: [100, 120, 161, 134, 105, 160, 165, 190,200,250],
+            xAxisData: ['2019-7-13', '2019-7-14', '2019-7-15', '2019-7-16', '2019-7-17', '2019-7-18', '2019-7-19', '2019-7-20','2019-7-21','2019-7-22'] ,
+            label: 'Past',
+            colorPicked: '#999997'
+          },
+          future: {
+            yAxisData: [260, 230, 270, 285, 295, 300, 310,330],
+            xAxisData: ['2019-8-13', '2019-8-14', '2019-8-15', '2019-8-16', '2019-8-17', '2019-8-18', '2019-8-19', '2019-8-20'] ,
+            label: 'Future',
+            colorPicked: '#519e19'
+          }
+          }})
 
-        // if the response from the server indicating that it's running the analysis, then redirect to a loading view
-        if (token == 'success') {
-          this.$router.push({ name: "plot" })
+        // this.$router.push({ name: "analyze" })
+        // this.listLoading = true
+        // sendAnalyzeRequest().then(response => {
+        // var token = response['token']
+        //
+        // // if the response from the server indicating that it's running the analysis, then redirect to a loading view
+        // if (token == 'success') {
+        //   this.$router.push({ name: "plot" })
+        // }
+      // })
 
-          // sendAnalyzeRequest().then(response => {
-          //   this.list = response.data.items
-          //   this.listLoading = false
-
-          // }
-        }
-      })
     }
   }
 }
@@ -730,7 +738,7 @@ import 'vue-upload-component/dist/vue-upload-component.part.css'
 
 
 
- 
+
 .file-uploads {
   overflow: hidden;
   position: relative;
@@ -758,4 +766,4 @@ import 'vue-upload-component/dist/vue-upload-component.part.css'
   opacity: 0;
 }
 </style>
- -->
\ No newline at end of file
+ -->
diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue
index e654168d..2cd575d3 100644
--- a/src/views/dashboard/admin/components/LineChart.vue
+++ b/src/views/dashboard/admin/components/LineChart.vue
@@ -5,6 +5,7 @@
 <script>
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
+require('echarts/theme/vintage')
 import resize from './mixins/resize'
 
 export default {
@@ -61,10 +62,10 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
     },
-    setOptions({ expectedData, actualData } = {}) {
+    setOptions({ xAxisData, yAxisData, label, colorPicked} = {}) {
       this.chart.setOption({
         xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: xAxisData,
           boundaryGap: false,
           axisTick: {
             show: false
@@ -90,44 +91,45 @@ export default {
           }
         },
         legend: {
-          data: ['expected', 'actual']
+          data: [label]
         },
         series: [{
-          name: 'expected', itemStyle: {
+          name: label, itemStyle: {
             normal: {
-              color: '#FF005A',
+              color: colorPicked,
               lineStyle: {
-                color: '#FF005A',
-                width: 2
+                color: colorPicked,
+                width: 3
               }
             }
           },
           smooth: true,
           type: 'line',
-          data: expectedData,
+          data: yAxisData,
           animationDuration: 2800,
           animationEasing: 'cubicInOut'
-        },
-        {
-          name: 'actual',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
-                color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
-              }
-            }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
+        }
+        // {
+        //   name: 'actual',
+        //   smooth: true,
+        //   type: 'line',
+        //   itemStyle: {
+        //     normal: {
+        //       color: '#3888fa',
+        //       lineStyle: {
+        //         color: '#3888fa',
+        //         width: 3
+        //       },
+        //       areaStyle: {
+        //         color: '#f3f8ff'
+        //       }
+        //     }
+        //   },
+        //   data: actualData,
+        //   animationDuration: 2800,
+        //   animationEasing: 'quadraticOut'
+        // }
+      ]
       })
     }
   }
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 5fb3f6e3..47bafbac 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,7 +3,7 @@
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
 
       <div class="title-container">
-        <h3 class="title">Login Form</h3>
+        <h3 class="title">Magics Brain Login</h3>
       </div>
 
       <el-form-item prop="username">
@@ -47,7 +47,7 @@
 
       <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
 
-      <div style="position:relative">
+      <!-- <div style="position:relative">
         <div class="tips">
           <span>Username : admin</span>
           <span>Password : any</span>
@@ -60,7 +60,7 @@
         <el-button class="thirdparty-button" type="primary" @click="showDialog=true">
           Or connect with
         </el-button>
-      </div>
+      </div> -->
     </el-form>
 
     <el-dialog title="Or connect with" :visible.sync="showDialog">
@@ -170,6 +170,7 @@ export default {
               this.loading = false
             })
             .catch(() => {
+              alert("Password is incorrect")
               this.loading = false
             })
         } else {
diff --git a/src/views/plotTest/plotTest.vue b/src/views/plotTest/plotTest.vue
new file mode 100644
index 00000000..d5b5e7d9
--- /dev/null
+++ b/src/views/plotTest/plotTest.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div class="dashboard-editor-container">
+      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+        <!-- <line-chart :chart-data="{xAxisData, yAxisData, label}" /> -->
+        <h2>History Plot</h2>
+        <line-chart :chart-data="past" />
+        <h2>Prediction Plot</h2>
+        <line-chart :chart-data="future" />
+      </el-row>
+    </div>
+    <div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LineChart from '@/views/dashboard/admin/components/LineChart'
+import GithubCorner from '@/components/GithubCorner'
+import PanelGroup from '@/views/dashboard/admin/components/PanelGroup'
+import RaddarChart from '@/views/dashboard/admin/components/RaddarChart'
+import PieChart from '@/views/dashboard/admin/components/PieChart'
+import BarChart from '@/views/dashboard/admin/components/BarChart'
+import TransactionTable from '@/views/dashboard/admin/components/TransactionTable'
+import TodoList from '@/views/dashboard/admin/components/TodoList'
+import BoxCard from '@/views/dashboard/admin/components/BoxCard'
+
+import router from '@/router'
+
+const lineChartData = {
+  newVisitis: {
+    xAxisData: [120, 82, 91, 154, 162, 140, 145,230],
+    yAxisData: ['120', '82', '91', '154', '162', '140', '145','230'],
+    label: 'Future'
+  },
+}
+
+export default {
+  name: 'DashboardAdmin',
+  components: {
+    GithubCorner,
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart,
+    TransactionTable,
+    TodoList,
+    BoxCard
+  },
+  props: {
+    past: {
+      xAxisData: {
+        default: [120, 82, 91, 154, 162, 140, 145,230]
+      },
+      yAxisData: {
+        default: ['a', 'x', 'c', 'd', 'e', 'f', 'g', 'h']
+      },
+      label: {
+        default: 'Future'
+      },
+      colorPicked: {
+        default: '#999997'
+      }
+    },
+    future: {
+      xAxisData: {
+        default: [120, 82, 91, 154, 162, 140, 145,230]
+      },
+      yAxisData: {
+        default: ['a', 'x', 'c', 'd', 'e', 'f', 'g', 'h']
+      },
+      label: {
+        default: 'Future'
+      },
+      colorPicker: {
+        default: '#999997'
+      }
+    }
+
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis
+    }
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .github-corner {
+    position: absolute;
+    top: 0px;
+    border: 0;
+    right: 0;
+  }
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>