change css statistics

This commit is contained in:
NABU Jena 2025-07-08 17:46:30 +02:00
parent f8104b627b
commit 52fe9dc8a3
3 changed files with 13 additions and 12 deletions

View file

@ -122,12 +122,10 @@
/* Segmentierte Balken für Vogelarten - neues horizontales Layout */
.bird-bar {
display: flex;
margin-bottom: 15px;
margin-bottom: 1%;
align-items: center;
clear: both;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #e9ecef;
}
.bird-bar:last-child {
@ -166,6 +164,8 @@
transition: all 0.3s ease;
cursor: pointer;
position: relative;
min-width: 1px;
display: block;
}
.bird-bar-segment:hover {
@ -195,9 +195,9 @@
}
.total-info {
margin-top: 8px;
margin-bottom: 8px;
padding-top: 5px;
border-top: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
font-size: 0.85rem;
}
@ -395,11 +395,11 @@
<!-- Balkendiagramm in der Mitte -->
<div class="bird-bar-container">
<div class="bird-bar-segments" style="width: {{ bird.total_bar_width }}%;">
<div class="bird-bar-segments">
{% for group_data in bird.groups %}
{% if group_data.count > 0 %}
<div class="bird-bar-segment"
style="width: {{ group_data.percentage }}%; background-color: {{ group_data.color }};"
style="width: {{ group_data.absolute_width }}%; background-color: {{ group_data.color }};"
title="{{ group_data.name }}: {{ group_data.count }} ({{ group_data.percentage }}%)">
</div>
{% endif %}

View file

@ -131,14 +131,15 @@ class StatisticView(TemplateView):
max_count = bird_stats[0]['total'] # Höchste Anzahl (wird 100% der Balkenbreite)
for bird in bird_stats:
# Berechne Balkenbreite für Gesamtanzahl
# Berechne Balkenbreite für Gesamtanzahl (proportional zur häufigsten Art)
total_bar_width = (bird['total'] / max_count) * 100 if max_count > 0 else 0
bird['total_bar_width'] = f"{total_bar_width:.1f}".replace(',', '.')
# Berechne Balkenbreiten für jede Gruppe
# Berechne absolute Segmentbreiten (bezogen auf die gesamte verfügbare Container-Breite)
for group_data in bird['groups']:
group_bar_width = (group_data['count'] / max_count) * 100 if max_count > 0 else 0
group_data['bar_width'] = f"{group_bar_width:.1f}".replace(',', '.')
# Absolute Breite = (Anteil dieser Gruppe / 100) * Gesamtbalkenbreite
absolute_width = (group_data['percentage'] / 100) * total_bar_width
group_data['absolute_width'] = f"{absolute_width:.1f}".replace(',', '.')
context['bird_stats'] = bird_stats

View file

@ -32,7 +32,7 @@
.bird-bar {
display: flex;
margin-bottom: 15px;
margin-bottom: 1%;
align-items: center;
}