Implement weight graphs
This commit is contained in:
@@ -0,0 +1,17 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { AggregatedWeight } from '$lib/database/weight'
|
||||||
|
|
||||||
|
export let item: AggregatedWeight
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<tr class="border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
|
||||||
|
scope="row">
|
||||||
|
{item.period}
|
||||||
|
</th>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
{item.amount}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
@@ -0,0 +1,85 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Line } from 'svelte-chartjs'
|
||||||
|
import type { AggregatedFood } from '$lib/database/food'
|
||||||
|
import AggregatedFoodComp from '$components/Energy/AggregatedFood/AggregatedFoodComp.svelte'
|
||||||
|
import type { ChartData, Point } from 'chart.js'
|
||||||
|
import {
|
||||||
|
CategoryScale,
|
||||||
|
Chart as ChartJS,
|
||||||
|
Legend,
|
||||||
|
LinearScale,
|
||||||
|
LineElement,
|
||||||
|
PointElement,
|
||||||
|
Title,
|
||||||
|
Tooltip
|
||||||
|
} from 'chart.js'
|
||||||
|
import type { AggregatedWeight } from '$lib/database/weight'
|
||||||
|
import AggregatedWeightComp from '$components/Weight/Aggregated/AggregatedWeightComp.svelte'
|
||||||
|
|
||||||
|
ChartJS.register(
|
||||||
|
Title,
|
||||||
|
Tooltip,
|
||||||
|
Legend,
|
||||||
|
LineElement,
|
||||||
|
LinearScale,
|
||||||
|
PointElement,
|
||||||
|
CategoryScale
|
||||||
|
)
|
||||||
|
|
||||||
|
export let items: AggregatedWeight[] = []
|
||||||
|
let reversedItems = items.slice().reverse()
|
||||||
|
|
||||||
|
const defaultOptions = {
|
||||||
|
backgroundColor: 'rgba(225, 204,230, .3)',
|
||||||
|
borderColor: 'rgb(205, 130, 158)',
|
||||||
|
pointBorderColor: 'rgb(205, 130, 158)',
|
||||||
|
pointBackgroundColor: 'rgb(255, 255, 255)',
|
||||||
|
pointBorderWidth: 10,
|
||||||
|
pointHoverRadius: 5,
|
||||||
|
pointHoverBackgroundColor: 'rgb(0, 157, 123)',
|
||||||
|
pointHoverBorderColor: 'rgba(220, 220, 220, 1)',
|
||||||
|
pointHoverBorderWidth: 2,
|
||||||
|
pointRadius: 1,
|
||||||
|
pointHitRadius: 10
|
||||||
|
}
|
||||||
|
const data: ChartData<'line', (number | Point)[]> = {
|
||||||
|
labels: reversedItems.map(f => f.period),
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
...defaultOptions,
|
||||||
|
label: 'Amount',
|
||||||
|
data: reversedItems.map(f => f.amount),
|
||||||
|
borderColor: '#ff4dff',
|
||||||
|
pointBorderColor: '#ff4dff',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
console.log('aaaaaaaaaa')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Line data="{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>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each items as f}
|
||||||
|
<AggregatedWeightComp item="{f}" />
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
@@ -15,7 +15,7 @@
|
|||||||
|
|
||||||
if (event.key == 'Enter') {
|
if (event.key == 'Enter') {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
item.weight = parseInt(weight)
|
item.weight = parseFloat(weight)
|
||||||
|
|
||||||
const [dbRow, err]: [Weight, Err] = await WeightService.Create(item)
|
const [dbRow, err]: [Weight, Err] = await WeightService.Create(item)
|
||||||
weight = ''
|
weight = ''
|
||||||
|
@@ -1,11 +1,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
|
import AggregatedWeightTable from '$components/Weight/Aggregated/AggregatedWeightTable.svelte'
|
||||||
import { dailyFoodStore } from '$lib/store/energy/dailyFoodStore'
|
import { dailyWeightStore } from '$lib/store/weight/dailyWeightStore'
|
||||||
import { energyStore } from '$lib/store/energy/energyStore'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<AggregatedFoodTable items="{$dailyFoodStore}"
|
<AggregatedWeightTable items="{$dailyWeightStore}" />
|
||||||
energyLimit="{$energyStore.limit}"
|
|
||||||
energyTarget="{$energyStore.target}" />
|
|
||||||
</template>
|
</template>
|
||||||
|
@@ -1,11 +1,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
|
import { monthlyWeightStore } from '$lib/store/weight/monthlyWeightStore'
|
||||||
import { monthlyFoodStore } from '$lib/store/energy/monthlyFoodStore'
|
import AggregatedWeightTable from '$components/Weight/Aggregated/AggregatedWeightTable.svelte'
|
||||||
import { energyStore } from '$lib/store/energy/energyStore'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<AggregatedFoodTable items="{$monthlyFoodStore}"
|
<AggregatedWeightTable items="{$monthlyWeightStore}" />
|
||||||
energyLimit="{$energyStore.limit * 30}"
|
|
||||||
energyTarget="{$energyStore.target * 30}" />
|
|
||||||
</template>
|
</template>
|
||||||
|
@@ -1,11 +1,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
|
import { weeklyWeightStore } from '$lib/store/weight/weeklyWeightStore'
|
||||||
import { energyStore } from '$lib/store/energy/energyStore'
|
import AggregatedWeightTable from '$components/Weight/Aggregated/AggregatedWeightTable.svelte'
|
||||||
import { weeklyFoodStore } from '$lib/store/energy/weeklyFoodStore'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<AggregatedFoodTable items="{$weeklyFoodStore}"
|
<AggregatedWeightTable items="{$weeklyWeightStore}" />
|
||||||
energyLimit="{$energyStore.limit * 7}"
|
|
||||||
energyTarget="{$energyStore.target * 7}" />
|
|
||||||
</template>
|
</template>
|
||||||
|
@@ -1,11 +1,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import AggregatedFoodTable from '$components/Energy/AggregatedFood/AggregatedFoodTable.svelte'
|
import AggregatedWeightTable from '$components/Weight/Aggregated/AggregatedWeightTable.svelte'
|
||||||
import { yearlyFoodStore } from '$lib/store/energy/yearlyFoodStore'
|
import { yearlyWeightStore } from '$lib/store/weight/yearlyWeightStore'
|
||||||
import { energyStore } from '$lib/store/energy/energyStore'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<AggregatedFoodTable items="{$yearlyFoodStore}"
|
<AggregatedWeightTable items="{yearlyWeightStore}" />
|
||||||
energyLimit="{$energyStore.limit * 365}"
|
|
||||||
energyTarget="{$energyStore.target * 365}" />
|
|
||||||
</template>
|
</template>
|
||||||
|
Reference in New Issue
Block a user