Mercurial > lbo > hg > analyrics

<!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">
        </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%; }
        </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="timenav">
        <div>{{ #each beginnav }}<a href="{{link}}">{{title}}</a>{{/each}}</div>
        <div>{{ #each durationnav }}<a href="{{link}}">{{title}}</a>{{/each}}</div>
    </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>
author	Lewin Bormann <lbo@spheniscida.de>
date	Sat, 16 Jul 2022 10:14:41 -0700
parents	ebe9dbb5b5ea
children	305224ae5a33