spacek
/
charts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Effects fix

Browse Source
main
František Špaček 2 years ago
parent 3d021713d1
commit b602df13c4
12 changed files with 67 additions and 56 deletions
Show Stats Download Patch File Download Diff File

9
public/scripts/chart_loader.js
Unescape View File

@ -40,13 +40,13 @@ class ChartLoader {
y: e.clientY
}
console.log(pos)
let ctx = this.detectionCanvas.getContext('2d');
// Get neigboring pixels
let imageData = Array.from(ctx.getImageData(pos.x - 2, pos.y - 2, 5, 5).data)
//console.log(imageData)
// Convert into indexes
let indexes = []
while (imageData.length > 0) {
@ -108,7 +108,8 @@ class ChartLoader {
this.dataDiv.style.top = pos.y - this.dataDiv.clientHeight + "px"
this.dataDiv.style.display = "block"
this.dataDiv.innerHTML = "<b>" + obj.name + "</b><br><p>" + obj.value + "</p>"
let name = newChart.data[obj.colId.toString()].col_name
this.dataDiv.innerHTML = "<b>" + name + "</b><br><p>" + obj.value + "</p>"
}
else {
this.dataDiv.style.display = "none"
@ -174,12 +175,12 @@ class ChartLoader {
setTimeout(() => {
console.time("2")
console.timeEnd("2")
this.effectCanvas.width = this.canvas.width
this.effectCanvas.height = this.canvas.height
this.detectionCanvas.width = this.canvas.width
this.detectionCanvas.height = this.canvas.height
this.chart.drawDetectionMap(this.detectionCanvas.getContext("2d"))
console.timeEnd("2")
}, 0); {
}

4
public/scripts/charts/area_chart.js
Unescape View File

@ -33,10 +33,10 @@ class AreaChart extends PointChart {
this.ctx.fill()
this.ctx.globalAlpha = 1
})
//Points
if (this.settings.displayPoints)
this.drawPoints(categ.values, categ.col_name, categ.color)
})
this.data.forEach((categ, colId) => {this.drawPoints(categ.values, colId, categ.color)})
}
}

4
public/scripts/charts/bar_chart.js
Unescape View File

@ -22,7 +22,7 @@ class BarChart extends Chart {
for (let i = 0; i < this.dataLen; i++) {
let num = 0
this.data.forEach(categ => {
this.data.forEach((categ, colId) => {
let value = categ.values[i]
let left = this.bounds.left + (size * (i + 0.15) + (innerSize * num / barCount))
let bar_height = value / this.extreme * this.scale
@ -46,7 +46,7 @@ class BarChart extends Chart {
num++
this.ctx.fillStyle = categ.color
this.ctx.lineWidth = 0
let new_object = new Rectangle(this.ctx, value, categ.col_name, left, top, bar_width, bar_height)
let new_object = new Rectangle(this.ctx, value, colId, left, top, bar_width, bar_height)
new_object.draw()
this.objects.push(new_object)
})

52
public/scripts/charts/chart.js
Unescape View File

@ -1,10 +1,10 @@
class Shape {
static globalIndex = 0
constructor(ctx, value, name, x, y) {
constructor(ctx, value, colId, x, y) {
this.ctx = ctx
this.value = value
this.name = name
this.colId = colId
this.x = x
this.y = y
this.index = Shape.globalIndex++
@ -14,8 +14,8 @@ class Shape {
}
class Rectangle extends Shape {
constructor(ctx, value, name, x, y, w, h) {
super(ctx, value, name, x, y)
constructor(ctx, value, colId, x, y, w, h) {
super(ctx, value, colId, x, y)
this.w = w
this.h = h
}
@ -29,8 +29,8 @@ class Rectangle extends Shape {
}
class Circle extends Shape {
constructor(ctx, value, name, x, y, r) {
super(ctx, value, name, x, y)
constructor(ctx, value, colId, x, y, r) {
super(ctx, value, colId, x, y)
this.r = r
}
@ -43,8 +43,8 @@ class Circle extends Shape {
}
class PieSlice extends Circle {
constructor(ctx, value, name, x, y, r, sAngle, eAngle) {
super(ctx, value, name, x, y, r)
constructor(ctx, value, colId, x, y, r, sAngle, eAngle) {
super(ctx, value, colId, x, y, r)
this.sAngle = sAngle
this.eAngle = eAngle
}
@ -60,8 +60,8 @@ class PieSlice extends Circle {
}
class DonutSlice extends PieSlice {
constructor(ctx, value, name, x, y, r, sAngle, eAngle, r2) {
super(ctx, value, name, x, y, r, sAngle, eAngle)
constructor(ctx, value, colId, x, y, r, sAngle, eAngle, r2) {
super(ctx, value, colId, x, y, r, sAngle, eAngle)
this.r2 = r2
}
@ -100,6 +100,11 @@ function getSmallest(data) {
return smallest
}
// Lighten or darken a hex color
function adjustColor(color, amount) {
return '#' + color.replace(/^#/, '').replace(/../g, color => ('0'+Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
}
class Chart {
constructor(canvas, data, settings) {
this.data = data
@ -143,14 +148,6 @@ class Chart {
return result
}
/*checkHit(pos) {
for (let i = 0; i < this.objects.length; i++)
if (this.objects[i].checkHit(pos.x, pos.y))
return this.objects[i]
return null
}*/
drawTitle() {
let x = this.canvas.width / 2
let y = 25
@ -175,10 +172,11 @@ class Chart {
}
}
resizeCanvas(parent, legendHeight = 0) {
resizeCanvas() {
this.clear()
//set size
this.canvas.width = parent.clientWidth
this.canvas.height = parent.clientHeight - legendHeight
this.canvas.width = this.canvas.clientWidth
this.canvas.height = this.canvas.clientHeight
this.updateBounds()
}
@ -201,6 +199,9 @@ class Chart {
ctx.moveTo(0.5, 0.5)
ctx.lineWidth = 3
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
ctx.fill()
ctx.stroke()
this.objects.forEach(object => {
let color = "#" + object.index.toString(16).padStart(6, '0')
ctx.fillStyle = color
@ -212,7 +213,7 @@ class Chart {
drawEffect(ctx, objects) {
objects.forEach(object => {
ctx.globalCompositeOperation = "source-over"
/*ctx.globalCompositeOperation = "source-over"
ctx.fillStyle = 'rgba(0,0,0,1)'
ctx.strokeStyle = 'rgba(0,0,0,0)'
object.draw(ctx)
@ -228,6 +229,13 @@ class Chart {
ctx.fillStyle = 'rgba(255,255,255,0.2)'
ctx.strokeStyle = 'rgba(0,0,0,0)'
object.draw(ctx)
ctx.stroke()*/
let color = this.data[object.colId].color
let lighterColor = adjustColor(color, 20)
ctx.fillStyle = lighterColor
ctx.strokeStyle = 'rgba(0,0,0,0.3)'
ctx.lineWidth = 3
object.draw(ctx)
ctx.stroke()
})
}

4
public/scripts/charts/donut_chart.js
Unescape View File

@ -16,7 +16,7 @@ class DonutChart extends Chart {
this.clear()
this.data.forEach(categ => {
this.data.forEach((categ, colId) => {
let val = categ.values[0]
let slice_angle = 2 * Math.PI * val / total_value
@ -26,7 +26,7 @@ class DonutChart extends Chart {
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)
let new_slice = new DonutSlice(this.ctx, val + " (" + Math.round(val / total_value * 100) + "%)", colId, x, y, r, start_angle, end_angle, r / 2)
new_slice.draw()
this.objects.push(new_slice)

6
public/scripts/charts/line_chart.js
Unescape View File

@ -22,10 +22,10 @@ class LineChart extends PointChart {
}
this.ctx.stroke()
this.ctx.closePath()
})
//Points
// Points
if (this.settings.displayPoints)
this.drawPoints(categ.values, categ.col_name, categ.color)
})
this.data.forEach((categ, colId) => {this.drawPoints(categ.values, colId, categ.color)})
}
}

4
public/scripts/charts/pie_chart.js
Unescape View File

@ -16,7 +16,7 @@ class PieChart extends Chart {
this.clear()
this.data.forEach(categ => {
this.data.forEach((categ, colId) => {
let val = categ.values[0]
let slice_angle = 2 * Math.PI * val / total_value
@ -26,7 +26,7 @@ class PieChart extends Chart {
let end_angle = start_angle + slice_angle
this.ctx.fillStyle = categ.color
let new_slice = new PieSlice(this.ctx, val + " (" + Math.round(val / total_value * 100) + "%)", categ.col_name, x, y, r, start_angle, end_angle)
let new_slice = new PieSlice(this.ctx, val + " (" + Math.round(val / total_value * 100) + "%)", colId, x, y, r, start_angle, end_angle)
new_slice.draw()
this.objects.push(new_slice)

2
public/scripts/charts/point_chart.js
Unescape View File

@ -24,6 +24,6 @@ class PointChart extends Chart {
this.drawAxis()
if (this.settings.displayPoints)
this.data.forEach(categ => {this.drawPoints(categ.values, categ.col_name, categ.color)})
this.data.forEach((categ, colId) => {this.drawPoints(categ.values, colId, categ.color)})
}
}

2
public/scripts/charts/smooth_area_chart.js
Unescape View File

@ -45,6 +45,6 @@ class SmoothAreaChart extends PointChart {
// Points
if (this.settings.displayPoints)
this.data.forEach(categ => {this.drawPoints(categ.values, categ.col_name, categ.color)})
this.data.forEach((categ, colId) => {this.drawPoints(categ.values, colId, categ.color)})
}
}

3
public/scripts/charts/smooth_line_chart.js
Unescape View File

@ -35,6 +35,7 @@ class SmoothLineChart extends PointChart {
// Points
if (this.settings.displayPoints)
this.data.forEach(categ => {this.drawPoints(categ.values, categ.col_name, categ.color)})
this.data.forEach((categ, colId) => {this.drawPoints(categ.values, colId, categ.color)})
}
}

4
public/scripts/charts/stacked_chart.js
Unescape View File

@ -27,7 +27,7 @@ class StackedChart extends Chart {
for (let i = 0; i < this.dataLen; i++) {
let last_top = this.bounds.xAxis
let num = 0
this.data.forEach(categ => {
this.data.forEach((categ, colId) => {
let value = categ.values[i]
let bar_height = value / largest * this.bounds.height
let left = this.bounds.left + size * (i + 0.15)
@ -52,7 +52,7 @@ class StackedChart extends Chart {
num++
this.ctx.fillStyle = categ.color
let new_object = new Rectangle(this.ctx, value, categ.col_name, left, top, bar_width, bar_height)
let new_object = new Rectangle(this.ctx, value, colId, left, top, bar_width, bar_height)
new_object.draw()
this.objects.push(new_object)
})

21
public/styles/chart_style.css
Unescape View File

@ -2,10 +2,15 @@
--legend-height: 30px
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: grid;
grid-template-rows: auto 2em;
}
#chartCanvas,
@ -17,8 +22,12 @@ body {
height: 100%;
}
html {
height: 100%;
#effectCanvas {
transition: opacity 0.3s;
}
#detectionCanvas {
opacity: 0;
}
#graphLegend {
@ -56,11 +65,3 @@ html {
position: center;
font-size: 13px;
}
#detectionCanvas {
opacity: 0;
}
#effectCanvas {
transition: opacity 0.3s;
}
Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.