diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/template.html | 24 |
1 files changed, 18 insertions, 6 deletions
diff --git a/web/template.html b/web/template.html index 56bbea5..45fa874 100644 --- a/web/template.html +++ b/web/template.html @@ -35,6 +35,8 @@ <body> <header> <h1 id="title"></h1> + <label>Bars <select id="interval"><option value="day">Daily</option><option value="week">Weekly</option> + <option value="month">Monthly</option></select></label> <label>Colours <select id="scheme"><option value="tw">Red up / green down (TW)</option> <option value="us">Green up / red down (US)</option></select></label> <button id="reset">Reset zoom</button> @@ -44,19 +46,28 @@ </header> <div id="wrap"><svg id="svg"></svg></div> <script> -const D = /*__DATA__*/null; -const N = D.candles.length; +const RAW = /*__DATA__*/null; const $ = id => document.getElementById(id); const svg = $('svg'); const M = { l: 12, r: 52, t: 6, b: 20 }; -const MIN_SPAN = Math.min(10, N); +const UNIT = { day: 'day', week: 'week ending', month: 'month ending' }; -let start = Math.max(0, N - 120), end = N; // visible window, in bar indices (float) +let D, N, MIN_SPAN, start, end; // current interval's data; visible window in bar indices (float) let hover = null, pins = []; +function useInterval(name) { + D = Object.assign({ name: RAW.name, rsiPeriod: RAW.rsiPeriod, kdPeriod: RAW.kdPeriod, interval: name }, RAW.intervals[name]); + N = D.candles.length; + MIN_SPAN = Math.min(10, N); + start = Math.max(0, N - 120); end = N; + hover = null; pins = []; + $('interval').value = name; + $('title').textContent = `${D.name} · ${name === 'day' ? 'daily' : name === 'week' ? 'weekly' : 'monthly'} bars · ` + + `RSI(${D.rsiPeriod}) KD(${D.kdPeriod}) · ${D.candles[0].Date} – ${D.candles[N-1].Date}`; +} let scheme = 'tw'; try { scheme = localStorage.getItem('scheme') || 'tw'; } catch (e) {} $('scheme').value = scheme; -$('title').textContent = `${D.name} · RSI(${D.rsiPeriod}) KD(${D.kdPeriod}) · ${D.candles[0].Date} – ${D.candles[N-1].Date}`; +useInterval(RAW.initial); const css = n => getComputedStyle(document.documentElement).getPropertyValue(n).trim(); const fmt = (v, d = 2) => v == null ? '–' : v.toFixed(d); @@ -205,7 +216,7 @@ function updateInfo() { const prev = i > 0 ? D.candles[i-1].Close : null; const chg = prev ? (c.Close - prev) / prev * 100 : null; const cc = chg == null ? '' : `style="color:${chg >= 0 ? col.up : col.down}"`; - let t = `<b>${c.Date}</b> O ${fmt(c.Open)} H ${fmt(c.High)} L ${fmt(c.Low)} ` + + let t = `<b>${D.interval === 'day' ? '' : UNIT[D.interval] + ' '}${c.Date}</b>${i === N - 1 && D.partial ? ' <span style="color:var(--muted)">(latest bar may be incomplete)</span>' : ''} O ${fmt(c.Open)} H ${fmt(c.High)} L ${fmt(c.Low)} ` + `C <b ${cc}>${fmt(c.Close)}</b> <span ${cc}>(${chg == null ? '–' : (chg >= 0 ? '+' : '') + chg.toFixed(2) + '%'})</span> ` + `Vol ${fmtVol(c.Volume)} <span style="color:${css('--accent')}">RSI ${fmt(D.rsi[i], 1)}</span> ` + `<span style="color:${css('--line1')}">K ${fmt(D.k[i], 1)}</span> <span style="color:${css('--line2')}">D ${fmt(D.d[i], 1)}</span>`; @@ -258,6 +269,7 @@ svg.addEventListener('pointerup', e => { drag = null; }); svg.addEventListener('pointerleave', () => { if (!drag) { hover = null; render(); } }); +$('interval').onchange = e => { useInterval(e.target.value); clampWin(); render(); }; $('reset').onclick = () => { start = 0; end = N; render(); }; $('clear').onclick = () => { pins = []; render(); }; $('scheme').onchange = e => { scheme = e.target.value; try { localStorage.setItem('scheme', scheme); } catch (_) {} render(); }; |