{{template "head.html"}}
{{template "menu.html"}}

<section>
    <h1>Tracking</h1>
    <p>
        This page shows tracking statistics for my website using <a href="https://github.com/emvi/pirsch" target="_blank">Pirsch</a> and <a href="https://www.chartjs.org/" target="_blank">Chart.Js</a>. The data shows unique visitors. All times and dates are UTC.
    </p>
    <p>
        <a href="/tracking?start=7" class="button {{if eq .Start 7}}filled{{end}}">Week</a>
        <a href="/tracking?start=30" class="button {{if eq .Start 30}}filled{{end}}">Month</a>
        <a href="/tracking?start=90" class="button {{if eq .Start 90}}filled{{end}}">Quarter</a>
        <a href="/tracking?start=182" class="button {{if eq .Start 182}}filled{{end}}">Half Year</a>
        <a href="/tracking?start=365" class="button {{if eq .Start 365}}filled{{end}}">Year</a>
    </p>
    <form class="tracking-form">
        <input type="date" name="start-date" value="{{format .StartDate "2006-01-02"}}" />
        <input type="date" name="end-date" value="{{format .EndDate "2006-01-02"}}" />
        <input type="submit" value="Update" />
    </form>
</section>
<section>
    <h2>Active Visitors</h2>
    <p>
        Active visitors within the last ten minutes: {{.ActiveVisitors}}
    </p>
    <p>
        The next diagram shows active visitors for each hour of today.
    </p>
    <canvas id="hourlyVisitorsToday" class="tracking"></canvas>
    <p>
        The next table shows where the active visitors are for the past 30 seconds. Visitors switching between pages fast do create duplicate entries in the table.
    </p>
    <table>
        <thead>
            <tr>
                <th>Path</th>
                <th>Visitors</th>
            </tr>
        </thead>
        <tbody>
            {{range $data := .ActiveVisitorPages}}
                <tr>
                    <td class="break-line-anywhere">
                        <a href="{{$data.Path}}" target="_blank">{{$data.Path}}</a>
                    </td>
                    <td>{{$data.Visitors}}</td>
                </tr>
            {{end}}
        </tbody>
    </table>
</section>
<section>
    <h2>Total Visitors</h2>
    <canvas id="totalVisitors" class="tracking"></canvas>
</section>
<section>
    <h2>Pages</h2>
    <p>
        Here are the top 10 visited pages.
    </p>
    <table>
        <thead>
            <tr>
                <th>Path</th>
                <th>Visitors</th>
            </tr>
        </thead>
        <tbody>
            {{range $data := .PageRank}}
                <tr>
                    <td class="break-line-anywhere">
                        <a href="{{$data.Path}}" target="_blank">{{$data.Path}}</a>
                    </td>
                    <td>{{$data.Visitors}}</td>
                </tr>
            {{end}}
        </tbody>
    </table>
</section>
<section>
    <h2>Languages</h2>
    <p>
        Here are the top 10 languages used by my visitors.
    </p>
    <table>
        <thead>
            <tr>
                <th>Language</th>
                <th>Absolute</th>
                <th>Relative</th>
            </tr>
        </thead>
        <tbody>
            {{range $data := .Languages}}
                <tr>
                    <td>{{if $data.Language.String}}{{$data.Language.String}}{{else}}(not set){{end}}</td>
                    <td>{{$data.Visitors}}</td>
                    <td>{{round (multiply $data.RelativeVisitors 100)}} %</td>
                </tr>
            {{end}}
        </tbody>
    </table>
</section>
<section>
    <h2>Referrer</h2>
    <p>
        Here are the top 10 referrer.
    </p>
    <table>
        <thead>
            <tr>
                <th>Referrer</th>
                <th>Visitors</th>
            </tr>
        </thead>
        <tbody>
            {{range $data := .Referrer}}
                <tr>
                    <td class="break-line-anywhere">
                        {{if $data.Referrer.String}}
                            <a href="{{$data.Referrer.String}}" target="_blank">{{$data.Referrer.String}}</a>
                        {{else}}
                            (unknown)
                        {{end}}
                    </td>
                    <td>{{$data.Visitors}}</td>
                </tr>
            {{end}}
        </tbody>
    </table>
</section>
<section>
    <h2>Browser</h2>
    <table>
        <thead>
        <tr>
            <th>Browser</th>
            <th>Absolute</th>
            <th>Relative</th>
        </tr>
        </thead>
        <tbody>
        {{range $data := .Browser}}
            <tr>
                <td>{{if $data.Browser.String}}{{$data.Browser.String}}{{else}}(unknown){{end}}</td>
                <td>{{$data.Visitors}}</td>
                <td>{{round (multiply $data.RelativeVisitors 100)}} %</td>
            </tr>
        {{end}}
        </tbody>
    </table>
</section>
<section>
    <h2>Operating System</h2>
    <table>
        <thead>
        <tr>
            <th>OS</th>
            <th>Absolute</th>
            <th>Relative</th>
        </tr>
        </thead>
        <tbody>
        {{range $data := .OS}}
            <tr>
                <td>{{if $data.OS.String}}{{$data.OS.String}}{{else}}(unknown){{end}}</td>
                <td>{{$data.Visitors}}</td>
                <td>{{round (multiply $data.RelativeVisitors 100)}} %</td>
            </tr>
        {{end}}
        </tbody>
    </table>
