✨ AdGuard block percent widget (#493)

src/components/Widgets/AdGuardStats.vue

@@ -0,0 +1,80 @@
+<template>
+<div class="ad-guard-stats-wrapper">
+  <p :id="chartId" class="block-pie"></p>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
+
+export default {
+  mixins: [WidgetMixin, ChartingMixin],
+  computed: {
+    /* URL/ IP or hostname to the AdGuardHome instance, without trailing slash */
+    hostname() {
+      if (!this.options.hostname) this.error('You must specify the path to your AdGuard server');
+      return this.options.hostname;
+    },
+    endpoint() {
+      return `${this.hostname}/control/stats`;
+    },
+  },
+  methods: {
+    /* Make GET request to AdGuard endpoint */
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.processData);
+    },
+    /* Assign data variables to the returned data */
+    processData(data) {
+      // Get data from response, to be rendered to the chart
+      const totalAllowed = data.num_dns_queries || 0;
+      const blocked = data.num_blocked_filtering || 0;
+      const safeBrowsing = data.num_replaced_safebrowsing || 0;
+      const safeSearch = data.num_replaced_safesearch || 0;
+      const parental = data.num_replaced_parental || 0;
+      const blockTotal = blocked + safeBrowsing + safeSearch + parental;
+      const remaining = totalAllowed - blockTotal;
+
+      // Put data into a flat array for the chart
+      const chartColors = ['#ef476f', '#ffc43d', '#f8ffe5', '#1b9aaa', '#06d6a0'];
+      const chartValues = [blocked, safeBrowsing, safeSearch, parental, remaining];
+      const chartLabels = [
+        'Blocked', 'Safe Browsing - Blocked', 'Safe Search - Blocked',
+        'Parental Controls - Blocked', 'Allowed',
+      ];
+
+      // Call generate chart function
+      this.generateBlockPie(chartLabels, chartValues, chartColors);
+    },
+    /* Generate pie chart showing the proportion of queries blocked */
+    generateBlockPie(labels, values, colors) {
+      return new this.Chart(`#${this.chartId}`, {
+        title: 'AdGuard DNS Queries',
+        data: {
+          labels,
+          datasets: [{ values }],
+        },
+        type: 'donut',
+        height: 250,
+        strokeWidth: 20,
+        colors,
+        tooltipOptions: {
+          formatTooltipY: d => `${Math.round(d)}%`,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.ad-guard-stats-wrapper {
+  .block-pie {
+    margin: 0;
+    svg.frappe-chart.chart {
+      overflow: visible;
+    }
+  }
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -20,8 +20,15 @@
     </div>
     <!-- Widget -->
     <div :class="`widget-wrap ${ error ? 'has-error' : '' }`">
+      <AdGuardStats
+        v-if="widgetType === 'adguard-stats'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <AnonAddy
-        v-if="widgetType === 'anonaddy'"
+        v-else-if="widgetType === 'anonaddy'"
         :options="widgetOptions"
         @loading="setLoaderState"
         @error="handleError"
@@ -428,6 +435,7 @@ export default {
     OpenIcon,
     LoadingAnimation,
     // Register widget components
+    AdGuardStats: () => import('@/components/Widgets/AdGuardStats.vue'),
     AnonAddy: () => import('@/components/Widgets/AnonAddy.vue'),
     Apod: () => import('@/components/Widgets/Apod.vue'),
     BlacklistCheck: () => import('@/components/Widgets/BlacklistCheck.vue'),