MediaWiki:Gadget-wix-interactive.js: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
Line 23:
'reserve-sensitivity': initReserveSensitivity,
'ifrs-timeline': initIfrsTimeline,
'liability-waterfall': initLiabilityWaterfall,
'prob-weighted': initProbWeighted
};
Line 1,587 ⟶ 1,588:
draw();
renderDetail();
}
/* ================================================================
PROB-WEIGHTED
Probability-weighted estimate calculator.
Two scenarios (quiet year / major flood) with an adjustable
flood probability slider.
================================================================ */
function initProbWeighted( container ) {
/* ── Constants ────────────────────────────────────────────── */
var QUIET = 8; // €m
var FLOOD = 40; // €m
/* ── Colors ──────────────────────────────────────────────── */
var COLOR_QUIET_BG = '#d4e6f1';
var COLOR_QUIET_FG = '#0C447C';
var COLOR_FLOOD_BG = '#fadbd8';
var COLOR_FLOOD_FG = '#791F1F';
var COLOR_RESULT_BG = '#d4e6f1';
var COLOR_RESULT_FG = '#1a5276';
/* ── Build UI ────────────────────────────────────────────── */
wix.empty( container );
var wrapper = wix.el( 'div', { className: 'wix-eng-wrapper' } );
container.appendChild( wrapper );
// Slider row
var slider = wix.el( 'input', {
type: 'range', min: '0', max: '50', value: '10', step: '1'
} );
var sliderVal = wix.el( 'span', { className: 'wix-eng-slider-val', textContent: '10%' } );
wrapper.appendChild( wix.el( 'div', { className: 'wix-eng-slider-row' }, [
wix.el( 'div', { className: 'wix-eng-slider-label', textContent: 'Flood probability' } ),
slider,
sliderVal
] ) );
// Scenario cards row
var elQuietVal = wix.el( 'div', { className: 'wix-pw-scene-val', style: { color: COLOR_QUIET_FG }, textContent: '\u20AC8m' } );
var elFloodVal = wix.el( 'div', { className: 'wix-pw-scene-val', style: { color: COLOR_FLOOD_FG }, textContent: '\u20AC40m' } );
wrapper.appendChild( wix.el( 'div', { className: 'wix-pw-calc' }, [
wix.el( 'div', { className: 'wix-pw-scene', style: { background: COLOR_QUIET_BG } }, [
wix.el( 'div', { className: 'wix-pw-scene-title', style: { color: COLOR_QUIET_FG }, textContent: 'Quiet year' } ),
elQuietVal
] ),
wix.el( 'div', { className: 'wix-pw-op', textContent: '+' } ),
wix.el( 'div', { className: 'wix-pw-scene', style: { background: COLOR_FLOOD_BG } }, [
wix.el( 'div', { className: 'wix-pw-scene-title', style: { color: COLOR_FLOOD_FG }, textContent: 'Major flood' } ),
elFloodVal
] )
] ) );
// Probability row (x multipliers)
var elQuietPct = wix.el( 'div', { className: 'wix-pw-prob-num', style: { color: COLOR_QUIET_FG }, textContent: '90%' } );
var elFloodPct = wix.el( 'div', { className: 'wix-pw-prob-num', style: { color: COLOR_FLOOD_FG }, textContent: '10%' } );
wrapper.appendChild( wix.el( 'div', { className: 'wix-pw-prob-row' }, [
wix.el( 'div', { style: { textAlign: 'center' } }, [
wix.el( 'div', { className: 'wix-pw-mult-x', textContent: '\u00D7' } ),
wix.el( 'div', { className: 'wix-pw-prob', style: { background: COLOR_QUIET_BG } }, [ elQuietPct ] )
] ),
wix.el( 'div' ),
wix.el( 'div', { style: { textAlign: 'center' } }, [
wix.el( 'div', { className: 'wix-pw-mult-x', textContent: '\u00D7' } ),
wix.el( 'div', { className: 'wix-pw-prob', style: { background: COLOR_FLOOD_BG } }, [ elFloodPct ] )
] )
] ) );
// Equals sign
wrapper.appendChild( wix.el( 'div', { className: 'wix-pw-eq' }, [
wix.el( 'span', { className: 'wix-pw-eq-sign', textContent: '=' } )
] ) );
// Result card
var elWeighted = wix.el( 'div', { className: 'wix-pw-result-num' } );
var elVs = wix.el( 'div', { className: 'wix-pw-result-vs' } );
wrapper.appendChild( wix.el( 'div', { className: 'wix-pw-result' }, [
wix.el( 'div', { className: 'wix-pw-result-label', textContent: 'Probability-weighted estimate' } ),
elWeighted,
elVs
] ) );
/* ── Update Logic ────────────────────────────────────────── */
function update() {
var fp = parseInt( slider.value, 10 );
var qp = 100 - fp;
sliderVal.textContent = fp + '%';
elQuietPct.textContent = qp + '%';
elFloodPct.textContent = fp + '%';
var w = ( qp / 100 ) * QUIET + ( fp / 100 ) * FLOOD;
var wR = Math.round( w * 10 ) / 10;
elWeighted.textContent = '\u20AC' + wR.toFixed( 1 ) + 'm';
var mostLikely = qp >= fp ? QUIET : FLOOD;
elVs.textContent = 'vs. \u20AC' + mostLikely + 'm most likely outcome';
}
/* ── Event Wiring ────────────────────────────────────────── */
slider.addEventListener( 'input', update );
// Initial render
update();
}
| |||