Mercurial > lbo > hg > analyrics
view assets/index.html.hbs @ 30:24f2baa54870
Show top pages
author | Lewin Bormann <lbo@spheniscida.de> |
---|---|
date | Fri, 15 Jul 2022 08:19:13 -0700 |
parents | 1f33922b29f2 |
children | c25ab9d90bb2 |
line wrap: on
line source
<!DOCTYPE html> <html> <head> <title>Analyrics</title> <script src="static/chart.min.js" type="application/javascript"></script> <script type="application/javascript"> </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; } .plotframe { border-style: solid; border-color: green; display: inline-block; margin: 5pt; } .fullwidth { width: 95%; } .halfwidth { width: 47%; } </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">Logged in as <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}} <!-- Plots -- only shown when logged in. --> {{#if loggedin}} <div class="plotrow row1"> <div class="plottitle">Visits and Sessions</div> <div class="plotframe fullwidth"> <canvas id="visitsAndSessions" height="100"></canvas> </div> </div> <div class="plotrow row2"> <div class="plotframe halfwidth"><canvas id="topPaths" height="100"></canvas> </div> <div class="plotframe halfwidth"> </div> </div> <script> let plots = {"visitsAndSessions": {{{ chartconfig.visitsAndSessions }}}, "topPaths": {{{ chartconfig.topPaths }}} }; 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>