feat: improve countable stats

marcelblijleven · Jun 12, 2023 · a859e77 · a859e77
1 parent ce59f12
commit a859e77
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "clsx": "^1.2.1",
     "eslint": "8.42.0",
     "eslint-config-next": "13.4.4",
+    "framer-motion": "^10.12.16",
     "lucide-react": "^0.241.0",
     "next": "13.4.4",
     "next-themes": "^0.2.1",

diff --git a/src/app/beanconqueror/components/countable-stats.tsx b/src/app/beanconqueror/components/countable-stats.tsx
@@ -1,11 +1,11 @@
 "use client"
 
-import ProgressBar from "@/components/progress-bar";
 import {useState} from "react";
 import {Preparation, Mill} from "@/types/beanconqueror";
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Mapping} from "@/types";
 import {Button} from "@/components/ui/button";
+import ProgressComponent from "@/components/ui/progress-bar";
 
 interface Props {
     label: string;
@@ -20,27 +20,14 @@ export default function CountableStats(props: Props) {
 
     const entries = slice ? props.countable.slice(0, slicedLength) : props.countable;
     const total = entries.reduce((prev, [_, value]) => prev + (value as number), 0);
-    const items = entries.map(([key, value]) => {
-        const name = props.mapping?.[key].name || key;
-
-        return (
-            <div className={"flex justify-between items-center gap-2"} key={key}>
-                <div className={"flex w-1/2 justify-between items-center"}>
-                    <p className={"truncate capitalize"}>{name}</p>
-                    {value}
-                </div>
-                <div className={"w-1/2"}>
-                    <ProgressBar total={total} progress={(value as number)}/>
-                </div>
-
-            </div>
-        )
-    });
+    const items = entries.map(([key, value]) => (
+        <ProgressComponent key={key} value={value} label={props.mapping?.[key].name || key} total={total}/>
+    ));
 
     const showAll = totalEntries > slicedLength;
 
     return (
-        <Card>
+        <Card className={"w-full lg:w-[calc(50%-0.5rem)]"}>
             <CardHeader>
                 <CardTitle>
                     {props.label}

diff --git a/src/app/beanconqueror/components/statistics.tsx b/src/app/beanconqueror/components/statistics.tsx
@@ -16,13 +16,15 @@ export default function Statistics(props: BrewStatistics) {
                 beanMapping={props.beanMapping}
             />
             <BacklogStats label={"Your backlog"} beans={props.beanMapping} usage={props.usagePerBean}/>
-            <CountableStats key={"fav-origins"} label={"Favourite origins"} countable={props.countryCount} />
-            <CountableStats key={"fav-roasters-bags"} label={"Favourite roasters (bags)"} countable={props.roasterCount} />
-            <CountableStats key={"fav-roasters-grams"} label={"Favourite roasters (grams)"} countable={props.roasterCountWeight} />
-            <CountableStats key={"fav-variety"} label={"Favourite variety"} countable={props.varietyCount} />
-            <CountableStats key={"fav-processing"} label={"Favourite processing"} countable={props.processingCount} />
-            <CountableStats key={"fav-grinder"} label={"Favourite grinder"} countable={props.brewsPerGrinder} mapping={props.grinderMapping} />
-            <CountableStats key={"fav-prep"} label={"Favourite preparation method"} countable={props.brewsPerPreparationMethod} mapping={props.preparationMapping} />
+            <div className={"flex flex-wrap gap-4"}>
+                <CountableStats key={"fav-origins"} label={"Favourite origins"} countable={props.countryCount} />
+                <CountableStats key={"fav-roasters-bags"} label={"Favourite roasters (bags)"} countable={props.roasterCount} />
+                <CountableStats key={"fav-roasters-grams"} label={"Favourite roasters (grams)"} countable={props.roasterCountWeight} />
+                <CountableStats key={"fav-variety"} label={"Favourite variety"} countable={props.varietyCount} />
+                <CountableStats key={"fav-processing"} label={"Favourite processing"} countable={props.processingCount} />
+                <CountableStats key={"fav-grinder"} label={"Favourite grinder"} countable={props.brewsPerGrinder} mapping={props.grinderMapping} />
+                <CountableStats key={"fav-prep"} label={"Favourite preparation method"} countable={props.brewsPerPreparationMethod} mapping={props.preparationMapping} />
+            </div>
         </div>
 
     )

diff --git a/src/components/ui/progress-bar.tsx b/src/components/ui/progress-bar.tsx
@@ -0,0 +1,22 @@
+"use client"
+import {motion} from "framer-motion";
+
+const getWidth = (value: number, total: number) => `${(value / (total || 0)) * 100}%`
+
+const ProgressComponent = (props: { label: string, value: number, total: number }) => (
+    <div className="flex items-center justify-between gap-2">
+        <div className="relative flex items-center w-full">
+            <span className="flex items-center h-10 px-2 z-10 text-sm capitalize">{props.label}</span>
+            <motion.div
+                className="absolute origin-left h-8 bg-orange-100"
+                style={{width: getWidth(props.value, props.total)}}
+                initial={{transform: "scaleX(0)"}}
+                animate={{transform: "scaleX(1)"}}
+                transition={{ease: "easeOut", duration: 0.5}}
+            />
+        </div>
+        <p className="text-sm">{props.value}</p>
+    </div>
+)
+
+export default ProgressComponent;