BUGFIX: CanvasComponents naming conventions updated to match main project settings. Fixes 'Entropy' and 'Frequency distribution' operations.
This commit is contained in:
n1474335
parent
522e7a9439
commit
edb418a3fc
@ -137,7 +137,7 @@ module.exports = function(grunt) {
|
|||||||
"src/js/lib/xpath.js",
|
"src/js/lib/xpath.js",
|
||||||
|
|
||||||
// Custom libraries
|
// Custom libraries
|
||||||
"src/js/lib/canvas_components.js",
|
"src/js/lib/canvascomponents.js",
|
||||||
|
|
||||||
// Utility functions
|
// Utility functions
|
||||||
"src/js/core/Utils.js",
|
"src/js/core/Utils.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);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
};
|
|
||||||
184
src/js/lib/canvascomponents.js
Executable file
184
src/js/lib/canvascomponents.js
Executable file
@ -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);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user