This repository has no description
add legend and pie chart shade colors
author
damedotblog
date
(Jan 22, 2025, 6:22 PM -0500)
commit
27a2460d
27a2460d2e78151f23b30d9048ee8f800afa5dc0
parent
72179c16
72179c164dc347e2f144e605f6e2c8bb9c6f6534
+8
-3
+8
-3
src/components/UserProfile/components/PostTypeCard.js
+8
-3
src/components/UserProfile/components/PostTypeCard.js
···
1
1
// frontend/src/components/UserProfile/components/PostTypeCard.js
2
2
import React, { useContext, useState } from "react";
3
3
import { AccountDataContext } from "../UserProfile"; // Adjust the path if needed
4
-
import { PieChart, Pie, Sector, ResponsiveContainer } from 'recharts';
4
+
import { PieChart, Pie, Sector, Cell, Legend, ResponsiveContainer } from 'recharts';
5
5
6
6
// Define the renderActiveShape function outside the component for clarity
7
7
const renderActiveShape = (props) => {
···
89
89
const PostTypeCard = () => {
90
90
const accountData = useContext(AccountDataContext);
91
91
const [activeIndex, setActiveIndex] = useState(0);
92
+
const COLORS = ['#0056b3', '#0066cc', '#3399ff', '#66b2ff'];
92
93
93
94
console.log("Account Data:", accountData); // Add this line
94
95
···
121
122
cy="50%"
122
123
innerRadius={45}
123
124
outerRadius={80}
124
-
fill="#007bff"
125
125
dataKey="value"
126
126
onMouseEnter={onPieEnter}
127
-
/>
127
+
>
128
+
{data.map((entry, index) => (
129
+
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
130
+
))}
131
+
</Pie>
132
+
<Legend />
128
133
</PieChart>
129
134
</ResponsiveContainer>
130
135
</div>