</section>
<section>
    <h2>Countries</h2>
    <table>
        <thead>
        <tr>
            <th>Country</th>
            <th>Absolute</th>
            <th>Relative</th>
        </tr>
        </thead>
        <tbody>
        {{range $data := .Countries}}
            <tr>
                <td>{{if $data.CountryCode.String}}{{$data.CountryCode.String}}{{else}}(unknown){{end}}</td>
                <td>{{$data.Visitors}}</td>
                <td>{{round (multiply $data.RelativeVisitors 100)}} %</td>
            </tr>
        {{end}}
        </tbody>
    </table>
</section>
<section>
    <h2>Platform</h2>
    <canvas id="platform" class="tracking"></canvas>
</section>
<section>
    <table>
        <thead>
        <tr>
            <th>Platform</th>
            <th>Absolute</th>
            <th>Relative</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>Desktop</td>
                <td>{{.Platform.PlatformDesktop}}</td>
                <td>{{round (multiply .Platform.RelativePlatformDesktop 100)}} %</td>
            </tr>
            <tr>
                <td>Mobile</td>
                <td>{{.Platform.PlatformMobile}}</td>
                <td>{{round (multiply .Platform.RelativePlatformMobile 100)}} %</td>
            </tr>
            <tr>
                <td>(unknown)</td>
                <td>{{.Platform.PlatformUnknown}}</td>
                <td>{{round (multiply .Platform.RelativePlatformUnknown 100)}} %</td>
            </tr>
        </tbody>
    </table>
</section>
<section>
    <h2>Page Visits</h2>
</section>

{{range $i, $data := .PageVisitors}}
    <section>
        <h3>{{$data.Path}}</h3>
        <canvas id="pageVisits{{$i}}" class="tracking"></canvas>
    </section>
{{end}}

<script type="text/javascript" src="/static/js/Chart-v2.9.3.bundle.min.js"></script>
<script type="text/javascript">
    new Chart(document.getElementById('hourlyVisitorsToday').getContext('2d'), {
        type: "bar",
        data: {
            labels: [{{.HourlyVisitorsTodayLabels}}],
            datasets: [{
                backgroundColor: "#7f7f7f",
                borderColor: "#7f7f7f",
                label: "Hourly Visitors for Today",
                data: [{{.HourlyVisitorsTodayDps}}]
            }]
        }
    });

    new Chart(document.getElementById('totalVisitors').getContext('2d'), {
        type: "line",
        data: {
            labels: [{{.TotalVisitorsLabels}}],
            datasets: [
                {
                    backgroundColor: "rgb(43, 180, 0, 0.02)",
                    borderColor: "rgb(40, 152, 0, 0.5)",
                    label: "Total Visitors",
                    data: [{{.TotalVisitorsDps}}]
                },
                {
                    backgroundColor: "rgb(0, 63, 197, 0.02)",
                    borderColor: "rgb(0, 53, 159, 0.5)",
                    label: "Sessions",
                    data: [{{.SessionsDps}}]
                },
                {
                    backgroundColor: "rgba(194, 0, 0, 0.02)",
                    borderColor: "rgb(152, 0, 0, 0.5)",
                    label: "Bounces",
                    data: [{{.BouncesDps}}]
                }
            ]
        }
    });

    new Chart(document.getElementById('platform').getContext('2d'), {
        type: "doughnut",
        data: {
            labels: ["Desktop", "Mobile", "(unknown)"],
            datasets: [{
                backgroundColor: ["#515151", "#7f7f7f", "#dbdbdb"],
                borderColor: ["#515151", "#7f7f7f", "#dbdbdb"],
                data: [
                    {{round (multiply .Platform.RelativePlatformDesktop 100)}},
                    {{round (multiply .Platform.RelativePlatformMobile 100)}},
                    {{round (multiply .Platform.RelativePlatformUnknown 100)}}]
            }]
        }
    });

    {{range $i, $data := .PageVisitors}}
        new Chart(document.getElementById('pageVisits{{$i}}').getContext('2d'), {
            type: "line",
            data: {
                labels: [{{$data.Labels}}],
                datasets: [
                    {
                        backgroundColor: "rgb(43, 180, 0, 0.02)",
                        borderColor: "rgb(40, 152, 0, 0.5)",
                        label: "Page Visits",
                        data: [{{$data.Data}}]
                    },
                    {
                        backgroundColor: "rgb(0, 63, 197, 0.02)",
                        borderColor: "rgb(0, 53, 159, 0.5)",
                        label: "Sessions",
                        data: [{{$data.Sessions}}]
                    },
                    {
                        backgroundColor: "rgba(194, 0, 0, 0.02)",
                        borderColor: "rgb(152, 0, 0, 0.5)",
                        label: "Bounces",
                        data: [{{$data.Bounces}}]
                    }
                ]
            }
        });
    {{end}}
</script>

{{template "end.html"}}