Web UI developer task

src/App.vue

@@ -4,21 +4,23 @@
       <router-link to="/">Home</router-link> |
       <router-link to="/ins">INS</router-link>
     </div>
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <style>
+html {
+  background-color: #f4f0ff;
+  padding: 20px;
+}
+
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
 }
-#nav {
-  padding: 30px;
-}
 
 #nav a {
   font-weight: bold;

src/data/data-provider.js

@@ -1,22 +1,38 @@
 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 () {
+  const countries = [];
+  data.map(el => countries.push(el.country));
+  const uniqueCountries = countries.filter((item, index) => countries.indexOf(item) === index);
+  return uniqueCountries;
 }
 
-//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) {
+
+  const filteredResult = data.filter(el => el.country === country);
+  const camps = filteredResult.map(el => Object.values(el.camp).join(''));
+  const uniqueCamps = camps.filter((item, index) => camps.indexOf(item) === index);
+  return uniqueCamps;
 }
 
-//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 filteredResult = data.filter(el => el.country === country).sort((a, b) => a.years - b.years);
+  const dict = {};
+
+  for (let i = 0; i < filteredResult.length; i++) {
+    const year = filteredResult[i].year;
+    if (year in dict) {
+      dict[year] += filteredResult[i].lessons;
+    } else {
+      dict[year] = filteredResult[i].lessons;
+    }
+  };
+
   return {
-    years: ['2018', '2019', '2020'],
-    lessons: [100, 150, 130]
+    years: Object.keys(dict),
+    lessons: Object.values(dict)
   }
 }

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

@@ -2,15 +2,16 @@
   <div class="home">
     <h1>Alice interview task</h1>
 
-    <router-link to="/ins">Please upgrade the Instant Network Schools page</router-link>
+    <router-link to="/ins"
+      >Please upgrade the Instant Network Schools page</router-link
+    >
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
 
-
 export default {
-  name: 'home',
-}
+  name: "home"
+};
 </script>

src/views/Ins.css

@@ -0,0 +1,41 @@
+h1 {
+  color: #520f91;
+  text-align: left;
+  font-family: "Avenir";
+}
+
+h2 {
+  color: #520f91;
+  text-align: left;
+  font-family: "Avenir";
+}
+
+h3 {
+  text-align: left;
+  padding-left: 20px;
+  font-family: "Avenir";
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  width: 80vw;
+  padding: 20px;
+}
+
+.container:nth-child(4) {
+  background-color: white;
+}
+
+.lesson-summary {
+  align-items: center;
+  border-top: 1px dotted #c2c2c2;
+  border-bottom: 1px dotted #c2c2c2;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.growth-rate {
+  border-bottom: 1px dotted #c2c2c2;
+}

src/views/Ins.vue

@@ -1,70 +1,133 @@
 <template>
   <div>
     <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>Camps: </column>
-      <column><v-select :options="[]"></v-select></column>
-      <column>Schools: </column>
-      <column><v-select :options="[]"></v-select></column>
+      <column :lg="1">Countries: </column>
+      <column :lg="3"
+        ><v-select :options="countries" @input="changeCountry"></v-select
+      ></column>
+      <column :lg="1">Camps: </column>
+      <column :lg="3"><v-select :options="camps"></v-select></column>
+      <column :lg="1">Schools: </column>
+      <column :lg="3"><v-select :options="[]"></v-select></column>
     </row>
 
-    <div class="chart-view">
-      <row :gutter="12">
-        <column :lg="4"></column>
-        <column :lg="4">
-          <line-chart :chart-data="chartData"></line-chart>
-        </column>
-      </row>
-    </div>
-
-
+    <row :gutter="12">
+      <column :lg="8" xs-pull-12>
+        <h3>No of lessons</h3>
+        <line-chart :chart-data="chartData" :options="options"></line-chart>
+      </column>
+      <column :lg="4" xs-push-12>
+        <h2 style="color:#2c3e50; text-align:center">Summary</h2>
+        <div class="lesson-summary">
+          <h1 style="display: inline-flex">Total {{ totalLessons }}</h1>
+          <h2 style="display: inline-flex; margin-left: 10px">lessons</h2>
+          <h3 style="display: inline-flex;">in {{ current }}</h3>
+        </div>
+        <div class="growth-rate">
+          <h1 style="display: inline-flex">{{ arrow }} {{ growthRate }}%</h1>
+          <h3 style="display: inline-flex;">Compare to last year</h3>
+        </div>
+      </column>
+    </row>
   </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,
+  getCamps,
+  getLessonsByYear
+} from '../data/data-provider.js'
+import './Ins.css'
 
-  export default {
-    components: {
-      LineChart
+export default {
+  components: {
+    LineChart
+  },
+  data () {
+    return {
+      chartData: {},
+      countries: [],
+      camps: [],
+      options: {
+        responsive: true,
+        maintainAspectRatio: false
+      },
+      current: '',
+      totalLessons: '',
+      arrow: '',
+      growthRate: ''
+    }
+  },
+  mounted () {
+    this.countries = getCountries()
+    this.changeCountry('Kenya')
+    this.updateLessonSummary()
+  },
+  methods: {
+    changeCountry: function (value) {
+      this.camps = getCamps(value)
+      this.updateChartData(value)
+      this.current = value
+      this.updateLessonSummary(value)
     },
-    data () {
-      return {
-        chartData: {},
-        countries: [],
-        camps: []
+    updateChartData (value) {
+      let lessonsByYear = getLessonsByYear(value)
+      let color = ''
+
+      if (value === 'Kenya') {
+        color = '#EC7181'
+      } else if (value === 'Tanzania') {
+        color = '#2cb5f5'
+      }
+
+      this.chartData = {
+        labels: lessonsByYear.years,
+        datasets: [
+          {
+            label: value,
+            backgroundColor: 'transparent',
+            borderColor: color,
+            data: lessonsByYear.lessons,
+            pointRadius: 6,
+            pointBackgroundColor: '#FFFFFF',
+            lineTension: 0
+          }
+        ]
       }
     },
-    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
-            }
-          ]
+    updateLessonSummary (value) {
+      let lessonsByYear = getLessonsByYear(value)
+      if (lessonsByYear.lessons.length > 0) {
+        this.totalLessons = lessonsByYear.lessons.reduce(
+          (prev, curr) => prev + curr
+        )
+
+        const recentYears = lessonsByYear.lessons.slice(-2)
+        const oneYearBefore = recentYears[0]
+        const twoYearBefore = recentYears[1]
+        const growthRate = (twoYearBefore / oneYearBefore - 1) * 100
+
+        if (oneYearBefore === 0) {
+          this.arrow = '⬇'
+          this.growthRate = '100'
+        }
+
+        if (growthRate !== Infinity) {
+          if (growthRate > 0) {
+            this.arrow = '⬆'
+          } else if (growthRate < 0) {
+            this.arrow = '⬇'
+          } else if (growthRate === 0) {
+            this.arrow = ''
+          }
+          this.growthRate = growthRate.toFixed(0)
         }
       }
     }
   }
+}
 </script>
-
-<style>
-  .chart-view {
-    margin-top: 50px;
-  }
-
-</style>