Skip to content

Commit 63d1b57

Browse files
KalhamaKalhama
committed
feat(gluwave): Rework carbs graph #75
show carb rate
1 parent 128ac0a commit 63d1b57

File tree

10 files changed

+250
-72
lines changed

10 files changed

+250
-72
lines changed

‎gluwave/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@radix-ui/react-separator": "^1.1.0",
2828
"@radix-ui/react-slot": "^1.1.0",
2929
"@radix-ui/react-switch": "^1.1.0",
30+
"@radix-ui/react-tabs": "^1.1.0",
3031
"@radix-ui/react-tooltip": "^1.1.2",
3132
"@tanstack/react-table": "^8.20.5",
3233
"arctic": "^1.9.2",

‎gluwave/pnpm-lock.yaml

+62
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gluwave/src/app/(app-menu)/carbs/list/carbs-list.tsx

+77-49
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import { deleteCarbs } from '@/actions/delete-carbs'
22
import { validateRequest } from '@/auth'
33
import { CarbDialog } from '@/components/carb-dialog'
4+
import CarbohydrateAbsorptionRate from '@/components/carbohydrate-absorption-rate'
5+
import { CarbohydratesOnBoard } from '@/components/carbohydrates-on-board'
46
import { ClientDateTime } from '@/components/client-datetime'
57
import { DeleteDialog } from '@/components/delete-dialog'
68
import { PageDatePicker } from '@/components/page-date-picker'
79
import { Button } from '@/components/ui/button'
810
import { Progress } from '@/components/ui/progress'
911
import { Separator } from '@/components/ui/separator'
12+
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
1013
import { Statistics } from '@/lib/sql_utils'
1114
import { addHours, subHours } from 'date-fns'
1215
import { Pencil } from 'lucide-react'
@@ -18,7 +21,6 @@ interface Props {
1821
date?: string
1922
}
2023
}
21-
2224
export async function CarbsList({ params }: Props) {
2325
const date = params?.date ? new Date(Number(params.date)) : undefined
2426

@@ -52,58 +54,84 @@ export async function CarbsList({ params }: Props) {
5254

5355
return (
5456
<>
55-
<PageDatePicker baseUrl="/carbs/list" date={date} />
56-
<div className="p-2">
57-
<div className=" border bg-white max-w-5xl mx-auto rounded-md shadow p-2 mt-4">
58-
{carbs.map((carb, i, arr) => {
59-
const over = carb.observedCarbs > carb.carbs
57+
<PageDatePicker date={date} baseUrl="/carbs/list" />
58+
<div className="max-w-5xl mx-auto p-2">
59+
<div className="hidden md:grid grid-cols-2 gap-2">
60+
<CarbohydratesOnBoard />
61+
<CarbohydrateAbsorptionRate />
62+
</div>
6063

61-
return (
62-
<div key={carb.id}>
63-
<div className="p-2">
64-
<div className="grid grid-cols-2 pb-2">
65-
<div>
66-
<div>{Math.round(carb.carbs)} g </div>
67-
<div>Observed: {Math.round(carb.observedCarbs)} g </div>
68-
</div>
69-
<div className="flex items-center gap-2 justify-end">
70-
<div>
71-
<ClientDateTime timestamp={carb.timestamp} /> +{' '}
72-
{(carb.decay / 60).toLocaleString([], {
73-
maximumFractionDigits: 1,
74-
})}
75-
<span> h</span>
76-
</div>
77-
<div>
78-
<CarbDialog carb={carb}>
79-
<Button variant="ghost" className="p-2">
80-
<Pencil className="cursor-pointer w-4 h-4" />
81-
</Button>
82-
</CarbDialog>
83-
<DeleteDialog id={carb.id} action={deleteCarbs} />
64+
<Tabs defaultValue="cob" className="md:hidden">
65+
<TabsList>
66+
<TabsTrigger value="cob">On board</TabsTrigger>
67+
<TabsTrigger value="rate">Absorption rate</TabsTrigger>
68+
</TabsList>
69+
<TabsContent value="cob">
70+
<CarbohydratesOnBoard />
71+
</TabsContent>
72+
<TabsContent value="rate">
73+
<CarbohydrateAbsorptionRate />
74+
</TabsContent>
75+
</Tabs>
76+
77+
<>
78+
<div className="p-2">
79+
<div className=" border bg-white max-w-5xl mx-auto rounded-md shadow p-2 mt-4">
80+
{carbs.map((carb, i, arr) => {
81+
const over = carb.observedCarbs > carb.carbs
82+
83+
return (
84+
<div key={carb.id}>
85+
<div className="p-2">
86+
<div className="grid grid-cols-2 pb-2">
87+
<div>
88+
<div>{Math.round(carb.carbs)} g </div>
89+
<div>
90+
Observed: {Math.round(carb.observedCarbs)} g{' '}
91+
</div>
92+
</div>
93+
<div className="flex items-center gap-2 justify-end">
94+
<div>
95+
<ClientDateTime timestamp={carb.timestamp} /> +{' '}
96+
{(carb.decay / 60).toLocaleString([], {
97+
maximumFractionDigits: 1,
98+
})}
99+
<span> h</span>
100+
</div>
101+
<div>
102+
<CarbDialog carb={carb}>
103+
<Button variant="ghost" className="p-2">
104+
<Pencil className="cursor-pointer w-4 h-4" />
105+
</Button>
106+
</CarbDialog>
107+
<DeleteDialog id={carb.id} action={deleteCarbs} />
108+
</div>
109+
</div>
84110
</div>
111+
{over ? (
112+
<Progress
113+
className="h-2 bg-orange-400"
114+
value={(carb.carbs / carb.observedCarbs) * 100}
115+
/>
116+
) : (
117+
<Progress
118+
className="h-2 "
119+
value={(carb.observedCarbs / carb.carbs) * 100}
120+
/>
121+
)}
85122
</div>
123+
{arr.length - 1 !== i && <Separator className="my-2" />}
86124
</div>
87-
{over ? (
88-
<Progress
89-
className="h-2 bg-orange-400"
90-
value={(carb.carbs / carb.observedCarbs) * 100}
91-
/>
92-
) : (
93-
<Progress
94-
className="h-2 "
95-
value={(carb.observedCarbs / carb.carbs) * 100}
96-
/>
97-
)}
98-
</div>
99-
{arr.length - 1 !== i && <Separator className="my-2" />}
100-
</div>
101-
)
102-
})}
103-
{carbs.length === 0 && (
104-
<p className="text-center p-2 text-slate-400">No meal entries</p>
105-
)}
106-
</div>
125+
)
126+
})}
127+
{carbs.length === 0 && (
128+
<p className="text-center p-2 text-slate-400">
129+
No meal entries
130+
</p>
131+
)}
132+
</div>
133+
</div>
134+
</>
107135
</div>
108136
</>
109137
)

‎gluwave/src/app/(app-menu)/insulin/list/insulin-list.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
} from '@/components/ui/table'
1717
import { db } from '@/db'
1818
import { insulin } from '@/schema'
19-
import { addHours, parseISO, subHours } from 'date-fns'
19+
import { addHours, subHours } from 'date-fns'
2020
import { and, asc, eq, gte, lt } from 'drizzle-orm'
2121
import { Pencil } from 'lucide-react'
2222
import { redirect } from 'next/navigation'

‎gluwave/src/app/(app-menu)/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default async function App() {
5757
<InsulinOnBoard />
5858
</Suspense>
5959
<Suspense fallback={<GraphSkeleton />}>
60-
<CarbohydratesOnBoard />
60+
<CarbohydratesOnBoard href="/carbs/list" />
6161
</Suspense>
6262
</div>
6363
)

‎gluwave/src/components/carbohydrate-rate/carbohydrate-rate-graph.tsx ‎gluwave/src/components/carbohydrate-absorption-rate/carbohydrate-absorption-rate-graph.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,12 @@ interface Props {
2020
}
2121
}
2222

23-
export const CarbsRateGraph = ({ now, observed, reported, domain }: Props) => {
23+
export const CarbohydrateAbsorptionRateGraph = ({
24+
now,
25+
observed,
26+
reported,
27+
domain,
28+
}: Props) => {
2429
// for visual purposes
2530
observed.push({
2631
y: 0,

0 commit comments

Comments
 (0)