diff --git a/src/HorizontalGauge/HozirontalGauge.js b/src/HorizontalGauge/HozirontalGauge.js index 9b1d3f9eff7052f606afbe31a93dc9bface60aef..794ba06f1a4e1d4f8aa12d83a86455a58cbcafb6 100644 --- a/src/HorizontalGauge/HozirontalGauge.js +++ b/src/HorizontalGauge/HozirontalGauge.js @@ -7,7 +7,7 @@ class HorizontalGauge extends Component { render() { const value = ('value' in this.props && this.props.value) ? this.props.value : 0; - // Define the dimensions of the gaug + // Define the dimensions of the gauge const margin = { left:10, top: 10, right: 10, bottom: 10}, width = this.props.size.width - margin.left - margin.right, height = 20; @@ -22,17 +22,17 @@ class HorizontalGauge extends Component { .clamp(true); const svg = <svg viewBox={viewbox} width={width + margin.left + margin.right} height={height + margin.top + margin.bottom}> - {/* translate to add some margin around the gauge */} - <g className="gauge" transform={"translate(" + margin.left + "," + margin.top + ")"}> - {/* Background of the gauge */} - <rect className="background" x="0" y="0" width={width} height={height} ry="5px"/> - {/* Representation of the value */} - <rect className="overlay" x="0" y="0" width={xScale(value)} height={height} ry="5px"/> - {/* Text of the gauge */} - <text className="label" x={width/2} y={height/2} textAnchor="middle" dominantBaseline="central"> - {"" + value.toFixed(2)} - </text> - </g> + {/* translate to add some margin around the gauge */} + <g className="gauge" transform={"translate(" + margin.left + "," + margin.top + ")"}> + {/* Background of the gauge */} + <rect className="background" x="0" y="0" width={width} height={height} ry="5px"/> + {/* Representation of the value */} + <rect className="overlay" x="0" y="0" width={xScale(value)} height={height} ry="5px"/> + {/* Text of the gauge */} + <text className="label" x={width/2} y={height/2} textAnchor="middle" dominantBaseline="central"> + {"" + value.toFixed(2)} + </text> + </g> </svg>; return <div>{svg}</div>;