84 lines
4.9 KiB
JavaScript
84 lines
4.9 KiB
JavaScript
// Generated, do not edit. sha256:ea89ed2f3c7667a985d117ad93531e86e7422f6ef0152c179e997cfe96d6abd0
|
|
import { t } from '../i18n/index.js';
|
|
import { esc } from './escape.js';
|
|
|
|
const TEXT = 'fill:var(--text-primary);font-size:13px';
|
|
const SOFT = 'fill:var(--text-sec);font-size:12px';
|
|
|
|
const label = (x, y, text, style = TEXT, anchor = 'start') =>
|
|
`<text x="${x}" y="${y}" text-anchor="${anchor}" style="${style}">${esc(text)}</text>`;
|
|
|
|
const svg = (w, h, caption, body) =>
|
|
`<svg viewBox="0 0 ${w} ${h}" role="img" aria-label="${esc(caption)}" `
|
|
+ 'style="display:block;width:100%;min-width:30rem;height:auto;font-family:inherit">'
|
|
+ `${body}</svg>`;
|
|
|
|
function standPeriod(caption) {
|
|
return svg(640, 184, caption, [
|
|
`<rect x="330" y="20" width="270" height="122" rx="6" style="fill:var(--accent-soft)"/>`,
|
|
label(465, 38, t('guide.figures.period'), 'fill:var(--accent-text);font-size:12px', 'middle'),
|
|
`<rect x="90" y="52" width="510" height="28" rx="4" style="fill:var(--text-sec);fill-opacity:0.18;stroke:var(--text-sec)"/>`,
|
|
label(102, 71, t('guide.figures.sinceBuy')),
|
|
`<rect x="330" y="94" width="270" height="28" rx="4" style="fill:var(--accent);fill-opacity:0.28;stroke:var(--accent)"/>`,
|
|
label(342, 113, t('guide.figures.inPeriod')),
|
|
`<line x1="40" y1="152" x2="600" y2="152" style="stroke:var(--text-sec)"/>`,
|
|
...[90, 330, 600].map(x => `<line x1="${x}" y1="146" x2="${x}" y2="158" style="stroke:var(--text-sec)"/>`),
|
|
label(90, 176, t('guide.figures.purchase'), SOFT, 'middle'),
|
|
label(330, 176, t('guide.figures.yearStart'), SOFT, 'middle'),
|
|
label(600, 176, t('guide.figures.now'), SOFT, 'end'),
|
|
].join(''));
|
|
}
|
|
|
|
function accountExample(caption) {
|
|
const y = v => (230 - ((v - 140) / 60) * 200).toFixed(1);
|
|
const cost = y(191.2), inn = y(154.92), now = y(186.43);
|
|
const waarde = [[260, inn], [300, 168], [340, 173], [380, 145], [420, 124], [460, 132], [495, 96], [520, now]];
|
|
const lijn = waarde.map(([x, v]) => `${x},${v}`).join(' ');
|
|
return svg(680, 290, caption, [
|
|
`<polygon points="${lijn} 520,${inn} 260,${inn}" style="fill:var(--pos-bg)"/>`,
|
|
`<line x1="60" y1="${cost}" x2="520" y2="${cost}" style="stroke:var(--text-sec);stroke-dasharray:5 4"/>`,
|
|
`<circle cx="80" cy="${cost}" r="4" style="fill:var(--text-sec)"/>`,
|
|
label(94, Number(cost) - 8, t('guide.figures.cost'), SOFT),
|
|
`<line x1="260" y1="${inn}" x2="520" y2="${inn}" style="stroke:var(--accent);stroke-width:2"/>`,
|
|
label(268, Number(inn) + 20, t('guide.figures.broughtIn'), 'fill:var(--accent-text);font-size:12px'),
|
|
`<polyline points="${lijn}" style="fill:none;stroke:var(--text-primary);stroke-width:2;stroke-linejoin:round"/>`,
|
|
`<circle cx="520" cy="${now}" r="4" style="fill:var(--text-primary)"/>`,
|
|
`<line x1="534" y1="${cost}" x2="534" y2="${now}" style="stroke:var(--neg);stroke-width:3"/>`,
|
|
label(544, Number(now) - 3, t('guide.figures.unrealized'), 'fill:var(--neg);font-size:12px'),
|
|
`<line x1="534" y1="${Number(now) + 3}" x2="534" y2="${inn}" style="stroke:var(--pos);stroke-width:3"/>`,
|
|
label(544, 128, t('guide.figures.result'), 'fill:var(--pos);font-size:12px'),
|
|
label(544, 144, t('guide.figures.resultAmount'), 'fill:var(--pos);font-size:12px'),
|
|
`<line x1="60" y1="232" x2="520" y2="232" style="stroke:var(--text-sec)"/>`,
|
|
...[80, 260, 520].map(x => `<line x1="${x}" y1="226" x2="${x}" y2="238" style="stroke:var(--text-sec)"/>`),
|
|
label(80, 254, t('guide.figures.purchaseExchange'), SOFT, 'middle'),
|
|
label(260, 254, t('guide.figures.transfer'), SOFT, 'middle'),
|
|
label(520, 254, t('guide.figures.value'), SOFT, 'middle'),
|
|
`<line x1="60" y1="278" x2="84" y2="278" style="stroke:var(--text-primary);stroke-width:2"/>`,
|
|
label(90, 282, t('guide.figures.legendValue'), SOFT),
|
|
`<line x1="160" y1="278" x2="184" y2="278" style="stroke:var(--accent);stroke-width:2"/>`,
|
|
label(190, 282, t('guide.figures.legendBroughtIn'), SOFT),
|
|
`<line x1="320" y1="278" x2="344" y2="278" style="stroke:var(--text-sec);stroke-dasharray:5 4"/>`,
|
|
label(350, 282, t('guide.figures.legendCost'), SOFT),
|
|
].join(''));
|
|
}
|
|
|
|
function resultSum(caption) {
|
|
const deel = (x, w, opacity, text) =>
|
|
`<rect x="${x}" y="62" width="${w}" height="30" rx="4" style="fill:var(--accent);fill-opacity:${opacity};stroke:var(--accent)"/>`
|
|
+ label(x + 10, 82, text);
|
|
return svg(640, 104, caption, [
|
|
label(180, 32, t('guide.figures.result'), TEXT, 'end'),
|
|
`<rect x="196" y="12" width="404" height="30" rx="4" style="fill:var(--accent);fill-opacity:0.35;stroke:var(--accent)"/>`,
|
|
label(180, 82, t('guide.figures.roughly'), SOFT, 'end'),
|
|
deel(196, 220, 0.25, t('guide.figures.unrealizedPart')),
|
|
deel(420, 120, 0.15, t('guide.figures.realized')),
|
|
deel(544, 56, 0.06, t('guide.figures.interest')),
|
|
].join(''));
|
|
}
|
|
|
|
export const GUIDE_FIGURE_DRAWINGS = Object.freeze({
|
|
'stand-period': standPeriod,
|
|
'account-example': accountExample,
|
|
'result-sum': resultSum,
|
|
});
|