<template>   
  <v-app class= "grey lighten-2">
    
    <Navbar/>
    <v-main class="grey lighten-2" align="center">
      <gRPCclient v-on:newPoint="addPoint($event)" />
      <ScatterPlot ref = "scatter" :Sdata="loadedData" />
    </v-main>
  </v-app>
</template>

<script>
import Navbar from './components/Navbar';
import gRPCclient from './components/gRPCclient'
import ScatterPlot from './components/ScatterPlot'
export default {
  name: 'App',

  components: {
    Navbar,
    gRPCclient,
    ScatterPlot
  },
  created(){
    this.loadData();
  },
  data(){
    return {
      loadedData:Array
    }
  },
  methods: {
    loadData: function(){
      this.loadedData = [10, 71, 78, 25, 36, 92];
    },
    addPoint: function(point){
      console.log("Received new point from app.vue, ID:" + point.getId());
      this.loadedData.push(10);
      this.$refs.scatter.calculatePath();
    }
  }
  
};
</script>