Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-12-27 02:43:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

⚡ Show total query and block count

Browse Source
This commit is contained in:
Alicia Sykes 2022-05-30 12:06:38 +01:00 committed by Alicia Sykes
parent f7bba8068a
commit c823a2e9bd
1 changed files with 29 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Widgets/AdGuardStats.vue
View File

@ -1,5 +1,11 @@
<template>
<div class="ad-guard-stats-wrapper">
<!-- Show total query and block count -->
<div v-if="queryCount && blockCount" class="summary">
<div><span class="lbl">Queries:</span><span class="val">{{ queryCount }}</span></div>
<div><span class="lbl">Blocked:</span><span class="val">{{ blockCount }}</span></div>
</div>
<!-- Pie chart with block breakdown -->
<p :id="chartId" class="block-pie"></p>
</div>
</template>
@ -27,6 +33,12 @@ export default {
return {};
},
},
data() {
return {
queryCount: null,
blockCount: null,
};
},
methods: {
/* Make GET request to AdGuard endpoint */
fetchData() {
@ -43,6 +55,10 @@ export default {
const blockTotal = blocked + safeBrowsing + safeSearch + parental;
const remaining = totalAllowed - blockTotal;
// Set query and block count, for first line
this.queryCount = totalAllowed;
this.blockCount = blockTotal;
// Put data into a flat array for the chart
const chartColors = ['#ef476f', '#06d6a0'];
const chartValues = [blocked, remaining];
@ -97,5 +113,18 @@ export default {
overflow: visible;
}
}
.summary {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
color: var(--widget-text-color);
span.lbl {
font-weight: bold;
margin: 0.25rem;
}
span.val {
font-family: var(--font-monospace);
}
}
}
</style>