88 lines
4.2 KiB
HTML
88 lines
4.2 KiB
HTML
{{ template "widget-base.html" . }}
|
|
|
|
{{ define "widget-content" }}
|
|
<div class="widget-small-content-bounds dns-stats">
|
|
<div class="flex text-center justify-between dns-stats-totals">
|
|
<div>
|
|
<div class="color-highlight size-h3">{{ .Stats.TotalQueries | formatNumber }}</div>
|
|
<div class="size-h6">QUERIES</div>
|
|
</div>
|
|
<div>
|
|
<div class="color-highlight size-h3">{{ .Stats.BlockedPercent }}%</div>
|
|
<div class="size-h6">BLOCKED</div>
|
|
</div>
|
|
{{ if gt .Stats.ResponseTime 0 }}
|
|
<div>
|
|
<div class="color-highlight size-h3">{{ .Stats.ResponseTime | formatNumber }}ms</div>
|
|
<div class="size-h6">LATENCY</div>
|
|
</div>
|
|
{{ else }}
|
|
<div class="cursor-help" data-popover-type="text" data-popover-text="Total number of blocked domains from all adlists" data-popover-max-width="200px" data-popover-text-align="center">
|
|
<div class="color-highlight size-h3">{{ .Stats.DomainsBlocked | formatApproxNumber }}</div>
|
|
<div class="size-h6">DOMAINS</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
{{ $showGraph := not (or .HideGraph (eq (len .Stats.Series) 0)) }}
|
|
{{ if $showGraph }}
|
|
<div class="dns-stats-graph margin-top-15">
|
|
<div class="dns-stats-graph-gridlines-container">
|
|
<svg class="dns-stats-graph-gridlines" shape-rendering="crispEdges" viewBox="0 0 1 100" preserveAspectRatio="none">
|
|
<g stroke="var(--color-graph-gridlines)" stroke-width="1">
|
|
<line x1="0" y1="1" x2="1" y2="1" vector-effect="non-scaling-stroke" />
|
|
<line x1="0" y1="25" x2="1" y2="25" vector-effect="non-scaling-stroke" />
|
|
<line x1="0" y1="50" x2="1" y2="50" vector-effect="non-scaling-stroke" />
|
|
<line x1="0" y1="75" x2="1" y2="75" vector-effect="non-scaling-stroke" />
|
|
<line x1="0" y1="99" x2="1" y2="99" vector-effect="non-scaling-stroke" stroke="var(--color-progress-bar-border)"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="dns-stats-graph-columns">
|
|
{{ range $i, $column := .Stats.Series }}
|
|
<div class="dns-stats-graph-column" data-popover-type="html" data-popover-position="above" data-popover-show-delay="500">
|
|
<div data-popover-html>
|
|
<div class="flex text-center justify-between gap-25">
|
|
<div>
|
|
<div class="color-highlight size-h3">{{ $column.Queries | formatNumber }}</div>
|
|
<div class="size-h6">QUERIES</div>
|
|
</div>
|
|
<div>
|
|
<div class="color-highlight size-h3">{{ $column.PercentBlocked }}%</div>
|
|
<div class="size-h6">BLOCKED</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ if gt $column.PercentTotal 0}}
|
|
<div class="dns-stats-graph-bar" style="--bar-height: {{ $column.PercentTotal }}">
|
|
{{ if ne $column.Queries $column.Blocked }}
|
|
<div class="queries"></div>
|
|
{{ end }}
|
|
{{ if gt $column.PercentBlocked 0 }}
|
|
<div class="blocked" style="--percent: {{ $column.PercentBlocked }}%"></div>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
<div class="dns-stats-graph-time">{{ index $.TimeLabels $i }}</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ if and (not .HideTopDomains) .Stats.TopBlockedDomains }}
|
|
<details class="details {{ if $showGraph }}margin-top-40{{ else }}margin-top-15{{ end }}">
|
|
<summary class="summary">Top blocked domains</summary>
|
|
<ul class="list list-gap-4 list-with-transition size-h5">
|
|
{{ range .Stats.TopBlockedDomains }}
|
|
<li class="flex justify-between gap-10">
|
|
<div class="text-truncate rtl">{{ .Domain }}</div>
|
|
<div class="text-right" style="width: 4rem;"><span class="color-highlight">{{ .PercentBlocked }}</span>%</div>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</details>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|