Task done

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

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]
+  // }
 }

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

src/views/Home.vue

@@ -9,8 +9,7 @@
 <script>
 // @ is an alias to /src
 
-
 export default {
-  name: 'home',
+  name: 'home'
 }
 </script>

src/views/Ins.vue

@@ -1,12 +1,12 @@
 <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-select></column>
+      <column><v-select :options="countries" v-model="selectedCountry" 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,51 +20,82 @@
       </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')
+      this.chartData = {
+        labels: lessonsByYear.years,
+        datasets: [
+          {
+            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
+          }
+        ]
       }
     },
-    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>
+  .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>