diff --git a/src/components/Widgets/PiHoleStatsV6.vue b/src/components/Widgets/PiHoleStatsV6.vue index 14e9f15f..7cb3d5aa 100644 --- a/src/components/Widgets/PiHoleStatsV6.vue +++ b/src/components/Widgets/PiHoleStatsV6.vue @@ -44,6 +44,9 @@ export default { if (!usersChoice) this.error('App Password is required, please see the docs'); return usersChoice; }, + hideStatus() { return this.options.hideStatus; }, + hideChart() { return this.options.hideChart; }, + hideInfo() { return this.options.hideInfo; }, authHeader() { return { 'X-FTL-SID': this.sid, @@ -57,17 +60,16 @@ export default { blockingStatusEndpoint() { return `${this.hostname}/api/dns/blocking`; }, - /* This is actually just the stats that are currently in memory. If you need accurate stats to a - particular timeframe, then the database endpoint is the way to go. */ + /* This is actually just the stats that are currently in memory, which amounts to 24hrs when the + service first boots up, but will drift to be a little more than 24hrs worth of data as the + server runs. If you need accurate stats to a particular timeframe, then the + /api/stats/database/summary endpoint is the way to go. */ statsEndpoint() { return `${this.hostname}/api/stats/summary`; }, statsDatabaseEndpoint() { return `${this.hostname}/api/stats/database/summary`; }, - hideStatus() { return this.options.hideStatus; }, - hideChart() { return this.options.hideChart; }, - hideInfo() { return this.options.hideInfo; }, timestampTomorrowMidnight() { const calcDate = new Date(); calcDate.setHours(0, 0, 0, 0); @@ -137,13 +139,13 @@ export default { url.searchParams.append('from', this.timestamp24HoursAgo); // Future date because we're looking for "up to present". url.searchParams.append('until', this.timestampTomorrowMidnight); - return this.makeRequest(url.toString(), this.authHeader, 'GET'); + return this.makeRequest(url.toString(), this.authHeader); }, fetchAllTimeStats() { const url = new URL(this.statsDatabaseEndpoint); url.searchParams.append('from', 1); // Errors out with 0. url.searchParams.append('until', this.timestampTomorrowMidnight); - return this.makeRequest(url.toString(), this.authHeader, 'GET'); + return this.makeRequest(url.toString(), this.authHeader); }, processData([blockingStatus, inMemoryStats, todayStats, allTimeStats]) { if (!this.hideStatus) { @@ -205,53 +207,42 @@ export default { .pi-hole-stats-v6-wrapper { display: flex; flex-direction: column; - .status { margin: 0.5rem 0; - .status-lbl { color: var(--widget-text-color); font-weight: bold; } - .status-val { margin-left: 0.5rem; font-family: var(--font-monospace); - &.green { color: var(--success); } &.red { color: var(--danger); } &.blue { color: var(--info); } } } - img.block-percent-chart { margin: 0.5rem auto; max-width: 8rem; width: 100%; } - .block-pie { margin: 0; } - .data-table { display: flex; flex-direction: column; - .data-table-row { display: flex; justify-content: space-between; - p { margin: 0.2rem 0; color: var(--widget-text-color); font-size: 0.9rem; - &.row-value { font-family: var(--font-monospace); } } - &:not(:last-child) { border-bottom: 1px dashed var(--widget-text-color); }