From 78639ad0a574e07191bbc3ab6c46543f6fc93a07 Mon Sep 17 00:00:00 2001
From: Madhushree Gupta <madhushree25@gmail.com>
Date: Wed, 23 Dec 2020 15:34:06 +0000
Subject: [PATCH 1/2] functions added

---
 src/data/data-provider.js | 51 ++++++++++++++++++++-------
 src/main.js               |  2 --
 src/views/Home.vue        |  3 +-
 src/views/Ins.vue         | 72 +++++++++++++++++++++------------------
 4 files changed, 78 insertions(+), 50 deletions(-)

diff --git a/src/data/data-provider.js b/src/data/data-provider.js
index ad97b0e..689faa8 100644
--- a/src/data/data-provider.js
+++ b/src/data/data-provider.js
@@ -1,22 +1,47 @@
 const data = require('./ins-data.json')
 
-//TODO: Fill with countries taken from the data object
-export function getCountries() {
-  //Dummy answer
-  return ['Kenya', 'Tanzania']
+// TODO: Fill with countries taken from the data object
+export function getCountries () {
+  let country = []
+  data.map((item, index, obj) => {
+    if (index === 0) {
+      country.push(item.country)
+    } else if (item.country !== obj[index - 1].country) {
+      country.push(item.country)
+    }
+  })
+  return country
+  // Dummy answer
+  // return ['Kenya', 'Tanzania']
 }
 
-//TODO: Fill with camps taken from the data object filtered by country
-export function getCamps(country) {
-  //Dummy answer
-  return ['Kakuma', 'Omaka']
+// TODO: Fill with camps taken from the data object filtered by country
+export function getCamps (country) {
+  let camps = []
+  const newData = data.filter(item => item.country === country)
+  newData.map(item => camps.push(item.camp))
+  return camps
+
+  // Dummy answer
+  // return ['Kakuma', 'Omaka']
 }
 
-//TODO: Fill with total lessons taken from the data object filtered by country
-export function getLessonsByYear(country) {
-  //Dummy answer
+// TODO: Fill with total lessons taken from the data object filtered by country
+export function getLessonsByYear (country) {
+  const newData = data.filter(item => item.country === country)
+  let years = []
+  let lessons = []
+  newData.map(item => {
+    years.push(item.year)
+    lessons.push(item.lessons)
+  })
   return {
-    years: ['2018', '2019', '2020'],
-    lessons: [100, 150, 130]
+    years,
+    lessons
   }
+  // Dummy answer
+  // return {
+  //   years: ['2018', '2019', '2020'],
+  //   lessons: [100, 150, 130]
+  // }
 }
diff --git a/src/main.js b/src/main.js
index 1622926..a1c815c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,8 +8,6 @@ import 'vue-select/dist/vue-select.css'
 Vue.component('row', Row)
 Vue.component('column', Column)
 
-
-
 Vue.component('v-select', vSelect)
 
 Vue.config.productionTip = false
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 85b593b..c93267b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -9,8 +9,7 @@
 <script>
 // @ is an alias to /src
 
-
 export default {
-  name: 'home',
+  name: 'home'
 }
 </script>
diff --git a/src/views/Ins.vue b/src/views/Ins.vue
index 1eb5693..9ed5f01 100644
--- a/src/views/Ins.vue
+++ b/src/views/Ins.vue
@@ -4,9 +4,9 @@
 
     <row :gutter="12">
       <column>Countries: </column>
-      <column><v-select :options="countries"></v-select></column>
+      <column><v-select :options="countries" v-on:change="onChange"></v-select></column>
       <column>Camps: </column>
-      <column><v-select :options="[]"></v-select></column>
+      <column><v-select :options="camps"></v-select></column>
       <column>Schools: </column>
       <column><v-select :options="[]"></v-select></column>
     </row>
@@ -20,46 +20,52 @@
       </row>
     </div>
 
-
   </div>
 </template>
 
 <script>
-  import LineChart from '../components/LineChart.js'
-  import {getCountries, getLessonsByYear} from '../data/data-provider.js'
+import LineChart from '../components/LineChart.js'
+import { getCountries, getLessonsByYear, getCamps } from '../data/data-provider.js'
 
-  export default {
-    components: {
-      LineChart
-    },
-    data () {
-      return {
-        chartData: {},
-        countries: [],
-        camps: []
+export default {
+  components: {
+    LineChart
+  },
+  data () {
+    return {
+      chartData: {},
+      countries: [],
+      camps: [],
+      selectedCountry: ''
+    }
+  },
+  mounted () {
+    this.countries = getCountries()
+    this.camps = getCamps('Kenya')
+    this.updateChartData()
+  },
+  methods: {
+    updateChartData () {
+      let lessonsByYear = getLessonsByYear('Kenya')
+      console.log('Years', lessonsByYear.lessons)
+      this.chartData = {
+        labels: lessonsByYear.years,
+        datasets: [
+          {
+            label: 'Kenya',
+            backgroundColor: 'transparent',
+            borderColor: '#EC7181',
+            data: lessonsByYear.lessons
+          }
+        ]
       }
     },
-    mounted () {
-      this.countries = getCountries();
-      this.updateChartData();
-    },
-    methods: {
-      updateChartData () {
-        let lessonsByYear = getLessonsByYear();
-        this.chartData = {
-          labels: lessonsByYear.years,
-          datasets: [
-            {
-              label: 'Kenya',
-              backgroundColor: 'transparent',
-              borderColor: '#EC7181',
-              data: lessonsByYear.lessons
-            }
-          ]
-        }
-      }
+    onChange () {
+      console.log('hi')
+      this.camps = getCamps(this.selectedCountry)
     }
   }
+}
 </script>
 
 <style>

From 8f3c41e3c9aeb764a3e9c20e4e059ffa5fa396a6 Mon Sep 17 00:00:00 2001
From: Madhushree Gupta <madhushree25@gmail.com>
Date: Wed, 23 Dec 2020 16:21:49 +0000
Subject: [PATCH 2/2] tried to fill chart data with real data

---
 src/components/LineChart.js | 10 ++++++++++
 src/views/Ins.vue           | 33 +++++++++++++++++++++++++++++----
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/components/LineChart.js b/src/components/LineChart.js
index 98e7639..bd7f64d 100644
--- a/src/components/LineChart.js
+++ b/src/components/LineChart.js
@@ -5,6 +5,16 @@ export default {
   extends: Line,
   mixins: [reactiveProp],
   props: ['options'],
+  options: {
+    elements: {
+      point: {
+        radius: 2
+      },
+      line: {
+        tension: 0
+      }
+    }
+  },
   mounted () {
     // this.chartData is created in the mixin.
     // If you want to pass options please create a local options object
diff --git a/src/views/Ins.vue b/src/views/Ins.vue
index 9ed5f01..efd5142 100644
--- a/src/views/Ins.vue
+++ b/src/views/Ins.vue
@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="contanier">
     <h1>INS Lessons</h1>
-
+    <h2>Number of lessons using INS</h2>
     <row :gutter="12">
       <column>Countries: </column>
-      <column><v-select :options="countries" v-on:change="onChange"></v-select></column>
+      <column><v-select :options="countries" v-model="selectedCountry" v-on:change="onChange"></v-select></column>
       <column>Camps: </column>
       <column><v-select :options="camps"></v-select></column>
       <column>Schools: </column>
@@ -47,7 +47,6 @@ export default {
   methods: {
     updateChartData () {
       let lessonsByYear = getLessonsByYear('Kenya')
-      console.log('Years', lessonsByYear.lessons)
       this.chartData = {
         labels: lessonsByYear.years,
         datasets: [
@@ -55,7 +54,21 @@ export default {
             label: 'Kenya',
             backgroundColor: 'transparent',
             borderColor: '#EC7181',
+            lineTension: 0,
+            pointStyle: 'circle',
+            pointRadius: 4,
+            pointBackgroundColor: '#FFF',
             data: lessonsByYear.lessons
+          },
+          {
+            label: 'Years',
+            backgroundColor: 'transparent',
+            borderColor: '#EC7181',
+            lineTension: 0,
+            pointStyle: 'circle',
+            pointRadius: 4,
+            pointBackgroundColor: '#FFF',
+            data: lessonsByYear.years
           }
         ]
       }
@@ -69,8 +82,20 @@ export default {
 </script>
 
 <style>
+  .contanier {
+    background-color: #f5f6fa;
+  }
+  .contanier h1, .contanier h2 {
+    text-align: left;
+    padding: 20px;
+    color: #a88ccc;
+  }
   .chart-view {
     margin-top: 50px;
   }
+  input {
+    background-color: #9cd0fa !important;
+    border: none !important
+  }
 
 </style>