mirror of
https://github.com/Lissy93/dashy.git
synced 2025-12-13 20:13:24 +01:00
80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<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>
|