prevent height change when redrawing graph

This commit is contained in:
Danny van Kooten 2016-11-25 14:24:00 +01:00
parent 8d8a95b74e
commit 87e7020ce2
2 changed files with 10 additions and 6 deletions

View File

@ -27,15 +27,15 @@ class Graph extends Component {
refreshChart() { refreshChart() {
if( ! this.canvas ) { return; } if( ! this.canvas ) { return; }
if( this.chart ) { this.chart.clear(); }
// clear canvas // clear canvas
var newCanvas = document.createElement('canvas'); var newCanvas = document.createElement('canvas');
newCanvas.setAttribute('width', this.canvas.getAttribute('width')); this.canvas.parentNode.style.minHeight = this.canvas.parentNode.clientHeight + "px";
newCanvas.setAttribute('height', this.canvas.getAttribute('height'));
this.canvas.parentNode.replaceChild(newCanvas, this.canvas); this.canvas.parentNode.replaceChild(newCanvas, this.canvas);
this.canvas = newCanvas; this.canvas = newCanvas;
if( this.chart ) { this.chart.clear(); }
this.chart = new Chart(this.canvas, { this.chart = new Chart(this.canvas, {
type: 'line', type: 'line',
data: { data: {
@ -56,7 +56,7 @@ class Graph extends Component {
pointBorderWidth: 0.1, pointBorderWidth: 0.1,
} }
], ],
} }
}); });
} }
@ -83,7 +83,7 @@ class Graph extends Component {
render() { render() {
return ( return (
<div class="block"> <div class="block">
<canvas ref={(el) => { this.canvas = el; }} /> <canvas height="100" ref={(el) => { this.canvas = el; }} />
</div> </div>
) )
} }

View File

@ -4,6 +4,10 @@
@import "forms"; @import "forms";
@import "tables"; @import "tables";
* {
box-sizing: border-box;
}
body { body {
font-family: Raleway, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: Raleway, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px; font-size: 15px;
@ -46,7 +50,7 @@ a {
.header-bar { .header-bar {
background: black; background: black;
color: white; color: white;
margin-bottom: 40px; margin-bottom: 20px;
padding: 12px 0; padding: 12px 0;
line-height: 32px; line-height: 32px;
font-weight: bold; font-weight: bold;