Status

Description

This view use the third-party library Smoothie-charts to simulate a status monitor chart. The code should be familliar for you as is similiar to previous views, specially family view.

Reference

Family view

Code

Create a status.vue file inside the views folder and paste the following code:

<template>
  <z-view label="Home status" style="background-color: black">
  <canvas slot="media" id="smoothie-chart" style="height:50%; width: inherit;"></canvas>
  <div slot="extension">
         <z-spot
          :angle="-45"
          size="m"
          :distance="120"
          label="Events"
          to-view="logs">
          15
        </z-spot>
    </div>
  </z-view>
</template>
<script>
import {TimeSeries, SmoothieChart} from 'smoothie'
export default {
  data () {
    return {
      scene: 'Night scene'
    }
  },
  mounted () {
    // Random data
    var line1 = new TimeSeries()
    // Add random data points at irregular intervals
    var maxYValue = 10000
    var addValueLoop = function () {
      setTimeout(function () {
        // Generate a random value, centered around zero, raised to the power of 5
        // so that larger values occur less frequently
        var value = Math.pow(Math.random() * 2 - 1, 5) * maxYValue
        line1.append(new Date().getTime(), value)
        addValueLoop()
      }, Math.random() * 500)
    }
    addValueLoop()
    var smoothie = new SmoothieChart({
      grid: {
        strokeStyle: 'transparent',
        borderVisible: false
      },
      tooltip: true,
      labels: {disabled: true}
    })
    smoothie.addTimeSeries(line1, {
      strokeStyle: 'rgb(0, 255, 0)',
      fillStyle: 'rgba(0, 255, 0, 0.4)',
      lineWidth: 2
    })
    smoothie.streamTo(document.getElementById('smoothie-chart'), 100)
  }
}
</script>

Smoothie-charts.js

You have to install Smoothie Charts in your project. Open a terminal, and inside your proyect folder type:

npm install smoothie
#or
yarn add smoothie

Wiring up

After you finish this view you need to import it in the App.vueas we did it here

# Status

# Description

# Reference

# Code