164 lines
3.0 KiB
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>
|