fyp/webpage/src/routes/models/edit/tasks/Stats.svelte

<script lang="ts">
	import { onDestroy, onMount } from 'svelte';
	import type { Model } from '../+page.svelte';
	import { post, showMessage } from 'src/lib/requests.svelte';
	import type { DataPoint, TasksStatsDay } from 'src/types/stats/task';

	import {
		Chart,
		Title,
		Tooltip,
		Legend,
		CategoryScale,
		LinearScale,
		PieController,
		LineController,
		Colors,
		ArcElement,
		PointElement,
		LineElement
	} from 'chart.js';

	Chart.register(
		Title,
		Tooltip,
		Legend,
		ArcElement,
		CategoryScale,
		LinearScale,
		PieController,
		LineController,
		Colors,
		PointElement,
		LineElement
	);

	let { model }: { model: Model } = $props();
	// Load data
	$effect(() => {
		getStats();
	});

	async function getStats() {
		if (pieChart && lineChart) {
			return;
		}
		try {
			const s = await post('stats/task/model/day', {
				model_id: model.id
			});
			console.log(s);
			createPie(s);
			createLine(s);
		} catch (e) {
			showMessage(e);
		}
	}

	let pie: HTMLCanvasElement;
	let pie2: HTMLCanvasElement;
	let pieChart: Chart<'pie'> | undefined;
	let pie2Chart: Chart<'pie'> | undefined;
	function createPie(s: TasksStatsDay) {
		if (pieChart) {
			pieChart.destroy();
		}
		let t = s.total;
		pieChart = new Chart(pie, {
			type: 'pie',
			data: {
				labels: [
					'Classfication Error',
					'Classfication Success',
					'Classfication Failure',
					'Classfication Preparing',
					'Classfication Running',
					'Classfication Unknown'
				],
				datasets: [
					{
						label: 'Total',
						data: [t.c_error, t.c_success, t.c_failure, t.c_pre_running, t.c_running, t.c_unknown]
					}
				]
			},
			options: {
				animation: false
			}
		});

		if (pie2Chart) {
			pieChart.destroy();
		}
		pie2Chart = new Chart(pie2, {
			type: 'pie',
			data: {
				labels: ['Non Classfication Error', 'Non Classfication Success'],
				datasets: [
					{
						label: 'Total',
						data: [t.nc_error, t.nc_success]
					}
				]
			},
			options: {
				animation: false
			}
		});
	}

	let line: HTMLCanvasElement;
	let lineChart: Chart<'line'> | undefined;
	function createLine(s: TasksStatsDay) {
		if (lineChart) {
			lineChart.destroy();
		}
		const keys: (keyof DataPoint)[] = Object.keys(s.total) as any;
		let names: Record<keyof DataPoint, string> = {
			c_error: 'Classfication Error',
			c_success: 'Classfication Success',
			c_failure: 'Classfication Failure',
			c_pre_running: 'Classfication Preparing',
			c_running: 'Classfication Running',
			c_unknown: 'Classfication Unknown',
			nc_error: 'Non Classfication Error',
			nc_success: 'Non Classfication Success'
		};
		let t = s.total;
		let labels = new Array(24).fill(0).map((_, i) => i);
		lineChart = new Chart(line, {
			type: 'line',
			data: {
				labels: labels,
				datasets: keys.map((key) => ({
					label: names[key],
					data: s.hours.map((e) => e[key])
				}))
			},
			options: {
				animation: false
			}
		});
	}

	onDestroy(() => {
		if (pieChart) {
			pieChart.destroy();
			pieChart = undefined;
		}
		if (lineChart) {
			lineChart.destroy();
			lineChart = undefined;
		}
	});
</script>

<h1>Statistics (Day)</h1>

<h2>Total</h2>
<div class="pies">
	<div>
		<canvas bind:this={pie}></canvas>
	</div>
	<div>
		<canvas bind:this={pie2}></canvas>
	</div>
</div>

<h2>Hourly</h2>
<div>
	<canvas bind:this={line}></canvas>
</div>

<style lang="scss">
	canvas {
		width: 100%;
	}
	.pies {
		display: flex;
		align-content: stretch;

		div {
			width: 50%;
		}
	}
</style>