graph begin

client/src/components/Graph.vue

@@ -0,0 +1,26 @@
+<template>
+  <div id="chart">
+    asdsa
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+// TODO: place chartwerk
+// TODO: fetch data from API
+// TODO: set height
+export default defineComponent({
+  name: 'Graph',
+  props: {},
+});
+</script>
+
+<style scoped lang="scss">
+#chart {
+  margin: auto;
+  width: 80%;
+  height: 50%;
+  background: red;
+}
+</style>

client/src/components/HelloWorld.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>  
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

client/src/views/Home.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+    <graph />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+import Graph from '@/components/Graph.vue';
 
 export default defineComponent({
   name: 'Home',
-  components: {
-    HelloWorld,
+  components: {    
+    Graph,
   },
 });
 </script>

client/tests/unit/example.spec.ts

@@ -1,10 +1,10 @@
 import { shallowMount } from '@vue/test-utils'
-import HelloWorld from '@/components/HelloWorld.vue'
+import Graph from '@/components/Graph.vue'
 
 describe('HelloWorld.vue', () => {
   it('renders props.msg when passed', () => {
     const msg = 'new message'
-    const wrapper = shallowMount(HelloWorld, {
+    const wrapper = shallowMount(Graph, {
       props: { msg }
     })
     expect(wrapper.text()).toMatch(msg)