<script type="text/javascript" src="https://unpkg.com/vue"></script>
 
  <!-- Zircle from CDN-->
  <script type="text/javascript" src="https://unpkg.com/zircle"></script>

  <script src="https://rawgit.com/juliangarnier/anime/master/anime.min.js"></script>

  <script type="text/javascript" src="https://unpkg.com/smoothie"></script>
  <link href="https://unpkg.com/zircle/dist/zircle.css" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">

<div id="app">
  <z-canvas :views="$options.components"></z-canvas>
</div>
  .theme-zircle {
    --shade-color: white;
    --primary-color: rgba(0, 0, 0, .3);
    --accent-color: rgb(136, 178, 0)
  }
  .spots-enter {
    transform: scale(0);
    transition: transform 2s
  }
  .spots-enter-active {
    transform: scale(1);
    transition: transform 2s
  }
const home = {
    template: `
    <z-view style="border-width: 7px; background-color: rgba(255,255,255, 0.1)">
      <img src="https://raw.githubusercontent.com/zircleUI/docs/gh-pages/plant.png" width="80%" alt="plant">
      <div slot="extension">
        <z-spot 
          v-for="(el, index) in options"
          :angle="-45 + (120 / 4 * index)"
          :distance="130"
          :label="el.label"
          style="border-width: 7px"
          :to-view="el.url">
          <i :class="el.icon"></i>
        </z-spot>
      </div>
    </z-view>
    `,
    data () {
      return {
        options: [
          {label: 'Growth', icon: 'fas fa-heart', url: 'core'},
          {label: 'Water', icon: 'fas fa-tint', url: 'water'},
          {label: 'Album', icon: 'fas fa-images'},
          {label: 'Settings', icon: 'fas fa-cog'},
        ]
      }
    }
  }
  const water = {
    template: `
    <z-view style="border-width: 7px" slider :progress="go">
    <span style="font-size: 65px; color: rgb(136, 178, 0)">{{go}}%</span>
      <div slot="extension">
        <z-spot 
          v-for="(el, index) in 3"
          :angle="0 + (120 / 3 * index)"
          :distance="130"
          size="s"
          style="border-width: 7px"
          to-view="core">
          <i :class="el.icon"></i>
        </z-spot>
      </div>
    </z-view>
    `,
    data () {
      return {
        go: 0,
        pause: false
      }
    },
    mounted () {
      var vm = this
      this.go = 10
      var id = setInterval(function () {
        if (vm.go >= 65) {
          vm.pause = true
        } else if (vm.pause === false) {
          vm.go++
        }
      }, 30)
    }
  }
  const core = {
    template: `
    <z-view style="border-width: 7px">
    <canvas slot="media" id="smoothie-chart" style="height:50%; width: inherit;"></canvas>
      <div slot="extension">
        <z-spot 
          v-for="(el, index) in 3"
          :angle="0 + (90 / 3 * index)"
          :distance="100"
          size="xs"
          style="border-width: 7px"
          to-view="core">
          <i :class="el.icon"></i>
        </z-spot>
      </div>
    </z-view>
    `,
    mounted () {
    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: {
        fillStyle: 'transparent',
        strokeStyle: 'transparent',
        borderVisible: false
      },
      tooltip: true,
      labels: {disabled: true}
    })
    smoothie.addTimeSeries(line1, {
      strokeStyle: 'rgb(136, 178, 0)',
      lineWidth: 5
    })
    smoothie.streamTo(document.getElementById('smoothie-chart'), 0)
  }
  }
  new Vue({
    el: '#app',
    data: {
    },
    components: {
      home, core, water
    },
    computed: {
    },
    created: function () {
    },
    methods: {
    },
    mounted () {
      this.$zircle.config({
        style: {
          theme: 'zircle',
          mode: 'light'
        }
      })
      this.$zircle.setView('home')
    }
  })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.