fix chart generation

This commit is contained in:
2026-01-27 17:01:33 +11:00
parent 57a3a29914
commit 47df7bc431
2 changed files with 25 additions and 6 deletions

View File

@@ -90,25 +90,35 @@
<div class="charts-grid"> <div class="charts-grid">
<div class="chart-card"> <div class="chart-card">
<div class="chart-title">Temperature (obs vs forecast)</div> <div class="chart-title">Temperature (obs vs forecast)</div>
<div class="chart-canvas">
<canvas id="chart-temp"></canvas> <canvas id="chart-temp"></canvas>
</div> </div>
</div>
<div class="chart-card"> <div class="chart-card">
<div class="chart-title">Wind (obs vs forecast)</div> <div class="chart-title">Wind (obs vs forecast)</div>
<div class="chart-canvas">
<canvas id="chart-wind"></canvas> <canvas id="chart-wind"></canvas>
</div> </div>
</div>
<div class="chart-card"> <div class="chart-card">
<div class="chart-title">Humidity (obs vs forecast)</div> <div class="chart-title">Humidity (obs vs forecast)</div>
<div class="chart-canvas">
<canvas id="chart-rh"></canvas> <canvas id="chart-rh"></canvas>
</div> </div>
</div>
<div class="chart-card"> <div class="chart-card">
<div class="chart-title">UV Index and Light</div> <div class="chart-title">UV Index and Light</div>
<div class="chart-canvas">
<canvas id="chart-light"></canvas> <canvas id="chart-light"></canvas>
</div> </div>
</div>
<div class="chart-card wide"> <div class="chart-card wide">
<div class="chart-title">Precipitation (forecast)</div> <div class="chart-title">Precipitation (forecast)</div>
<div class="chart-canvas">
<canvas id="chart-precip"></canvas> <canvas id="chart-precip"></canvas>
</div> </div>
</div> </div>
</div>
</section> </section>
</main> </main>

View File

@@ -218,9 +218,18 @@ body {
margin-bottom: 8px; margin-bottom: 8px;
} }
.chart-canvas {
height: 210px;
}
.chart-card.wide .chart-canvas {
height: 220px;
}
canvas { canvas {
width: 100%; width: 100%;
height: 210px; height: 100%;
display: block;
} }
@media (max-width: 980px) { @media (max-width: 980px) {