diff --git a/src/components/Widgets/AdGuardStats.vue b/src/components/Widgets/AdGuardStats.vue index 3e497333..f1123546 100644 --- a/src/components/Widgets/AdGuardStats.vue +++ b/src/components/Widgets/AdGuardStats.vue @@ -1,5 +1,11 @@ @@ -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); + } + } }