aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Tools/ActivityHistoryGrid.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/Tools/ActivityHistoryGrid.svelte')
-rw-r--r--src/lib/Tools/ActivityHistoryGrid.svelte87
1 files changed, 0 insertions, 87 deletions
diff --git a/src/lib/Tools/ActivityHistoryGrid.svelte b/src/lib/Tools/ActivityHistoryGrid.svelte
deleted file mode 100644
index 5cc48d30..00000000
--- a/src/lib/Tools/ActivityHistoryGrid.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<script lang="ts">
- import {
- fillMissingDays,
- type ActivityHistoryEntry,
- activityHistory
- } from '$lib/AniList/activity';
- import { onMount } from 'svelte';
- import userIdentity from '../../stores/userIdentity';
- import {
- userIdentity as getUserIdentity,
- type AniListAuthorisation
- } from '$lib/AniList/identity';
- import { clearAllParameters } from '../Utility/parameters';
-
- export let user: AniListAuthorisation;
- export let activityData: ActivityHistoryEntry[] | null = null;
-
- let activityHistoryData: ActivityHistoryEntry[];
- let currentUserIdentity = { name: '', id: -1 };
- let baseHue = Math.floor(Math.random() * 360);
-
- onMount(async () => {
- clearAllParameters();
-
- if (user !== undefined) {
- if ($userIdentity === '') userIdentity.set(JSON.stringify(await getUserIdentity(user)));
-
- currentUserIdentity = JSON.parse($userIdentity);
- currentUserIdentity.name = currentUserIdentity.name;
- activityHistoryData = activityData || (await activityHistory(currentUserIdentity));
- }
- });
-
- const gradientColour = (amount: number, maxAmount: number, baseHue: number) => {
- const lightness = 100 - Math.round((amount / maxAmount) * 50);
-
- return `hsl(${baseHue}, 100%, ${lightness}%)`;
- };
-</script>
-
-{#if user === undefined}
- Please log in to view this page.
-{:else if activityHistoryData === undefined}
- Loading activity history ... 50%
-{:else}
- {@const filledActivities = fillMissingDays(activityHistoryData)}
- {@const highestActivity = Math.max(...filledActivities.map((activity) => activity.amount))}
-
- <div class="grid">
- {#each filledActivities as activity}
- <div
- class="grid-item"
- style="background-color: {gradientColour(activity.amount, highestActivity, baseHue)}"
- on:click={() => (baseHue = Math.floor(Math.random() * 360))}
- on:keydown={() => {
- return;
- }}
- role="button"
- tabindex="0"
- title={`Date: ${new Date(activity.date * 1000).toLocaleDateString()}\nAmount: ${
- activity.amount
- }`}
- />
- {/each}
- </div>
-{/if}
-
-<style>
- .grid {
- display: grid;
- grid-template-columns: repeat(52, 1fr);
- grid-template-rows: repeat(7, 1fr);
- /* gap: 2px; */
- grid-auto-flow: column;
- width: min-content;
- background-color: white;
- border-radius: 3px;
- overflow: hidden;
- }
- .grid-item {
- width: 20px;
- height: 20px;
- /* width: 3.25vw; */
- /* height: 3.25vw; */
- /* border: 1px solid #ccc; */
- }
-</style>