<template>   
  <v-app class= "grey lighten-2">
    
    <Navbar/>
    <v-main class="grey lighten-2" align="center">
      <!-- set to true for normal grpcClient -->
      <gRPCclient v-if="false"  v-on:newPoint="addPoint($event)" />
      <gRPCDaprClient v-if="true" v-on:newPoint="addPoint($event)" />

      <ScatterPlot ref = "scatter"/>
    </v-main>
  </v-app>
</template>

<script>
import Navbar from './components/Navbar';
import gRPCDaprClient from './components/gRPCDaprClient'
import gRPCclient from './components/gRPCclient'
import ScatterPlot from './components/ScatterPlot'

export default {
  name: 'App',

  components: {
    Navbar,
    gRPCDaprClient,
    gRPCclient,
    ScatterPlot  },
  created(){    
    
  },
  data(){
    return {
    }
  },
  methods: {
    addPoint: function(point){
      this.$refs.scatter.addPointToPlot(point);
    }
  }
  
};
</script>