Mercurial Hosting > linkmystyle

comparison src/private/reports/analytics.html.luan @ 0:8f4df159f06b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start public repo
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 11 Jul 2025 20:57:49 -0600
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:8f4df159f06b
1 local Luan = require "luan:Luan.luan"
2 local error = Luan.error
3 local Parsers = require "luan:Parsers.luan"
4 local json_string = Parsers.json_string or error()
5 local Io = require "luan:Io.luan"
6 local Http = require "luan:http/Http.luan"
7 local Shared = require "site:/lib/Shared.luan"
8 local head = Shared.head or error()
9 local body_header = Shared.body_header or error()
10 local footer = Shared.footer or error()
11 local compressed = Shared.compressed or error()
12 local Reporting = require "site:/lib/Reporting.luan"
13 local get_data = Reporting.get_data or error()
14 local Logging = require "luan:logging/Logging.luan"
15 local logger = Logging.logger "analytics_new.html"
16
17
18 return function()
19 Io.stdout = Http.response.text_writer()
20 %>
21 <!doctype html>
22 <html lang="en">
23 <head>
24 <% head() %>
25 <title>Link My Style</title>
26 <style>
27 div[content] {
28 margin-left: 3%;
29 margin-right: 3%;
30 }
31 h1 {
32 text-align: center;
33 margin-bottom: 0;
34 }
35 p[top] {
36 text-align: center;
37 }
38 div[row] {
39 display: flex;
40 align-items: flex-start;
41 justify-content: space-between;
42 margin-top: 20px;
43 margin-bottom: 20px;
44 }
45 div[report] {
46 width: 48%;
47 }
48 </style>
49 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
50 <script>
51 <%
52 do
53 local data = get_data( "+type:visit", "day" )
54 %>
55 function initTraffic() {
56 let options = {
57 chart: {
58 type: 'line'
59 },
60 series: [{
61 name: 'Visitors',
62 data: <%=json_string(data,compressed)%>,
63 }],
64 xaxis: {
65 type: 'datetime'
66 },
67 title: {
68 text: 'Traffic'
69 }
70 };
71 let div = document.querySelector('div[report="traffic"]');
72 let chart = new ApexCharts( div, options );
73 chart.render();
74 }
75 <%
76 end_do
77 do
78 local data = get_data( "+type:click", "day" )
79 %>
80 function initClicks() {
81 let options = {
82 chart: {
83 type: 'line'
84 },
85 series: [{
86 name: 'Clicks',
87 data: <%=json_string(data,compressed)%>,
88 }],
89 xaxis: {
90 type: 'datetime'
91 },
92 title: {
93 text: 'Clicks'
94 }
95 };
96 let div = document.querySelector('div[report="clicks"]');
97 let chart = new ApexCharts( div, options );
98 chart.render();
99 }
100
101 <%
102 end_do
103 do
104 local data = get_data( "+type:monthly_visit", "owner" )
105 %>
106 function initOwnerTraffic() {
107 let data = <%=json_string(data,compressed)%>;
108 let options = {
109 chart: {
110 type: 'bar',
111 height: barChartHeight(data.length)
112 },
113 plotOptions: {
114 bar: {
115 horizontal: true
116 }
117 },
118 series: [{
119 name: 'Visitors',
120 data: data,
121 }],
122 title: {
123 text: 'Traffic by Owner'
124 }
125 };
126 let div = document.querySelector('div[report="owner_traffic"]');
127 let chart = new ApexCharts( div, options );
128 chart.render();
129 }
130 <%
131 end_do
132 do
133 local data = get_data( "+type:monthly_click", "owner" )
134 %>
135 function initOwnerClicks() {
136 let data = <%=json_string(data,compressed)%>;
137 let options = {
138 chart: {
139 type: 'bar',
140 height: barChartHeight(data.length)
141 },
142 plotOptions: {
143 bar: {
144 horizontal: true
145 }
146 },
147 series: [{
148 name: 'Clicks',
149 data: data,
150 }],
151 title: {
152 text: 'Clicks by Owner'
153 }
154 };
155 let div = document.querySelector('div[report="owner_clicks"]');
156 let chart = new ApexCharts( div, options );
157 chart.render();
158 }
159 <%
160 end_do
161 do
162 local data = get_data( "+type:referrer", "value" )
163 %>
164 function initReferrers() {
165 let data = <%=json_string(data,compressed)%>;
166 let options = {
167 chart: {
168 type: 'bar',
169 height: barChartHeight(data.length)
170 },
171 plotOptions: {
172 bar: {
173 horizontal: true
174 }
175 },
176 series: [{
177 name: 'Visitors',
178 data: data,
179 }],
180 title: {
181 text: 'Referring Domains'
182 }
183 };
184 let div = document.querySelector('div[report="referrers"]');
185 let chart = new ApexCharts( div, options );
186 chart.render();
187 }
188 <%
189 end_do
190 %>
191 function init() {
192 initTraffic();
193 initClicks();
194 initOwnerTraffic();
195 initOwnerClicks();
196 initReferrers();
197 }
198 </script>
199 </head>
200 <body onload="init()">
201 <div full>
202 <% body_header() %>
203 <div content>
204 <h1>Analytics</h1>
205 <p top>For the last 30 days</p>
206 <div row>
207 <div report=traffic></div>
208 <div report=clicks></div>
209 </div>
210 <div row>
211 <div report=owner_traffic></div>
212 <div report=owner_clicks></div>
213 </div>
214 <div row>
215 <div report=referrers></div>
216 </div>
217 </div>
218 <% footer() %>
219 </div>
220 </body>
221 </html>
222 <%
223 end