Mercurial > lbo > hg > analyrics
view assets/index.html.hbs @ 38:305224ae5a33
Enable time navigation
author | Lewin Bormann <lbo@spheniscida.de> |
---|---|
date | Sat, 16 Jul 2022 16:24:13 -0700 |
parents | 761e4438e0dd |
children | 43cd5bbe858e |
line wrap: on
line source
<!DOCTYPE html> <html> <head> <title>Analyrics</title> <meta name="viewport" content="width=80vw, initial-scale=1"> <script src="static/chart.min.js" type="application/javascript"></script> <script type="application/javascript"> let from = "{{ date.today }}"; let duration = {{ date.duration }}; // in days function formatDate(d) { let m = d.getUTCMonth()+1; m = m < 10 ? "0"+m : m; let day = d.getUTCDate(); day = day < 10 ? "0"+day : day; return `${d.getUTCFullYear()}-${m}-${day}`; } function adjustURLDateParams(dateOffsetDays, durationMultiplier) { let usp = new URLSearchParams(window.location.search); let from_date = new Date(usp.get("from") || from); console.log("from date", from_date, " ", dateOffsetDays); let gduration = +usp.get("duration") || duration; let new_from_date = formatDate(new Date(from_date.getTime() + dateOffsetDays * 86400 * 1000)); console.log(from_date, new_from_date); let new_duration = gduration * durationMultiplier; usp.set("from", new_from_date); usp.set("duration", new_duration.toFixed()); window.location.search = usp.toString(); }; </script> <style> #logo { color: #22bb22; font-size: 20pt; font-style: bold; } #header { color: #bb2222; } .useraction { float: right; padding: 3pt; } .userdomain { float: right; padding: 3pt; } #logout { float: right; padding: 3pt; } #flashtext { } #flash { text-align: center; border-style: solid; border-color: #22aa22; margin-left: 30%; margin-right: 30%; } #errortext { } #error { text-align: center; border-style: solid; border-color: #aa2222; margin-left: 30%; margin-right: 30%; } .plottitle { text-align: center; } .plotrow { border-style: solid; border-color: blue; text-align: center; display: flex; justify-content: center; } .plotframe { border-style: solid; border-color: green; display: inline-block; margin: 5pt; } .fullwidth { width: 95%; } .halfwidth { width: 48%; } .timenav { display: flex; justify-content: center; } .timeindicator { text-align: center; } </style> </head> <body> <!-- Header --> <div id="header"> <span id="logo">AnaLyrics</span> {{#if loggedin}} <form id="logout" action="/logout" method="POST"> <input type="submit" value="Log out" /> </form> <div class="useraction"><b>{{username}}</b>.</div> <div class="userdomain">{{#if domain}}Domain: <b>{{domain}}</b>{{else}}<i>(all domains)</i>{{/if}}</div> {{else}} <a class="useraction" href="login">Log in</a> {{/if}} </div> {{#if flash}}<div id="flash"><span id="flashtext">{{flash}}<span></div>{{/if}} {{#if error}}<div id="error"><span id="errortext">{{error}}</span></div>{{/if}} <!-- Time navigation --> <div class="timeindicator"> from {{ date.today }} ({{date.duration}} days) </div> <div class="timenav"> <button onclick="adjustURLDateParams(-30, 1)">-30d</button> <button onclick="adjustURLDateParams(-7, 1)">-7d</button> <button onclick="adjustURLDateParams(-1, 1)">-1d</button> <button onclick="adjustURLDateParams(1, 1)">+1d</button> <button onclick="adjustURLDateParams(7, 1)">+7d</button> <button onclick="adjustURLDateParams(30, 1)">+30d</button> </div> <!-- Plots -- only shown when logged in. --> {{#if loggedin}} <div class="plotrow row1"> <div class="plotframe fullwidth"> <div class="plottitle">Visits and Sessions</div> <canvas id="visitsAndSessions" height="100"></canvas> </div> </div> <div class="plotrow row2"> <div class="plotframe halfwidth">Top paths<canvas id="topPaths"></canvas> </div> <div class="plotframe halfwidth">Requests per Session<canvas id="requestsBySession"></canvas> </div> </div> <script> let plots = {"visitsAndSessions": {{{ chartconfig.visitsAndSessions }}}, "topPaths": {{{ chartconfig.topPaths }}}, "requestsBySession": {{{ chartconfig.requestsBySession }}} }; Object.keys(plots).forEach((cv) => { if (plots[cv] == undefined) { return; } const ctx = document.getElementById(cv).getContext('2d'); const myChart = new Chart(ctx, plots[cv]); }); </script> {{/if}} </body> </html>