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

View file

@ -131,14 +131,15 @@ class StatisticView(TemplateView):
max_count = bird_stats[0]['total'] # Höchste Anzahl (wird 100% der Balkenbreite) max_count = bird_stats[0]['total'] # Höchste Anzahl (wird 100% der Balkenbreite)
for bird in bird_stats: 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 total_bar_width = (bird['total'] / max_count) * 100 if max_count > 0 else 0
bird['total_bar_width'] = f"{total_bar_width:.1f}".replace(',', '.') 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']: for group_data in bird['groups']:
group_bar_width = (group_data['count'] / max_count) * 100 if max_count > 0 else 0 # Absolute Breite = (Anteil dieser Gruppe / 100) * Gesamtbalkenbreite
group_data['bar_width'] = f"{group_bar_width:.1f}".replace(',', '.') absolute_width = (group_data['percentage'] / 100) * total_bar_width
group_data['absolute_width'] = f"{absolute_width:.1f}".replace(',', '.')
context['bird_stats'] = bird_stats context['bird_stats'] = bird_stats

View file

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