93 lines
2.3 KiB
JavaScript
93 lines
2.3 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import axios from 'axios';
|
|
import {
|
|
PieChart,
|
|
Pie,
|
|
Cell,
|
|
Tooltip,
|
|
Legend,
|
|
} from 'recharts';
|
|
|
|
const COLORS = ['#0088FE', '#FEB43C'];
|
|
|
|
export default function PollDetail({ question }) {
|
|
const [poll, setPoll] = useState(null);
|
|
|
|
useEffect(() => {
|
|
fetchPoll();
|
|
}, [question]);
|
|
|
|
const fetchPoll = async () => {
|
|
try {
|
|
const response = await axios.post('/api/admin/view-votes', { question });
|
|
setPoll(response.data[0]);
|
|
} catch (error) {
|
|
console.error('Error fetching poll:', error);
|
|
}
|
|
};
|
|
|
|
if (!poll) return <div>Loading...</div>;
|
|
|
|
const memberData = [
|
|
{ name: 'Yes', value: poll.member_yes },
|
|
{ name: 'No', value: poll.member_no },
|
|
];
|
|
|
|
const nonMemberData = [
|
|
{ name: 'Yes', value: poll.non_member_yes },
|
|
{ name: 'No', value: poll.non_member_no },
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<h1>{poll.question}</h1>
|
|
<p>Created At: {new Date(poll.created_at).toLocaleString()}</p>
|
|
|
|
<div style={{ width: '40%', margin: '20px' }}>
|
|
<PieChart width={400} height={300}>
|
|
<Pie
|
|
data={memberData}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="value"
|
|
>
|
|
{memberData.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
<Legend />
|
|
</PieChart>
|
|
</div>
|
|
|
|
<div style={{ width: '40%', margin: '20px' }}>
|
|
<PieChart width={400} height={300}>
|
|
<Pie
|
|
data={nonMemberData}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="value"
|
|
>
|
|
{nonMemberData.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
<Legend />
|
|
</PieChart>
|
|
</div>
|
|
|
|
<p>Member Yes Votes: {poll.member_yes}</p>
|
|
<p>Member No Votes: {poll.member_no}</p>
|
|
<p>Non-Member Yes Votes: {poll.non_member_yes}</p>
|
|
<p>Non-Member No Votes: {poll.non_member_no}</p>
|
|
</div>
|
|
);
|
|
}
|