AdGuard block percent widget (#493)

This commit is contained in:
Alicia Sykes 2022-05-29 15:45:33 +01:00 committed by Alicia Sykes
parent b974b68852
commit 7b99e9092b
2 changed files with 89 additions and 1 deletions

View File

@ -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>

View File

@ -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'),