From c11b11dd21208929df489402c59a59824352cdb4 Mon Sep 17 00:00:00 2001
From: Phil Taprogge <signup@lightweaver.info>
Date: Fri, 21 Aug 2020 12:16:09 +0100
Subject: [PATCH] Refactor frontend to reduce duplication

---
 web/src/components/App.vue              |  6 --
 web/src/components/GraphsComponent.vue  | 96 +++++++++++++++++++++++++
 web/src/components/Home.vue             |  2 +-
 web/src/components/WikipediaCharts.vue  | 69 ++----------------
 web/src/components/WiktionaryCharts.vue | 69 ++----------------
 web/src/script/store.js                 | 24 +++----
 6 files changed, 121 insertions(+), 145 deletions(-)
 create mode 100644 web/src/components/GraphsComponent.vue

diff --git a/web/src/components/App.vue b/web/src/components/App.vue
index f5ccba4..f6f72a3 100644
--- a/web/src/components/App.vue
+++ b/web/src/components/App.vue
@@ -17,12 +17,6 @@
 
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
-<!--
-          <b-nav-form>
-            <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
-            <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
-          </b-nav-form>
--->
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
diff --git a/web/src/components/GraphsComponent.vue b/web/src/components/GraphsComponent.vue
new file mode 100644
index 0000000..57532f1
--- /dev/null
+++ b/web/src/components/GraphsComponent.vue
@@ -0,0 +1,96 @@
+<template>
+    <div>
+      <h2>Top 15 Updated {{ this.category }} Edits</h2>
+      <div class="chart" ref="chartdiv" style="min-height:500px;"></div>
+      <div class="chart" ref="piechartdiv" style="min-height:500px;"></div>
+    </div>
+</template>
+
+<script>
+import * as am4core from "@amcharts/amcharts4/core";
+import * as am4charts from "@amcharts/amcharts4/charts";
+import am4themes_animated from "@amcharts/amcharts4/themes/animated";
+
+am4core.useTheme(am4themes_animated);
+
+export default {
+  name: 'WikiCharts',
+  props: ['category'],
+  components: {
+  },
+  created() {
+      this.$store.dispatch("refresh");
+      switch(this.category) {
+          case "wikipedia":
+            this.unwatch= this.$store.watch(
+                (state, getters) => getters.wikiyStats,
+                (oldValue, newValue) => {
+                    this.wikichart.data = this.$store.getters.wikiStats;
+                    this.piechart.data = this.$store.getters.wikiStats;
+                });
+              break;
+          case "wiktionary":
+            this.unwatch= this.$store.watch(
+                (state, getters) => getters.wiktionaryStats,
+                (oldValue, newValue) => {
+                    this.wikichart.data = this.$store.getters.wiktionaryStats;
+                    this.piechart.data = this.$store.getters.wiktionaryStats;
+                });
+              break;
+      }
+  },
+  mounted() {
+    let wikichart = am4core.create(this.$refs.chartdiv, am4charts.XYChart3D);
+    let piechart = am4core.create(this.$refs.piechartdiv, am4charts.PieChart);
+
+    switch(this.category) {
+        case "wikipedia":
+            wikichart.data = this.$store.getters.wikiStats;
+            piechart.data = this.$store.getters.wikiStats;
+            break;
+        case "wiktionary":
+            wikichart.data = this.$store.getters.wiktionaryStats;
+            piechart.data = this.$store.getters.wiktionaryStats;
+            break;
+    }
+
+    wikichart.paddingRight = 20;
+    piechart.paddingRight = 20;
+
+    wikichart.responsive.enabled = true;
+    piechart.responsive.enabled = true;
+
+    let pieSeries = piechart.series.push(new am4charts.PieSeries());
+    pieSeries.dataFields.value = "Value";
+    pieSeries.dataFields.category = "Description";
+
+    let categoryAxis = wikichart.xAxes.push(new am4charts.CategoryAxis());
+    categoryAxis.dataFields.category = "Description";
+
+    let valueAxis = wikichart.yAxes.push(new am4charts.ValueAxis());
+    valueAxis.text = "Counter"
+    valueAxis.renderer.minWidth = 15;
+
+    let series = wikichart.series.push(new am4charts.ColumnSeries3D());
+    series.dataFields.valueY = "Value";
+    series.dataFields.categoryX = "Description";
+    series.name = "Update Events";
+    series.tooltipText = "{name}: [bold]{valueY}[/]";
+    wikichart.cursor = new am4charts.XYCursor();
+    this.wikichart = wikichart;
+    this.piechart= piechart;
+  },
+  beforeDestroy() {
+    this.unwatch();
+    if (this.piechart) {
+      this.piechart.dispose();
+    }
+    if (this.wikichart) {
+      this.wikichart.dispose();
+    }
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/web/src/components/Home.vue b/web/src/components/Home.vue
index 30f1cc9..d352451 100644
--- a/web/src/components/Home.vue
+++ b/web/src/components/Home.vue
@@ -3,7 +3,7 @@
   <div>
     <b-jumbotron header="Welcome to Pleiades!" lead="Showing you Wikimedia Stats since the Pandemic!">
         <p>
-            Pleiades is a stats aggregator that offers a glimps into the editing activity of the world's editors of
+            Pleiades is a stats aggregator that offers a glimpse into the editing activity of the world's editors of
             Wikipedia, Wiktionary and associated Wikis.
         </p>
         <p>
diff --git a/web/src/components/WikipediaCharts.vue b/web/src/components/WikipediaCharts.vue
index 783310e..2b55125 100644
--- a/web/src/components/WikipediaCharts.vue
+++ b/web/src/components/WikipediaCharts.vue
@@ -3,81 +3,25 @@
     <h1>Wikipedia Update Statistics</h1>
     <DaysDropdown></DaysDropdown>
     <div>Total updates since <em>{{timestamp}}</em>: <strong>{{total}}</strong></div>
-    <div>
-      <h2>Top 15 Updated Wikipedias</h2>
-      <div class="chart" ref="chartdiv" style="min-height:500px;"></div>
-      <div class="chart" ref="piechartdiv" style="min-height:500px;"></div>
-    </div>
+    <WikiCharts category="wikipedia"></WikiCharts>
   </div>
 </template>
 
 <script>
-import * as am4core from "@amcharts/amcharts4/core";
-import * as am4charts from "@amcharts/amcharts4/charts";
-import am4themes_animated from "@amcharts/amcharts4/themes/animated";
-
 import { mapState } from "vuex";
 
 import DaysDropdown from './DaysDropdown.vue';
-
-am4core.useTheme(am4themes_animated);
+import WikiCharts from './GraphsComponent.vue';
 
 export default {
   name: 'WikipediaCharts',
   components: {
     DaysDropdown,
+    WikiCharts,
   },
-  created() {
-      this.$store.dispatch("refresh");
-      this.unwatch= this.$store.watch(
-          (state, getters) => getters.wikiStats,
-          (oldValue, newValue) => {
-            this.wikichart.data = this.$store.getters.wikiStats;
-            this.piechart.data = this.$store.getters.wikiStats;
-          });
-  },
-  mounted() {
-    let wikichart = am4core.create(this.$refs.chartdiv, am4charts.XYChart3D);
-    let piechart = am4core.create(this.$refs.piechartdiv, am4charts.PieChart);
-
-    wikichart.data = this.$store.getters.wikiStats;
-    piechart.data = this.$store.getters.wikiStats;
-
-    wikichart.paddingRight = 20;
-    piechart.paddingRight = 20;
-
-    wikichart.responsive.enabled = true;
-    piechart.responsive.enabled = true;
-
-    let pieSeries = piechart.series.push(new am4charts.PieSeries());
-    pieSeries.dataFields.value = "Value";
-    pieSeries.dataFields.category = "Description";
-
-    let categoryAxis = wikichart.xAxes.push(new am4charts.CategoryAxis());
-    categoryAxis.dataFields.category = "Description";
-
-    let valueAxis = wikichart.yAxes.push(new am4charts.ValueAxis());
-    valueAxis.text = "Counter"
-    valueAxis.renderer.minWidth = 15;
-
-    let series = wikichart.series.push(new am4charts.ColumnSeries3D());
-    series.dataFields.valueY = "Value";
-    series.dataFields.categoryX = "Description";
-    series.name = "Update Events";
-    series.tooltipText = "{name}: [bold]{valueY}[/]";
-    wikichart.cursor = new am4charts.XYCursor();
-    this.wikichart = wikichart;
-    this.piechart= piechart;
-  },
-  beforeDestroy() {
-    this.unwatch();
-    if (this.piechart) {
-      this.piechart.dispose();
-    }
-    if (this.wikichart) {
-      this.wikichart.dispose();
-    }
-  },
+  created() {},
+  mounted() {},
+  beforeDestroy() {},
   computed: mapState({
       total: state => state.total,
       timestamp: state => state.timestamp,
@@ -87,7 +31,6 @@ export default {
 
 <style scoped>
   .container {
-/*    width: 600px;*/
     margin: 50px auto;
     text-align: center;
   }
diff --git a/web/src/components/WiktionaryCharts.vue b/web/src/components/WiktionaryCharts.vue
index f55d5cf..3c1feb2 100644
--- a/web/src/components/WiktionaryCharts.vue
+++ b/web/src/components/WiktionaryCharts.vue
@@ -3,81 +3,25 @@
     <h1>Wiktionary Update Statistics</h1>
     <DaysDropdown></DaysDropdown>
     <div>Total updates since <em>{{timestamp}}</em>: <strong>{{total}}</strong></div>
-    <div>
-      <h2>Top 15 Updated Wiktionaries</h2>
-      <div class="chart" ref="chartdiv" style="min-height:500px;"></div>
-      <div class="chart" ref="piechartdiv" style="min-height:500px;"></div>
-    </div>
+    <WikiCharts category="wiktionary"></WikiCharts>
   </div>
 </template>
 
 <script>
-import * as am4core from "@amcharts/amcharts4/core";
-import * as am4charts from "@amcharts/amcharts4/charts";
-import am4themes_animated from "@amcharts/amcharts4/themes/animated";
-
 import { mapState } from "vuex";
 
 import DaysDropdown from './DaysDropdown.vue';
-
-am4core.useTheme(am4themes_animated);
+import WikiCharts from './GraphsComponent.vue';
 
 export default {
   name: 'WiktionaryCharts',
   components: {
     DaysDropdown,
+    WikiCharts,
   },
-  created() {
-    this.$store.dispatch("refresh");
-    this.unwatch= this.$store.watch(
-        (state, getters) => getters.wiktionaryStats,
-        (oldValue, newValue) => {
-          this.wikichart.data = this.$store.getters.wiktionaryStats;
-          this.piechart.data = this.$store.getters.wiktionaryStats;
-        });
-  },
-  mounted() {
-    let wikichart = am4core.create(this.$refs.chartdiv, am4charts.XYChart3D);
-    let piechart = am4core.create(this.$refs.piechartdiv, am4charts.PieChart);
-
-    wikichart.data = this.$store.getters.wiktionaryStats;
-    piechart.data = this.$store.getters.wiktionaryStats;
-
-    wikichart.paddingRight = 20;
-    piechart.paddingRight = 20;
-
-    wikichart.responsive.enabled = true;
-    piechart.responsive.enabled = true;
-
-    let pieSeries = piechart.series.push(new am4charts.PieSeries());
-    pieSeries.dataFields.value = "Value";
-    pieSeries.dataFields.category = "Description";
-
-    let categoryAxis = wikichart.xAxes.push(new am4charts.CategoryAxis());
-    categoryAxis.dataFields.category = "Description";
-
-    let valueAxis = wikichart.yAxes.push(new am4charts.ValueAxis());
-    valueAxis.text = "Counter"
-    valueAxis.renderer.minWidth = 15;
-
-    let series = wikichart.series.push(new am4charts.ColumnSeries3D());
-    series.dataFields.valueY = "Value";
-    series.dataFields.categoryX = "Description";
-    series.name = "Update Events";
-    series.tooltipText = "{name}: [bold]{valueY}[/]";
-    wikichart.cursor = new am4charts.XYCursor();
-    this.wikichart = wikichart;
-    this.piechart= piechart;
-  },
-  beforeDestroy() {
-    this.unwatch();
-    if (this.piechart) {
-      this.piechart.dispose();
-    }
-    if (this.wikichart) {
-      this.wikichart.dispose();
-    }
-  },
+  created() {},
+  mounted() {},
+  beforeDestroy() {},
   computed: mapState({
       total: state => state.total,
       timestamp: state => state.timestamp,
@@ -87,7 +31,6 @@ export default {
 
 <style scoped>
   .container {
-    width: 600px;
     margin: 50px auto;
     text-align: center;
   }
diff --git a/web/src/script/store.js b/web/src/script/store.js
index 6fea56f..c7f6c3f 100644
--- a/web/src/script/store.js
+++ b/web/src/script/store.js
@@ -180,18 +180,18 @@ export default new Vuex.Store({
         },
         fetchDays({ commit, state }) {
             if ((state.days == undefined) || (state.days.length == 0)) {
-                          fetch('/api/days', {mode: 'cors'})
-                //              fetch('http://localhost:8080/api/days', {mode: 'cors'})
-                            .then(res => { return res.json()})
-                            .then(statsJSON => {
-                                let ds = statsJSON.reverse();
-                                let update = [];
-                                for (const d of ds) {
-                                    let dob = new Date(d * 86400 * 1000);
-                                    update.push({id: d, date: dob.toISOString().substring(0,10)});
-                                }
-                                commit("updateDays", update);
-                            });
+//                fetch('http://localhost:8080/api/days', {mode: 'cors'})
+                fetch('/api/days', {mode: 'cors'})
+                .then(res => { return res.json()})
+                .then(statsJSON => {
+                    let ds = statsJSON.reverse();
+                    let update = [];
+                    for (const d of ds) {
+                        let dob = new Date(d * 86400 * 1000);
+                        update.push({id: d, date: dob.toISOString().substring(0,10)});
+                    }
+                    commit("updateDays", update);
+                });
             }
         },
     },