Merge branch 'for-fun'

app/product/[id]/page.tsx

@@ -17,6 +17,7 @@ import ReviewBox from "@/components/ui/review-box";
 import ReviewForm from "@/components/ui/review_form";
 import AddToCardButton from "./AddToCardButton";
 import { Separator } from "@/components/ui/separator";
+import ReviewStackBar from "@/components/ReviewStackBar";
 
 type Cascade_review = Review & {
   user: User;
@@ -161,6 +162,7 @@ export default async function Page({ params }: { params: { id: string } }) {
                 </>
               )}
             </div>
+
           </div>
 
           {/* <div className="flex flex-row mt-10 gap-8">
@@ -190,7 +192,7 @@ export default async function Page({ params }: { params: { id: string } }) {
         <Card className="w-full">
           <CardHeader className="">
             <div className="items-center flex justify-center">
-              Review section
+              Review Section
             </div>
             {isAuthenticated() ? (
               <ReviewForm productId={id} prev_review={prev_review} />

components/ReviewStackBar.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import React from 'react'
+import BarChart from "./ui/BarChart";
+import Chart from "chart.js/auto";
+import { Card, CardContent } from './ui/card';
+import ReactStars from 'react-stars';
+import pluralize, { plural } from 'pluralize';
+
+
+const ReviewStackBar = ({overallScore, ratingData} : {overallScore: {sum: number, count: number, avg: number}, ratingData: {five: number, four: number, three: number, two: number, one: number}}) => {
+
+    const data = {
+        labels: ['5', '4', '3', '2', '1'],
+        // datasets is an array of objects where each object represents a set of data to display corresponding to the labels above. for brevity, we'll keep it at one object
+        datasets: [
+            {
+              label: 'No. of reviews',
+              data: [ratingData?.five, ratingData?.four, ratingData?.three, ratingData?.two, ratingData?.one],
+              // you can set indiviual colors for each bar
+              backgroundColor: [
+                'rgba(255, 99, 132, 0.5)',
+                'rgba(255, 99, 132, 0.5)',
+                'rgba(255, 99, 132, 0.5)',
+                'rgba(255, 99, 132, 0.5)',
+                'rgba(255, 99, 132, 0.5)',
+              ],
+            }
+        ]
+    }
+
+
+
+  return (
+    <Card>
+        <CardContent className="p-5 flex flex-col">
+            <div className="flex flex-row items-center">
+                <div className="mr-3">Overall Rating : </div> 
+
+                <ReactStars count={5}
+                    value = {overallScore?.avg}
+                    size={24}
+                    half={true}
+                    edit={false}
+                    color2={'#ffd700'} 
+                />
+
+                <div className="ml-3">({(overallScore?.avg != -1.0) ? overallScore?.avg.toFixed(2) : "-"})</div>
+            </div>
+            <div className="">From {overallScore.count} {pluralize("review", overallScore.count)}</div>
+            <BarChart data={data} max={overallScore.count} />
+        </CardContent>
+
+    </Card>
+
+
+
+  )
+}
+
+export default ReviewStackBar

components/ui/BarChart.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Bar } from "react-chartjs-2";
+import React from 'react'
+
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend,
+    BarElement
+  } from 'chart.js'
+  import { Chart } from 'react-chartjs-2'
+
+  ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend, 
+    BarElement
+  )
+
+
+
+const BarChart = ({data, max} : {data : any, max: number}) => {
+    const options = {
+        indexAxis: 'y' as const,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false
+            },
+            title: {
+                display: false
+            },
+
+        },
+        scales: {
+            x: {
+                min: 0,
+                max: max,
+                grid: {
+                    display: false
+                },
+                display: false
+            },
+            y: {
+                grid: {
+                    display: false
+                }
+            }
+        },
+
+    }
+
+  return (
+    <div className="chart-container p-5">
+    <Bar
+        data={data}
+        options={options}
+    />
+  </div>
+  )
+}
+
+export default BarChart

components/ui/review-box.tsx

@@ -7,6 +7,7 @@ import initials from "initials";
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import ReactStars from "react-stars";
+import ReviewStackBar from "../ReviewStackBar";
 
 
 type Cascade_review = Review & {
@@ -16,17 +17,57 @@ type Cascade_review = Review & {
 export default function ReviewBox({reviews} : {reviews : Cascade_review[]}){
     // magic 
     const [hydrated, setHydrated] = useState(false);
+
+    const [overallScore, setOverallScore] = useState<{sum: number, count: number, avg: number}>({sum: 0, count: 0, avg: 0});
+    const [ratingData, setRatingData] = useState<{five: number, four: number, three: number, two: number, one: number}>({five: 0, four: 0, three: 0, two: 0, one: 0})
+
+    function getOverallScore() {
+        var data = {five: 0, four: 0, three: 0, two: 0, one: 0}
+        for (var e of reviews) {
+            if (e.score == 5) {
+                data.five += 1
+            }
+            else if (e.score == 4) {
+                data.four += 1
+            }
+            else if (e.score == 3) {
+                data.three += 1
+            }
+            else if (e.score == 2) {
+                data.two += 1
+            }
+            else if (e.score == 1) {
+                data.one += 1
+            }
+        }
+        const count = data.five + data.four + data.three + data.two + data.one
+        const sum = 5*data.five + 4*data.four + 3*data.three + 2*data.two + 1*data.one
+
+        var avg = -1.0
+        if (count != 0) {
+            avg = sum/count
+        }
+
+        setOverallScore({sum: sum, count: count, avg: avg})
+        setRatingData(data)
+    }
 
     useEffect(() => {
         setHydrated(true);
     }, []);
+
+    useEffect(() => {
+        getOverallScore();
+    }, []);
+
     if (!hydrated) {
         // Returns null on first render, so the client and server match
         return null;
     }
     //
 
     return(<>
+        {(reviews.length !== 0) && <ReviewStackBar overallScore={overallScore} ratingData={ratingData}/>}
         {(reviews.length !== 0) ? (reviews.map((r) => (
             <Card key = {r.id} className="flex flex-col md:flex-row p-[1rem] border-r-2 box-border ">
                 <div className="md:w-[40%] lg:w-[30%] border-b-2 border-b-foreground md:border-b-0 md:border-r-2 border-r-foreground flex flex-wrap m-0 h-auto">

package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
     "@uploadthing/react": "^5.7.0",
+    "chart.js": "^4.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
@@ -35,6 +36,7 @@
     "next-themes": "^0.2.1",
     "pluralize": "^8.0.0",
     "react": "^18",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
     "react-hook-form": "^7.47.0",
     "react-stars": "^2.2.5",