[mod] /stats: simple theme implementation

This commit is contained in:
Alexandre Flament 2021-04-23 11:01:54 +02:00
parent 09e7ecdce2
commit 7032f7521c
10 changed files with 197 additions and 84 deletions

View File

@ -1,4 +1,4 @@
/*! searx | 21-04-2021 | */
/*! searx | 23-04-2021 | */
/*
* searx, A privacy-respecting, hackable metasearch engine
*
@ -1153,6 +1153,25 @@ select:focus {
transform: rotate(360deg);
}
}
/* -- engine-tooltip -- */
.engine-tooltip {
display: none;
position: absolute;
padding: 0.5rem 1rem;
margin: 0rem 0 0 2rem;
border: 1px solid #ddd;
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1);
background: white;
font-size: 14px;
font-weight: normal;
z-index: 1000000;
text-align: left;
}
th:hover .engine-tooltip,
td:hover .engine-tooltip,
.engine-tooltip:hover {
display: inline-block;
}
/* -- stacked bar chart -- */
.stacked-bar-chart {
margin: 0;
@ -1216,6 +1235,24 @@ select:focus {
padding: 0.4rem 0;
width: 1px;
}
.stacked-bar-chart-serie1 {
display: flex;
flex-shrink: 0;
flex-grow: 0;
flex-basis: unset;
background: #5bc0de;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
padding: 0.4rem 0;
}
.stacked-bar-chart-serie2 {
display: flex;
flex-shrink: 0;
flex-grow: 0;
flex-basis: unset;
background: #deb15b;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
padding: 0.4rem 0;
}
/*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */
.autocomplete {
position: absolute;
@ -1494,23 +1531,6 @@ select:focus {
#main_preferences div.selectable_url pre {
width: 100%;
}
#main_preferences .engine-tooltip {
display: none;
position: absolute;
padding: 0.5rem 1rem;
margin: 0rem 0 0 2rem;
border: 1px solid #ddd;
background: white;
font-size: 14px;
font-weight: normal;
z-index: 1000000;
text-align: left;
}
#main_preferences th:hover .engine-tooltip,
#main_preferences td:hover .engine-tooltip,
#main_preferences .engine-tooltip:hover {
display: inline-block;
}
@media screen and (max-width: 75em) {
.preferences_back {
clear: both;

Binary file not shown.

View File

@ -1,4 +1,4 @@
/*! searx | 21-04-2021 | */
/*! searx | 23-04-2021 | */
/*
* searx, A privacy-respecting, hackable metasearch engine
*
@ -1153,6 +1153,25 @@ select:focus {
transform: rotate(360deg);
}
}
/* -- engine-tooltip -- */
.engine-tooltip {
display: none;
position: absolute;
padding: 0.5rem 1rem;
margin: 0rem 0 0 2rem;
border: 1px solid #ddd;
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1);
background: white;
font-size: 14px;
font-weight: normal;
z-index: 1000000;
text-align: left;
}
th:hover .engine-tooltip,
td:hover .engine-tooltip,
.engine-tooltip:hover {
display: inline-block;
}
/* -- stacked bar chart -- */
.stacked-bar-chart {
margin: 0;
@ -1216,6 +1235,24 @@ select:focus {
padding: 0.4rem 0;
width: 1px;
}
.stacked-bar-chart-serie1 {
display: flex;
flex-shrink: 0;
flex-grow: 0;
flex-basis: unset;
background: #5bc0de;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
padding: 0.4rem 0;
}
.stacked-bar-chart-serie2 {
display: flex;
flex-shrink: 0;
flex-grow: 0;
flex-basis: unset;
background: #deb15b;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
padding: 0.4rem 0;
}
/*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */
.autocomplete {
position: absolute;
@ -1494,23 +1531,6 @@ select:focus {
#main_preferences div.selectable_url pre {
width: 100%;
}
#main_preferences .engine-tooltip {
display: none;
position: absolute;
padding: 0.5rem 1rem;
margin: 0rem 0 0 2rem;
border: 1px solid #ddd;
background: white;
font-size: 14px;
font-weight: normal;
z-index: 1000000;
text-align: left;
}
#main_preferences th:hover .engine-tooltip,
#main_preferences td:hover .engine-tooltip,
#main_preferences .engine-tooltip:hover {
display: inline-block;
}
@media screen and (max-width: 75em) {
.preferences_back {
clear: both;

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -93,24 +93,6 @@
width: 100%;
}
}
.engine-tooltip {
display: none;
position: absolute;
padding: 0.5rem 1rem;
margin: 0rem 0 0 2rem;
border: 1px solid #ddd;
background: white;
font-size: 14px;
font-weight: normal;
z-index: 1000000;
text-align: left;
}
th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover {
display: inline-block;
}
}

