Visual Console Refactor: bugfix

Former-commit-id: 289d60e26486a0ddb2447841fe921fe84ea8871c
This commit is contained in:
Alejandro Gallardo Escobar 2019-04-16 17:20:13 +02:00
parent be5f68de80
commit 23bdde8400
1 changed files with 14 additions and 10 deletions

View File

@ -168,23 +168,27 @@ export default class Percentile extends Item<PercentileProps> {
text.setAttribute("font-size", "16"); text.setAttribute("font-size", "16");
text.setAttribute("font-family", "arial"); text.setAttribute("font-family", "arial");
text.setAttribute("font-weight", "bold"); text.setAttribute("font-weight", "bold");
text.setAttribute("transform", "translate(50 32)");
text.setAttribute("fill", this.props.labelColor || "#FFFFFF"); text.setAttribute("fill", this.props.labelColor || "#FFFFFF");
if (this.props.valueType === "value") { if (this.props.valueType === "value") {
const value = document.createElementNS(svgNS, "tspan"); if (this.props.unit && this.props.unit.length > 0) {
value.setAttribute("x", "0"); const value = document.createElementNS(svgNS, "tspan");
value.setAttribute("dy", "1em"); value.setAttribute("x", "0");
value.textContent = `${this.props.value}`; value.setAttribute("dy", "1em");
const unit = document.createElementNS(svgNS, "tspan"); value.textContent = `${this.props.value}`;
unit.setAttribute("x", "0"); const unit = document.createElementNS(svgNS, "tspan");
unit.setAttribute("dy", "1em"); unit.setAttribute("x", "0");
if (this.props.unit) { unit.setAttribute("dy", "1em");
unit.textContent = `${this.props.unit}`; unit.textContent = `${this.props.unit}`;
text.append(value, unit);
text.setAttribute("transform", "translate(50 33)");
} else {
text.textContent = `${this.props.value}`;
text.setAttribute("transform", "translate(50 50)");
} }
text.append(value, unit);
} else { } else {
text.textContent = `${progress}%`; text.textContent = `${progress}%`;
text.setAttribute("transform", "translate(50 50)");
} }
// Auto resize SVG using the view box magic: https://css-tricks.com/scale-svg/ // Auto resize SVG using the view box magic: https://css-tricks.com/scale-svg/