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

164 lines
3.0 KiB
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';
import ModelData from '../ModelData.svelte';
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 pieChart: 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',
'Non Classfication Error',
'Non Classfication Success'
],
datasets: [
{
label: 'Total',
data: [
t.c_error,
t.c_success,
t.c_failure,
t.c_pre_running,
t.c_running,
t.c_unknown,
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>
<canvas bind:this={pie}></canvas>
</div>
<h2>Hourly</h2>
<div>
<canvas bind:this={line}></canvas>
</div>
<style lang="scss">
canvas {
width: 100%;
}
</style>