✨ Adds a widget that pi-hole shows traffic graph

docs/widgets.md

@@ -29,6 +29,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [System Load History](#load-history-netdata)
   - [Pi Hole Stats](#pi-hole-stats)
   - [Pi Hole Queries](#pi-hole-queries)
+  - [Recent Traffic](#recent-traffic)
 - [Dynamic Widgets](#dynamic-widgets)
   - [Iframe Widget](#iframe-widget)
   - [HTML Embed Widget](#html-embedded-widget)
@@ -634,7 +635,7 @@ Displays the number of queries blocked by [Pi-Hole](https://pi-hole.net/).
 
 **Field** | **Type** | **Required** | **Description**
 --- | --- | --- | ---
-**`host`** | `string` |  Required | The URL to your Pi-Hole instance
+**`hostname`** | `string` |  Required | The URL to your Pi-Hole instance
 **`hideStatus`** / **`hideChart`** / **`hideInfo`** | `boolean` |  _Optional_ | Optionally hide any of the three parts of the widget
 
 ##### Example 
@@ -656,7 +657,7 @@ Shows top queries that were blocked and allowed by [Pi-Hole](https://pi-hole.net
 
 **Field** | **Type** | **Required** | **Description**
 --- | --- | --- | ---
-**`host`** | `string` |  Required | The URL to your Pi-Hole instance
+**`hostname`** | `string` |  Required | The URL to your Pi-Hole instance
 **`apiKey`** | `string` |  Required | Your Pi-Hole web password. It is **NOT** your pi-hole admin interface or server password. It can be found in `/etc/pihole/setupVars.conf`, and is a 64-character located on the line that starts with `WEBPASSWORD`
 **`count`** | `number` |  _Optional_ | The number of queries to display. Defaults to `10`
 
@@ -671,6 +672,28 @@ Shows top queries that were blocked and allowed by [Pi-Hole](https://pi-hole.net
 
 ---
 
+### Recent Traffic
+
+Shows number of recent traffic, using allowed and blocked queries from [Pi-Hole](https://pi-hole.net/)
+
+<p align="center"><img width="500" src="https://i.ibb.co/7kdxxwx/pi-hole-recent-queries.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`hostname`** | `string` |  Required | The URL to your Pi-Hole instance
+
+##### Example 
+
+```yaml
+- type: pi-hole-traffic
+  options:
+    hostname: https://pi-hole.local
+```
+
+---
+
 ## Dynamic Widgets
 
 ### Iframe Widget

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,