Adminator/geograsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Drilldown: volle Modalbreite + durchgaengige Ampelfarben (gruen->rot)

Browse Source 
- Modal max-width 640->1120px, Kachel-Grid dichter -> Kennzahlen einzeilig
- Werte UND Balken ampelgefaerbt (pct/pctInv/ratio), Sterne mit Ampelbalken
  je n/5 -> Vergleich auf einen Blick

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-07-20 15:51:33 +02:00
parent c83da66325
commit 5bf8f0fe03
2 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/assets/js/sim-metrics.js
+11 -5
View File
@@ -118,14 +118,20 @@
}
function num(v, u){ return '<span class="ivm-v">'+(typeof v==='number'?v.toLocaleString('de-AT'):esc(v))+(u?' <span class="ivm-u">'+u+'</span>':'')+'</span>'; }
function starsBlock(n, small){
n = Math.max(0, Math.min(5, Math.round(n)));
var c = ampPct(n/5*100);
var cls = 'ivm-stars'+(small?' sm':'')+' '+c;
return '<span class="'+cls+'">'+'★'.repeat(n)+'<span class="ivm-star-off">'+'★'.repeat(5-n)+'</span></span>'+bar(n/5*100, c);
}
function renderVal(f, v, src){
switch (f.type) {
case 'stars': return stars(v);
case 'starsSmall': return '<span class="ivm-stars sm">'+'★'.repeat(Math.max(0,Math.min(5,Math.round(v))))+'<span class="ivm-star-off">'+'★'.repeat(5-Math.max(0,Math.min(5,Math.round(v))))+'</span></span>';
case 'pct': return '<span class="ivm-v">'+Math.round(v)+'<span class="ivm-u">%</span></span>'+bar(v, ampPct(v));
case 'pctInv': return '<span class="ivm-v">'+Math.round(v)+'<span class="ivm-u">%</span></span>'+bar(v, ampPct(100-v));
case 'stars': return starsBlock(v, false);
case 'starsSmall': return starsBlock(v, true);
case 'pct': return '<span class="ivm-v '+ampPct(v)+'">'+Math.round(v)+'<span class="ivm-u">%</span></span>'+bar(v, ampPct(v));
case 'pctInv': return '<span class="ivm-v '+ampPct(100-v)+'">'+Math.round(v)+'<span class="ivm-u">%</span></span>'+bar(v, ampPct(100-v));
case 'ratio': { var tot=src[f.t]; if(tot==null) return num(v); var pct=tot>0?(v/tot*100):0;
return '<span class="ivm-v">'+v+'<span class="ivm-u">/ '+tot+'</span></span>'+bar(pct, ampPct(pct)); }
return '<span class="ivm-v '+ampPct(pct)+'">'+v+'<span class="ivm-u">/ '+tot+'</span></span>'+bar(pct, ampPct(pct)); }
case 'money': return money(v);
case 'temp': { var t=Math.round(v*10)/10, c=t<=2?'ivm-g':t<=3?'ivm-y':'ivm-r';
return '<span class="ivm-v '+c+'">'+t.toLocaleString('de-AT')+' °C</span>'; }