From 6e20b3ebf9e7ce0a8f840b8d702a1ea1eb8e9f46 Mon Sep 17 00:00:00 2001
From: Joanna Kang <jfrences11@gmail.com>
Date: Wed, 23 Dec 2020 14:17:04 +0000
Subject: [PATCH 1/3] feat: task 1 & Task 2 done

---
 src/data/data-provider.js | 42 +++++++++++++------
 src/main.js               |  2 -
 src/views/Home.vue        |  9 ++--
 src/views/Ins.vue         | 86 +++++++++++++++++++++------------------
 4 files changed, 81 insertions(+), 58 deletions(-)

diff --git a/src/data/data-provider.js b/src/data/data-provider.js
index ad97b0e..52bad31 100644
--- a/src/data/data-provider.js
+++ b/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)
   }
 }
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..97cf905 100644
--- a/src/views/Home.vue
+++ b/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>
diff --git a/src/views/Ins.vue b/src/views/Ins.vue
index 1eb5693..478baf1 100644
--- a/src/views/Ins.vue
+++ b/src/views/Ins.vue
@@ -4,9 +4,11 @@
 
     <row :gutter="12">
       <column>Countries: </column>
-      <column><v-select :options="countries"></v-select></column>
+      <column
+        ><v-select :options="countries" @input="changeCamps"></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>
@@ -19,52 +21,58 @@
         </column>
       </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,
+  getCamps,
+  getLessonsByYear
+} from "../data/data-provider.js";
 
-  export default {
-    components: {
-      LineChart
-    },
-    data () {
-      return {
-        chartData: {},
-        countries: [],
-        camps: []
-      }
+export default {
+  components: {
+    LineChart
+  },
+  data() {
+    return {
+      chartData: {},
+      countries: [],
+      camps: []
+    };
+  },
+  mounted() {
+    this.countries = getCountries();
+    this.updateChartData("Tanzania");
+  },
+  methods: {
+    changeCamps: function(value) {
+      this.camps = getCamps(value);
+      this.updateChartData(value);
     },
-    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
-            }
-          ]
-        }
-      }
+    updateChartData(value) {
+      let lessonsByYear = getLessonsByYear(value);
+
+      this.chartData = {
+        labels: lessonsByYear.years,
+        datasets: [
+          {
+            label: value,
+            backgroundColor: "transparent",
+            borderColor: "#EC7181",
+            data: lessonsByYear.lessons
+          }
+        ]
+      };
     }
   }
+};
 </script>
 
 <style>
-  .chart-view {
-    margin-top: 50px;
-  }
-
+.chart-view {
+  margin-top: 50px;
+}
 </style>

From 14d9e5ad5cdaec086cb4586dc04bd481237709cc Mon Sep 17 00:00:00 2001
From: Joanna Kang <jfrences11@gmail.com>
Date: Thu, 24 Dec 2020 09:40:47 +0000
Subject: [PATCH 2/3] feat: task3 Done (Data filtering, Chart styling)

---
 src/App.vue       | 12 +++---
 src/views/Ins.css | 41 +++++++++++++++++++++
 src/views/Ins.vue | 94 +++++++++++++++++++++++++++++++++--------------
 3 files changed, 115 insertions(+), 32 deletions(-)
 create mode 100644 src/views/Ins.css

diff --git a/src/App.vue b/src/App.vue
index 5e01225..c2ea8dc 100644
--- a/src/App.vue
+++ b/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;
diff --git a/src/views/Ins.css b/src/views/Ins.css
new file mode 100644
index 0000000..57fa3b4
--- /dev/null
+++ b/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;
+}
diff --git a/src/views/Ins.vue b/src/views/Ins.vue
index 478baf1..e413817 100644
--- a/src/views/Ins.vue
+++ b/src/views/Ins.vue
@@ -1,26 +1,36 @@
 <template>
   <div>
     <h1>INS Lessons</h1>
-
+    <h2>Number of lessons using INS</h2>
     <row :gutter="12">
-      <column>Countries: </column>
-      <column
-        ><v-select :options="countries" @input="changeCamps"></v-select
+      <column :lg="1">Countries: </column>
+      <column :lg="3"
+        ><v-select :options="countries" @input="changeCountry"></v-select
       ></column>
-      <column>Camps: </column>
-      <column><v-select :options="camps"></v-select></column>
-      <column>Schools: </column>
-      <column><v-select :options="[]"></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>
 
@@ -31,6 +41,7 @@ import {
   getCamps,
   getLessonsByYear
 } from "../data/data-provider.js";
+import "./Ins.css";
 
 export default {
   components: {
@@ -40,20 +51,38 @@ export default {
     return {
       chartData: {},
       countries: [],
-      camps: []
+      camps: [],
+      options: {
+        responsive: true,
+        maintainAspectRatio: false
+      },
+      current: "",
+      totalLessons: "",
+      arrow: "",
+      growthRate: ""
     };
   },
   mounted() {
     this.countries = getCountries();
-    this.updateChartData("Tanzania");
+    this.changeCountry("Kenya");
+    this.updateLessonSummary();
   },
   methods: {
-    changeCamps: function(value) {
+    changeCountry: function(value) {
       this.camps = getCamps(value);
       this.updateChartData(value);
+      this.current = value;
+      this.updateLessonSummary(value);
     },
     updateChartData(value) {
       let lessonsByYear = getLessonsByYear(value);
+      let color = "";
+
+      if (value === "Kenya") {
+        color = "#EC7181";
+      } else if (value === "Tanzania") {
+        color = "#2cb5f5";
+      }
 
       this.chartData = {
         labels: lessonsByYear.years,
@@ -61,18 +90,29 @@ export default {
           {
             label: value,
             backgroundColor: "transparent",
-            borderColor: "#EC7181",
-            data: lessonsByYear.lessons
+            borderColor: color,
+            data: lessonsByYear.lessons,
+            pointRadius: 6,
+            pointBackgroundColor: "#FFFFFF",
+            lineTension: 0
           }
         ]
       };
+    },
+    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 growthRate = (recentYears[1] / recentYears[0] - 1) * 100;
+
+        growthRate > 0 ? (this.arrow = "⬆") : (this.arrow = "⬇");
+        this.growthRate = growthRate.toFixed(0);
+      }
     }
   }
 };
 </script>
-
-<style>
-.chart-view {
-  margin-top: 50px;
-}
-</style>

From da09e9b9836f2b5d41a6beba04e168f39df8e796 Mon Sep 17 00:00:00 2001
From: Joanna Kang <jfrences11@gmail.com>
Date: Mon, 4 Jan 2021 19:32:49 +0000
Subject: [PATCH 3/3] fix: analysis result conditional rendering logic fixed

---
 src/views/Ins.vue | 87 +++++++++++++++++++++++++++--------------------
 1 file changed, 51 insertions(+), 36 deletions(-)

diff --git a/src/views/Ins.vue b/src/views/Ins.vue
index e413817..e5b7f6e 100644
--- a/src/views/Ins.vue
+++ b/src/views/Ins.vue
@@ -35,19 +35,19 @@
 </template>
 
 <script>
-import LineChart from "../components/LineChart.js";
+import LineChart from '../components/LineChart.js'
 import {
   getCountries,
   getCamps,
   getLessonsByYear
-} from "../data/data-provider.js";
-import "./Ins.css";
+} from '../data/data-provider.js'
+import './Ins.css'
 
 export default {
   components: {
     LineChart
   },
-  data() {
+  data () {
     return {
       chartData: {},
       countries: [],
@@ -56,32 +56,32 @@ export default {
         responsive: true,
         maintainAspectRatio: false
       },
-      current: "",
-      totalLessons: "",
-      arrow: "",
-      growthRate: ""
-    };
+      current: '',
+      totalLessons: '',
+      arrow: '',
+      growthRate: ''
+    }
   },
-  mounted() {
-    this.countries = getCountries();
-    this.changeCountry("Kenya");
-    this.updateLessonSummary();
+  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);
+    changeCountry: function (value) {
+      this.camps = getCamps(value)
+      this.updateChartData(value)
+      this.current = value
+      this.updateLessonSummary(value)
     },
-    updateChartData(value) {
-      let lessonsByYear = getLessonsByYear(value);
-      let color = "";
+    updateChartData (value) {
+      let lessonsByYear = getLessonsByYear(value)
+      let color = ''
 
-      if (value === "Kenya") {
-        color = "#EC7181";
-      } else if (value === "Tanzania") {
-        color = "#2cb5f5";
+      if (value === 'Kenya') {
+        color = '#EC7181'
+      } else if (value === 'Tanzania') {
+        color = '#2cb5f5'
       }
 
       this.chartData = {
@@ -89,30 +89,45 @@ export default {
         datasets: [
           {
             label: value,
-            backgroundColor: "transparent",
+            backgroundColor: 'transparent',
             borderColor: color,
             data: lessonsByYear.lessons,
             pointRadius: 6,
-            pointBackgroundColor: "#FFFFFF",
+            pointBackgroundColor: '#FFFFFF',
             lineTension: 0
           }
         ]
-      };
+      }
     },
-    updateLessonSummary(value) {
-      let lessonsByYear = getLessonsByYear(value);
+    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 growthRate = (recentYears[1] / recentYears[0] - 1) * 100;
+        const recentYears = lessonsByYear.lessons.slice(-2)
+        const oneYearBefore = recentYears[0]
+        const twoYearBefore = recentYears[1]
+        const growthRate = (twoYearBefore / oneYearBefore - 1) * 100
 
-        growthRate > 0 ? (this.arrow = "⬆") : (this.arrow = "⬇");
-        this.growthRate = growthRate.toFixed(0);
+        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>