|
0
|
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
|
