Fix | Agreement UI issues

package.json

@@ -26,6 +26,7 @@
     "react-contexify": "^6.0.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.11.0",
+    "recharts": "^2.9.0",
     "sharp": "^0.32.6",
     "short-unique-id": "^5.0.3",
     "socket.io": "^4.7.2",

src/app/page.js

@@ -11,6 +11,7 @@ export default function LandingPage() {
         className="flex flex-col"
         style={{
           backgroundImage: `url('https://www.toptal.com/designers/subtlepatterns/uploads/double-bubble-outline.png')`,
+          height: "calc(100vh - 86px)",
         }}
       >
         <main className="mx-8">

src/app/room/[roomId]/page.js

@@ -124,6 +124,7 @@ export default function RoomPage({ params }) {
         className="flex flex-col"
         style={{
           backgroundImage: `url('https://www.toptal.com/designers/subtlepatterns/uploads/double-bubble-outline.png')`,
+          height: "calc(100vh - 86px)",
         }}
       >
         <main
@@ -205,7 +206,7 @@ export default function RoomPage({ params }) {
               </div>
             </div>
           </div>
-          <div className="voting-floater rounded-2xl p-3 bottom-1 drop-shadow-md bg-primary bg-opacity-10">
+          <div className="voting-floater rounded-tl-2xl rounded-tr-2xl p-3 bottom-1 drop-shadow-md bg-primary bg-opacity-10">
             <div className="container mx-auto flex flex-col gap-5 justify-center items-center">
               {roomInfo.revealState === "open" ? (
                 <Agreement users={users} />

src/components/agreement.js

@@ -17,29 +17,54 @@ const calculateAgreement = (users) => {
 
 const getPercent = (val, total) => (val * 100) / total;
 
+const getAverage = (counts, totalVotes) => {
+  // const  totalVotes = Object.values(totalVotes).reduce((a, b) => a + b, 0)
+  const avg =
+    Object.entries(counts).reduce((acc, curr) => {
+      let temp = parseInt(curr[0]) * parseInt(curr[1]);
+      return parseInt(temp + acc);
+    }, 0) / totalVotes;
+  return avg;
+};
+
 const Agreement = ({ users }) => {
   const { counts, totalVotes } = calculateAgreement(users);
+  const commonPointVoted = Math.max(...Object.values(counts));
 
   return (
-    <div className="flex flex-col gap-2 pb-2 flex-wrap">
-      <label className="font-bold text-lg text-center">Agreement</label>
-      {Object.entries(counts).map(([key, val], index) => (
-        <div
-          className="flex gap-0.5 items-center flex-col  w-64 md:w-96"
-          key={index}
-        >
-          <span className="flex justify-between  w-64 md:w-96">
-            <span className="font-bold">{key}</span>
-            <span>{`${getPercent(val, totalVotes)}%`}</span>
+    <div className="flex gap-10 w-full items-center justify-center">
+      <div className="flex justify-center">
+        <p>
+          <span className="text-lg">Average:</span>
+          <span className="text-gray-600 ms-1 font-bold text-xl">
+            {parseFloat(getAverage(counts, totalVotes)).toFixed(2)}
           </span>
-          <progress
-            className="progress progress-primary"
-            value={getPercent(val, totalVotes)}
-            max={100}
-          ></progress>
-          <span className=" self-start">{`${val} vote(s)`}</span>
-        </div>
-      ))}
+        </p>
+      </div>
+      <div className="flex gap-8">
+        {Object.entries(counts).map((value, idx) => (
+          <div key={idx} className="flex flex-col items-center gap-1">
+            <div
+              className={`flex h-16 w-10 items-center justify-center rounded-xl bg-gray-100 shadow-md ${
+                value[1] == commonPointVoted ? " shadow-green-700" : ""
+              }`}
+            >
+              <span className="font-bold">{value[0]}</span>
+            </div>
+            <div>
+              {value[1]}
+              <span className="ms-1">{value[1] == 1 ? "Vote" : "Votes"}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* <VotingChart
+        data={Object.entries(counts).map(([key, val]) => ({
+          point: key,
+          count: val,
+        }))}
+      /> */}
     </div>
   );
 };

src/components/navs/navMenu.js

@@ -33,7 +33,7 @@ const NavMenu = (props) => {
   };
 
   return (
-    <div className="flex gap-8 me-3 mt-3">
+    <div className="flex gap-4 me-3 mt-3">
       <InviteLink room={room} />
       <div className="dropdown dropdown-end">
         <div tabIndex={0} className="p-3 rounded-lg hover:bg-zinc-100">

src/components/votingChart.js

@@ -0,0 +1,65 @@
+import { COLORS } from "@/lib/getRandomColor";
+import { Cell, Pie, PieChart, Tooltip } from "recharts";
+
+const SIZE = 110;
+
+const CustomTooltip = ({ active, payload }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-white p-2 border border-gray-300 shadow-lg rounded-lg">
+        <p>{`Point: ${payload[0].name}`}</p>
+        <p className="font-bold">{`Votes: ${payload[0].value}`}</p>
+      </div>
+    );
+  }
+  return null;
+};
+
+const VotingChart = ({ data }) => {
+  return (
+    <PieChart width={SIZE} height={SIZE}>
+      <Pie
+        dataKey="count"
+        data={data}
+        nameKey="point"
+        cx="50%"
+        cy="50%"
+        outerRadius={SIZE / 2}
+        innerRadius={SIZE / 6}
+        label={({
+          cx,
+          cy,
+          midAngle,
+          innerRadius,
+          outerRadius,
+          value,
+          count,
+          point,
+        }) => {
+          const RADIAN = Math.PI / 180;
+          const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+          const x = cx + radius * Math.cos(-midAngle * RADIAN) - 11;
+          const y = cy + radius * Math.sin(-midAngle * RADIAN);
+          return (
+            <text
+              x={x}
+              y={y}
+              fill="black"
+              dominantBaseline="central"
+              className="text-xs font-semibold text-gray-400"
+            >
+              {`${point}(${value})`}
+            </text>
+          );
+        }}
+      >
+        {data.map((entry, index) => (
+          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+        ))}
+      </Pie>
+      <Tooltip content={<CustomTooltip />} />
+    </PieChart>
+  );
+};
+
+export default VotingChart;

src/lib/getRandomColor.js

@@ -1,4 +1,4 @@
-const COLORS = [
+export const COLORS = [
   "#F87171",
   "#FB923C",
   "#FBBF24",