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 */
|
/* 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 %}
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
|
|
||||||
.bird-bar {
|
.bird-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 1%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue