mat: show 4 CX charts

ts/mat.ts

@@ -27,7 +27,10 @@ tickerSelect.addEventListener('change', async () => {
 	
 async function render() {
 	charts.innerHTML = '';
+	renderPriceChart(tickerSelect.value, 'NC1');
+	renderPriceChart(tickerSelect.value, 'CI1');
 	renderPriceChart(tickerSelect.value, 'IC1');
+	renderPriceChart(tickerSelect.value, 'AI1');
 }
 
 async function renderPriceChart(ticker: string, cx: string) {
@@ -40,7 +43,9 @@ async function renderPriceChart(ticker: string, cx: string) {
 	const maxTraded = Math.max(...filtered.map((t) => t.Traded));
 	charts.appendChild(Plot.plot({
 		grid: true,
-		y: {axis: 'left', label: 'ICA', domain: [0, maxPrice * 1.1]},
+		width: charts.getBoundingClientRect().width / 2 - 10,
+		height: 400,
+		y: {axis: 'left', label: cx, domain: [0, maxPrice * 1.1]},
 		marks: [
 			Plot.axisY(d3.ticks(0, maxTraded * 2, 10), {
 				label: 'traded',

www/style.css

@@ -104,6 +104,13 @@ main.buy {
 	}
 }
 
+main.mat {
+	width: 90%;
+	#charts > svg {
+		display: inline-block;
+	}
+}
+
 #loader {
 	display: none;
 	width: 48px;