ProjetRIOT/components/line-graph.riot

100 lines
3.3 KiB
Plaintext
Raw Normal View History

<line-graph>
2023-03-28 16:17:29 +02:00
<div style="height: inherit; width: inherit;">
<canvas style="height: 100%; width: 100%;">
</canvas>
</div>
<script>
export default {
updateCanvas() {
let canvas = this.$("canvas")
2023-03-28 16:52:53 +02:00
canvas.width = canvas.clientWidth
canvas.height = canvas.clientHeight
let cx = canvas.getContext("2d")
cx.textBaseline = "middle"
cx.textAlign = "center"
let width = canvas.width
let height = canvas.height
2023-03-28 16:52:53 +02:00
let spacing = 1
let data = this.state.data
2023-03-28 16:52:53 +02:00
let colors = [
"#003F5C",
"#2F4B7C",
"#665191",
"#A05195",
"#D45087"
]
cx.clearRect(0, 0, width, height)
2023-03-28 16:52:53 +02:00
cx.resetTransform()
if (!data) return;
2023-03-28 16:17:29 +02:00
cx.fillStyle = "#707070"
cx.font = "15px Arial"
cx.fillText("This is an example title", width / 2, 10)
cx.font = "10px Arial"
cx.translate(0, 20)
let total = data.reduce((total, current) => total + current.value, 0)
let curr = 0
let counter = 0
2023-03-28 16:17:29 +02:00
let legendWidth = 0
for (let field of data) {
let start = curr + spacing
let barWidth = field.value / total * width - spacing * 2
let text = `${Math.round(field.value / total * 1000) / 10}% (${field.name})`
2023-03-28 16:52:53 +02:00
cx.fillStyle = colors[counter]
cx.fillRect(start, 0, barWidth, height / 3)
cx.fillStyle = "#FFFFFF"
if (cx.measureText(text).width < barWidth) {
cx.fillText(text, start + barWidth / 2, height / 6)
} else if (cx.measureText("...").width < barWidth) {
cx.fillText("...", start + barWidth / 2, height / 6)
}
curr += field.value / total * width
counter++
2023-03-28 16:17:29 +02:00
legendWidth += cx.measureText(field.name).width + 25 + 15 // += textWidth + squareWidth + margin
}
cx.textAlign = "left"
legendWidth -= 15 //On enlève la dernière marge
cx.translate(width / 2 - legendWidth / 2, height / 4 + 20)
counter = 0
for (let field of data) {
2023-03-28 16:52:53 +02:00
cx.fillStyle = colors[counter]
2023-03-28 16:17:29 +02:00
cx.fillRect(0, 0, 25, 25)
cx.fillStyle = "#707070"
cx.fillText(field.name, 30, 12.5)
cx.translate(cx.measureText(field.name).width + 25 + 15, 0)
counter++
}
},
2023-03-28 16:52:53 +02:00
state: {
data: [],
title: "Example"
},
2023-03-28 16:52:53 +02:00
onMounted() {
let canvas = this.$("canvas")
this.updateCanvas()
2023-03-28 16:17:29 +02:00
new ResizeObserver(this.updateCanvas).observe(canvas)
},
onUpdated(props, state) {
this.updateCanvas()
}
}
</script>
</line-graph>