From 9fffa73aa75fc78ba131dfde005a6208909d822a Mon Sep 17 00:00:00 2001
From: Alexey Velikiy <cg@corpglory.com>
Date: Mon, 25 Oct 2021 23:31:07 +0300
Subject: [PATCH] graph begin

---
 client/src/components/Graph.vue      | 26 +++++++++++++++++++++
 client/src/components/HelloWorld.vue | 34 ----------------------------
 client/src/views/Home.vue            |  8 +++----
 client/tests/unit/example.spec.ts    |  4 ++--
 4 files changed, 32 insertions(+), 40 deletions(-)
 create mode 100644 client/src/components/Graph.vue
 delete mode 100644 client/src/components/HelloWorld.vue

diff --git a/client/src/components/Graph.vue b/client/src/components/Graph.vue
new file mode 100644
index 0000000..e54bf87
--- /dev/null
+++ b/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>
diff --git a/client/src/components/HelloWorld.vue b/client/src/components/HelloWorld.vue
deleted file mode 100644
index 878d09f..0000000
--- a/client/src/components/HelloWorld.vue
+++ /dev/null
@@ -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>
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 50d8a19..e3d2836 100644
--- a/client/src/views/Home.vue
+++ b/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>
diff --git a/client/tests/unit/example.spec.ts b/client/tests/unit/example.spec.ts
index 4b21ca7..5ea9864 100644
--- a/client/tests/unit/example.spec.ts
+++ b/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)