From edb418a3fc4cbce4bdba1978df61a070c5fab4ea Mon Sep 17 00:00:00 2001 From: n1474335 Date: Mon, 13 Feb 2017 17:48:24 +0000 Subject: [PATCH] BUGFIX: CanvasComponents naming conventions updated to match main project settings. Fixes 'Entropy' and 'Frequency distribution' operations. --- Gruntfile.js | 2 +- src/js/lib/canvas_components.js | 184 -------------------------------- src/js/lib/canvascomponents.js | 184 ++++++++++++++++++++++++++++++++ 3 files changed, 185 insertions(+), 185 deletions(-) delete mode 100755 src/js/lib/canvas_components.js create mode 100755 src/js/lib/canvascomponents.js diff --git a/Gruntfile.js b/Gruntfile.js index 93223827..628fcbe8 100755 --- a/Gruntfile.js +++ b/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", diff --git a/src/js/lib/canvas_components.js b/src/js/lib/canvas_components.js deleted file mode 100755 index d25b4ec1..00000000 --- a/src/js/lib/canvas_components.js +++ /dev/null @@ -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); - } - }, - -}; \ No newline at end of file diff --git a/src/js/lib/canvascomponents.js b/src/js/lib/canvascomponents.js new file mode 100755 index 00000000..4fba97a9 --- /dev/null +++ b/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); + } + }, + +};