✨ Adds a Pi-Hole stats widget

docs/widgets.md

@@ -27,6 +27,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [CPU History](#cpu-history-netdata)
   - [Memory History](#memory-history-netdata)
   - [System Load History](#load-history-netdata)
+  - [Pi Hole Stats](#pi-hole-stats)
 - [Dynamic Widgets](#dynamic-widgets)
   - [Iframe Widget](#iframe-widget)
   - [HTML Embed Widget](#html-embedded-widget)
@@ -622,6 +623,29 @@ Pull recent load usage in 1, 5 and 15 minute intervals, from NetData.
 
 ---
 
+### Pi Hole Stats
+
+Displays the number of queries blocked by [Pi-Hole](https://pi-hole.net/).
+
+<p align="center"><img width="400" src="https://i.ibb.co/zftCLJN/pi-hole-stats.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`host`** | `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 
+
+```yaml
+- type: pi-hole-stats
+  options:
+    hostname: http://192.168.130.1
+```
+
+---
+
 ## Dynamic Widgets
 
 ### Iframe Widget

src/components/Widgets/PiHoleStats.vue

@@ -0,0 +1,164 @@
+<template>
+<div class="pi-hole-stats-wrapper">
+  <!-- Current Status -->
+  <div v-if="status" class="status">
+    <span class="status-lbl">Status:</span>
+    <span :class="`status-val ${getStatusColor(status)}`">{{ status | capitalize }}</span>
+  </div>
+  <!-- Block Pie Chart -->
+  <p :id="chartId" class="block-pie"></p>
+  <!-- More Data -->
+  <div v-if="dataTable" class="data-table">
+    <div class="data-table-row" v-for="(row, inx) in dataTable" :key="inx" >
+      <p class="row-label">{{ row.lbl }}</p>
+      <p class="row-value">{{ row.val }}</p>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
+import { capitalize } from '@/utils/MiscHelpers';
+
+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`;
+    },
+    hideStatus() { return this.options.hideStatus; },
+    hideChart() { return this.options.hideChart; },
+    hideInfo() { return this.options.hideInfo; },
+  },
+  filters: {
+    capitalize(str) {
+      return capitalize(str);
+    },
+  },
+  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) {
+      if (!this.hideStatus) {
+        this.status = data.status;
+      }
+      if (!this.hideInfo) {
+        this.dataTable = [
+          { lbl: 'Active Clients', val: `${data.unique_clients}/${data.clients_ever_seen}` },
+          { lbl: 'Ads Blocked Today', val: data.ads_blocked_today },
+          { lbl: 'DNS Queries Today', val: data.dns_queries_today },
+          { lbl: 'Total DNS Queries', val: data.dns_queries_all_types },
+          { lbl: 'Domains on Block List', val: data.domains_being_blocked },
+        ];
+      }
+      if (!this.hideChart) {
+        const blockedToday = Math.round(data.ads_percentage_today);
+        this.generateBlockPie(blockedToday);
+      }
+    },
+    getStatusColor(status) {
+      if (status === 'enabled') return 'green';
+      if (status === 'disabled') return 'red';
+      else return 'blue';
+    },
+    /* Generate pie chart showing the proportion of queries blocked */
+    generateBlockPie(blockedToday) {
+      const chartData = {
+        labels: ['Blocked', 'Allowed'],
+        datasets: [{
+          values: [blockedToday, 100 - blockedToday],
+        }],
+      };
+      return new this.Chart(`#${this.chartId}`, {
+        title: 'Block Percent',
+        data: chartData,
+        type: 'donut',
+        height: 250,
+        strokeWidth: 18,
+        colors: ['#f80363', '#20e253'],
+        tooltipOptions: {
+          formatTooltipY: d => `${Math.round(d)}%`,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.pi-hole-stats-wrapper {
+  display: flex;
+  flex-direction: column;
+  .status {
+    margin: 0.5rem 0;
+    .status-lbl {
+      color: var(--widget-text-color);
+      font-weight: bold;
+    }
+    .status-val {
+      margin-left: 0.5rem;
+      font-family: var(--font-monospace);
+      &.green { color: var(--success); }
+      &.red { color: var(--danger); }
+      &.blue { color: var(--info); }
+    }
+  }
+  img.block-percent-chart {
+    margin: 0.5rem auto;
+    max-width: 8rem;
+    width: 100%;
+  }
+  .block-pie {
+    margin: 0;
+  }
+  .data-table {
+    display: flex;
+    flex-direction: column;
+    .data-table-row {
+      display: flex;
+      justify-content: space-between;
+      p {
+        margin: 0.2rem 0;
+        color: var(--widget-text-color);
+        font-size: 0.9rem;
+        &.row-value {
+          font-family: var(--font-monospace);
+        }
+      }
+      &:not(:last-child) {
+        border-bottom: 1px dashed var(--widget-text-color);
+      }
+    }
+  }
+}
+
+</style>

src/components/Widgets/WidgetBase.vue

@@ -123,6 +123,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <PiHoleStats
+        v-else-if="widgetType === 'pi-hole-stats'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <PublicHolidays
         v-else-if="widgetType === 'public-holidays'"
         :options="widgetOptions"
@@ -216,6 +223,7 @@ import Jokes from '@/components/Widgets/Jokes.vue';
 import NdCpuHistory from '@/components/Widgets/NdCpuHistory.vue';
 import NdLoadHistory from '@/components/Widgets/NdLoadHistory.vue';
 import NdRamHistory from '@/components/Widgets/NdRamHistory.vue';
+import PiHoleStats from '@/components/Widgets/PiHoleStats.vue';
 import PublicHolidays from '@/components/Widgets/PublicHolidays.vue';
 import PublicIp from '@/components/Widgets/PublicIp.vue';
 import RssFeed from '@/components/Widgets/RssFeed.vue';
@@ -250,6 +258,7 @@ export default {
     NdCpuHistory,
     NdLoadHistory,
     NdRamHistory,
+    PiHoleStats,
     PublicHolidays,
     PublicIp,
     RssFeed,