ctucx.git: trainsearch

canvas: render load factor

diff --git a/src/canvas.js b/src/canvas.js
@@ -18,6 +18,12 @@ const colorFor = (leg, type) => {
 	const product = leg.line && leg.line.product || 'walk';
 	return colors[type][product] || colors[type].default;
 };
+const loadFactorColors = {
+	"low-to-medium": [ "#777", "#ccc", "#ccc" ],
+	"high": [ "#777", "#777", "#ccc" ],
+	"very-high": [ "#ee8800", "#ee8800", "#ee8800"  ],
+	"exceptionally-high": [ "#cc3300", "#cc3300", "#cc3300" ],
+};
 
 const flatten = (arr) => [].concat(...arr);
 

@@ -287,6 +293,19 @@ const renderJourneys = () => {
 				ctx.drawImage(preRenderedText, Math.ceil(dpr * (x + ((rectWidth - preRenderedText.width/dpr)) / 2)), dpr * (y - 7.5));
 				ctx.scale(dpr, dpr);
 			}
+
+			if (leg.loadFactor) {
+				ctx.shadowColor = '#00000090';
+				ctx.shadowBlur = 2;
+				[ "#777", "#aaa", "#aaa" ];
+				for (let i = 0; i < 3; i++) {
+					ctx.beginPath();
+					ctx.fillStyle = loadFactorColors[leg.loadFactor][i];
+					ctx.arc(x + (i + 3) * rectWidth / 8, y + duration - 9.5, 5, 0, 2 * Math.PI, false);
+					ctx.fill();
+				}
+				ctx.shadowBlur = 0;
+			}
 		}
 
 		journey.legs.reverse();