updated blessed-vue in examples to 2.0.1, make components example in …

…dashboard.

examples/call-log/log.vue

@@ -34,7 +34,6 @@ export default {
     this.$refs.screen.key(['C-c'], () => {
       process.exit(0)
     })
-    console.log(this.$store)
     setInterval(() => {
       this.appendLog(`${faker.name.findName()} called from ${faker.address.state()} ${prettySeconds(faker.random.number(3600))} ago.`)
     }, 1000)

examples/call-log/package.json

@@ -14,7 +14,7 @@
     "webpack-node-externals": "^1.5.4"
   },
   "dependencies": {
-    "blessed-vue": "^2.0.0",
+    "blessed-vue": "2.0.1",
     "faker": "^4.1.0",
     "moment": "^2.18.1",
     "pretty-seconds": "^0.2.1",

examples/call-log/yarn.lock

@@ -208,9 +208,9 @@ blessed-contrib@^4.8.5:
     term-canvas "0.0.5"
     x256 ">=0.0.1"
 
-blessed-vue@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/blessed-vue/-/blessed-vue-2.0.0.tgz#124c57b56761fa08bc3a9f9ac3c078a2b96282ec"
+[email protected].1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/blessed-vue/-/blessed-vue-2.0.1.tgz#542b322d7cf8a0674f81a21729772bceef8056c0"
   dependencies:
     blessed "^0.1.81"
     blessed-contrib "^4.8.5"

examples/dashboard/dashboard.vue

@@ -1,6 +1,6 @@
 <template>
   <screen ref='screen' :smartCSR="true" :keys="true">
-    <line-graph :lineData="lineData" :style="logStyle"/>
+    <component :is="activeGraph" />
     <donut :border="{ type: 'line' }" :style="{ border: { fg: 'green' } }" label="Progress" :radius="10" :arcWidth="4" remainColor="black"  :width="50" :height="20" :top="20" left="center" :data="donut"/>
     <lcd :segmentWidth="0.06"  :segmentInterval="0.11"
      :strokeWidth="0.11"
@@ -20,28 +20,19 @@
 
 <script>
 import moment from 'moment'
-import LineGraph from './line.js'
+import Primary from './primary.vue'
+import Secondary from './secondary.vue'
 let counter = 12;
 
 export default {
   name: 'log-component',
   components: {
-    LineGraph
+    Primary,
+    Secondary
   },
   data: () => {
     return {
-      lineData: {
-         x: ['t1', 't2', 't3', 't4', 't5', 't6', 't7', 't8', 't9', 't10', 't11', 't12'],
-         y: [5, 1, 7, 5, 2, 4, 9, 1, 7, 3, 4, 5]
-      },
-      logStyle: {
-        bg: 'black',
-        fg: 'white',
-        border: {
-          fg: 'green',
-          // bg: 'red'
-        }
-      },
+      activeGraph: "Primary",
       markers: [
         {"lon" : "-37.90", "lat" : "65.90", color: "red", char: "X" }
       ],
@@ -57,12 +48,8 @@ export default {
       process.exit(0)
     })
 
-    setInterval(() => {
-      this.lineData = {
-        x: [...this.lineData.x.slice(1), `t${++counter}`],
-        y: [...this.lineData.y.slice(1), Math.floor(Math.random() * 10 % 10) + 1]
-      }
-    }, 1000)
+    this.$refs.screen.key(['f1'], () => {this.activeGraph = 'Primary'})
+    this.$refs.screen.key(['f2'], () => {this.activeGraph = 'Secondary'})
 
     setInterval(() => {
       this.lcd = moment().format("HH mm ss")

examples/dashboard/line.js

@@ -5,7 +5,7 @@ export default {
   render: function (createElement, { data: { style }, props: { lineData }}) {
     return createElement('line', {
       attrs: {
-        label: 'blah',
+        label: 'Press F2 to swap to bar graph',
         data: lineData,
         barWidth: 4,
         barSpacing: 6,

examples/dashboard/package.json

@@ -8,7 +8,7 @@
     "start": "npm run build && node bundle.js"
   },
   "devDependencies": {
-    "blessed-vue": "2.0.0",
+    "blessed-vue": "2.0.1",
     "vue-loader": "13.7.0",
     "vue-template-compiler": "2.5.13",
     "webpack": "^2.3.3",

examples/dashboard/primary.vue

@@ -0,0 +1,47 @@
+<template>
+  <line-graph :lineData="lineData" :style="logStyle"/>
+</template>
+
+<script>
+import moment from 'moment'
+import LineGraph from './line.js'
+let counter = 12;
+
+let interval
+
+export default {
+  name: 'log-component',
+  components: {
+    LineGraph
+  },
+  data: () => {
+    return {
+      logStyle: {
+        bg: 'black',
+        fg: 'white',
+        border: {
+          fg: 'green',
+          // bg: 'red'
+        }
+      },
+      lineData: {
+         x: ['t1', 't2', 't3', 't4', 't5', 't6', 't7', 't8', 't9', 't10', 't11', 't12'],
+         y: [5, 1, 7, 5, 2, 4, 9, 1, 7, 3, 4, 5]
+      }
+    }
+  },
+  mounted () {
+    interval = setInterval(() => {
+      this.lineData = {
+        x: [...this.lineData.x.slice(1), `t${++counter}`],
+        y: [...this.lineData.y.slice(1), Math.floor(Math.random() * 10 % 10) + 1]
+      }
+    }, 1000)
+  },
+  beforeDestroy () {
+    if(interval) {
+      clearInterval(interval)
+    }
+  }
+}
+</script>

examples/dashboard/secondary.vue

@@ -0,0 +1,42 @@
+<template>
+  <bar label="Press F1 to swap to line graph" :top="0" :left="0" :maxHeight="10" :width="100" :height="20" :style="logStyle" :data="barData"/>
+</template>
+
+<script>
+import moment from 'moment'
+let counter = 10;
+
+let interval
+
+export default {
+  name: 'bar-component',
+  data: () => {
+    return {
+      logStyle: {
+        bg: 'black',
+        fg: 'white',
+        border: {
+          fg: 'green',
+        }
+      },
+      barData: {
+        titles: ['t1', 't2', 't3', 't4', 't5', 't6', 't7', 't8', 't9', 't10'],
+        data: [5, 1, 7, 5, 2, 4, 7, 5, 2, 3]
+      }
+    }
+  },
+  mounted () {
+    interval = setInterval(() => {
+      this.barData = {
+        titles: [...this.barData.titles.slice(1), `t${++counter}`],
+        data: [...this.barData.data.slice(1), Math.floor(Math.random() * 10 % 10) + 1] 
+      }
+    }, 1000)
+  },
+  beforeDestroy () {
+    if(interval) {
+      clearInterval(interval)
+    }
+  }
+}
+</script>

examples/dashboard/yarn.lock

@@ -191,9 +191,9 @@ blessed-contrib@^4.8.5:
     term-canvas "0.0.5"
     x256 ">=0.0.1"
 
-[email protected].0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/blessed-vue/-/blessed-vue-2.0.0.tgz#124c57b56761fa08bc3a9f9ac3c078a2b96282ec"
+[email protected].1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/blessed-vue/-/blessed-vue-2.0.1.tgz#542b322d7cf8a0674f81a21729772bceef8056c0"
   dependencies:
     blessed "^0.1.81"
     blessed-contrib "^4.8.5"

examples/login/package.json

@@ -4,10 +4,10 @@
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
+    "node-sass": "^4.7.2",
     "rollup": "^0.41.6",
     "rollup-plugin-babel": "^2.7.1",
     "rollup-plugin-buble": "^0.15.0",
-    "node-sass": "^4.7.2",
     "rollup-plugin-vue": "^3.0.0",
     "rollup-watch": "^3.2.2",
     "vue-template-compiler": "^2.5.13"
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "blessed": "^0.1.81",
-    "blessed-vue": "2.0.0",
+    "blessed-vue": "2.0.1",
     "faker": "^4.1.0",
     "moment": "^2.18.1"
   }

examples/login/yarn.lock

@@ -350,9 +350,9 @@ blessed-contrib@^4.8.5:
     term-canvas "0.0.5"
     x256 ">=0.0.1"
 
-[email protected].0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/blessed-vue/-/blessed-vue-2.0.0.tgz#124c57b56761fa08bc3a9f9ac3c078a2b96282ec"
+[email protected].1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/blessed-vue/-/blessed-vue-2.0.1.tgz#542b322d7cf8a0674f81a21729772bceef8056c0"
   dependencies:
     blessed "^0.1.81"
     blessed-contrib "^4.8.5"