change css statistics
This commit is contained in:
parent
f8104b627b
commit
52fe9dc8a3
3 changed files with 13 additions and 12 deletions
|
@ -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 %}
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue