MediaWiki:Gadget-wix-interactive.js: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
Line 11:
- "insurer-engines" Two-engine profit simulator (underwriting + investment)
- "risk-adjustment" Brittany storm confidence-level risk adjustment chart
- "grouping-funnel" 3-step IFRS 17 contract grouping walkthrough
================================================================ */
Line 28 ⟶ 29:
'discount-rate': initDiscountRate,
'balance-sheet': initBalanceSheet,
'risk-adjustment': initRiskAdjustment,
'grouping-funnel': initGroupingFunnel
};
Line 2,507 ⟶ 2,509:
window.addEventListener( 'resize', draw );
draw();
}
/* ================================================================
GROUPING FUNNEL — data-wix-module="grouping-funnel"
3-step walkthrough: portfolio → profitability → annual cohort.
================================================================ */
function initGroupingFunnel( container ) {
/* ── Step data ───────────────────────────────────────────── */
var labels = [
'<b>Step 1 \u2014 Portfolio:</b> group contracts with similar risks managed together',
'<b>Step 2 \u2014 Profitability:</b> separate onerous from profitable at initial recognition',
'<b>Step 3 \u2014 Annual cohort:</b> contracts issued more than 12\u00A0months apart cannot mix'
];
var counts = [
'AXA writes <b>5,000</b> home insurance contracts in coastal Brittany \u2014 plus a separate motor book in Spain',
'<b>3 groups</b> within the Brittany portfolio based on expected profitability',
'<b>6 measurement groups</b> \u2014 each profitability bucket split into 2025 and 2026 cohorts'
];
/* ── State ───────────────────────────────────────────────── */
var step = 0;
/* ── Build UI ────────────────────────────────────────────── */
wix.empty( container );
var wrapper = wix.el( 'div', { className: 'wix-eng-wrapper' } );
container.appendChild( wrapper );
/* Progress steps */
var stepEls = [];
for ( var i = 0; i < 3; i++ ) {
stepEls.push( wix.el( 'div', { className: 'wix-gf-step' } ) );
}
wrapper.appendChild( wix.el( 'div', { className: 'wix-gf-steps' }, stepEls ) );
/* Label */
var labelEl = wix.el( 'p', { className: 'wix-gf-label' } );
wrapper.appendChild( labelEl );
/* Visual area */
var visualEl = wix.el( 'div', { className: 'wix-gf-visual' } );
wrapper.appendChild( visualEl );
/* Count box */
var countEl = wix.el( 'div', { className: 'wix-gf-count' } );
wrapper.appendChild( countEl );
/* Nav buttons */
var btnPrev = wix.el( 'button', { className: 'wix-btn wix-btn--outline', innerHTML: '\u25C2 Previous' } );
var btnNext = wix.el( 'button', { className: 'wix-btn', innerHTML: 'Next \u25B8' } );
wrapper.appendChild( wix.el( 'div', { className: 'wix-gf-nav' }, [ btnPrev, btnNext ] ) );
/* ── Helpers ─────────────────────────────────────────────── */
function makeSeg( flex, bg, text, textColor, extra ) {
var s = wix.el( 'div', { className: 'wix-gf-seg' } );
s.style.flex = flex;
s.style.background = bg;
s.style.color = textColor;
s.textContent = text;
if ( extra ) {
Object.keys( extra ).forEach( function ( k ) { s.style[k] = extra[k]; } );
}
return s;
}
function makeBarRow( label, segments, groupLabel ) {
var bar = wix.el( 'div', { className: 'wix-gf-bar' }, segments );
var children = [
wix.el( 'p', { className: 'wix-gf-bar-label', textContent: label } ),
bar
];
if ( groupLabel ) {
children.push( wix.el( 'p', { className: 'wix-gf-group-label', textContent: groupLabel } ) );
}
return wix.el( 'div', { className: 'wix-gf-bar-row' }, children );
}
/* ── Render ──────────────────────────────────────────────── */
function render() {
/* Progress dots */
for ( var i = 0; i < 3; i++ ) {
stepEls[i].className = 'wix-gf-step' + ( i <= step ? ' wix-gf-step--done' : '' );
}
/* Label + count */
labelEl.innerHTML = labels[step];
countEl.innerHTML = counts[step];
/* Nav state */
btnPrev.disabled = step === 0;
btnNext.disabled = step === 2;
/* Visual */
wix.empty( visualEl );
if ( step === 0 ) {
visualEl.appendChild( makeBarRow(
'Home insurance \u2014 Brittany, France',
[ makeSeg( 5000, '#EEEDFE', '5,000 contracts', '#3C3489' ) ],
'Portfolio 1 \u2014 same weather risks, same underwriting team'
) );
visualEl.appendChild( wix.el( 'div', { style: { height: '8px' } } ) );
visualEl.appendChild( makeBarRow(
'Motor third-party liability \u2014 Spain',
[ makeSeg( 3000, '#F1EFE8', '3,000 contracts', '#5F5E5A' ) ],
'Portfolio 2 \u2014 different risk drivers, different team'
) );
}
if ( step === 1 ) {
visualEl.appendChild( makeBarRow(
'Home insurance \u2014 Brittany, France',
[
makeSeg( 4200, '#E1F5EE', '4,200 profitable', '#085041' ),
makeSeg( 500, '#FAEEDA', '500 borderline', '#633806' ),
makeSeg( 300, '#FCEBEB', '300 onerous', '#791F1F' )
],
null
) );
/* Annotation row */
var annotData = [
{ flex: 4200, text: 'CSM stores profit', color: '#0F6E56' },
{ flex: 500, text: 'Monitor', color: '#854F0B' },
{ flex: 300, text: 'Loss recognised', color: '#A32D2D' }
];
var annotChildren = [];
annotData.forEach( function ( a ) {
var item = wix.el( 'div', {
className: 'wix-gf-annot-item',
textContent: a.text
} );
item.style.flex = a.flex;
item.style.color = a.color;
return annotChildren.push( item );
} );
visualEl.appendChild( wix.el( 'div', { className: 'wix-gf-annot' }, annotChildren ) );
visualEl.appendChild( wix.el( 'div', { style: { height: '12px' } } ) );
visualEl.appendChild( makeBarRow(
'Motor third-party liability \u2014 Spain',
[ makeSeg( 3000, '#F1EFE8', 'Separate portfolio \u2014 own profitability split', '#5F5E5A' ) ],
null
) );
}
if ( step === 2 ) {
visualEl.appendChild( wix.el( 'p', { className: 'wix-gf-bar-label', textContent: 'Home insurance \u2014 Brittany, France' } ) );
var rows = [
{ n: 4200, label: 'Profitable', bg: '#E1F5EE', tc: '#085041', sub: '#0F6E56' },
{ n: 500, label: 'Borderline', bg: '#FAEEDA', tc: '#633806', sub: '#854F0B' },
{ n: 300, label: 'Onerous', bg: '#FCEBEB', tc: '#791F1F', sub: '#A32D2D' }
];
var maxN = 4200;
rows.forEach( function ( r ) {
var a = Math.round( r.n * 0.55 );
var b = r.n - a;
var cohortBar = wix.el( 'div', { className: 'wix-gf-cohort-bar' } );
cohortBar.style.maxWidth = Math.round( r.n / maxN * 100 ) + '%';
cohortBar.appendChild( makeSeg( a, r.bg, a.toLocaleString() + ' (2025)', r.tc,
{ height: '36px', border: '0.5px solid ' + r.sub } ) );
cohortBar.appendChild( makeSeg( b, r.bg, b.toLocaleString() + ' (2026)', r.tc,
{ height: '36px', opacity: '0.6', border: '0.5px solid ' + r.sub } ) );
visualEl.appendChild( wix.el( 'div', { className: 'wix-gf-cohort-row' }, [
wix.el( 'span', { className: 'wix-gf-cohort-label', textContent: r.label } ),
cohortBar
] ) );
} );
}
}
/* ── Events ──────────────────────────────────────────────── */
btnPrev.addEventListener( 'click', function () {
if ( step > 0 ) { step--; render(); }
} );
btnNext.addEventListener( 'click', function () {
if ( step < 2 ) { step++; render(); }
} );
render();
}
| |||