localmap/stats.html at master · alancameronwills/localmap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<!-- Uses Application Insights telemetry embedded in the map JS code. -->
<html>
<head>
    <title>Map Digi Penfro</title>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, minimum-scale=1, maximum-scale=1,initial-scale=1" />
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <script src="scripts/util.js?v=57"></script>
    <script src="scripts/model.js?v=30"></script>
    <script>

        async function init() {
            if (location.queryParameters?.project) {
                window.project = await Project.get();
                g("projectId").innerHTML = `${window.project?.title || `project id not found: ${location.queryParameters?.project}`}`;
            }
            fillRest(3);
        }

        function fillRest(days=3) {
            getContributions(days);
            doQueries(days);
        }

        /** Most recently changed rows in database */
        function getContributions (days) {
            g("contrib").innerHTML = "<i class='loading'>Loading...</i>";
            fetch('https://mapdigi.org/api/recentChanges?days='+days + (window.project? "&project=" + window.project.id : ""))
            .then (response => response.json())
            .then(rows => {
                if (rows.length == 0) {
                    g("contrib").innerHTML = `No contributions in the past ${days} days`;
                } else {
                    let table = "<table>";
                    for (var i = 0; i<rows.length; i++) {
                        let row = rows[i];
                        let href = "https://mapdigi.org?place=" + row.id;
                        table += `<tr><td><a href="${href}">${row.title}</a></td><td>${row.user}</td></tr>`;
                    }
                    table += "</table>";
                    g("contrib").innerHTML = table;
                }
            })
        }

        /** Run the Application Insights queries in the body and show their answers */
        function doQueries(days=3) {
            let projectId = window.project ? window.project.id.replace(/ /g, "+") : "";
            for (var i = 0; i < 9; i++) {
                var q = g("q"+i), a = g("a"+i), d=g("ndays" + i);
                if (d) {d.innerHTML = ""+days;}
                if (q && a) {
                    doQuery(q.innerText, a, days, projectId);
                }
            }
        }
        function doQuery(t, div, days, projectId) {
            let projectFilter = projectId ? `and substring(customDimensions.id,0,${projectId.length})=="${projectId}"` : "";
            let query = t.replace(/{days}/g, days)
                .replace(/{projectFilter}/g, projectFilter)
                .replace(/[\n\r]+/g, " ").trim().replace(/"/g,"'");
            let body = "{\"query\":\"" + query + "\"}";
            div.innerHTML = "<i class='loading'>Loading...</i>";
            fetch('https://mapdigi.org/api/stats',
                {   body: body,
                    method: "POST",
                    headers: { 'Content-Type': 'text/plain;charset=utf-8'},
                })
                .then(response => response.text())
                .then(stuff => {
                    let js = JSON.parse(stuff);
                    div.innerHTML = tabulate(js);
            });
        }

        function tabulate(body, context) {
            let columns = body.tables[0].columns;
            let rows = body.tables[0].rows;
            let result = "<table><tr>";
            for (var ih = 0; ih < columns.length; ih++) {
                result += "<th>" + columns[ih].name + "</th>"
            }
            result += "</tr>\n";
            for (var i = 0; i < rows.length; i++) {
                result += "<tr>";
                let row = rows[i];
                for (var j = 0; j < row.length; j++) {
                    result += "<td>" + (row[j] || "") + "</td>"
                }
                result += "</tr>\n";
            }
            result += "</table>";
            return result;
        }
    </script>
    <style>
        body {
            font-family: sans-serif;
        }
        h1,h2 {
            color: rgb(39, 110, 202);
            margin-top: 3rem;
        }

        tr:nth-child(even) {
            background-color: aliceblue;
        }

        pre {
            display: none;
        }
        .loading {
            background-color: lightgoldenrodyellow;
        }
    </style>
</head>

<body onload="init(3)">
    <h1 id="projectId">Map Digi</h1>
    Stats for the past <input style="background-color: yellow;" type="number" size="3" value="3" min="1" max="30" step="1" onchange="fillRest(this.value)"/> days.
    <p>Recent uses can take an hour or so to appear here.</p>
    <h2>Contributions in the past <span id="ndays2">3</span> days</h2>
    <div id="contrib"></div>

    <!-- To add a new usage query, create a new pre id="qn" and div id="an", where n is a single digit -->
    <!-- Query language reference: https://docs.microsoft.com/en-us/azure/kusto/query/ -->


    <h2>Place views in the past <span id="ndays1">3</span> days</h2>
    <i>Pop = hover to show petals; open = click to fill screen</i>
    <pre id="q1">
        customEvents | where name == 'popPetals' and timestamp > ago({days}d) {projectFilter}
        | summarize pops=count(), popUsers=dcount(user_Id)  by placePop=tostring(customDimensions.place)
        | join kind=fullouter (
             customEvents | where name == 'presentSlidesOrEdit' and timestamp > ago({days}d) {projectFilter}
             | summarize opens=count(), openUsers=dcount(user_Id)  by placePresent=tostring(customDimensions.place)
         ) on $left.placePop==$right.placePresent
         | project place = iff(placePop != '', placePop , placePresent ), pops, popUsers , opens, openUsers
         | sort by opens, pops</pre>
    <div id="a1"></div>

    <h2>Viewers in the past <span id="ndays0">3</span> days</h2>
    <pre id="q2">
        customEvents
        | where timestamp > ago({days}d) {projectFilter}
        | summarize Distinct_Viewers = dcountif(user_Id, name=="popPetals")
    </pre>
    <div id="a2"></div>
    <pre id="q0">
            customEvents
            | where timestamp > ago({days}d) {projectFilter}
            | summarize pops=countif(name=="popPetals"), opens=countif(name=="presentSlidesOrEdit"), user=any(user_AuthenticatedId), browser=any(client_Browser) by user_Id
            | sort by pops, opens
        </pre>
    <div id="a0"></div>

    </body>


</html>