feat: StackedBarChart

1Hive · Jan 4, 2024 · 1448cb9 · 1448cb9
1 parent 0788a50
commit 1448cb9
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 6 deletions.
diff --git a/apps/web/app/(app)/gardens/communities/pool/[poolId]/proposals/[proposalId]/page.tsx b/apps/web/app/(app)/gardens/communities/pool/[poolId]/proposals/[proposalId]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { useProposals } from "@/hooks/useProposals";
-import { Badge, Button } from "@/components";
+import { Badge, Button, StackedBarChart } from "@/components";
 import { formatAddress } from "@/utils/formatAddress";
 
 export default function Proposal({
@@ -84,8 +84,8 @@ export default function Proposal({
         </div>
 
         {/* TODO!: this section */}
-        <div className="flex h-64 items-center justify-center border-2">
-          div for chart and stuff
+        <div className="flex border-2">
+          <StackedBarChart {...fundingProposalTest} />
         </div>
         {/* Support - Remove buttons */}
         <div className="mt-20 flex justify-evenly">
@@ -116,3 +116,17 @@ export default function Proposal({
     </div>
   );
 }
+
+const fundingProposalTest: {
+  type: "funding" | "streaming" | "signaling";
+  cvPoints: number;
+  supportingPoints: number;
+  neededPoints: number;
+  threshold: number;
+} = {
+  type: "funding",
+  cvPoints: 300,
+  supportingPoints: 700,
+  neededPoints: 600,
+  threshold: 1300,
+};
diff --git a/apps/web/components/Proposals.tsx b/apps/web/components/Proposals.tsx
@@ -47,7 +47,18 @@ export function Proposals() {
       <div className="mx-auto max-w-3xl space-y-10">
         <header className="flex items-center justify-between">
           <h3 className="">Proposals</h3>
-          {editView && <div>Total distributed: {distributedPoints} %</div>}
+          {editView && (
+            <span
+              className={`${
+                distributedPoints >= 100 && "scale-110 font-semibold text-red"
+              } transition-all`}
+            >
+              {distributedPoints >= 100
+                ? "Max points reached: "
+                : "Total distributed: "}
+              {distributedPoints} %
+            </span>
+          )}
         </header>
         <div className="flex flex-col gap-6">
           {proposalsItems.map(({ label, type, id }, i) => (
@@ -62,7 +73,7 @@ export function Proposals() {
                   {!editView && (
                     <Link href={`${pathname}/proposals/${id}`} className="ml-8">
                       <Button className="bg-primary px-3 py-[6px]">
-                        Check Proposal
+                        View Proposal
                       </Button>
                     </Link>
                   )}
@@ -94,7 +105,7 @@ export function Proposals() {
                   </div>
                   <Link href={`${pathname}/proposals/${id}`}>
                     <Button className="bg-primary px-3 py-[6px]">
-                      Check Proposal
+                      View Proposal
                     </Button>
                   </Link>
                 </div>

diff --git a/apps/web/components/StackedBarChart.tsx b/apps/web/components/StackedBarChart.tsx
@@ -0,0 +1,104 @@
+import React from "react";
+
+// type StackedBarChart = Funding | Streaming | Signaling;
+
+type StackedBarChart = {
+  type: "funding" | "streaming" | "signaling";
+  cvPoints: number;
+  supportingPoints: number;
+  neededPoints?: number;
+  threshold?: number;
+  streamingPoints?: number;
+  deadLine?: Date;
+};
+
+export function StackedBarChart({
+  type,
+  cvPoints,
+  supportingPoints,
+  neededPoints,
+  threshold,
+  streamingPoints,
+  deadLine,
+}: StackedBarChart) {
+  // let totalPoints: number;
+  // if (type === "funding"){
+  //   totalPoints = threshold;
+  // }
+
+  const calculatePercentage = (value: number, total: number) => {
+    const result = (value * 100) / total;
+
+    if (result > 100) return 100;
+    return Math.round(result);
+  };
+
+  console.log(
+    type,
+    cvPoints,
+    supportingPoints,
+    neededPoints,
+    threshold,
+    streamingPoints,
+    deadLine,
+  );
+
+  return (
+    <div className="flex w-full flex-col gap-8 p-6">
+      <div className="flex flex-col gap-1 font-bold">
+        <div className="flex gap-2">
+          <div className="h-4 w-8 rounded-md bg-green-700"></div>
+          <span>Conviction points</span>
+        </div>
+        <div className="flex gap-2">
+          <div className="h-4 w-8 rounded-md bg-green-500"></div>
+          <span>Supporting points</span>
+        </div>
+        <div className="flex gap-2">
+          <div className="h-4 w-8 rounded-md bg-gray-300"></div>
+          <span>Points needed</span>
+        </div>
+      </div>
+      <div className="my-6 flex flex-col gap-3">
+        <div className="relative flex h-12 overflow-clip rounded-xl border-2 border-black text-sm font-bold ">
+          {threshold && neededPoints && (
+            <>
+              <div
+                className={`flex h-full items-center justify-center bg-green-700 text-white`}
+                style={{
+                  width: `${calculatePercentage(cvPoints, threshold)}%`,
+                }}
+              >
+                {calculatePercentage(cvPoints, threshold) > 5 && cvPoints}
+              </div>
+              <div
+                className={`flex h-full items-center justify-center bg-green-500 text-white`}
+                style={{
+                  width: `${calculatePercentage(
+                    supportingPoints - cvPoints,
+                    threshold,
+                  )}%`,
+                }}
+              >
+                {calculatePercentage(supportingPoints - cvPoints, threshold) >
+                  5 && supportingPoints}
+              </div>
+              <div
+                className={`flex h-full items-center justify-center bg-gray-300`}
+                style={{
+                  width: `${calculatePercentage(neededPoints, threshold)}%`,
+                }}
+              >
+                {calculatePercentage(neededPoints, threshold) > 5 &&
+                  neededPoints}
+              </div>
+            </>
+          )}
+        </div>
+        <span className="font-bold">
+          {type === "funding" ? `${neededPoints} more points needed` : ""}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/index.ts b/apps/web/components/index.ts
@@ -6,3 +6,4 @@ export { GardenCard } from "./GardenCard";
 export { PoolCard } from "./PoolCard";
 export { CommunityCard } from "./CommunityCard";
 export { Badge } from "./Badge";
+export { StackedBarChart } from "./StackedBarChart";