✨ Adds a widget that pi-hole shows traffic graph

src/components/Widgets/PiHoleTraffic.vue

@@ -0,0 +1,86 @@
+<template>
+  <div :id="chartId" class="pi-hole-traffic"></div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
+
+export default {
+  mixins: [WidgetMixin, ChartingMixin],
+  components: {},
+  data() {
+    return {
+      status: null,
+      dataTable: null,
+      blockPercentChart: null,
+    };
+  },
+  computed: {
+    /* Let user select which comic to display: random, latest or a specific number */
+    hostname() {
+      const usersChoice = this.options.hostname;
+      if (!usersChoice) this.error('You must specify the hostname for your Pi-Hole server');
+      return usersChoice || 'http://pi.hole';
+    },
+    endpoint() {
+      return `${this.hostname}/admin/api.php?overTimeData10mins`;
+    },
+  },
+  methods: {
+    /* Make GET request to local pi-hole instance */
+    fetchData() {
+      axios.get(this.endpoint)
+        .then((response) => {
+          this.processData(response.data);
+        })
+        .catch((dataFetchError) => {
+          this.error('Unable to fetch data', dataFetchError);
+        })
+        .finally(() => {
+          this.finishLoading();
+        });
+    },
+    /* Assign data variables to the returned data */
+    processData(data) {
+      const timeData = [];
+      const domainsData = [];
+      Object.keys(data.domains_over_time).forEach((time) => {
+        timeData.push(this.formatTime(time * 1000));
+        domainsData.push(data.domains_over_time[time]);
+      });
+      const adsData = [];
+      Object.keys(data.ads_over_time).forEach((time) => {
+        adsData.push(data.ads_over_time[time]);
+      });
+      const chartData = {
+        labels: timeData,
+        datasets: [
+          { name: 'Queries', type: 'bar', values: domainsData },
+          { name: 'Ads Blocked', type: 'bar', values: adsData },
+        ],
+      };
+      this.generateChart(chartData);
+    },
+    generateChart(chartData) {
+      return new this.Chart(`#${this.chartId}`, {
+        title: 'Recent Queries & Ads',
+        data: chartData,
+        type: 'axis-mixed',
+        height: this.chartHeight,
+        colors: ['#20e253', '#f80363'],
+        truncateLegends: true,
+        lineOptions: {
+          regionFill: 1,
+          hideDots: 1,
+        },
+        axisOptions: {
+          xIsSeries: true,
+          xAxisMode: 'tick',
+        },
+      });
+    },
+  },
+};
+</script>

src/components/Widgets/WidgetBase.vue

@@ -137,6 +137,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <PiHoleTraffic
+        v-else-if="widgetType === 'pi-hole-traffic'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <PublicHolidays
         v-else-if="widgetType === 'public-holidays'"
         :options="widgetOptions"
@@ -232,6 +239,7 @@ import NdLoadHistory from '@/components/Widgets/NdLoadHistory.vue';
 import NdRamHistory from '@/components/Widgets/NdRamHistory.vue';
 import PiHoleStats from '@/components/Widgets/PiHoleStats.vue';
 import PiHoleTopQueries from '@/components/Widgets/PiHoleTopQueries.vue';
+import PiHoleTraffic from '@/components/Widgets/PiHoleTraffic.vue';
 import PublicHolidays from '@/components/Widgets/PublicHolidays.vue';
 import PublicIp from '@/components/Widgets/PublicIp.vue';
 import RssFeed from '@/components/Widgets/RssFeed.vue';
@@ -268,6 +276,7 @@ export default {
     NdRamHistory,
     PiHoleStats,
     PiHoleTopQueries,
+    PiHoleTraffic,
     PublicHolidays,
     PublicIp,
     RssFeed,