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
index dfd2be2a5..40dfacd1b 100644
--- 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({
{/* TODO!: this section */}
-
- div for chart and stuff
+
+
{/* Support - Remove buttons */}
@@ -116,3 +116,17 @@ export default function Proposal({
);
}
+
+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
index b657f6ce3..1cc1ccc07 100644
--- a/apps/web/components/Proposals.tsx
+++ b/apps/web/components/Proposals.tsx
@@ -47,7 +47,18 @@ export function Proposals() {
{proposalsItems.map(({ label, type, id }, i) => (
@@ -62,7 +73,7 @@ export function Proposals() {
{!editView && (
)}
@@ -94,7 +105,7 @@ export function Proposals() {
diff --git a/apps/web/components/StackedBarChart.tsx b/apps/web/components/StackedBarChart.tsx
new file mode 100644
index 000000000..8f42470cb
--- /dev/null
+++ 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 (
+
+
+
+
+ {threshold && neededPoints && (
+ <>
+
+ {calculatePercentage(cvPoints, threshold) > 5 && cvPoints}
+
+
+ {calculatePercentage(supportingPoints - cvPoints, threshold) >
+ 5 && supportingPoints}
+
+
+ {calculatePercentage(neededPoints, threshold) > 5 &&
+ neededPoints}
+
+ >
+ )}
+
+
+ {type === "funding" ? `${neededPoints} more points needed` : ""}
+
+
+
+ );
+}
diff --git a/apps/web/components/index.ts b/apps/web/components/index.ts
index b31b102dc..f69e99600 100644
--- 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";