ProjetRIOT/javascript/line-graph.js

66 lines
2.0 KiB
JavaScript
Raw Normal View History

var lineGraph = {
css: null,
exports: {
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();
}
},
template: (template, expressionTypes, bindingTypes, getComponent) => template('<div style="height: inherit;"><canvas style="height: 100%; width: 100%;"></canvas></div>', []),
name: 'line-graph'
};
export { lineGraph as default };