You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
4.5 KiB
129 lines
4.5 KiB
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)
|
|
}
|
|
}
|