eric/WeatherStar4000
1
0
Fork 0
mirror of https://github.com/netbymatt/ws4kp.git synced 2026-04-21 02:59:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

portrait hourly graph #167

Browse Source
This commit is contained in:
Matt Walsh
2026-04-19 22:13:53 -05:00
parent 125490c158
commit cd2035490a
9 changed files with 342 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
views/partials/hourly-graph.ejs
View File

@@ -1,27 +1,57 @@
<%- include('header.ejs', {title: 'Hourly Graph' , hasTime: false }) %>
<div class="main has-scroll hourly-graph can-enhance">
<div class="top-right template ">
<div class="top-right legend template ">
<div class="temperature">Temperature</div>
<div class="dewpoint">Dewpoint</div>
<div class="cloud">Cloud %</div>
<div class="rain">Precip %</div>
</div>
<div class="y-axis">
<div class="label l-1">75</div>
<div class="label l-2">65</div>
<div class="label l-3">55</div>
<div class="label l-4">45</div>
</div>
<div class="chart">
<img id="chart-area"></img>
</div>
<div class="x-axis">
<div class="label l-1">12a</div>
<div class="label l-2">6a</div>
<div class="label l-3">12p</div>
<div class="label l-4">6p</div>
<div class="label l-5">12a</div>
<div class="label l-6">6a</div>
<div class="label l-7">12p</div>
<div class="cloud standard-only">Cloud %</div>
<div class="rain standard-only">Precip %</div>
</div>
<div class="top chart-container">
<div class="y-axis">
<div class="label l-1">75</div>
<div class="label l-2">65</div>
<div class="label l-3">55</div>
<div class="label l-4">45</div>
</div>
<div class="chart">
<img id="chart-area"></img>
</div>
<div class="x-axis">
<div class="label l-1">12a</div>
<div class="label l-2">6a</div>
<div class="label l-3">12p</div>
<div class="label l-4">6p</div>
<div class="label l-5">12a</div>
<div class="label l-6">6a</div>
<div class="label l-7">12p</div>
</div>
</div>
<div class="bottom chart-container portrait-only">
<div class="right">
<div class="legend portrait-only">
<div class="cloud">Cloud %</div>
<div class="rain">Precip %</div>
</div>
</div>
<div class="y-axis">
<div class="label l-1">100</div>
<div class="label l-2">75%</div>
<div class="label l-3">50%</div>
<div class="label l-4">25%</div>
<div class="label l-5">0%</div>
</div>
<div class="chart">
<img id="chart-area"></img>
</div>
<div class="x-axis">
<div class="label l-1">12a</div>
<div class="label l-2">6a</div>
<div class="label l-3">12p</div>
<div class="label l-4">6p</div>
<div class="label l-5">12a</div>
<div class="label l-6">6a</div>
<div class="label l-7">12p</div>
</div>
</div>
</div>