implement: Axios demo

client/app.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import Resource from 'vue-resource'
+import axios from 'axios'
 import NProgress from 'vue-nprogress'
 import { sync } from 'vuex-router-sync'
 import App from './App.vue'
@@ -8,7 +8,8 @@ import store from './store'
 import * as filters from './filters'
 import { TOGGLE_SIDEBAR } from 'vuex-store/mutation-types'
 
-Vue.use(Resource)
+Vue.prototype.$http = axios
+Vue.axios = axios
 Vue.use(NProgress)
 
 // Enable devtools

client/store/modules/menu/index.js

@@ -19,6 +19,14 @@ const state = {
       },
       component: lazyLoading('dashboard', true)
     },
+    {
+      name: 'Axios',
+      path: '/axiosDemo',
+      meta: {
+        icon: 'fa-rocket'
+      },
+      component: lazyLoading('axios', true)
+    },
     charts,
     uifeatures,
     components,

client/views/axios/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <div class="tile is-ancestor">
+      <div class="tile is-parent is-8">
+        <article class="tile is-child box">
+        <p class="title control" :class="{'is-loading': isloading}">
+          Price History of {{params.symbol}}
+          <span class="subtitle help is-danger is-5">
+            This demo only works under Development env
+          </span>
+        </p>
+        <chart :type="'line'" :data="stockData" :options="options"></chart>
+      </article>
+      </div>
+      <div class="tile is-parent is-4">
+        <article class="tile is-child box">
+          <div class="block">
+            <p class="title is-5">Request Params</p>
+            <a href="https://github.com/markitondemand/DataApis" class="link">Markit On Demand - Market Data APIs</a>
+          </div>
+          <div class="block">
+            <div class="control is-horizontal">
+              <div class="control-label">
+                <label class="label">Symbol</label>
+              </div>
+              <div class="control">
+                <div class="select is-fullwidth">
+                  <select v-model="params.symbol">
+                    <option v-for="s in symbols" :value="s">{{s}}</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="control is-horizontal">
+              <div class="control-label">
+                <label class="label">Days</label>
+              </div>
+              <div class="control is-fullwidth">
+                  <input class="input" min="0" max="720" type="number" v-model="params.numberOfDays">
+              </div>
+            </div>
+            <div class="control is-horizontal">
+              <div class="control-label">
+                <label class="label">Period</label>
+              </div>
+              <div class="control">
+                <div class="select is-fullwidth">
+                  <select v-model="params.dataPeriod">
+                    <option v-for="p in periods" :value="p">{{p}}</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="control is-horizontal">
+              <div class="control-label">
+                <label class="label"></label>
+              </div>
+              <div class="control">
+                <button class="button is-primary" :class="{'is-loading': isloading}" @click="loadData">Refresh</button>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chart from 'vue-bulma-chartjs'
+
+const api = '/MODApis/Api/v2/InteractiveChart/json'
+
+export default {
+  components: {
+    Chart
+  },
+
+  data () {
+    return {
+      params: {
+        symbol: 'AAPL',
+        numberOfDays: 450,
+        dataPeriod: 'Month'
+      },
+      symbols: ['AAPL', 'MSFT', 'JNJ', 'GOOG'],
+      periods: ['Day', 'Week', 'Month', 'Quarter', 'Year'],
+      data: [],
+      labels: [],
+      isloading: false,
+      options: {
+        legend: { display: false },
+        animation: { duration: 0 },
+        scales: {
+          xAxes: [{
+            type: 'time',
+            time: {
+              unit: 'month'
+            }
+          }]
+        }
+      }
+    }
+  },
+
+  computed: {
+    stockData () {
+      return {
+        labels: this.labels,
+        datasets: [{
+          fill: false,
+          lineTension: 0.25,
+          data: this.data,
+          label: 'Close price',
+          pointBackgroundColor: '#1fc8db',
+          pointBorderWidth: 1
+        }]
+      }
+    }
+  },
+
+  methods: {
+    loadData () {
+      this.isloading = true
+      this.labels.length = 0
+      this.data.length = 0
+      this.$http({
+        url: api,
+        transformResponse: [(data) => {
+          return JSON.parse(data.replace(/T00:00:00/g, ''))
+        }],
+        params: {
+          parameters: {
+            'Normalized': false,
+            'NumberOfDays': parseInt(this.params.numberOfDays),
+            'DataPeriod': this.params.dataPeriod,
+            'Elements': [{'Symbol': this.params.symbol, 'Type': 'price', 'Params': ['c']}]
+          }
+        }
+      }).then((response) => {
+        let dates = response.data.Dates
+        let price = response.data.Elements[0].DataSeries.close.values
+        this.data.push(...price)
+        this.labels.push(...dates)
+        this.isloading = false
+      }).catch((error) => {
+        console.log(error)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

config/index.js

@@ -24,7 +24,12 @@ module.exports = {
     autoOpenBrowser: true,
     assetsSubDirectory: 'assets',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+        '/MODApis': {
+            target: 'http://dev.markitondemand.com',
+            changeOrigin: true
+        }
+    },
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README
     // (https://github.com/webpack/css-loader#sourcemaps)

package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "animate.css": "3.5.2",
     "animejs": "1.1.3",
+    "axios": "^0.15.3",
     "bulma": "0.3.1",
     "font-awesome": "4.7.0",
     "mdi": "1.7.22",
@@ -64,9 +65,8 @@
     "vue-cleave": "1.1.1",
     "vue-handsontable": "github:vue-bulma/handsontable",
     "vue-lory": "0.0.4",
-    "vue-nprogress": "0.1.4",
+    "vue-nprogress": "0.1.5",
     "vue-peity": "0.5.0",
-    "vue-resource": "1.0.3",
     "vue-router": "2.1.1",
     "vuex": "2.1.1",
     "vuex-router-sync": "4.0.2",

yarn.lock

@@ -294,6 +294,12 @@ aws4@^1.2.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axios@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.15.3.tgz#2c9d638b2e191a08ea1d6cc988eadd6ba5bdc053"
+  dependencies:
+    follow-redirects "1.0.0"
+
 babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
@@ -2575,6 +2581,12 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.0.0.tgz#8e34298cbd2e176f254effec75a1c78cc849fd37"
+  dependencies:
+    debug "^2.2.0"
+
 [email protected]:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
@@ -6953,20 +6965,16 @@ [email protected]:
   dependencies:
     lory.js "^2.2.1"
 
-[email protected].4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/vue-nprogress/-/vue-nprogress-0.1.4.tgz#5f839ec9ad99cbc41b632999301e126c96a22e2c"
+[email protected].5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/vue-nprogress/-/vue-nprogress-0.1.5.tgz#574b412f1034012daaf46299d5505d5812f406e6"
   dependencies:
     nprogress "0.2.0"
 
 [email protected]:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/vue-peity/-/vue-peity-0.5.0.tgz#0729d04c6850c218cba4d6d7219bf1cfe5a3bfcb"
 
-[email protected]:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/vue-resource/-/vue-resource-1.0.3.tgz#8d52d0d8a9ed5f2ae704c68d530c84ceaf97be14"
-
 [email protected]:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.1.1.tgz#10c31bbdcb6da92bd3e0223fa12345e73018625a"