Skip to content
Snippets Groups Projects
Commit 9184e67e authored by Matěj Lang's avatar Matěj Lang
Browse files

Selected stick is highlighted in AveragesMap.

parent 8c75d70f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/header/AveragesMap.vue
+ 56
− 101
View file @ 9184e67e
......@@ -39,10 +39,9 @@ export default {
return {
width: 1000,
height: 100,
margin: { top: 10, right: 20, bottom: 20, left: 20 },
margin: { top: 10, right: 20, bottom: 20, left: 30 },
scaleExtent: [1, Infinity],
lineWidth: 1,
drawRectanglesMissing: true,
rectangleColor: '#dddddd'
}
},
......@@ -125,6 +124,26 @@ export default {
chartData() {
return this.$store.getters.chartData(this.cameraID)
},
// snowHeightAverages() {
// let result = {}
// for (const stickID of this.stickIDs) {
// if (
// !this.$store.getters.cameraByStick(stickID).includes(this.cameraID)
// ) {
// continue // Skip if the stick is not present in this camera.
// }
// result[stickID] = []
// this.cameraChronology.order.forEach(imageName => {
// const snowHeightAverage = this.chartData[imageName].sticks[stickID]
// .snowHeightAverage
// result[stickID].push(snowHeightAverage)
// })
// }
// return result
// },
stickIDs() {
return this.$store.getters.stickIDs
},
......@@ -152,6 +171,32 @@ export default {
isVisible() {
return this.$store.getters.cameraStatusGUI(this.cameraID) === 'full'
},
// ---
// // --- Quadtree ---
// quadtree() {
// if (this.chartData) {
// return d3
// .quadtree()
// .x(d => {
// // Ask for x coordinate in the canvas coordinate system.
// let dateTime = this.chartData[d].dateTime
// return this.xScaleZoomed(new Date(dateTime))
// })
// .y(d => {
// return this.yScale(
// this.chartData[d].sticks[this.stickID].snowHeightAverage
// )
// })
// .extent([
// [this.margin.left, 0],
// [this.width - this.margin.right, this.height]
// ])
// .addAll(Object.keys(this.chartData))
// }
// return null
// },
// // ---
// --- Zoom ---
zoom() {
......@@ -198,6 +243,9 @@ export default {
chartData() {
this.redrawChart(this.xScaleZoomed)
},
activePoint() {
this.redrawChart(this.xScaleZoomed)
},
isVisible() {
this.redrawChart(this.xScaleZoomed)
}
......@@ -294,7 +342,9 @@ export default {
this.drawMissingDataRectangles(context, x)
for (const stickID of this.stickIDs) {
this.drawSnowHeightAverage(context, x, y, stickID)
const color =
this.activePoint.stickID === stickID ? '#ad0101' : '#000000'
this.drawSnowHeightAverage(context, x, y, stickID, color)
}
},
drawMissingDataRectangles(context, x) {
......@@ -341,7 +391,7 @@ export default {
lastTimestamp = timestamp
})
},
drawSnowHeightAverage(context, x, y, stickID) {
drawSnowHeightAverage(context, x, y, stickID, color) {
// context: Canvas context, used for drawing into canvas.
// x: D3 scale for x axis.
// y: D3 scale for y axis.
......@@ -376,7 +426,7 @@ export default {
snowHeightAverage,
x,
y,
'black'
color
)
}
lastTimestamp = timestamp
......@@ -414,108 +464,13 @@ export default {
context.beginPath()
context.strokeStyle = color || '#555555'
context.lineWidth = 2
context.globalAlpha = 0.2
context.globalAlpha = 0.3
context.moveTo(lastPx, lastPy)
context.lineTo(px, py)
context.stroke()
}
},
// drawAggregatedAverages(context, x, y) {
// // context: Canvas context, used for drawing into canvas.
// // x: D3 scale for x axis.
// // y: D3 scale for y axis.
// let lastTimestamp = null
// let lastAverageMin = -1
// let lastAverageMax = -1
// const images = this.chartData
// if (typeof images === 'undefined') {
// // chartData isn't loaded
// return
// }
// this.cameraChronology.order.forEach(imageName => {
// // Find maximum among the sticks
// let averageMax = -1
// for (const stickID in images[imageName].sticks) {
// if (
// averageMax < images[imageName].sticks[stickID].snowHeightAverage
// ) {
// averageMax = images[imageName].sticks[stickID].snowHeightAverage
// }
// }
// // Find minimum among the sticks
// let averageMin = averageMax
// for (const abcd in images[imageName].sticks) {
// if (
// averageMin > images[imageName].sticks[abcd].snowHeightAverage &&
// images[imageName].sticks[abcd].snowHeightAverage > -1
// ) {
// averageMin = images[imageName].sticks[abcd].snowHeightAverage
// }
// }
// let timestamp = images[imageName].dateTime
// // Draw the trapezoid (or triangle)
// this.drawTrapezoid(
// context,
// x,
// y,
// lastTimestamp,
// timestamp,
// lastAverageMin,
// lastAverageMax,
// averageMin,
// averageMax,
// this.activePoint.cameraID === this.cameraID ? '#fe4a49' : 'black',
// 0.25
// )
// lastAverageMin = averageMin
// lastAverageMax = averageMax
// lastTimestamp = timestamp
// })
// },
// drawTrapezoid(
// context,
// x,
// y,
// lastTimestamp,
// timestamp,
// lastAverageMin,
// lastAverageMax,
// averageMin,
// averageMax,
// color,
// opacity
// ) {
// const x1 = x(new Date(lastTimestamp))
// const x2 = x(new Date(timestamp))
// // If start or end are out of bounds, don't draw the shape.
// if (x1 >= this.width || x2 <= 0) {
// return
// }
// if (lastAverageMax === -1 || averageMax === -1) {
// return
// }
// const yMin1 = y(lastAverageMin)
// const yMax1 = y(lastAverageMax)
// const yMin2 = y(averageMin)
// const yMax2 = y(averageMax)
// context.strokeStyle = color || '#555555'
// context.fillStyle = color || '#555555'
// context.lineWidth = 1
// context.globalAlpha = opacity || 1
// context.beginPath()
// context.moveTo(x1, yMin1)
// context.lineTo(x2, yMin2)
// context.lineTo(x2, yMax2)
// context.lineTo(x1, yMax1)
// context.closePath()
// context.fill()
// },
drawRectangle(context, x, lastTimestamp, timestamp, color, opacity) {
const x1 = Math.floor(x(new Date(lastTimestamp)))
const x2 = Math.floor(x(new Date(timestamp))) + 1
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment