view src/analytics.html.luan @ 0:8f4df159f06b

start public repo
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 11 Jul 2025 20:57:49 -0600
parents
children
line wrap: on
line source

local Luan = require "luan:Luan.luan"
local error = Luan.error
local Parsers = require "luan:Parsers.luan"
local json_string = Parsers.json_string or error()
local Io = require "luan:Io.luan"
local Http = require "luan:http/Http.luan"
local Shared = require "site:/lib/Shared.luan"
local head = Shared.head or error()
local body_header = Shared.body_header or error()
local footer = Shared.footer or error()
local compressed = Shared.compressed or error()
local User = require "site:/lib/User.luan"
local Reporting = require "site:/lib/Reporting.luan"
local get_data = Reporting.get_data or error()
local Logging = require "luan:logging/Logging.luan"
local logger = Logging.logger "analytics_new.html"


return function()
	local user = User.current_required()
	if user==nil then return end
	local user_name = user.name
	Io.stdout = Http.response.text_writer()
%>
<!doctype html>
<html lang="en">
	<head>
<%		head() %>
		<title>Link My Style</title>
		<style>
			h1 {
				text-align: center;
				margin-bottom: 0;
			}
			p[top] {
				text-align: center;
			}
			div[report] {
				max-width: 600px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				margin-bottom: 20px;
			}
			@media (max-width: 700px) {
				div[report] {
					max-width: 90%;
				}
			}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
		<script>
<%
	do
		local data = get_data( "+type:visit +owner:"..user_name )
%>
			function initTraffic() {
				let options = {
					chart: {
						type: 'line'
					},
					series: [{
						name: 'Visitors',
						data: <%=json_string(data,compressed)%>,
					}],
					xaxis: {
						type: 'datetime'
					},
					title: {
						text: 'Traffic'
					}
				};
				let div = document.querySelector('div[report="traffic"]');
				let chart = new ApexCharts( div, options );
				chart.render();
			}
<%
	end_do
	do
		local data = get_data( "+type:page_view +owner:"..user_name, "value" )
%>
			function initPages() {
				let data = <%=json_string(data,compressed)%>;
				let options = {
					chart: {
						type: 'bar',
						height: barChartHeight(data.length)
					},
					plotOptions: {
						bar: {
							horizontal: true
						}
					},
					series: [{
						name: 'Visitors',
						data: data,
					}],
					title: {
						text: 'Pages'
					}
				};
				let div = document.querySelector('div[report="pages"]');
				let chart = new ApexCharts( div, options );
				chart.render();
			}
<%
	end_do
	do
		local data = get_data( "+type:link_click +owner:"..user_name, "value" )
%>
			function initClicks() {
				let data = <%=json_string(data,compressed)%>;
				let options = {
					chart: {
						type: 'bar',
						height: barChartHeight(data.length)
					},
					plotOptions: {
						bar: {
							horizontal: true
						}
					},
					series: [{
						name: 'Clicks',
						data: data,
					}],
					title: {
						text: 'Clicks by page and link'
					}
				};
				let div = document.querySelector('div[report="clicks"]');
				let chart = new ApexCharts( div, options );
				chart.render();
			}
<%
	end_do
	do
		local data = get_data( "+type:referrer +owner:"..user_name, "value" )
%>
			function initReferrers() {
				let data = <%=json_string(data,compressed)%>;
				let options = {
					chart: {
						type: 'bar',
						height: barChartHeight(data.length)
					},
					plotOptions: {
						bar: {
							horizontal: true
						}
					},
					series: [{
						name: 'Visitors',
						data: data,
					}],
					title: {
						text: 'Referring Domains'
					}
				};
				let div = document.querySelector('div[report="referrers"]');
				let chart = new ApexCharts( div, options );
				chart.render();
			}
<%
	end_do
%>
			function init() {
				initTraffic();
				initPages();
				initClicks();
				initReferrers();
			}
		</script>
	</head>
	<body onload="init()">
	<div full>
<%		body_header() %>
		<h1>Analytics</h1>
		<p top>For the last 30 days</p>
		<div report=traffic></div>
		<div report=pages></div>
		<div report=clicks></div>
		<div report=referrers></div>
<%		footer() %>
	</div>
	</body>
</html>
<%
end