Merge pull request #80 from gchq/bug-canvascomponents

BUGFIX: CanvasComponents naming conventions updated to match main pro…

Gruntfile.js

@@ -137,7 +137,7 @@ module.exports = function(grunt) {
         "src/js/lib/xpath.js",
 
         // Custom libraries
-        "src/js/lib/canvas_components.js",
+        "src/js/lib/canvascomponents.js",
 
         // Utility functions
         "src/js/core/Utils.js",

src/js/lib/canvas_components.js

@@ -1,184 +0,0 @@
-"use strict";
-
-/**
- * Various components for drawing diagrams on an HTML5 canvas.
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2016
- * @license Apache-2.0
- *
- * @constant
- * @namespace
- */
-var CanvasComponents = {
-
-	draw_line: function(ctx, start_x, start_y, end_x, end_y) {
-		ctx.beginPath();
-		ctx.moveTo(start_x, start_y);
-		ctx.lineTo(end_x, end_y);
-		ctx.closePath();
-		ctx.stroke();
-	},
-
-	draw_bar_chart: function(canvas, scores, x_axis_label, y_axis_label, num_x_labels, num_y_labels, font_size) {
-		font_size = font_size || 15;
-		if (!num_x_labels || num_x_labels > Math.round(canvas.width / 50)) {
-			num_x_labels = Math.round(canvas.width / 50);
-		}
-		if (!num_y_labels || num_y_labels > Math.round(canvas.width / 50)) {
-			num_y_labels = Math.round(canvas.height / 50);
-		}
-		
-		// Graph properties
-		var ctx = canvas.getContext("2d"),
-			left_padding = canvas.width * 0.08,
-			right_padding = canvas.width * 0.03,
-			top_padding = canvas.height * 0.08,
-			bottom_padding = canvas.height * 0.15,
-			graph_height = canvas.height - top_padding - bottom_padding,
-			graph_width = canvas.width - left_padding - right_padding,
-			base = top_padding + graph_height,
-			ceil = top_padding;
-			
-		ctx.font = font_size + "px Arial";
-		
-		// Draw axis
-		ctx.lineWidth = "1.0";
-		ctx.strokeStyle = "#444";
-		CanvasComponents.draw_line(ctx, left_padding, base, graph_width + left_padding, base); // x
-		CanvasComponents.draw_line(ctx, left_padding, base, left_padding, ceil); // y
-		
-		// Bar properties
-		var bar_padding = graph_width * 0.003,
-			bar_width = (graph_width - (bar_padding * scores.length)) / scores.length,
-			curr_x = left_padding + bar_padding,
-			max = Math.max.apply(Math, scores);
-			
-		// Draw bars
-		ctx.fillStyle = "green";
-		for (var i = 0; i < scores.length; i++) {
-			var h = scores[i] / max * graph_height;
-			ctx.fillRect(curr_x, base - h, bar_width, h);
-			curr_x += bar_width + bar_padding;
-		}
-		
-		// Mark x axis
-		ctx.fillStyle = "black";
-		ctx.textAlign = "center";
-		curr_x = left_padding + bar_padding;
-		if (num_x_labels >= scores.length) {
-			// Mark every score
-			for (var i = 0; i <= scores.length; i++) {
-				ctx.fillText(i, curr_x, base + (bottom_padding * 0.3));
-				curr_x += bar_width + bar_padding;
-			}
-		} else {
-			// Mark some scores
-			for (var i = 0; i <= num_x_labels; i++) {
-				var val = Math.ceil((scores.length / num_x_labels) * i);
-				curr_x = (graph_width / num_x_labels) * i + left_padding;
-				ctx.fillText(val, curr_x, base + (bottom_padding * 0.3));
-			}
-		}
-		
-		// Mark y axis
-		ctx.textAlign = "right";
-		var curr_y;
-		if (num_y_labels >= max) {
-			// Mark every increment
-			for (var i = 0; i <= max; i++) {
-				curr_y = base - (i / max * graph_height) + font_size / 3;
-				ctx.fillText(i, left_padding * 0.8, curr_y);
-			}
-		} else {
-			// Mark some increments
-			for (var i = 0; i <= num_y_labels; i++) {
-				var val = Math.ceil((max / num_y_labels) * i);
-				curr_y = base - (val / max * graph_height) + font_size / 3;
-				ctx.fillText(val, left_padding * 0.8, curr_y);
-			}
-		}
-		
-		// Label x axis
-		if (x_axis_label) {
-			ctx.textAlign = "center";
-			ctx.fillText(x_axis_label, graph_width / 2 + left_padding, base + bottom_padding * 0.8);
-		}
-		
-		// Label y axis
-		if (y_axis_label) {
-			ctx.save();
-			var x = left_padding * 0.3,
-				y = graph_height / 2 + top_padding;
-			ctx.translate(x, y);
-			ctx.rotate(-Math.PI / 2);
-			ctx.textAlign = "center";
-			ctx.fillText(y_axis_label, 0, 0);
-			ctx.restore();
-		}
-	},
-	
-	draw_scale_bar: function(canvas, score, max, markings) {
-		// Bar properties
-		var ctx = canvas.getContext("2d"),
-			left_padding = canvas.width * 0.01,
-			right_padding = canvas.width * 0.01,
-			top_padding = canvas.height * 0.1,
-			bottom_padding = canvas.height * 0.3,
-			bar_height = canvas.height - top_padding - bottom_padding,
-			bar_width = canvas.width - left_padding - right_padding;
-		
-		// Scale properties
-		var proportion = score / max;
-		
-		// Draw bar outline
-		ctx.strokeRect(left_padding, top_padding, bar_width, bar_height);
-		
-		// Shade in up to proportion
-		var grad = ctx.createLinearGradient(left_padding, 0, bar_width + left_padding, 0);
-		grad.addColorStop(0, "green");
-		grad.addColorStop(0.5, "gold");
-		grad.addColorStop(1, "red");
-		ctx.fillStyle = grad;
-		ctx.fillRect(left_padding, top_padding, bar_width * proportion, bar_height);
-		
-		// Add markings
-		var x0, y0, x1, y1;
-		ctx.fillStyle = "black";
-		ctx.textAlign = "center";
-		ctx.font = "13px Arial";
-		for (var i = 0; i < markings.length; i++) {
-			// Draw min line down
-			x0 = bar_width / max * markings[i].min + left_padding;
-			y0 = top_padding + bar_height + (bottom_padding * 0.1);
-			x1 = x0;
-			y1 = top_padding + bar_height + (bottom_padding * 0.3);
-			CanvasComponents.draw_line(ctx, x0, y0, x1, y1);
-			
-			// Draw max line down
-			x0 = bar_width / max * markings[i].max + left_padding;
-			x1 = x0;
-			CanvasComponents.draw_line(ctx, x0, y0, x1, y1);
-			
-			// Join min and max lines
-			x0 = bar_width / max * markings[i].min + left_padding;
-			y0 = top_padding + bar_height + (bottom_padding * 0.3);
-			x1 = bar_width / max * markings[i].max + left_padding;
-			y1 = y0;
-			CanvasComponents.draw_line(ctx, x0, y0, x1, y1);
-			
-			// Add label
-			if (markings[i].max >= max * 0.9) {
-				ctx.textAlign = "right";
-				x0 = x1;
-			} else if (markings[i].max <= max * 0.1) {
-				ctx.textAlign = "left";
-			} else {
-				x0 = x0 + (x1 - x0) / 2;
-			}
-			y0 = top_padding + bar_height + (bottom_padding * 0.8);
-			ctx.fillText(markings[i].label, x0, y0);
-		}
-	},
-	
-};

src/js/lib/canvascomponents.js

@@ -0,0 +1,184 @@
+"use strict";
+
+/**
+ * Various components for drawing diagrams on an HTML5 canvas.
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2016
+ * @license Apache-2.0
+ *
+ * @constant
+ * @namespace
+ */
+var CanvasComponents = {
+
+    drawLine: function(ctx, startX, startY, endX, endY) {
+        ctx.beginPath();
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+        ctx.closePath();
+        ctx.stroke();
+    },
+
+    drawBarChart: function(canvas, scores, xAxisLabel, yAxisLabel, numXLabels, numYLabels, fontSize) {
+        fontSize = fontSize || 15;
+        if (!numXLabels || numXLabels > Math.round(canvas.width / 50)) {
+            numXLabels = Math.round(canvas.width / 50);
+        }
+        if (!numYLabels || numYLabels > Math.round(canvas.width / 50)) {
+            numYLabels = Math.round(canvas.height / 50);
+        }
+
+        // Graph properties
+        var ctx = canvas.getContext("2d"),
+            leftPadding = canvas.width * 0.08,
+            rightPadding = canvas.width * 0.03,
+            topPadding = canvas.height * 0.08,
+            bottomPadding = canvas.height * 0.15,
+            graphHeight = canvas.height - topPadding - bottomPadding,
+            graphWidth = canvas.width - leftPadding - rightPadding,
+            base = topPadding + graphHeight,
+            ceil = topPadding;
+
+        ctx.font = fontSize + "px Arial";
+
+        // Draw axis
+        ctx.lineWidth = "1.0";
+        ctx.strokeStyle = "#444";
+        CanvasComponents.drawLine(ctx, leftPadding, base, graphWidth + leftPadding, base); // x
+        CanvasComponents.drawLine(ctx, leftPadding, base, leftPadding, ceil); // y
+
+        // Bar properties
+        var barPadding = graphWidth * 0.003,
+            barWidth = (graphWidth - (barPadding * scores.length)) / scores.length,
+            currX = leftPadding + barPadding,
+            max = Math.max.apply(Math, scores);
+
+        // Draw bars
+        ctx.fillStyle = "green";
+        for (var i = 0; i < scores.length; i++) {
+            var h = scores[i] / max * graphHeight;
+            ctx.fillRect(currX, base - h, barWidth, h);
+            currX += barWidth + barPadding;
+        }
+
+        // Mark x axis
+        ctx.fillStyle = "black";
+        ctx.textAlign = "center";
+        currX = leftPadding + barPadding;
+        if (numXLabels >= scores.length) {
+            // Mark every score
+            for (i = 0; i <= scores.length; i++) {
+                ctx.fillText(i, currX, base + (bottomPadding * 0.3));
+                currX += barWidth + barPadding;
+            }
+        } else {
+            // Mark some scores
+            for (i = 0; i <= numXLabels; i++) {
+                var val = Math.ceil((scores.length / numXLabels) * i);
+                currX = (graphWidth / numXLabels) * i + leftPadding;
+                ctx.fillText(val, currX, base + (bottomPadding * 0.3));
+            }
+        }
+
+        // Mark y axis
+        ctx.textAlign = "right";
+        var currY;
+        if (numYLabels >= max) {
+            // Mark every increment
+            for (i = 0; i <= max; i++) {
+                currY = base - (i / max * graphHeight) + fontSize / 3;
+                ctx.fillText(i, leftPadding * 0.8, currY);
+            }
+        } else {
+            // Mark some increments
+            for (i = 0; i <= numYLabels; i++) {
+                val = Math.ceil((max / numYLabels) * i);
+                currY = base - (val / max * graphHeight) + fontSize / 3;
+                ctx.fillText(val, leftPadding * 0.8, currY);
+            }
+        }
+
+        // Label x axis
+        if (xAxisLabel) {
+            ctx.textAlign = "center";
+            ctx.fillText(xAxisLabel, graphWidth / 2 + leftPadding, base + bottomPadding * 0.8);
+        }
+
+        // Label y axis
+        if (yAxisLabel) {
+            ctx.save();
+            var x = leftPadding * 0.3,
+                y = graphHeight / 2 + topPadding;
+            ctx.translate(x, y);
+            ctx.rotate(-Math.PI / 2);
+            ctx.textAlign = "center";
+            ctx.fillText(yAxisLabel, 0, 0);
+            ctx.restore();
+        }
+    },
+
+    drawScaleBar: function(canvas, score, max, markings) {
+        // Bar properties
+        var ctx = canvas.getContext("2d"),
+            leftPadding = canvas.width * 0.01,
+            rightPadding = canvas.width * 0.01,
+            topPadding = canvas.height * 0.1,
+            bottomPadding = canvas.height * 0.3,
+            barHeight = canvas.height - topPadding - bottomPadding,
+            barWidth = canvas.width - leftPadding - rightPadding;
+
+        // Scale properties
+        var proportion = score / max;
+
+        // Draw bar outline
+        ctx.strokeRect(leftPadding, topPadding, barWidth, barHeight);
+
+        // Shade in up to proportion
+        var grad = ctx.createLinearGradient(leftPadding, 0, barWidth + leftPadding, 0);
+        grad.addColorStop(0, "green");
+        grad.addColorStop(0.5, "gold");
+        grad.addColorStop(1, "red");
+        ctx.fillStyle = grad;
+        ctx.fillRect(leftPadding, topPadding, barWidth * proportion, barHeight);
+
+        // Add markings
+        var x0, y0, x1, y1;
+        ctx.fillStyle = "black";
+        ctx.textAlign = "center";
+        ctx.font = "13px Arial";
+        for (var i = 0; i < markings.length; i++) {
+            // Draw min line down
+            x0 = barWidth / max * markings[i].min + leftPadding;
+            y0 = topPadding + barHeight + (bottomPadding * 0.1);
+            x1 = x0;
+            y1 = topPadding + barHeight + (bottomPadding * 0.3);
+            CanvasComponents.drawLine(ctx, x0, y0, x1, y1);
+
+            // Draw max line down
+            x0 = barWidth / max * markings[i].max + leftPadding;
+            x1 = x0;
+            CanvasComponents.drawLine(ctx, x0, y0, x1, y1);
+
+            // Join min and max lines
+            x0 = barWidth / max * markings[i].min + leftPadding;
+            y0 = topPadding + barHeight + (bottomPadding * 0.3);
+            x1 = barWidth / max * markings[i].max + leftPadding;
+            y1 = y0;
+            CanvasComponents.drawLine(ctx, x0, y0, x1, y1);
+
+            // Add label
+            if (markings[i].max >= max * 0.9) {
+                ctx.textAlign = "right";
+                x0 = x1;
+            } else if (markings[i].max <= max * 0.1) {
+                ctx.textAlign = "left";
+            } else {
+                x0 = x0 + (x1 - x0) / 2;
+            }
+            y0 = topPadding + barHeight + (bottomPadding * 0.8);
+            ctx.fillText(markings[i].label, x0, y0);
+        }
+    },
+
+};