92 lines
2.8 KiB
Plaintext
92 lines
2.8 KiB
Plaintext
|
<line-graph>
|
||
|
|
|
||
|
|
<div style="height: inherit;">
|
||
|
|
<canvas style="height: 100%; width: 100%;">
|
||
|
|
</canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
|
||
|
|
updateCanvas() {
|
||
|
|
let canvas = this.$("canvas")
|
||
|
|
let cx = canvas.getContext("2d")
|
||
|
|
|
||
|
|
//Default context properties
|
||
|
|
cx.textBaseline = "middle"
|
||
|
|
cx.textAlign = "center"
|
||
|
|
|
||
|
|
let width = canvas.width
|
||
|
|
let height = canvas.height
|
||
|
|
let spacing = 1 //Controls the spacing between each horizontal elements
|
||
|
|
|
||
|
|
let data = this.state.data
|
||
|
|
|
||
|
|
cx.clearRect(0, 0, width, height)
|
||
|
|
if (!data) return;
|
||
|
|
|
||
|
|
let total = data.reduce((total, current) => total + current.value, 0)
|
||
|
|
|
||
|
|
let curr = 0
|
||
|
|
let counter = 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})`
|
||
|
|
|
||
|
|
cx.fillStyle = this.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++
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
onMounted() {
|
||
|
|
this.colors = [
|
||
|
|
"#003F5C",
|
||
|
|
"#2F4B7C",
|
||
|
|
"#665191",
|
||
|
|
"#A05195",
|
||
|
|
"#D45087"
|
||
|
|
]
|
||
|
|
|
||
|
|
this.state.data = [
|
||
|
|
{
|
||
|
|
name: "P",
|
||
|
|
value: 100
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "AB",
|
||
|
|
value: 200
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "B",
|
||
|
|
value: 150
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "TB",
|
||
|
|
value: 50
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "TBF",
|
||
|
|
value: 50
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
let canvas = this.$("canvas")
|
||
|
|
canvas.width = canvas.clientWidth
|
||
|
|
canvas.height = canvas.clientHeight
|
||
|
|
|
||
|
|
this.updateCanvas()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</line-graph>
|