diff options
Diffstat (limited to 'frontend/src/routes/statistics/+page.svelte')
| -rw-r--r-- | frontend/src/routes/statistics/+page.svelte | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/frontend/src/routes/statistics/+page.svelte b/frontend/src/routes/statistics/+page.svelte new file mode 100644 index 0000000..53c56a4 --- /dev/null +++ b/frontend/src/routes/statistics/+page.svelte @@ -0,0 +1,46 @@ +<script lang="ts"> + import { statisticsQuery } from '$gql/Queries'; + import Guard from '$lib/components/Guard.svelte'; + import Head from '$lib/components/Head.svelte'; + import Stat from '$lib/statistics/Stat.svelte'; + import StatGroup from '$lib/statistics/StatGroup.svelte'; + import { getContextClient } from '@urql/svelte'; + + let query = $derived(statisticsQuery(getContextClient())); + let totals = $derived($query.data?.statistics.total); +</script> + +<Head section="Statistics" /> + +{#if $query.data && totals} + <div class="flex flex-row flex-wrap gap-8"> + <StatGroup title="Content"> + <Stat title="Archives" value={totals.archives} /> + <Stat title="Comics" value={totals.comics} /> + <Stat title="Images" value={totals.images} /> + <Stat title="Pages" value={totals.pages} /> + <Stat title="Dedup" value={(1 - totals.images / totals.pages) * 100} precision={2} unit="%" /> + </StatGroup> + <StatGroup title="Metadata"> + <Stat title="Namespaces" value={totals.namespaces} /> + <Stat title="Tags" value={totals.tags} /> + <Stat title="Artists" value={totals.artists} /> + <Stat title="Circles" value={totals.circles} /> + <Stat title="Characters" value={totals.characters} /> + <Stat title="Worlds" value={totals.worlds} /> + </StatGroup> + <StatGroup title="Average per Comic"> + <Stat title="Tags" value={totals.comic.tags / totals.comics} precision={2} /> + <Stat title="Artists" value={totals.comic.artists / totals.comics} precision={2} /> + <Stat title="Circles" value={totals.comic.circles / totals.comics} precision={2} /> + <Stat title="Characters" value={totals.comic.characters / totals.comics} precision={2} /> + <Stat title="Worlds" value={totals.comic.worlds / totals.comics} precision={2} /> + </StatGroup> + <StatGroup title="Average per Archive"> + <Stat title="Comics" value={totals.comics / totals.archives} precision={2} /> + <Stat title="Images" value={totals.images / totals.archives} precision={2} /> + </StatGroup> + </div> +{:else} + <Guard result={query} /> +{/if} |