This commit is contained in:
2019-08-10 14:41:06 +02:00
parent 32a31c7cb5
commit b25a7ac483
2 changed files with 11 additions and 9 deletions

View File

@@ -1,9 +1,8 @@
<template> <template>
<div class="chart-container"> <div class="chart-container">
<div class="loader-container" v-if="loading"> <Loader v-if="loading"></Loader>
<Loader></Loader>
</div>
<div class="chart" v-else> <div class="chart" v-else>
<!-- Wrapper for chart so that highchart doesn't create scrollbars -->
<div ref="chart"></div> <div ref="chart"></div>
</div> </div>
</div> </div>
@@ -108,20 +107,22 @@ export default {
<style lang="scss"> <style lang="scss">
@import "@/style/_variables.scss"; @import "@/style/_variables.scss";
.chart-container, .chart, .chart div { .chart {
// height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
width: 100%;
}
.chart div {
height: 100%;
} }
.chart-container { .chart-container {
margin-bottom: 24px;
}
.loader-container {
display: flex; display: flex;
flex-direction: column;
flex-grow: 1;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; margin-bottom: 24px;
} }
.highcharts-graph { .highcharts-graph {
stroke-width: 3px; stroke-width: 3px;

View File

@@ -2,6 +2,7 @@
@import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap'); @import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
html, body { html, body {
height: 100%; height: 100%;
overflow: hidden; /* Highcharts can cause scrollbars because it rounds pixels */
} }
@import "./variables"; @import "./variables";
@import "~bulma/bulma"; @import "~bulma/bulma";