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

Drilldown-Metriken: schwarze Balken -> farbig + Sterne raus (sim-metrics.js)

Browse Source 
bar() faerbte ueber ivm-CSS-Klassen, die im Schueler-Drilldown fehlen ->
Balken erschienen schwarz. Jetzt INLINE gefaerbt (ivmColor = _pctColor-Skala).
starsBlock (Heli Start/Landung) zeigt jetzt %+Balken statt Sterne.
pct/pctInv/ratio/money/temp/bool ebenfalls inline gefaerbt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-08-25 11:34:25 +02:00
parent 89d4d8587e
commit ce7bff3184
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/assets/js/sim-metrics.js
+18 -15
View File
@@ -106,39 +106,42 @@
function esc(s){ return String(s==null?'':s).replace(/[&<>"]/g,function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];}); }
function ampPct(v){ return v>=75?'ivm-g':v>=55?'ivm-li':v>=40?'ivm-y':v>=25?'ivm-o':'ivm-r'; }
// 5-stufige Leistungs-Skala (= _pctColor). Balken/Werte werden INLINE gefärbt,
// damit sie überall farbig sind — auch wo die ivm-CSS-Klassen fehlen (Drilldown),
// wo der Balken sonst schwarz erschien.
function ivmColor(v){ v=Math.max(0,Math.min(100,v||0)); return v>=90?'#1f7a3d':v>=80?'#7cb342':v>=60?'#f9c33b':v>=50?'#ef8b2c':'#d8453a'; }
function stars(n){
n = Math.max(0, Math.min(5, Math.round(n)));
return '<span class="ivm-stars">'+'★'.repeat(n)+'<span class="ivm-star-off">'+'★'.repeat(5-n)+'</span></span>';
}
function bar(pct, cls){
function bar(pct, col){
pct = Math.max(0, Math.min(100, Math.round(pct)));
return '<span class="ivm-bar"><i class="'+cls+'" style="width:'+pct+'%"></i></span>';
return '<span class="ivm-bar" style="display:block;height:5px;border-radius:99px;background:rgba(0,0,0,.09);overflow:hidden;margin-top:3px"><i style="display:block;height:100%;width:'+pct+'%;background:'+col+'"></i></span>';
}
function money(v){
var n = Math.round(v), cls = n<0?'ivm-r':'ivm-g';
return '<span class="ivm-v '+cls+'">'+n.toLocaleString('de-AT')+' €</span>';
var n = Math.round(v), col = n<0?'#d8453a':'#1f7a3d';
return '<span class="ivm-v" style="color:'+col+';font-weight:800">'+n.toLocaleString('de-AT')+' €</span>';
}
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);
// Sterne raus → Prozent + farbiger Balken (z. B. Heli Start/Landung, 0–5 → %).
var pct = Math.round(Math.max(0,Math.min(5,n))/5*100), col = ivmColor(pct);
return '<span class="ivm-v" style="color:'+col+';font-weight:800">'+pct+'<span class="ivm-u" style="font-weight:400"> %</span></span>'+bar(pct, col);
}
function renderVal(f, v, src){
switch (f.type) {
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 'pct': return '<span class="ivm-v" style="color:'+ivmColor(v)+';font-weight:800">'+Math.round(v)+'<span class="ivm-u" style="font-weight:400">%</span></span>'+bar(v, ivmColor(v));
case 'pctInv': return '<span class="ivm-v" style="color:'+ivmColor(100-v)+';font-weight:800">'+Math.round(v)+'<span class="ivm-u" style="font-weight:400">%</span></span>'+bar(v, ivmColor(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 '+ampPct(pct)+'">'+v+'<span class="ivm-u">/ '+tot+'</span></span>'+bar(pct, ampPct(pct)); }
return '<span class="ivm-v" style="color:'+ivmColor(pct)+';font-weight:800">'+v+'<span class="ivm-u" style="font-weight:400">/ '+tot+'</span></span>'+bar(pct, ivmColor(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>'; }
case 'bool': return v?'<span class="ivm-v ivm-g">✓ ja</span>':'<span class="ivm-v ivm-r">✗ nein</span>';
case 'boolInv': return v?'<span class="ivm-v ivm-r">✗ nein</span>':'<span class="ivm-v ivm-g">✓ ja</span>';
case 'temp': { var t=Math.round(v*10)/10, col=t<=2?'#1f7a3d':t<=3?'#f9c33b':'#d8453a';
return '<span class="ivm-v" style="color:'+col+';font-weight:800">'+t.toLocaleString('de-AT')+' °C</span>'; }
case 'bool': return v?'<span class="ivm-v" style="color:#1f7a3d;font-weight:800">✓ ja</span>':'<span class="ivm-v" style="color:#d8453a;font-weight:800">✗ nein</span>';
case 'boolInv': return v?'<span class="ivm-v" style="color:#d8453a;font-weight:800">✗ nein</span>':'<span class="ivm-v" style="color:#1f7a3d;font-weight:800">✓ ja</span>';
case 'text': return '<span class="ivm-v ivm-txt">'+esc(v)+'</span>';
default: return num(v, f.u);
}