View File

@ -475,6 +475,25 @@ select {
}
}
/* -- engine-tooltip -- */
.engine-tooltip {
display: none;
position: absolute;
padding: 0.5rem 1rem;
margin: 0rem 0 0 2rem;
border: 1px solid #ddd;
box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.1);
background: white;
font-size: 14px;
font-weight: normal;
z-index: 1000000;
text-align: left;
}
th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover {
display: inline-block;
}
/* -- stacked bar chart -- */
.stacked-bar-chart {
margin: 0;
@ -532,3 +551,17 @@ select {
padding: 0.4rem 0;
width: 1px;
}
.stacked-bar-chart-serie1 {
.stacked-bar-chart-base();
background: #5bc0de;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
padding: 0.4rem 0;
}
.stacked-bar-chart-serie2 {
.stacked-bar-chart-base();
background: #deb15b;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
padding: 0.4rem 0;
}

View File

@ -1,15 +1,5 @@
{% extends "oscar/base.html" %}
{% block styles %}
<style>
#engine-times {
--labels-size: 20rem;
}
#engine-times th {
text-align: right;
}
</style>
{% endblock %}
{% block title %}{{ _('stats') }} - {% endblock %}
{%- macro th_sort(column_order, column_name) -%}
@ -45,7 +35,7 @@
<td style="text-align: right;">
{% if engine_stat.score %}
<span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span>
<div class="engine-tooltip text-left" role="tooltip" id="{{engine_name}}_score">{{- "" -}}
<div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}}
<p>{{ _('Scores per result') }}: {{ engine_stat.score_per_result | round(3) }}</p>
</div>
{% endif %}
@ -53,7 +43,7 @@
<td>
{%- if engine_stat.result_count -%}
<span class="stacked-bar-chart-value">{{- engine_stat.result_count | int -}}</span>{{- "" -}}
<span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_chart_result_count" aria-hidden="true">{{- "" -}}
<span class="stacked-bar-chart" aria-hidden="true">{{- "" -}}
<span style="width: calc(max(2px, 100%*{{ (engine_stat.result_count / engine_stats.max_result_count )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
</span>
{%- endif -%}
@ -61,11 +51,11 @@
<td>
{%- if engine_stat.total -%}
<span class="stacked-bar-chart-value">{{- engine_stat.total | round(1) -}}</span>{{- "" -}}
<span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_chart" aria-hidden="true">{{- "" -}}
<span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">{{- "" -}}
<span style="width: calc(max(2px, 100%*{{ (engine_stat.http / engine_stats.max_time )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
<span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}}
</span>{{- "" -}}
<div class="engine-tooltip text-left" role="tooltip" id="{{engine_name}}_chart">{{- "" -}}
<div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}}
<table class="table table-striped">
<tr>
<th scope="col"></th>

View File

