František Špaček
2 years ago
parent
a4c23e116d
commit
3f59a07483
@ -1,528 +0,0 @@
|
|||||||
function Rect(value, name, x, y, w, h){
|
|
||||||
this.value = value;
|
|
||||||
this.name = name;
|
|
||||||
this.x = x;
|
|
||||||
this.y = y;
|
|
||||||
this.w = w;
|
|
||||||
this.h = h;
|
|
||||||
this.checkHit = function (mouseX, mouseY) {
|
|
||||||
return (mouseX >= x && mouseX <= x + w && mouseY >= y && mouseY <= y + h);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function Circle(value, name, x, y, r){
|
|
||||||
this.value = value;
|
|
||||||
this.name = name;
|
|
||||||
this.x = x;
|
|
||||||
this.y = y;
|
|
||||||
this.r = r;
|
|
||||||
this.checkHit = function (mouseX, mouseY) {
|
|
||||||
return Math.pow((mouseX - x),2) + Math.pow((mouseY - y),2) <= Math.pow(r, 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function PieSlice(value, name, x, y, r, sAngle, eAngle){
|
|
||||||
this.value = value;
|
|
||||||
this.name = name;
|
|
||||||
this.x = x;
|
|
||||||
this.y = y;
|
|
||||||
this.r = r;
|
|
||||||
this.sAngle = sAngle;
|
|
||||||
this.eAngle = eAngle;
|
|
||||||
this.checkHit = function (mouseX, mouseY) {
|
|
||||||
if (Math.pow((mouseX - x),2) + Math.pow((mouseY - y),2) <= Math.pow(r, 2)){
|
|
||||||
var dy = mouseY - y;
|
|
||||||
var dx = mouseX - x;
|
|
||||||
var theta = Math.atan2(dy, dx); // range (-PI, PI]
|
|
||||||
if (theta < 0) theta += 2*Math.PI;
|
|
||||||
|
|
||||||
return (theta > sAngle && theta < eAngle);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let objects = [];
|
|
||||||
|
|
||||||
function checkHit(pos) {
|
|
||||||
for (let i = 0; i < objects.length; i++){
|
|
||||||
if (objects[i].checkHit(pos.x, pos.y)){
|
|
||||||
return objects[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getLargest(data) {
|
|
||||||
let largest = data[0].values[0];
|
|
||||||
|
|
||||||
data.forEach(function (categ) {
|
|
||||||
for (let i = 0; i < categ.values.length; i++)
|
|
||||||
if (categ.values[i] > largest) {
|
|
||||||
largest = categ.values[i];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return largest;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSmallest(data) {
|
|
||||||
let smallest = data[0].values[0];
|
|
||||||
|
|
||||||
data.forEach(function (categ) {
|
|
||||||
for (let i = 0; i < categ.values.length; i++)
|
|
||||||
if (categ.values[i] < smallest) {
|
|
||||||
smallest = categ.values[i];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return smallest;
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawAxis(bounds, largest, smallest, arrayLen, ctx, graphSettings, drawValues = true) {
|
|
||||||
ctx.font = "16px Arial";
|
|
||||||
if (graphSettings.y_step <= 0) graphSettings.y_step = 1;
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
for (let i = (smallest < 0)?smallest:0; i <= ((largest>=0)?largest:0); i += parseFloat(graphSettings.y_step)){
|
|
||||||
|
|
||||||
ctx.strokeStyle = "#BBB";
|
|
||||||
ctx.lineWidth = 1;
|
|
||||||
let scale = bounds.height - ((largest >= 0)?(bounds.bottom - bounds.xAxis):0);
|
|
||||||
let extreme = (largest<=0)?Math.abs(smallest):Math.abs(largest);
|
|
||||||
let yPos = Math.round((bounds.xAxis - i * scale / extreme));
|
|
||||||
|
|
||||||
//support line
|
|
||||||
if (graphSettings.display_support_lines) {
|
|
||||||
|
|
||||||
ctx.moveTo( bounds.left, yPos );
|
|
||||||
ctx.lineTo( bounds.right, yPos );
|
|
||||||
}
|
|
||||||
|
|
||||||
//Y axis value
|
|
||||||
ctx.fillStyle = "black";
|
|
||||||
ctx.textAlign = "center";
|
|
||||||
ctx.textAlign = "end";
|
|
||||||
ctx.fillText( i, bounds.left - 3, yPos);
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
//X axis value
|
|
||||||
if (drawValues) {
|
|
||||||
ctx.fillStyle = "black";
|
|
||||||
ctx.textAlign = "center";
|
|
||||||
for (let i = 0; i < arrayLen; i++){
|
|
||||||
let x = bounds.left + bounds.width / (arrayLen - 1) * i;
|
|
||||||
let text = (i + 1).toString();
|
|
||||||
if (graphSettings.custom_x_values !== "")
|
|
||||||
text = graphSettings.custom_x_values.split(';')[i];
|
|
||||||
ctx.fillText(text, x, bounds.bottom + 18);
|
|
||||||
}
|
|
||||||
ctx.closePath();
|
|
||||||
}
|
|
||||||
|
|
||||||
//X and Y axis
|
|
||||||
ctx.strokeStyle = "black";
|
|
||||||
ctx.lineWidth = "2px";
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo( bounds.left, bounds.top );
|
|
||||||
ctx.lineTo( bounds.left, bounds.bottom );
|
|
||||||
ctx.moveTo( bounds.left, bounds.xAxis);
|
|
||||||
ctx.lineTo( bounds.right, bounds.xAxis );
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
//Axis labels
|
|
||||||
//X axis text
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.font = "20px Arial";
|
|
||||||
ctx.fillStyle = "black";
|
|
||||||
ctx.textAlign = "center";
|
|
||||||
ctx.fillText(graphSettings.x_label, bounds.width/2 + bounds.left, bounds.height + 2*bounds.top - 5);
|
|
||||||
|
|
||||||
//Y axis text
|
|
||||||
ctx.save();
|
|
||||||
ctx.rotate(-Math.PI / 2);
|
|
||||||
ctx.textAlign = "center";
|
|
||||||
ctx.fillText(graphSettings.y_label, -(bounds.left + bounds.height/2), 18);
|
|
||||||
ctx.restore();
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawTitle(canvas, graphSettings) {
|
|
||||||
let ctx = canvas.getContext("2d");
|
|
||||||
let x = canvas.width / 2;
|
|
||||||
let y = 25;
|
|
||||||
|
|
||||||
ctx.font = "30px Arial";
|
|
||||||
ctx.fillStyle = "black";
|
|
||||||
ctx.textAlign = "center";
|
|
||||||
ctx.fillText( graphSettings.title, x, y);
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawPoints(ctx, bounds, values, name, arrayLen, largest, color) {
|
|
||||||
ctx.fillStyle = color;
|
|
||||||
let radius = 3;
|
|
||||||
|
|
||||||
for( let i = 0; i < arrayLen; i++ ){
|
|
||||||
ctx.beginPath();
|
|
||||||
if(values[i] === null) continue;
|
|
||||||
let scale = bounds.height - ((largest >= 0)?(bounds.bottom - bounds.xAxis):0);
|
|
||||||
let extreme = (largest<=0)?Math.abs(smallest):Math.abs(largest);
|
|
||||||
let x = bounds.left + bounds.width / (arrayLen - 1) * i;
|
|
||||||
let y = (bounds.xAxis - values[i] / extreme * scale);
|
|
||||||
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
|
||||||
ctx.fill();
|
|
||||||
ctx.stroke();
|
|
||||||
ctx.closePath();
|
|
||||||
|
|
||||||
let new_object = new Circle(values[i], name, x, y, radius);
|
|
||||||
objects.push(new_object);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color ){
|
|
||||||
ctx.fillStyle = color;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(centerX,centerY);
|
|
||||||
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
|
|
||||||
ctx.fill();
|
|
||||||
ctx.closePath();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getBounds(canvas, graphMargin) {
|
|
||||||
return {
|
|
||||||
top: graphMargin,
|
|
||||||
bottom: canvas.height - graphMargin,
|
|
||||||
left: graphMargin,
|
|
||||||
right: canvas.width - graphMargin,
|
|
||||||
height: canvas.height - 2*graphMargin,
|
|
||||||
width: canvas.width - 2*graphMargin,
|
|
||||||
xAxis: canvas.height - graphMargin
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawPieChart(canvas, data, graphSettings) {
|
|
||||||
|
|
||||||
let ctx = canvas.getContext("2d");
|
|
||||||
let index = 0;
|
|
||||||
let start_angle = 0;
|
|
||||||
let total_value = 0;
|
|
||||||
let bounds = getBounds(canvas, graphSettings.margin);
|
|
||||||
|
|
||||||
|
|
||||||
data.forEach(function (categ) {
|
|
||||||
let val = categ.values[0];
|
|
||||||
if (val !== null)
|
|
||||||
total_value += val;
|
|
||||||
});
|
|
||||||
|
|
||||||
data.forEach(function (categ) {
|
|
||||||
let val = categ.values[0];
|
|
||||||
let slice_angle = 2 * Math.PI * val / total_value;
|
|
||||||
|
|
||||||
let x = canvas.width/2;
|
|
||||||
let y = canvas.height/2;
|
|
||||||
let r = Math.min(bounds.width/2, bounds.height/2);
|
|
||||||
let end_angle = start_angle + slice_angle;
|
|
||||||
|
|
||||||
drawSlice(ctx, x, y, r, start_angle, end_angle, categ.color);
|
|
||||||
let new_object = new PieSlice(val + " (" + Math.round(val/total_value*100) + "%)", categ.name, x, y, r, start_angle, end_angle);
|
|
||||||
objects.push(new_object);
|
|
||||||
|
|
||||||
start_angle = end_angle;
|
|
||||||
index++;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawPointChart(canvas, data, graphSettings){
|
|
||||||
let ctx = canvas.getContext( "2d" );
|
|
||||||
|
|
||||||
let bounds = getBounds(canvas, graphSettings.margin);
|
|
||||||
let largest = getLargest(data);
|
|
||||||
let smallest = getSmallest(data);
|
|
||||||
|
|
||||||
if (smallest < 0)
|
|
||||||
bounds.xAxis = bounds.bottom - (bounds.height / (((largest<=0)?0:Math.abs(largest)) + Math.abs(smallest)) * Math.abs(smallest));
|
|
||||||
let arrayLen = data[0].values.length;
|
|
||||||
|
|
||||||
drawAxis(bounds, largest, smallest, arrayLen, ctx, graphSettings);
|
|
||||||
|
|
||||||
data.display_points = true;
|
|
||||||
data.forEach(function (categ) {
|
|
||||||
//Points
|
|
||||||
if (graphSettings.display_points)
|
|
||||||
drawPoints(ctx, bounds, categ.values, categ.name, arrayLen, largest, categ.color);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawLineChart(canvas, data, graphSettings){
|
|
||||||
let ctx = canvas.getContext( "2d" );
|
|
||||||
|
|
||||||
let bounds = getBounds(canvas, graphSettings.margin);
|
|
||||||
let largest = getLargest(data);
|
|
||||||
let smallest = getSmallest(data);
|
|
||||||
|
|
||||||
if (smallest < 0)
|
|
||||||
bounds.xAxis = bounds.bottom - (bounds.height / (((largest<=0)?0:Math.abs(largest)) + Math.abs(smallest)) * Math.abs(smallest));
|
|
||||||
let arrayLen = data[0].values.length;
|
|
||||||
|
|
||||||
drawAxis(bounds, largest, smallest, arrayLen, ctx, graphSettings);
|
|
||||||
|
|
||||||
data.forEach(function (categ) {
|
|
||||||
//Lines
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.lineJoin = "round";
|
|
||||||
ctx.strokeStyle = categ.color;
|
|
||||||
|
|
||||||
for (let i = 0; i < arrayLen; i++) {
|
|
||||||
if (categ.values[i] === null) continue;
|
|
||||||
|
|
||||||
let scale = bounds.height - ((largest >= 0)?(bounds.bottom - bounds.xAxis):0);
|
|
||||||
let extreme = (largest<=0)?Math.abs(smallest):Math.abs(largest);
|
|
||||||
let x = bounds.left + bounds.width / (arrayLen - 1) * i;
|
|
||||||
let y = (bounds.xAxis - categ.values[i] / extreme * scale);
|
|
||||||
|
|
||||||
ctx.lineTo(x, y);
|
|
||||||
}
|
|
||||||
ctx.stroke();
|
|
||||||
ctx.closePath();
|
|
||||||
|
|
||||||
//Points
|
|
||||||
if (graphSettings.display_points)
|
|
||||||
drawPoints(ctx, bounds, categ.values, categ.name, arrayLen, largest, categ.color);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawAreaChart(canvas, data, graphSettings){
|
|
||||||
let ctx = canvas.getContext( "2d" );
|
|
||||||
|
|
||||||
let bounds = getBounds(canvas, graphSettings.margin);
|
|
||||||
let largest = getLargest(data);
|
|
||||||
let smallest = getSmallest(data);
|
|
||||||
|
|
||||||
if (smallest < 0)
|
|
||||||
bounds.xAxis = bounds.bottom - (bounds.height / (((largest<=0)?0:Math.abs(largest)) + Math.abs(smallest)) * Math.abs(smallest));
|
|
||||||
let arrayLen = data[0].values.length;
|
|
||||||
|
|
||||||
drawAxis(bounds, largest, smallest, arrayLen, ctx, graphSettings);
|
|
||||||
|
|
||||||
data.forEach(function (categ) {
|
|
||||||
//Lines
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.lineJoin = "round";
|
|
||||||
ctx.strokeStyle = categ.color;
|
|
||||||
|
|
||||||
let xmax = 0;
|
|
||||||
for (let i = 0; i < arrayLen; i++) {
|
|
||||||
if (categ.values[i] === null) continue;
|
|
||||||
let scale = bounds.height - ((largest >= 0)?(bounds.bottom - bounds.xAxis):0);
|
|
||||||
let extreme = (largest<=0)?Math.abs(smallest):Math.abs(largest);
|
|
||||||
let x = bounds.left + bounds.width / (arrayLen - 1) * i;
|
|
||||||
let y = (bounds.xAxis - categ.values[i] / extreme * scale);
|
|
||||||
xmax = x;
|
|
||||||
|
|
||||||
ctx.lineTo(x, y);
|
|
||||||
}
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
ctx.lineTo(xmax, bounds.xAxis);
|
|
||||||
ctx.lineTo(bounds.left, bounds.xAxis);
|
|
||||||
ctx.globalAlpha = 0.5;
|
|
||||||
ctx.fillStyle = categ.color;
|
|
||||||
ctx.closePath();
|
|
||||||
ctx.fill();
|
|
||||||
|
|
||||||
ctx.globalAlpha = 1;
|
|
||||||
|
|
||||||
//Points
|
|
||||||
if (graphSettings.display_points)
|
|
||||||
drawPoints(ctx, bounds, categ.values, categ.name, arrayLen, largest, categ.color);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawBarChart(canvas, data, graphSettings) {
|
|
||||||
let ctx = canvas.getContext( "2d" );
|
|
||||||
|
|
||||||
let bounds = getBounds(canvas, graphSettings.margin);
|
|
||||||
ctx.shadowOffsetX = 15;
|
|
||||||
ctx.shadowOffsetY = 15;
|
|
||||||
ctx.shadowBlur = 4;
|
|
||||||
|
|
||||||
let largest = getLargest(data);
|
|
||||||
let barCount = data.length;
|
|
||||||
let dataCount = data[0].values.length;
|
|
||||||
|
|
||||||
let smallest = getSmallest(data);
|
|
||||||
|
|
||||||
if (smallest < 0)
|
|
||||||
bounds.xAxis = bounds.bottom - (bounds.height / (((largest<=0)?0:Math.abs(largest)) + Math.abs(smallest)) * Math.abs(smallest));
|
|
||||||
|
|
||||||
drawAxis(bounds, largest, smallest, dataCount, ctx, graphSettings, false);
|
|
||||||
|
|
||||||
let size = bounds.width / dataCount;
|
|
||||||
let innerSize = size * 0.8;
|
|
||||||
let bar_width = innerSize * 0.7 / barCount;
|
|
||||||
|
|
||||||
for (let i = 0; i < dataCount; i++) {
|
|
||||||
let num = 0;
|
|
||||||
data.forEach(function (categ) {
|
|
||||||
ctx.beginPath();
|
|
||||||
let value = categ.values[i];
|
|
||||||
let left = bounds.left + (size * (i + 0.15) + (innerSize * num / barCount));
|
|
||||||
let scale = bounds.height - ((largest >= 0)?(bounds.bottom - bounds.xAxis):0);
|
|
||||||
let extreme = (largest<=0)?Math.abs(smallest):Math.abs(largest);
|
|
||||||
let bar_height = value / extreme * scale;
|
|
||||||
let top = (bounds.xAxis - categ.values[i] / extreme * scale);
|
|
||||||
|
|
||||||
ctx.fillStyle = categ.color;
|
|
||||||
ctx.fillRect(left, top, bar_width, bar_height);
|
|
||||||
|
|
||||||
//x value
|
|
||||||
if (num === 0){
|
|
||||||
let text = (i + 1).toString();
|
|
||||||
if (graphSettings.custom_x_values !== ""){
|
|
||||||
text = graphSettings.custom_x_values.split(';')[i];
|
|
||||||
}
|
|
||||||
ctx.font = "16px Arial";
|
|
||||||
ctx.fillStyle = "black";
|
|
||||||
ctx.textAlign = "center";
|
|
||||||
ctx.fillText(text, bounds.width / dataCount * i + size / 2 + bounds.left, bounds.bottom + 15);
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
num++;
|
|
||||||
let new_object = new Rect(value, categ.name, left, top, bar_width, bar_height);
|
|
||||||
objects.push(new_object);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function stackedChart(canvas, data, graphSettings) {
|
|
||||||
let ctx = canvas.getContext( "2d" );
|
|
||||||
|
|
||||||
let bounds = getBounds(canvas, graphSettings.margin);
|
|
||||||
ctx.shadowOffsetX = 15;
|
|
||||||
ctx.shadowOffsetY = 15;
|
|
||||||
ctx.shadowBlur = 4;
|
|
||||||
|
|
||||||
let dataCount = data[0].values.length;
|
|
||||||
|
|
||||||
let largest = 0;
|
|
||||||
for (let i = 0; i < dataCount; i++){
|
|
||||||
let sum = 0;
|
|
||||||
data.forEach(function (categ) {
|
|
||||||
categ.values[i] = Math.abs(categ.values[i]);
|
|
||||||
sum += categ.values[i];
|
|
||||||
});
|
|
||||||
if (sum > largest) largest = sum;
|
|
||||||
}
|
|
||||||
|
|
||||||
let smallest = getSmallest(data);
|
|
||||||
if (smallest < 0)
|
|
||||||
bounds.xAxis = bounds.bottom - (bounds.height / (((largest<=0)?0:Math.abs(largest)) + Math.abs(smallest)) * Math.abs(smallest));
|
|
||||||
|
|
||||||
drawAxis(bounds, largest, smallest, dataCount, ctx, graphSettings, false);
|
|
||||||
|
|
||||||
let size = bounds.width / dataCount;
|
|
||||||
let bar_width = size * 0.7;
|
|
||||||
|
|
||||||
for (let i = 0; i < dataCount; i++) {
|
|
||||||
let last_top = bounds.xAxis;
|
|
||||||
let num = 0;
|
|
||||||
data.forEach(function (categ) {
|
|
||||||
ctx.beginPath();
|
|
||||||
|
|
||||||
let value = categ.values[i];
|
|
||||||
let bar_height = value / largest * bounds.height;
|
|
||||||
let left = bounds.left + (size * (i + 0.15));
|
|
||||||
let top = last_top - bar_height;
|
|
||||||
|
|
||||||
ctx.fillStyle = categ.color;
|
|
||||||
ctx.fillRect(left, top, bar_width, bar_height);
|
|
||||||
|
|
||||||
last_top = top;
|
|
||||||
|
|
||||||
//x value
|
|
||||||
if (num === 0){
|
|
||||||
let text = (i + 1).toString();
|
|
||||||
if (graphSettings.custom_x_values !== ""){
|
|
||||||
text = graphSettings.custom_x_values.split(';')[i];
|
|
||||||
}
|
|
||||||
ctx.font = "16px Arial";
|
|
||||||
ctx.fillStyle = "black";
|
|
||||||
ctx.textAlign = "center";
|
|
||||||
ctx.fillText(text, bounds.width / dataCount * i + size / 2 + bounds.left, bounds.bottom + 15);
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
num++;
|
|
||||||
|
|
||||||
let new_object = new Rect(value, categ.name, left, top, bar_width, bar_height);
|
|
||||||
objects.push(new_object);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function resizeCanvas(canvas, parent, legendHeight = 0, bgColor) {
|
|
||||||
|
|
||||||
if (legendHeight > 0) legendHeight += 3.1;
|
|
||||||
//set size
|
|
||||||
canvas.style.width = parent.clientWidth.toString();
|
|
||||||
canvas.style.height = (parent.clientHeight - legendHeight).toString();
|
|
||||||
canvas.width = parent.clientWidth;
|
|
||||||
canvas.height = parent.clientHeight - legendHeight;
|
|
||||||
|
|
||||||
//reset canvas color
|
|
||||||
let ctx = canvas.getContext( "2d" );
|
|
||||||
if (bgColor == null){
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
||||||
} else {
|
|
||||||
ctx.fillStyle = bgColor;
|
|
||||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateLegend(displayLegend, data) {
|
|
||||||
if (displayLegend){
|
|
||||||
let legendHTML = "";
|
|
||||||
data.forEach(function (categ) {
|
|
||||||
legendHTML += "<div><span style='display:inline-block;width:20px;background-color:" + categ.color + ";'> </span> " + categ.col_name + "</div>";
|
|
||||||
});
|
|
||||||
|
|
||||||
legend.innerHTML = legendHTML;
|
|
||||||
legend.style.display = "block";
|
|
||||||
} else {
|
|
||||||
legend.style.display = "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawChart(graphSettings, data) {
|
|
||||||
updateLegend(graphSettings.display_legend, data);
|
|
||||||
resizeCanvas(canvas, parent, legend.offsetHeight, graphSettings.backgroundColor);
|
|
||||||
objects = [];
|
|
||||||
|
|
||||||
//Choose the correct graph
|
|
||||||
switch (graphSettings.type) {
|
|
||||||
case "point":
|
|
||||||
drawPointChart(canvas, data, graphSettings);
|
|
||||||
break;
|
|
||||||
case "line":
|
|
||||||
drawLineChart(canvas, data, graphSettings);
|
|
||||||
break;
|
|
||||||
case "pie":
|
|
||||||
drawPieChart(canvas, data, graphSettings);
|
|
||||||
break;
|
|
||||||
case "bar":
|
|
||||||
drawBarChart(canvas, data, graphSettings);
|
|
||||||
break;
|
|
||||||
case "area":
|
|
||||||
drawAreaChart(canvas, data, graphSettings);
|
|
||||||
break;
|
|
||||||
case "stacked":
|
|
||||||
stackedChart(canvas, data, graphSettings);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (graphSettings.display_title)
|
|
||||||
drawTitle(canvas, graphSettings);
|
|
||||||
}
|
|
||||||
@ -0,0 +1,128 @@
|
|||||||
|
class ChartLoader {
|
||||||
|
constructor(canvas, detectionCanvas, parent, legend, dataDiv) {
|
||||||
|
this.canvas = canvas
|
||||||
|
this.detectionCanvas = detectionCanvas
|
||||||
|
this.parent = parent
|
||||||
|
this.legend = legend
|
||||||
|
this.dataDiv = dataDiv
|
||||||
|
}
|
||||||
|
|
||||||
|
//Načtení dat
|
||||||
|
loadData(code) {
|
||||||
|
fetch("/api/charts/" + code, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'json'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
let metadata = data.metadata;
|
||||||
|
metadata.custom_x_values = ""
|
||||||
|
let table = data.table
|
||||||
|
|
||||||
|
if (data !== null) {
|
||||||
|
this.drawChart(metadata, table)
|
||||||
|
this.parent.style.backgroundColor = metadata.backgroundColor
|
||||||
|
}
|
||||||
|
else
|
||||||
|
this.parent.innerHTML = "graph not found."
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
addListener(newChart) {
|
||||||
|
//Click
|
||||||
|
document.addEventListener('mousemove', (e) => {
|
||||||
|
const pos = {
|
||||||
|
x: e.clientX,
|
||||||
|
y: e.clientY
|
||||||
|
}
|
||||||
|
|
||||||
|
var ctx = this.detectionCanvas.getContext('2d');
|
||||||
|
var pixelData = ctx.getImageData(pos.x, pos.y, 1, 1).data;
|
||||||
|
|
||||||
|
if (pixelData[3] === 255) {
|
||||||
|
let index = (pixelData[0] * 256 + pixelData[1]) * 256 + pixelData[2]
|
||||||
|
let obj = newChart.objects[index]
|
||||||
|
|
||||||
|
let divHitBox = this.dataDiv
|
||||||
|
divHitBox.style.display = "block"
|
||||||
|
|
||||||
|
// make the info fit into the chart div
|
||||||
|
if (pos.x + divHitBox.clientWidth <= this.parent.clientWidth - 2)
|
||||||
|
divHitBox.style.left = pos.x + "px"
|
||||||
|
else
|
||||||
|
this.dataDiv.style.left = pos.x - divHitBox.clientWidth + "px"
|
||||||
|
|
||||||
|
if (pos.y + divHitBox.clientHeight <= parent.clientHeight - 2)
|
||||||
|
this.dataDiv.style.top = pos.y + "px"
|
||||||
|
else
|
||||||
|
this.dataDiv.style.top = pos.y - divHitBox.clientHeight + "px"
|
||||||
|
|
||||||
|
this.dataDiv.style.display = "block"
|
||||||
|
this.dataDiv.innerHTML = "<b>" + obj.name + "</b><br><p>" + obj.value + "</p>"
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.dataDiv.style.display = "none"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener("resize", e => {
|
||||||
|
//newChart.updateLegend(graphSettings.displayLegend, data)
|
||||||
|
newChart.resizeCanvas(this.parent, this.legend.offsetHeight)
|
||||||
|
newChart.draw()
|
||||||
|
|
||||||
|
this.detectionCanvas.width = this.canvas.width
|
||||||
|
this.detectionCanvas.height = this.canvas.height
|
||||||
|
this.chart.drawDetectionMap(this.detectionCanvas.getContext("2d"))
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
drawChart(graphSettings, data) {
|
||||||
|
//objects = []
|
||||||
|
this.chart = new Chart(this.canvas, data, graphSettings)
|
||||||
|
this.chart.updateLegend(graphSettings.displayLegend, this.legend)
|
||||||
|
|
||||||
|
this.chart.resizeCanvas(this.parent, this.legend.offsetHeight)
|
||||||
|
|
||||||
|
this.detectionCanvas.width = this.canvas.width
|
||||||
|
this.detectionCanvas.height = this.canvas.height
|
||||||
|
|
||||||
|
//Choose the correct graph
|
||||||
|
switch (graphSettings.type) {
|
||||||
|
case "point":
|
||||||
|
this.chart = new PointChart(this.canvas, data, graphSettings)
|
||||||
|
break
|
||||||
|
case "line":
|
||||||
|
this.chart = new LineChart(this.canvas, data, graphSettings)
|
||||||
|
break
|
||||||
|
case "smoothline":
|
||||||
|
this.chart = new SmoothLineChart(this.canvas, data, graphSettings)
|
||||||
|
break
|
||||||
|
case "pie":
|
||||||
|
this.chart = new PieChart(this.canvas, data, graphSettings)
|
||||||
|
break
|
||||||
|
case "donut":
|
||||||
|
this.chart = new DonutChart(this.canvas, data, graphSettings)
|
||||||
|
break
|
||||||
|
case "bar":
|
||||||
|
this.chart = new BarChart(this.canvas, data, graphSettings)
|
||||||
|
break
|
||||||
|
case "area":
|
||||||
|
this.chart = new AreaChart(this.canvas, data, graphSettings)
|
||||||
|
break
|
||||||
|
case "smootharea":
|
||||||
|
this.chart = new SmoothAreaChart(this.canvas, data, graphSettings)
|
||||||
|
break
|
||||||
|
case "stacked":
|
||||||
|
this.chart = new StackedChart(this.canvas, data, graphSettings)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chart.draw()
|
||||||
|
this.chart.drawDetectionMap(this.detectionCanvas.getContext("2d"))
|
||||||
|
|
||||||
|
this.addListener(this.chart)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
class DonutChart extends Chart {
|
||||||
|
constructor(canvas, data, settings) {
|
||||||
|
super(canvas, data, settings)
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
let index = 0
|
||||||
|
let start_angle = 0
|
||||||
|
let total_value = 0
|
||||||
|
|
||||||
|
this.data.forEach(categ => {
|
||||||
|
let val = categ.values[0]
|
||||||
|
if (val !== null)
|
||||||
|
total_value += val
|
||||||
|
})
|
||||||
|
|
||||||
|
this.clear()
|
||||||
|
|
||||||
|
this.data.forEach(categ => {
|
||||||
|
let val = categ.values[0]
|
||||||
|
let slice_angle = 2 * Math.PI * val / total_value
|
||||||
|
|
||||||
|
let x = this.canvas.width / 2
|
||||||
|
let y = this.canvas.height / 2
|
||||||
|
let r = Math.min(this.bounds.width / 2, this.bounds.height / 2)
|
||||||
|
let end_angle = start_angle + slice_angle
|
||||||
|
|
||||||
|
this.ctx.fillStyle = categ.color
|
||||||
|
let new_slice = new DonutSlice(this.ctx, val + " (" + Math.round(val / total_value * 100) + "%)", categ.col_name, x, y, r, start_angle, end_angle, r / 2)
|
||||||
|
new_slice.draw()
|
||||||
|
this.objects.push(new_slice)
|
||||||
|
|
||||||
|
start_angle = end_angle
|
||||||
|
index++
|
||||||
|
})
|
||||||
|
|
||||||
|
if (this.settings.displayTitle)
|
||||||
|
this.drawTitle()
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
class SmoothAreaChart extends PointChart {
|
||||||
|
constructor(canvas, data, settings) {
|
||||||
|
super(canvas, data, settings)
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
this.clear()
|
||||||
|
this.drawAxis()
|
||||||
|
|
||||||
|
this.data.forEach(categ => {
|
||||||
|
//Lines
|
||||||
|
this.ctx.beginPath()
|
||||||
|
this.ctx.lineJoin = "round"
|
||||||
|
this.ctx.strokeStyle = categ.color
|
||||||
|
|
||||||
|
let x = this.bounds.left
|
||||||
|
let y = (this.bounds.xAxis - categ.values[0] / this.extreme * this.scale)
|
||||||
|
this.ctx.moveTo(x, y)
|
||||||
|
let xmax = 0
|
||||||
|
|
||||||
|
for (let i = 0; i < this.dataLen - 1; i++) {
|
||||||
|
let x1 = this.bounds.left + this.bounds.width / (this.dataLen - 1) * i
|
||||||
|
let y1 = (this.bounds.xAxis - categ.values[i] / this.extreme * this.scale)
|
||||||
|
|
||||||
|
let x2 = this.bounds.left + this.bounds.width / (this.dataLen - 1) * (i + 1)
|
||||||
|
let y2 = (this.bounds.xAxis - categ.values[i + 1] / this.extreme * this.scale)
|
||||||
|
|
||||||
|
let xm = (x1 + x2) / 2
|
||||||
|
let xl = (x1 + xm) / 2
|
||||||
|
let xr = (x2 + xm) / 2
|
||||||
|
|
||||||
|
this.ctx.bezierCurveTo(xl, y1, xr, y2, x2, y2);
|
||||||
|
xmax = x2
|
||||||
|
}
|
||||||
|
|
||||||
|
this.ctx.lineTo(xmax, this.bounds.xAxis)
|
||||||
|
this.ctx.lineTo(this.bounds.left, this.bounds.xAxis)
|
||||||
|
this.ctx.globalAlpha = 0.5
|
||||||
|
this.ctx.fillStyle = categ.color
|
||||||
|
this.ctx.closePath()
|
||||||
|
this.ctx.fill()
|
||||||
|
|
||||||
|
this.ctx.globalAlpha = 1
|
||||||
|
})
|
||||||
|
|
||||||
|
// Points
|
||||||
|
if (this.settings.displayPoints)
|
||||||
|
this.data.forEach(categ => {this.drawPoints(categ.values, categ.col_name, categ.color)})
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
class SmoothLineChart extends PointChart {
|
||||||
|
constructor(canvas, data, settings) {
|
||||||
|
super(canvas, data, settings)
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
this.clear()
|
||||||
|
this.drawAxis()
|
||||||
|
|
||||||
|
this.data.forEach(categ => {
|
||||||
|
this.ctx.beginPath()
|
||||||
|
this.ctx.lineJoin = "round"
|
||||||
|
this.ctx.strokeStyle = categ.color
|
||||||
|
|
||||||
|
let x = this.bounds.left
|
||||||
|
let y = (this.bounds.xAxis - categ.values[0] / this.extreme * this.scale)
|
||||||
|
this.ctx.moveTo(x, y)
|
||||||
|
|
||||||
|
for (let i = 0; i < this.dataLen - 1; i++) {
|
||||||
|
let x1 = this.bounds.left + this.bounds.width / (this.dataLen - 1) * i
|
||||||
|
let y1 = (this.bounds.xAxis - categ.values[i] / this.extreme * this.scale)
|
||||||
|
|
||||||
|
let x2 = this.bounds.left + this.bounds.width / (this.dataLen - 1) * (i + 1)
|
||||||
|
let y2 = (this.bounds.xAxis - categ.values[i + 1] / this.extreme * this.scale)
|
||||||
|
|
||||||
|
let xm = (x1 + x2) / 2
|
||||||
|
let xl = (x1 + xm) / 2
|
||||||
|
let xr = (x2 + xm) / 2
|
||||||
|
|
||||||
|
this.ctx.bezierCurveTo(xl, y1, xr, y2, x2, y2);
|
||||||
|
}
|
||||||
|
this.ctx.stroke()
|
||||||
|
this.ctx.closePath()
|
||||||
|
})
|
||||||
|
|
||||||
|
// Points
|
||||||
|
if (this.settings.displayPoints)
|
||||||
|
this.data.forEach(categ => {this.drawPoints(categ.values, categ.col_name, categ.color)})
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
:root {
|
||||||
|
--legend-height: 30px
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chartCanvas,
|
||||||
|
#detectionCanvas {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphLegend {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 2;
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphLegend div {
|
||||||
|
display: inline;
|
||||||
|
margin: 0 10px 0 10px;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dataDiv {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
height: 35px;
|
||||||
|
width: 70px;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid lightgrey;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dataDiv p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dataDiv b {
|
||||||
|
position: center;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#detectionCanvas {
|
||||||
|
opacity: 0;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
image-rendering: crisp-edges;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue