Effects fix

public/scripts/chart_loader.js

@@ -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); {
         }
 

public/scripts/charts/area_chart.js

@@ -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)})
-        })
     }
 }

public/scripts/charts/bar_chart.js

@@ -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)
             })

public/scripts/charts/chart.js

@@ -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) {
+    constructor(ctx, value, colId, x, y, w, h) {
-        super(ctx, value, name, x, y)
+        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) {
+    constructor(ctx, value, colId, x, y, r) {
-        super(ctx, value, name, x, y)
+        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) {
+    constructor(ctx, value, colId, x, y, r, sAngle, eAngle) {
-        super(ctx, value, name, x, y, r)
+        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)  {
+    constructor(ctx, value, colId, x, y, r, sAngle, eAngle, r2)  {
-        super(ctx, value, name, x, y, r, sAngle, eAngle)
+        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.width = this.canvas.clientWidth
-        this.canvas.height = parent.clientHeight - legendHeight
+        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()
         })
     }

public/scripts/charts/donut_chart.js

@@ -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)
 

public/scripts/charts/line_chart.js

@@ -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)})
-        })
     }
 }

public/scripts/charts/pie_chart.js

@@ -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)
 

public/scripts/charts/point_chart.js

@@ -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)})
     }
 }

public/scripts/charts/smooth_area_chart.js

@@ -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)})
     }
 }

public/scripts/charts/smooth_line_chart.js

@@ -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)})
+
     }
 }

public/scripts/charts/stacked_chart.js

@@ -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)
             })

public/styles/chart_style.css

@@ -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 {
+#effectCanvas {
-    height: 100%;
+    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;
-}