| 1 |
<div id="abj404-trends-container"> |
| 2 |
<div class="abj404-trends-period-selector" role="group" aria-label="{period_aria_label}"> |
| 3 |
<label class="abj404-trends-period-label"><input type="radio" name="abj404_trend_period" value="7"> {label_7d}</label> |
| 4 |
<label class="abj404-trends-period-label"><input type="radio" name="abj404_trend_period" value="30" checked> {label_30d}</label> |
| 5 |
<label class="abj404-trends-period-label"><input type="radio" name="abj404_trend_period" value="90"> {label_90d}</label> |
| 6 |
</div> |
| 7 |
<p class="abj404-trends-loading">{loading_text}</p> |
| 8 |
<div id="abj404-trends-charts" style="display:none"> |
| 9 |
<div class="abj404-trend-chart-wrap"><canvas id="abj404-chart-404s"></canvas></div> |
| 10 |
<div class="abj404-trend-chart-wrap"><canvas id="abj404-chart-redirects"></canvas></div> |
| 11 |
<div class="abj404-trend-chart-wrap"><canvas id="abj404-chart-captures"></canvas></div> |
| 12 |
</div> |
| 13 |
<p id="abj404-trends-error" style="display:none;color:var(--abj404-danger-border)">{error_text}</p> |
| 14 |
</div> |
| 15 |
<style> |
| 16 |
.abj404-trends-period-selector { margin-bottom: 16px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } |
| 17 |
.abj404-trends-period-label { cursor: pointer; font-weight: 500; } |
| 18 |
.abj404-trends-period-label input { margin-right: 4px; } |
| 19 |
.abj404-trend-chart-wrap { margin-bottom: 24px; } |
| 20 |
.abj404-trends-loading { color: var(--abj404-text-muted); font-style: italic; } |
| 21 |
</style> |
| 22 |
<div id="abj404-trends-config" style="display:none" data-abj404-trends="{trends_config}"></div> |
| 23 |
|
