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('
', []), name: 'line-graph' }; export { lineGraph as default };