Add solar data history

src/components/BarChart.vue

@@ -17,7 +17,23 @@ export default {
       type: Boolean,
       default: false
     },
-    stacked: Boolean
+    height: {
+      type: [String, Number],
+      default: 250
+    },
+    spaceRatio: {
+      type: Number,
+      default: 0.3
+    },
+    yMarkers: {
+      type: Array
+    },
+    stacked: Boolean,
+    colors: Array,
+    yAxisMode: {
+      type: String,
+      default: 'span'
+    }
   },
   methods: {
     updateChart () {
@@ -47,17 +63,20 @@ export default {
       this.chart = new Chart(this.$refs.chart, {
         data: {
           labels,
-          datasets: datasets
+          datasets: datasets,
+          yMarkers: this.yMarkers
         },
         type: 'bar',
-        height: 250,
+        height: parseInt(this.height),
+        colors: this.colors,
         barOptions: {
-          spaceRatio: 0.3,
+          spaceRatio: this.spaceRatio,
           stacked: this.stacked
         },
         axisOptions: {
           xAxisMode: 'tick',
-          xIsSeries: this.xIsSeries
+          xIsSeries: this.xIsSeries,
+          yAxisMode: this.yAxisMode
         }
       })
     }

src/components/LineChart.vue

@@ -28,6 +28,18 @@ export default {
     suffixY: {
       type: String,
       default: ''
+    },
+    height: {
+      type: [String, Number],
+      default: 250
+    },
+    spline: {
+      type: [String, Number],
+      default: 0
+    },
+    regionFill: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {
@@ -61,7 +73,7 @@ export default {
           datasets: datasets
         },
         type: 'line',
-        height: 250,
+        height: parseInt(this.height),
         colors: ['red'],
         axisOptions: {
           xAxisMode: 'tick',
@@ -69,7 +81,8 @@ export default {
         },
         lineOptions: {
           hideDots: true,
-          regionFill: true
+          regionFill: this.regionFill,
+          spline: parseInt(this.spline)
         },
         tooltipOptions: {
           formatTooltipX: d => d + this.suffixX,

src/components/NavBar.vue

@@ -8,7 +8,7 @@
       <b-navbar-item class="clock" tag="div">
         <font-awesome-icon :icon="['far', 'clock']" class="faicon" /> {{ clock }}
       </b-navbar-item>
-      <b-navbar-item tag="div">
+      <b-navbar-item tag="router-link" to="/solar_history">
         <SolarData />
       </b-navbar-item>
     </template>

src/router.js

@@ -17,6 +17,7 @@ import SotaSpots from './views/SotaSpots.vue'
 import RBNSpots from './views/RBNSpots.vue'
 import Alerts from './views/Alerts.vue'
 import NewPhotos from './views/NewPhotos.vue'
+import SolarHistory from './views/SolarHistory.vue'
 
 Vue.use(Router)
 
@@ -167,6 +168,10 @@ let router = new Router({
       path: '/new_photos',
       component: NewPhotos
     },
+    {
+      path: '/solar_history',
+      component: SolarHistory
+    },
     {
       path: '*',
       component: NotFound,

src/views/SolarHistory.vue

@@ -0,0 +1,87 @@
+<template>
+  <PageLayout>
+    <template v-slot:title>Solar Data</template>
+    <template>
+      <section class="section">
+        <div class="container content">
+          <LineChart class="solar-chart" v-if="solarHistory !== null" :data="solarHistory" labelField="dateFormatted" valueField="sfi" valueFieldB="r" name="SFI" nameB="SN" :xIsSeries="true" :regionFill="false" spline="1" height="400" />
+          <BarChart class="solar-chart" v-if="solarHistory !== null" :data="solarHistory" labelField="dateFormatted" valueField="k" name="K" :xIsSeries="true" spline="1" height="200" :spaceRatio="0.5" :colors="['blue']" />
+        </div>
+      </section>
+    </template>
+  </PageLayout>
+</template>
+
+<script>
+import axios from 'axios'
+import moment from 'moment'
+
+import PageLayout from '../components/PageLayout.vue'
+import LineChart from '../components/LineChart.vue'
+import BarChart from '../components/BarChart.vue'
+
+export default {
+  name: 'SolarHistory',
+  components: { PageLayout, LineChart, BarChart },
+  methods: {
+    loadHistory () {
+      // Fetch data from last 30 days
+      axios.get('https://api.sotl.as/solardata/history/720')
+        .then(response => {
+          this.loadingComponent.close()
+
+          // Average data per day
+          let dataPerDay = {}
+          response.data.forEach(ent => {
+            if (!dataPerDay[ent.date]) {
+              dataPerDay[ent.date] = {
+                sfi: ent.sfi,
+                r: ent.r,
+                k: ent.k,
+                count: 1
+              }
+            } else {
+              dataPerDay[ent.date].sfi += ent.sfi
+              dataPerDay[ent.date].r += ent.r
+              dataPerDay[ent.date].k += ent.k
+              dataPerDay[ent.date].count++
+            }
+          })
+
+          let chartData = []
+          Object.entries(dataPerDay).forEach(([date, ent]) => {
+            chartData.push({
+              date,
+              dateFormatted: moment.utc(date).format('D MMM'),
+              sfi: Math.round(ent.sfi / ent.count),
+              r: Math.round(ent.r / ent.count),
+              k: Math.round(ent.k / ent.count)
+            })
+          })
+
+          this.solarHistory = chartData.sort((a, b) => {
+            if (a.date < b.date) {
+              return -1
+            } else if (a.date > b.date) {
+              return 1
+            } else {
+              return 0
+            }
+          })
+        })
+
+      this.loadingComponent = this.$buefy.loading.open({ canCancel: true })
+    }
+  },
+  mounted () {
+    document.title = 'Solar Data History - SOTLAS'
+
+    this.loadHistory()
+  },
+  data () {
+    return {
+      solarHistory: null
+    }
+  }
+}
+</script>