@ -1,4 +1,15 @@
{% from 'simple/macros.html' import icon %}
{% extends "simple/base.html" %}
{%- macro th_sort(column_order, column_name) -%}
{% if column_order==sort_order %}
{{ column_name }} {{ icon('arrow-dropdown') }}
{% else %}
<a href="{{ url_for('stats', sort=column_order) }}">{{ column_name }}
{% endif %}
{%- endmacro -%}
{% block head %} {% endblock %}
{% block content %}
@ -6,20 +17,77 @@
<h2>{{ _('Engine stats') }}</h2>
{% for stat_name,stat_category in stats %}
<div class="left">
<table>
<tr colspan="3">
<th>{{ stat_name }}</th>
</tr>
{% for engine in stat_category %}
<tr>
<td>{{ engine.name }}</td>
<td>{{ '%.02f'|format(engine.avg) }}</td>
<td class="percentage"><div style="width: {{ engine.percentage }}%">&nbsp;</div></td>
</tr>
{% endfor %}
</table>
</div>
{% endfor %}
{% if not engine_stats.get('time') %}
{{ _('There is currently no data available. ') }}
{% else %}
<table style="max-width: 1280px; margin: 0 auto;">
<tr>
<th scope="col" style="width:20rem;">{{ th_sort('name', _("Engine name")) }}</th>
<th scope="col" style="width:7rem; text-align: right;">{{ th_sort('score', _('Scores')) }}</th>
<th scope="col">{{ th_sort('result_count', _('Result count')) }}</th>
<th scope="col">{{ th_sort('time', _('Response time')) }}</th>
<th scope="col" style="text-align: right;">{{ th_sort('reliability', _('Reliability')) }}</th>
</tr>
{% for engine_stat in engine_stats.get('time', []) %}
<tr>
<td>{{ engine_stat.name }}</td>
<td style="text-align: right;">
{% if engine_stat.score %}
<span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span>
<div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}}
<p>{{ _('Scores per result') }}: {{ engine_stat.score_per_result | round(3) }}</p>
</div>
{% endif %}
</td>
<td>
{%- if engine_stat.result_count -%}
<span class="stacked-bar-chart-value">{{- engine_stat.result_count | int -}}</span>{{- "" -}}
<span class="stacked-bar-chart" aria-hidden="true">{{- "" -}}
<span style="width: calc(max(2px, 100%*{{ (engine_stat.result_count / engine_stats.max_result_count )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
</span>
{%- endif -%}
</td>
<td>
{%- if engine_stat.total -%}
<span class="stacked-bar-chart-value">{{- engine_stat.total | round(1) -}}</span>{{- "" -}}
<span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">{{- "" -}}
<span style="width: calc(max(2px, 100%*{{ (engine_stat.http / engine_stats.max_time )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
<span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}}
</span>{{- "" -}}
<div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}}
<table>
<tr>
<th scope="col"></th>
<th scope="col">{{ _('Total') }}</th>
<th scope="col">{{ _('HTTP') }}</th>
<th scope="col">{{ _('Processing') }}</th>
</tr>
<tr>
<th scope="col">{{ _('Median') }}</th>
<td>{{ engine_stat.total }}</td>
<td>{{ engine_stat.http }}</td>
<td>{{ engine_stat.processing }}</td>
</tr>
<tr>
<th scope="col">{{ _('P80') }}</th>
<td>{{ engine_stat.total_p80 }}</td>
<td>{{ engine_stat.http_p80 }}</td>
<td>{{ engine_stat.processing_p80 }}</td>
</tr>
<tr>
<th scope="col">{{ _('P95') }}</th>
<td>{{ engine_stat.total_p95 }}</td>
<td>{{ engine_stat.http_p95 }}</td>
<td>{{ engine_stat.processing_p95 }}</td>
</tr>
</table>
</div>
{%- endif -%}
</td>
<td style="text-align: right;"> {{ engine_reliabilities.get(engine_stat.name, {}).get('reliablity') }}</td>
</tr>
{% endfor %}
</table>
{% endif %}
{% endblock %}