pruncalc/ts/mat.ts

import * as Plot from '@observablehq/plot';
import * as d3 from 'd3';
import {cachedFetchJSON} from './cache';

const tickerSelect = document.querySelector('select#ticker') as HTMLSelectElement;
const charts = document.querySelector('#charts')!;

(async function () {
	const materials: Material[] = await fetch('https://rest.fnar.net/material/allmaterials').then((r) => r.json());
	const selected = document.location.hash.substring(1);
	for (const mat of materials.sort((a, b) => a.Ticker.localeCompare(b.Ticker))) {
		const option = document.createElement('option');
		option.value = mat.Ticker;
		option.textContent = `${mat.Ticker} ${mat.Name}`;
		if (mat.Ticker === selected)
			option.selected = true;
		tickerSelect.appendChild(option);
	}
	if (selected)
		render();
})();

tickerSelect.addEventListener('change', async () => {
	await render();
	document.location.hash = tickerSelect.value;
});
	
async function render() {
	charts.innerHTML = '';
	const cxpc = await Promise.all([
		getCXPC(tickerSelect.value, 'NC1'), getCXPC(tickerSelect.value, 'CI1'),
		getCXPC(tickerSelect.value, 'IC1'), getCXPC(tickerSelect.value, 'AI1'),
	]);

	let minDate = null, maxDate = null;
	let maxPrice = 0, maxTraded = 0;
	for (const cxPrices of cxpc)
		for (const p of cxPrices) {
			if (minDate === null || p.DateEpochMs < minDate) minDate = p.DateEpochMs;
			if (maxDate === null || p.DateEpochMs > maxDate) maxDate = p.DateEpochMs;
			if (p.High > maxPrice) maxPrice = p.High;
			if (p.Traded > maxTraded) maxTraded = p.Traded;
		}
	if (minDate === null || maxDate === null)
		throw new Error('no data');

	const dateRange: [Date, Date] = [new Date(minDate), new Date(maxDate)];
	charts.append(
		renderPriceChart('NC1', dateRange, maxPrice, maxTraded, cxpc[0]), renderPriceChart('CI1', dateRange, maxPrice, maxTraded, cxpc[1]),
		renderPriceChart('IC1', dateRange, maxPrice, maxTraded, cxpc[2]), renderPriceChart('AI1', dateRange, maxPrice, maxTraded, cxpc[3]),
	);
}

async function getCXPC(ticker: string, cx: string): Promise<PriceChartPoint[]> {
	const cxpc: PriceChartPoint[] = await cachedFetchJSON(`https://rest.fnar.net/exchange/cxpc/${ticker}.${cx}`);
	const threshold = Date.now() - 100 * 24 * 60 * 60 * 1000; // work around FIO bug that shows old data
	return cxpc.filter((p) => p.Interval === 'HOUR_TWELVE' && p.DateEpochMs > threshold);
}

function renderPriceChart(cx: string, dateRange: [Date, Date], maxPrice: number, maxTraded: number, cxpc: PriceChartPoint[]):
		SVGSVGElement | HTMLElement {
	const chartsWidth = charts.getBoundingClientRect().width;
	const numFormat = Plot.formatNumber();
	return Plot.plot({
		grid: true,
		width: chartsWidth < 600 ? chartsWidth : chartsWidth / 2 - 10,
		height: 400,
		marginLeft: 26 + 7 * Math.log10(maxPrice),
		marginRight: 26 + 7 * Math.log10(maxTraded),
		x: {domain: dateRange},
		y: {axis: 'left', label: cx, domain: [0, maxPrice * 1.1]},
		marks: [
			Plot.axisY(d3.ticks(0, maxTraded * 1.5, 10), {
				label: 'traded',
				anchor: 'right',
				y: (d) => (d / maxTraded) * maxPrice / 3,
			}),
			Plot.rectY(cxpc, {
				x: (p) => new Date(p.DateEpochMs),
				y: (p) => (p.Traded / maxTraded) * maxPrice / 3, // scale traded to price
				interval: 'day',
				fill: '#272',
				fillOpacity: 0.2,
			}),
			Plot.ruleX(cxpc, {
				x: (p) => new Date(p.DateEpochMs),
				y1: 'Low',
				y2: 'High',
				strokeWidth: 5,
				stroke: '#42a',
			}),
			Plot.dot(cxpc, {
				x: (p) => new Date(p.DateEpochMs),
				y: (p) => p.Volume / p.Traded,
				fill: '#a37',
				r: 2,
			}),
			Plot.crosshairX(cxpc, {
				x: (p) => new Date(p.DateEpochMs),
				y: (p) => p.Volume / p.Traded,
				textStroke: '#111',
			}),
			Plot.text(cxpc, Plot.pointerX({
				px: (p) => new Date(p.DateEpochMs),
				py: (p) => p.Volume / p.Traded,
				dy: -20,
				frameAnchor: "top-right",
				fontVariant: "tabular-nums",
				text: (p) => `${Plot.formatIsoDate(new Date(p.DateEpochMs))}\n` +
					`avg: $${numFormat(p.Volume / p.Traded)}\n` +
					`high: ${numFormat(p.High)}\n` +
					`low: ${numFormat(p.Low)}\n` +
					`traded: ${numFormat(p.Traded)}`
			})),
		]
	});
}

interface Material {
	Ticker: string;
	Name: string;
}

interface PriceChartPoint {
	Interval: 'MINUTE_FIVE' | 'MINUTE_FIFTEEN' | 'MINUTE_THIRTY' | 'HOUR_ONE' | 'HOUR_TWO' | 'HOUR_FOUR' | 'HOUR_SIX' | 'HOUR_TWELVE' | 'DAY_ONE' | 'DAY_THREE';
	DateEpochMs: number;
	High: number;
	Low: number;
	Volume: number;
	Traded: number;
}