mirror of
https://github.com/Lissy93/dashy.git
synced 2024-09-11 22:27:10 +03:00
✨ AdGuard block percent widget (#493)
This commit is contained in:
parent
b974b68852
commit
7b99e9092b
80
src/components/Widgets/AdGuardStats.vue
Normal file
80
src/components/Widgets/AdGuardStats.vue
Normal 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>
|
@ -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'),
|
||||
|
Loading…
Reference in New Issue
Block a user