@tanglemedia/directus-extension-bundle-page-views/migrations/20260321H-page-views-~-create-dashboard-and-panels.mjs

A Directus extension bundle that adds a page views collection and dashboard to track page views.

import { generateUUIDv4 } from "./helpers/generator.mjs";

const DASHBOARD_UUID = "795caeab-3f39-4031-a1ed-631d3b127fb4";

// preset that applies to any user or role
const PANELS = [
	{
		height: 6,
		name: "Time Range",
		options: {
			type: "string",
			field: "time_range",
			inter: "select-dropdown",
			options: {
				choices: [
					{
						text: "Past Year",
						value: "12 months",
					},
					{
						text: "Past 6 Months",
						value: "6 months",
					},
					{
						text: "Past 3 Months",
						value: "3 months",
					},
					{
						text: "Past Month",
						value: "1 month",
					},
					{
						text: "Past 2 Weeks",
						value: "2 weeks",
					},
					{
						text: "Past Week",
						value: "1 week",
					},
					{
						text: "Today",
						value: "1 day",
					},
				],
				placeholder: "Select Filter",
			},
			defaultValue: "1 day",
		},
		position_x: 1,
		position_y: 1,
		show_header: true,
		type: "variable",
		width: 66,
	},
	{
		height: 40,
		name: "Top 10 Most Visited Pages",
		options: {
			limit: 10,
			filter: {
				_and: [
					{
						visit_date: {
							_gte: "$NOW(-{{ time_range }})",
						},
					},
				],
			},
			collection: "tngl_page_views",
			groupByField: "page_url",
			aggregateField: "page_url",
			aggregateFunction: "count",
		},
		position_x: 1,
		position_y: 40,
		show_header: true,
		type: "metric-list",
		width: 46,
	},
	{
		height: 40,
		name: "Top 10 Countries by Unique Visitors",
		options: {
			limit: 10,
			filter: {
				_and: [
					{
						visit_date: {
							_gte: "$NOW(-{{ time_range }})",
						},
					},
				],
			},
			collection: "tngl_page_views",
			groupByField: "country",
			aggregateField: "ip_address",
			aggregateFunction: "countDistinct",
		},
		position_x: 47,
		position_y: 40,
		show_header: true,
		type: "metric-list",
		width: 20,
	},
	{
		height: 11,
		name: "Total Unique Visitors",
		options: {
			fn: "count",
			max: 100,
			field: "ip_address",
			filter: {
				_and: [
					{
						visit_date: {
							_gte: "$NOW(-{{ time_range }})",
						},
					},
				],
			},
			suffix: null,
			fontSize: "48px",
			function: "countDistinct",
			notation: "compact",
			sortField: "visit_date",
			collection: "tngl_page_views",
			minimumFractionDigits: 1,
		},
		position_x: 45,
		position_y: 7,
		show_header: true,
		type: "metric",
		width: 22,
	},
	{
		height: 11,
		name: "Total Page Views",
		options: {
			field: "page_url",
			filter: {
				_and: [
					{
						visit_date: {
							_gte: "$NOW(-{{ time_range }})",
						},
					},
				],
			},
			suffix: null,
			fontSize: "2.6875rem",
			function: "count",
			notation: "compact",
			sortField: "visit_date",
			collection: "tngl_page_views",
			maximumFractionDigits: 1,
		},
		position_x: 1,
		position_y: 7,
		show_header: true,
		type: "metric",
		width: 22,
	},
	{
		height: 11,
		name: "Number of Distinct Pages Viewed",
		options: {
			fn: "count",
			field: "page_url",
			filter: {
				_and: [
					{
						visit_date: {
							_gte: "$NOW(-{{ time_range }})",
						},
					},
				],
			},
			suffix: null,
			fontSize: "2.6875rem",
			function: "countDistinct",
			notation: "compact",
			sortField: "visit_date",
			collection: "tngl_page_views",
			showPercentage: false,
			minimumFractionDigits: 1,
		},
		position_x: 23,
		position_y: 7,
		show_header: true,
		type: "metric",
		width: 22,
	},
	{
		height: 22,
		icon: "today",
		name: "Page Views Over Time",
		options: {
			max: null,
			min: 0,
			color: process.env.ADMIN_PRIMARY_COLOR ?? "#6644FF",
			range: "{{ time_range }}",
			filter: null,
			function: "count",
			dateField: "visit_date",
			precision: "day",
			collection: "tngl_page_views",
			valueField: "page_url",
		},
		position_x: 1,
		position_y: 18,
		show_header: true,
		type: "time-series",
		width: 66,
	},
];

export async function up(knex) {
	// addd Website Analytics Dashboard
	await knex("directus_dashboards").insert({
		id: DASHBOARD_UUID,
		name: "Website Analytics",
		icon: "assessment",
		note: "Metrics for Website Analytics",
	});

	// add Website Analytics panels
	const newPanels = PANELS.map((panel) => {
		return knex("directus_panels").insert({
			...panel,
			dashboard: DASHBOARD_UUID,
			id: generateUUIDv4(),
		});
	});

	await Promise.all(newPanels);
}

export async function down(knex) {
	// remove Website Analytics panels
	await knex("directus_panels")
		.where({
			dashboard: DASHBOARD_UUID,
		})
		.del();

	// remove Website Analytics Dashboard
	await knex("directus_dashboards")
		.where({
			id: DASHBOARD_UUID,
		})
		.del();
}