dave/calorie-counter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

Make it not look like such dogshit

Browse Source
This commit is contained in:
PhatPhuckDave
2024-11-08 10:21:17 +01:00
parent cb0d8860ed
commit 31c7b31e65
9 changed files with 194 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/src/lib/components/Energy/Aggregated/AggregatedFoodTable.svelte
View File

@@ -24,17 +24,18 @@
let reversedItems = items.slice().reverse();
const defaultOptions = {
backgroundColor: "rgba(225, 204,230, .3)",
borderColor: "rgb(205, 130, 158)",
pointBorderColor: "rgb(205, 130, 158)",
backgroundColor: "rgba(59, 130, 246, 0.1)",
borderColor: "rgb(59, 130, 246)",
pointBorderColor: "rgb(59, 130, 246)",
pointBackgroundColor: "rgb(255, 255, 255)",
pointBorderWidth: 10,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgb(0, 157, 123)",
pointHoverBorderColor: "rgba(220, 220, 220, 1)",
pointBorderWidth: 2,
pointHoverRadius: 6,
pointHoverBackgroundColor: "rgb(59, 130, 246)",
pointHoverBorderColor: "rgb(255, 255, 255)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointRadius: 3,
pointHitRadius: 20,
tension: 0.4,
};
const data: ChartData<"line", (number | Point)[]> = {
labels: reversedItems.map((f) => f.period),
@@ -87,25 +88,70 @@
</script>
<template>
<Line {data} class="max-h-[50vh] h-[50vh]" />
<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
<tr>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col"> Period </th>
<th class="px-6 py-3" scope="col"> Amount </th>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col"> AvgPer100 </th>
<th class="px-6 py-3" scope="col"> Energy </th>
</tr>
</thead>
<tbody>
{#each items as f}
<AggregatedFoodComp item={f} />
{/each}
</tbody>
</table>
<div class="flex flex-col gap-6 p-6 bg-gray-900 min-h-screen">
<div class="bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
<Line {data}
options={{
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
padding: 20,
color: 'rgb(229, 231, 235)',
font: {
size: 12,
family: "'Nunito', sans-serif"
}
}
}
},
scales: {
y: {
grid: {
color: 'rgba(75, 85, 99, 0.2)'
},
ticks: {
color: 'rgb(229, 231, 235)',
font: {
family: "'Nunito', sans-serif"
}
}
},
x: {
grid: {
color: 'rgba(75, 85, 99, 0.2)'
},
ticks: {
color: 'rgb(229, 231, 235)',
font: {
family: "'Nunito', sans-serif"
}
}
}
}
}}
class="max-h-[50vh] h-[50vh]" />
</div>
<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
<div class="relative overflow-x-auto shadow-md rounded-lg">
<table class="w-full text-sm text-left text-gray-400">
<thead class="text-xs uppercase bg-gray-800 text-gray-200 sticky top-0">
<tr>
<th class="px-6 py-4 font-semibold" scope="col">Period</th>
<th class="px-6 py-4 font-semibold" scope="col">Amount</th>
<th class="px-6 py-4 font-semibold" scope="col">AvgPer100</th>
<th class="px-6 py-4 font-semibold" scope="col">Energy</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700">
{#each items as f}
<AggregatedFoodComp item={f} />
{/each}
</tbody>
</table>
</div>
</div>
<div></div>
</div>
</template>