Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Charts #267

Merged
merged 1 commit into from
Aug 13, 2024
Merged

Improve Charts #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
"d3-quadtree": "^3.0.1",
"d3-scale": "^4.0.2",
"d3-time-format": "^4.1.0",
"date-fns": "^3.6.0",
"embla-carousel-svelte": "8.0.0-rc19",
"farming-weight": "^0.4.11",
"formsnap": "^0.4.4",
Expand Down
3 changes: 3 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion src/components/charts/crop-graph.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@
import { Area, Axis, Chart, Highlight, Spline, Svg, Tooltip } from 'layerchart';

export let data: { date: string; value: number }[];
export let ratio = 0;
export let crop = 'wheat';

$: first = data[0];
$: last = data.at(-1);
$: yDomain = last ? [first.value, last.value + (last.value - first.value) * (1 - ratio)] : undefined;
$: days = Math.ceil((+(last?.date ?? 0) - +first.date) / 86400);

const dateFormatter = new Intl.DateTimeFormat(undefined, {
Expand Down Expand Up @@ -44,7 +46,7 @@
x="date"
xScale={scaleLinear()}
y="value"
yNice
{yDomain}
padding={{ left: 64, bottom: 24, top: 10, right: 10 }}
tooltip={{ mode: 'bisect-x' }}
>
Expand Down
7 changes: 5 additions & 2 deletions src/components/ui/date-picker/date-picker.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,23 @@
export let value: DateValue | undefined = undefined;
export let minValue: DateValue | undefined = undefined;
export let maxValue: DateValue | undefined = undefined;

let className: string | undefined | null = undefined;
export { className as class };
</script>

<Popover.Root openFocus>
<Popover.Trigger asChild let:builder>
<Button
variant="outline"
class={cn('w-[280px] justify-start text-left font-normal', !value && 'text-muted-foreground')}
class={cn('w-[280px] justify-start text-left font-normal', !value && 'text-muted-foreground', className)}
builders={[builder]}
>
<CalendarIcon class="mr-2 h-4 w-4" />
{value ? df.format(value.toDate(getLocalTimeZone())) : 'Select a date'}
</Button>
</Popover.Trigger>
<Popover.Content class="w-auto p-0">
<Calendar bind:value initialFocus {maxValue} {minValue} />
<Calendar bind:value initialFocus {maxValue} {minValue} fixedWeeks={true} />
</Popover.Content>
</Popover.Root>
12 changes: 8 additions & 4 deletions src/routes/@[id=id]/[[profile]]/charts/+page.server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,19 @@ export const actions: Actions = {
const uuid = data.get('uuid') as string | undefined;
const profile = data.get('profile') as string | undefined;
const start = data.get('start') as string | undefined;
const days = data.get('days') as string | undefined;
const daysNum = days ? parseInt(days) : undefined;

if (!uuid || !profile || !start) {
return fail(400);
}

const { data: collectionGraph, response } = await GetCropCollectionPoints(uuid, profile, start).catch(() => ({
data: undefined,
response: undefined,
}));
const { data: collectionGraph, response } = await GetCropCollectionPoints(uuid, profile, start, daysNum).catch(
() => ({
data: undefined,
response: undefined,
})
);

if (response && response.status !== 200) {
console.log(response.statusText);
Expand Down
114 changes: 97 additions & 17 deletions src/routes/@[id=id]/[[profile]]/charts/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@
import { CalendarDate, getLocalTimeZone, today } from '@internationalized/date';
import type { ActionData, PageData } from './$types';
import { DatePicker } from '$ui/date-picker';
import { SelectSimple } from '$ui/select';
import { Button } from '$ui/button';
import { Crop, getCropDisplayName, getCropFromName } from 'farming-weight';
import { Crop, CROP_WEIGHT, getCropDisplayName, getCropFromName } from 'farming-weight';
import { PROPER_CROP_TO_IMG } from '$lib/constants/crops';
import Cropselector from '$comp/stats/contests/cropselector.svelte';
import { getSelectedCrops, getAnyCropSelected } from '$lib/stores/selectedCrops';
import JumpLink from '$comp/jump-link.svelte';
import Head from '$comp/head.svelte';
import { differenceInDays } from 'date-fns';
import ArrowLeft from 'lucide-svelte/icons/arrow-left';
import ArrowRight from 'lucide-svelte/icons/arrow-right';

export let data: PageData;
export let form: ActionData;
Expand All @@ -20,16 +24,61 @@
const minDate = new CalendarDate(2023, 7, 1);

$: crops = form?.graph ?? data.crops;
$: entries = Object.entries(crops);
$: increases = {} as Record<string, number>;
$: highestIncrease = 0;
$: entries = mapCrops(crops);

function mapCrops(crops: Record<string, { date: string; value: number }[]>) {
return Object.entries(crops).map(([crop, data]) => {
const c = getCropFromName(crop) ?? Crop.Wheat;
const name = getCropDisplayName(c);

if (data.length < 2) {
increases[crop] = 0;
} else {
const first = data[0].value;
const last = data.at(-1)?.value ?? first;
increases[crop] = (last - first) * CROP_WEIGHT[c];
highestIncrease = Math.max(highestIncrease, increases[crop]);
}

return { name, data, crop };
});
}

$: selected = (crop: string) => $selectedCrops[crop] || !$anySelected;
$: selectedCount = Object.values($selectedCrops).filter(Boolean).length;
$: fewSelected = selectedCount <= 3 && $anySelected;

$: tz = getLocalTimeZone();

let initEnd = today(tz);
let initStart = initEnd.subtract({ days: 7 });
let disabled = false;
let initStart = initEnd.subtract({ days: 7 });

$: days = 7;
$: value = initStart;

$: getStart(days);
function getStart(days: number) {
const dayDiff = differenceInDays(today(tz).toDate(tz), value.toDate(tz));
if (!value || dayDiff > 30) return;

value = initEnd.subtract({ days });
}

$: backEnabled = value <= minDate;
function back() {
value = value.subtract({ days });
}

$: fowardEnabled = value >= initEnd;
function forward() {
if (value >= initEnd) return;
value = value.add({ days });
if (value > initEnd) value = initEnd;
}

$: startTime = Math.floor(value.toDate(tz).getTime() / 1000);
</script>

Expand All @@ -52,17 +101,38 @@
<input type="hidden" bind:value={data.account.id} name="uuid" />
<input type="hidden" bind:value={data.profile.profileId} name="profile" />
<input type="hidden" bind:value={startTime} name="start" />
<input type="hidden" value={7} name="days" />
<input type="hidden" bind:value={days} name="days" />

<div class="flex flex-col gap-2 items-center">
<div class="flex flex-row gap-2 items-center">
<DatePicker bind:value maxValue={initEnd} minValue={minDate} />
<Button type="submit" variant="default" bind:disabled>Update</Button>
<div class="flex flex-col gap-2 items-center">
<div class="flex flex-row gap-2 items-center">
<Button on:click={back} variant="outline" disabled={backEnabled}>
<ArrowLeft />
</Button>
<DatePicker bind:value maxValue={initEnd} minValue={minDate} class="w-48" />
<Button on:click={forward} variant="outline" disabled={fowardEnabled}>
<ArrowRight />
</Button>
</div>
<div class="flex flex-row gap-2 items-center">
<SelectSimple
options={[
{ label: '3 Days', value: 3 },
{ label: '1 Week', value: 7 },
{ label: '2 Weeks', value: 14 },
{ label: '3 Weeks', value: 21 },
{ label: '1 Month', value: 30 },
]}
bind:value={days}
class="w-32"
/>
<Button type="submit" variant="default" bind:disabled>Update</Button>
</div>
</div>
</div>
</form>

<div class="flex flex-wrap justify-center w-full">
<div class="flex {fewSelected ? 'flex-col' : 'flex-wrap'} justify-center max-w-7xl w-full">
{#if entries.length === 0}
<div class="flex flex-col items-center justify-center p-4 space-y-2 mb-16 max-w-lg text-center">
<h2 class="text-3xl font-semibold text-center">No Data Found</h2>
Expand All @@ -73,17 +143,27 @@
</p>
</div>
{/if}
{#each entries as [crop, data] (crop)}
{@const name = getCropDisplayName(getCropFromName(crop) ?? Crop.Wheat)}
{#each entries as { name, crop, data } (crop)}
{#if selected(name)}
<div class="basis-[46rem] flex flex-col gap-1 p-2">
<div class="flex flex-row gap-1 ml-4">
<img src={PROPER_CROP_TO_IMG[name]} alt={crop} class="pixelated aspect-square h-full" />
<h3 class="text-2xl">{name}</h3>
<JumpLink id={crop} />
{#if !fewSelected}
<div class="basis-[40rem] flex flex-col gap-1 p-2">
<div class="flex flex-row gap-1 ml-4">
<img src={PROPER_CROP_TO_IMG[name]} alt={crop} class="pixelated aspect-square h-full w-8" />
<h3 class="text-2xl">{name}</h3>
<JumpLink id={crop} />
</div>
<CropGraph {data} {crop} ratio={increases[crop] / highestIncrease} />
</div>
<CropGraph {data} {crop} />
</div>
{:else}
<div class="flex-1 flex-col gap-1 p-2 max-w-7xl">
<div class="flex flex-row gap-1 ml-4 items-center">
<img src={PROPER_CROP_TO_IMG[name]} alt={crop} class="pixelated aspect-square h-full w-8" />
<h3 class="text-2xl">{name}</h3>
<JumpLink id={crop} />
</div>
<CropGraph {data} {crop} ratio={1} />
</div>
{/if}
{/if}
{/each}
</div>
Expand Down
Loading