Skip to content

Commit bdd1c38

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #4000 from sivaprasath2004/sivaprasath-closes-issue-3965
[Feature]: Add more proper Content in About page
2 parents 23322a3 + 51f9358 commit bdd1c38

File tree

3 files changed

+436
-0
lines changed

3 files changed

+436
-0
lines changed

‎src/components/Aboutpage/chart.tsx

+200
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
import React from 'react';
2+
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Cell, Legend, ResponsiveContainer } from 'recharts';
3+
4+
const data = [
5+
{ name: 'Community', team: 80 },
6+
{ name: 'Courses', team: 78 },
7+
{ name: 'Tutorials', team: 70 },
8+
{ name: 'Problems', team: 67 },
9+
{ name: 'Solutions', team: 65 }
10+
];
11+
12+
const colors = [
13+
'rgba(239,216,29,0.9)',
14+
'rgba(49,105,148,0.9)',
15+
'rgba(234,140,16,0.9)',
16+
'rgba(42,1,100,0.9)',
17+
'rgba(115,119,173,0.9)'
18+
];
19+
20+
const CustomTooltip = ({ active, payload, label }) => {
21+
if (active && payload && payload.length) {
22+
return (
23+
<div className="custom-tooltip">
24+
<p className="label" style={{ fontWeight: "600", fontFamily: "monospace", fontSize: "0.9rem", color: "rgb(51, 212, 91)" }}>{label}</p>
25+
</div>
26+
);
27+
}
28+
return null;
29+
};
30+
31+
const Community: React.FC = () => {
32+
return (
33+
<ResponsiveContainer width="100%" height={120}>
34+
<BarChart
35+
data={[{name: 'Community', Community: 80}]}
36+
layout="vertical"
37+
margin={{
38+
top: 20,
39+
right: 5,
40+
left: 30,
41+
bottom: 5,
42+
}}
43+
>
44+
<CartesianGrid strokeDasharray="3 3" />
45+
<XAxis type="number" />
46+
<YAxis dataKey="name" type="category" />
47+
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }}
48+
itemStyle={{ color: colors[0] }} />
49+
<Legend />
50+
<Bar dataKey="Community" fill="rgba(239,216,29,0.9)">
51+
{data.map((entry, index) => (
52+
<Cell key={`cell-${index}`} fill={colors[index]} />
53+
))}
54+
</Bar>
55+
</BarChart>
56+
</ResponsiveContainer>
57+
);
58+
};
59+
60+
const Courses: React.FC = () => {
61+
return (
62+
<ResponsiveContainer width="100%" height={120}>
63+
<BarChart
64+
data={[{name: 'Courses', Courses: 78}]}
65+
layout="vertical"
66+
margin={{
67+
top: 20,
68+
right: 5,
69+
left: 30,
70+
bottom: 5,
71+
}}
72+
>
73+
<CartesianGrid strokeDasharray="3 3" />
74+
<XAxis type="number" />
75+
<YAxis dataKey="name" type="category" />
76+
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }}
77+
itemStyle={{ color: colors[1] }} />
78+
<Legend />
79+
<Bar dataKey="Courses" fill={colors[1]}>
80+
{data.map((entry, index) => (
81+
<Cell key={`cell-${index}`} fill={colors[1]} />
82+
))}
83+
</Bar>
84+
</BarChart>
85+
</ResponsiveContainer>
86+
);
87+
};
88+
89+
const Tutorials: React.FC = () => {
90+
return (
91+
<ResponsiveContainer width="100%" height={120}>
92+
<BarChart
93+
data={[{name: 'Tutorials', Tutorials: 70}]}
94+
layout="vertical"
95+
margin={{
96+
top: 20,
97+
right: 5,
98+
left: 30,
99+
bottom: 5,
100+
}}
101+
>
102+
<CartesianGrid strokeDasharray="3 3" />
103+
<XAxis type="number" />
104+
<YAxis dataKey="name" type="category" />
105+
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }}
106+
itemStyle={{ color: colors[2] }} />
107+
<Legend />
108+
<Bar dataKey="Tutorials" fill={colors[2]}>
109+
{data.map((entry, index) => (
110+
<Cell key={`cell-${index}`} fill={colors[2]} />
111+
))}
112+
</Bar>
113+
</BarChart>
114+
</ResponsiveContainer>
115+
);
116+
};
117+
const Problems: React.FC = () => {
118+
return (
119+
<ResponsiveContainer width="100%" height={120}>
120+
<BarChart
121+
data={[{name: 'Problems', Problems: 67}]}
122+
layout="vertical"
123+
margin={{
124+
top: 20,
125+
right: 5,
126+
left: 30,
127+
bottom: 5,
128+
}}
129+
>
130+
<CartesianGrid strokeDasharray="3 3" />
131+
<XAxis type="number" />
132+
<YAxis dataKey="name" type="category" />
133+
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }}
134+
itemStyle={{ color: colors[3] }} />
135+
<Legend />
136+
<Bar dataKey="Problems" fill={colors[3]}>
137+
{data.map((entry, index) => (
138+
<Cell key={`cell-${index}`} fill={colors[3]} />
139+
))}
140+
</Bar>
141+
</BarChart>
142+
</ResponsiveContainer>
143+
);
144+
};
145+
const Solutions: React.FC = () => {
146+
return (
147+
<ResponsiveContainer width="100%" height={120}>
148+
<BarChart
149+
data={[{name: 'Solutions', Solutions: 65}]}
150+
layout="vertical"
151+
margin={{
152+
top: 20,
153+
right: 5,
154+
left: 30,
155+
bottom: 5,
156+
}}
157+
>
158+
<CartesianGrid strokeDasharray="3 3" />
159+
<XAxis type="number" />
160+
<YAxis dataKey="name" type="category" />
161+
<Tooltip contentStyle={{ backgroundColor: 'black', color: 'white' }}
162+
itemStyle={{ color: colors[4] }} />
163+
<Legend />
164+
<Bar dataKey="Solutions" fill={colors[4]}>
165+
{data.map((entry, index) => (
166+
<Cell key={`cell-${index}`} fill={colors[4]} />
167+
))}
168+
</Bar>
169+
</BarChart>
170+
</ResponsiveContainer>
171+
);
172+
};
173+
const Chart: React.FC = () => {
174+
return (
175+
<>
176+
<h2 style={{margin:"1rem",color:"transparent"}}>Join our Dynamic team to learn and success of our .</h2>
177+
<ResponsiveContainer width="100%" height={400}>
178+
<BarChart
179+
data={data}
180+
margin={{
181+
top: 20, right: 30, left: 20, bottom: 5,
182+
}}
183+
>
184+
<CartesianGrid strokeDasharray="3 3" />
185+
<XAxis dataKey="name" />
186+
<YAxis />
187+
<Tooltip content={<CustomTooltip />} />
188+
<Legend />
189+
<Bar dataKey="team" fill='rgb(51, 212, 91)'>
190+
{data.map((entry, index) => (
191+
<Cell key={`cell-${index}`} fill={colors[index]} />
192+
))}
193+
</Bar>
194+
</BarChart>
195+
</ResponsiveContainer>
196+
</>
197+
);
198+
};
199+
200+
export { Chart,Community,Courses,Tutorials,Problems,Solutions};

0 commit comments

Comments
 (0)