Skip to content

Commit ff3b28b

Browse files
author
pcarapic15
committed
Add mobile version for pie chart
1 parent 100772e commit ff3b28b

File tree

1 file changed

+171
-90
lines changed

1 file changed

+171
-90
lines changed

‎src/components/community-stats/CustomPieChart.js‎

Lines changed: 171 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { PieChart, Pie, Cell, Label, Legend } from "recharts";
2+
import { PieChart, Pie, Cell, Label } from "recharts";
33
import sdvPieChartLogo from "../../../static/sdv-pie-chart-logo.svg";
44
import gretelSvg from "../../../static/gretel.svg";
55
import useWindowWidth from "../../hooks/useviewport";
@@ -32,76 +32,184 @@ const renderCustomizedLabel = ({ name, value, index, isTablet, isMobile }) => {
3232
];
3333
const gradientOffsets = [
3434
100,
35-
isTablet ? 31 : 27,
36-
isTablet ? 60.5 : 53,
37-
isTablet ? 72.5 : 63.5,
38-
isTablet ? 77.5 : 69,
39-
isTablet ? 24.5 : 20.5,
40-
isTablet ? 48 : 39,
41-
isTablet ? 58.5 : 50,
42-
isTablet ? 65.5 : 58.5,
43-
isTablet ? 67.5 : 62.5,
35+
isMobile ? 21 : isTablet ? 31 : 27,
36+
isMobile ? 60 : isTablet ? 60.5 : 53,
37+
isMobile ? 73 : isTablet ? 72.5 : 63.5,
38+
isMobile ? 75.5 : isTablet ? 77.5 : 69,
39+
isMobile ? 5.5 : isTablet ? 24.5 : 20.5,
40+
isMobile ? 47 : isTablet ? 48 : 39,
41+
isMobile ? 66 : isTablet ? 58.5 : 50,
42+
isMobile ? 72 : isTablet ? 65.5 : 58.5,
43+
isMobile ? 69 : isTablet ? 67.5 : 62.5,
4444
];
4545

4646
const labelPositions = [
4747
{ x: -290, y: -450 },
48-
{ x: isTablet ? 65 : 50, y: isTablet ? 100 : 50 },
49-
{ x: isTablet ? 67 : 50, y: isTablet ? 170 : 120 },
50-
{ x: isTablet ? 68 : 51, y: isTablet ? 240 : 190 },
51-
{ x: isTablet ? 71 : 51, y: isTablet ? 310 : 260 },
52-
{ x: isTablet ? 743 : 945, y: isTablet ? 100 : 50 },
53-
{ x: isTablet ? 745 : 945, y: isTablet ? 170 : 120 },
54-
{ x: isTablet ? 744 : 945, y: isTablet ? 240 : 190 },
55-
{ x: isTablet ? 744 : 945, y: isTablet ? 310 : 260 },
56-
{ x: isTablet ? 744 : 945, y: isTablet ? 380 : 330 },
48+
{
49+
x: isMobile ? 2 : isTablet ? 65 : 50,
50+
y: isMobile ? 40 : isTablet ? 100 : 50,
51+
},
52+
{
53+
x: isMobile ? 3 : isTablet ? 67 : 50,
54+
y: isMobile ? 90 : isTablet ? 170 : 120,
55+
},
56+
{
57+
x: isMobile ? 4 : isTablet ? 68 : 51,
58+
y: isMobile ? 140 : isTablet ? 240 : 190,
59+
},
60+
{
61+
x: isMobile ? 5 : isTablet ? 71 : 51,
62+
y: isMobile ? 190 : isTablet ? 310 : 260,
63+
},
64+
{
65+
x: isMobile ? 374 : isTablet ? 743 : 945,
66+
y: isMobile ? 40 : isTablet ? 100 : 50,
67+
},
68+
{
69+
x: isMobile ? 374 : isTablet ? 745 : 945,
70+
y: isMobile ? 90 : isTablet ? 170 : 120,
71+
},
72+
{
73+
x: isMobile ? 373 : isTablet ? 744 : 945,
74+
y: isMobile ? 140 : isTablet ? 240 : 190,
75+
},
76+
{
77+
x: isMobile ? 372 : isTablet ? 744 : 945,
78+
y: isMobile ? 190 : isTablet ? 310 : 260,
79+
},
80+
{
81+
x: isMobile ? 372 : isTablet ? 744 : 945,
82+
y: isMobile ? 240 : isTablet ? 380 : 330,
83+
},
5784
];
5885

5986
const polylinePaths = [
6087
{ from: [-270, -450], bend: [-290, -475], to: [-290, -500] },
6188
{
62-
from: [isTablet ? 360 : 453, isTablet ? 100 : 50],
63-
bend: [isTablet ? 300 : 370, isTablet ? 100 : 50],
64-
to: [isTablet ? 66 : 50, isTablet ? 100 : 50],
89+
from: [
90+
isMobile ? 165 : isTablet ? 360 : 453,
91+
isMobile ? 40 : isTablet ? 100 : 50,
92+
],
93+
bend: [
94+
isMobile ? 5 : isTablet ? 300 : 370,
95+
isMobile ? 40 : isTablet ? 100 : 50,
96+
],
97+
to: [
98+
isMobile ? 50 : isTablet ? 66 : 50,
99+
isMobile ? 40 : isTablet ? 100 : 50,
100+
],
65101
},
66102
{
67-
from: [isTablet ? 410 : 516, isTablet ? 115 : 60],
68-
bend: [isTablet ? 320 : 250, isTablet ? 170 : 122],
69-
to: [isTablet ? 69 : 53, isTablet ? 170 : 122],
103+
from: [
104+
isMobile ? 195 : isTablet ? 410 : 516,
105+
isMobile ? 50 : isTablet ? 115 : 60,
106+
],
107+
bend: [
108+
isMobile ? 85 : isTablet ? 320 : 250,
109+
isMobile ? 90 : isTablet ? 170 : 122,
110+
],
111+
to: [
112+
isMobile ? 5 : isTablet ? 69 : 53,
113+
isMobile ? 90 : isTablet ? 170 : 122,
114+
],
70115
},
71116
{
72-
from: [isTablet ? 440 : 545, isTablet ? 110 : 80],
73-
bend: [isTablet ? 320 : 220, isTablet ? 240 : 190],
74-
to: [isTablet ? 69 : 56, isTablet ? 240 : 190],
117+
from: [
118+
isMobile ? 208 : isTablet ? 440 : 545,
119+
isMobile ? 60 : isTablet ? 110 : 80,
120+
],
121+
bend: [
122+
isMobile ? 70 : isTablet ? 320 : 220,
123+
isMobile ? 140 : isTablet ? 240 : 190,
124+
],
125+
to: [
126+
isMobile ? 5 : isTablet ? 69 : 56,
127+
isMobile ? 140 : isTablet ? 240 : 190,
128+
],
75129
},
76130
{
77-
from: [isTablet ? 457 : 558, isTablet ? 100 : 100],
78-
bend: [isTablet ? 320 : 220, isTablet ? 310 : 260],
79-
to: [isTablet ? 71 : 57, isTablet ? 310 : 260],
131+
from: [
132+
isMobile ? 215 : isTablet ? 457 : 558,
133+
isMobile ? 65 : isTablet ? 100 : 100,
134+
],
135+
bend: [
136+
isMobile ? 74 : isTablet ? 320 : 220,
137+
isMobile ? 190 : isTablet ? 310 : 260,
138+
],
139+
to: [
140+
isMobile ? 5 : isTablet ? 71 : 57,
141+
isMobile ? 190 : isTablet ? 310 : 260,
142+
],
80143
},
81144
{
82-
from: [isTablet ? 465 : 584, isTablet ? 100 : 50],
83-
bend: [isTablet ? 600 : 740, isTablet ? 100 : 50],
84-
to: [isTablet ? 742 : 944, isTablet ? 100 : 50],
145+
from: [
146+
isMobile ? 228 : isTablet ? 465 : 584,
147+
isMobile ? 40 : isTablet ? 100 : 50,
148+
],
149+
bend: [
150+
isMobile ? 228 : isTablet ? 600 : 740,
151+
isMobile ? 40 : isTablet ? 100 : 50,
152+
],
153+
to: [
154+
isMobile ? 373 : isTablet ? 742 : 944,
155+
isMobile ? 40 : isTablet ? 100 : 50,
156+
],
85157
},
86158
{
87-
from: [isTablet ? 471 : 588, isTablet ? 105 : 65],
88-
bend: [isTablet ? 570 : 745, isTablet ? 171 : 122],
89-
to: [isTablet ? 744 : 944, isTablet ? 171 : 122],
159+
from: [
160+
isMobile ? 231 : isTablet ? 471 : 588,
161+
isMobile ? 47 : isTablet ? 105 : 65,
162+
],
163+
bend: [
164+
isMobile ? 291 : isTablet ? 570 : 745,
165+
isMobile ? 90 : isTablet ? 171 : 122,
166+
],
167+
to: [
168+
isMobile ? 373 : isTablet ? 744 : 944,
169+
isMobile ? 90 : isTablet ? 171 : 122,
170+
],
90171
},
91172
{
92-
from: [isTablet ? 472 : 591, isTablet ? 120 : 80],
93-
bend: [isTablet ? 630 : 780, isTablet ? 241 : 190],
94-
to: [isTablet ? 744 : 944, isTablet ? 241 : 190],
173+
from: [
174+
isMobile ? 233 : isTablet ? 472 : 591,
175+
isMobile ? 53 : isTablet ? 120 : 80,
176+
],
177+
bend: [
178+
isMobile ? 307 : isTablet ? 630 : 780,
179+
isMobile ? 140 : isTablet ? 241 : 190,
180+
],
181+
to: [
182+
isMobile ? 373 : isTablet ? 744 : 944,
183+
isMobile ? 140 : isTablet ? 241 : 190,
184+
],
95185
},
96186
{
97-
from: [isTablet ? 474 : 590, isTablet ? 130 : 100],
98-
bend: [isTablet ? 630 : 790, isTablet ? 311 : 260],
99-
to: [isTablet ? 744 : 944, isTablet ? 311 : 260],
187+
from: [
188+
isMobile ? 234 : isTablet ? 474 : 590,
189+
isMobile ? 60 : isTablet ? 130 : 100,
190+
],
191+
bend: [
192+
isMobile ? 300 : isTablet ? 630 : 790,
193+
isMobile ? 190 : isTablet ? 311 : 260,
194+
],
195+
to: [
196+
isMobile ? 373 : isTablet ? 744 : 944,
197+
isMobile ? 190 : isTablet ? 311 : 260,
198+
],
100199
},
101200
{
102-
from: [isTablet ? 475 : 586, isTablet ? 140 : 120],
103-
bend: [isTablet ? 610 : 785, isTablet ? 381 : 330],
104-
to: [isTablet ? 743 : 944, isTablet ? 381 : 330],
201+
from: [
202+
isMobile ? 232 : isTablet ? 475 : 586,
203+
isMobile ? 70 : isTablet ? 140 : 120,
204+
],
205+
bend: [
206+
isMobile ? 266 : isTablet ? 610 : 785,
207+
isMobile ? 240 : isTablet ? 381 : 330,
208+
],
209+
to: [
210+
isMobile ? 373 : isTablet ? 743 : 944,
211+
isMobile ? 240 : isTablet ? 381 : 330,
212+
],
105213
},
106214
];
107215

@@ -149,7 +257,7 @@ const renderCustomizedLabel = ({ name, value, index, isTablet, isMobile }) => {
149257
<circle
150258
cx={path.from[0]}
151259
cy={path.from[1]}
152-
r={2}
260+
r={isMobile ? 1 : 2}
153261
fill={`${name === "be-great" ? "#959FBD" : "#FCFCFD"}`}
154262
/>
155263
</>
@@ -164,14 +272,14 @@ const renderCustomizedLabel = ({ name, value, index, isTablet, isMobile }) => {
164272
<image
165273
href={gretelSvg}
166274
x={label.x}
167-
y={label.y - 26}
168-
width={65}
169-
height={23}
275+
y={isMobile ? label.y - 23 : label.y - 26}
276+
width={isMobile ? 50 : 65}
277+
height={isMobile ? 20 : 23}
170278
/>
171279
<text
172280
x={label.x}
173-
y={label.y + 21}
174-
fontSize={isMobile || isTablet ? 18 : 20}
281+
y={isMobile ? label.y + 16 : label.y + 21}
282+
fontSize={isMobile ? 14 : isTablet ? 18 : 20}
175283
textAnchor="start"
176284
>
177285
<tspan
@@ -190,7 +298,7 @@ const renderCustomizedLabel = ({ name, value, index, isTablet, isMobile }) => {
190298
<text
191299
x={label.x}
192300
y={label.y}
193-
fontSize={isMobile || isTablet ? 18 : 20}
301+
fontSize={isMobile ? 14 : isTablet ? 18 : 20}
194302
textAnchor={textAnchor}
195303
>
196304
<tspan
@@ -229,26 +337,26 @@ export default function CustomPieChart({ data }) {
229337
<img
230338
src={sdvPieChartLogo}
231339
alt="SDV logo"
232-
className="absolute top-[42%] md:top-[55%] z-10"
340+
className="absolute top-[52%] md:top-[55%] z-10 w-[90px] h-[50px] md:w-[108px] md:h-[58px]"
233341
draggable={false}
234342
/>
235-
<PieChart width={isMobile ? 400 : isTablet ? 800 : 1000} height={550}>
343+
<PieChart
344+
width={isMobile ? 375 : isTablet ? 800 : 1000}
345+
height={isMobile ? 300 : 550}
346+
>
236347
<Pie
237348
data={sortedData}
238349
cx="50%"
239350
cy="50%"
240-
outerRadius={isMobile ? 180 : isTablet ? 220 : 275}
351+
outerRadius={isMobile ? 120 : isTablet ? 220 : 275}
241352
dataKey="percentage"
242353
startAngle={60}
243354
endAngle={-300}
244355
isAnimationActive={false}
245356
stroke="none"
246357
labelLine={false}
247-
label={
248-
!isMobile
249-
? (props) =>
250-
renderCustomizedLabel({ ...props, isTablet, isMobile })
251-
: false
358+
label={(props) =>
359+
renderCustomizedLabel({ ...props, isTablet, isMobile })
252360
}
253361
>
254362
{sortedData.map((_, index) => (
@@ -257,39 +365,12 @@ export default function CustomPieChart({ data }) {
257365
<Label
258366
value={`${sortedData[0]?.percentage}%`}
259367
position="center"
260-
fontSize={isMobile ? 28 : 38}
368+
fontSize={isMobile ? 20 : 38}
261369
fontWeight="medium"
262370
fill="#000036"
263-
dy={isMobile ? 110 : 120}
371+
dy={isMobile ? 70 : 120}
264372
/>
265373
</Pie>
266-
{isMobile && (
267-
<Legend
268-
layout="horizontal"
269-
verticalAlign="bottom"
270-
align="center"
271-
content={() => (
272-
<ul className="flex flex-wrap justify-center items-center mt-4">
273-
{sortedData.map((entry, index) => (
274-
<li
275-
key={`legend-item-${index}`}
276-
className="flex flex-col items-center text-center mx-[9px] mb-1"
277-
>
278-
<div className="flex items-center">
279-
<span
280-
className="w-3 h-3 mr-2"
281-
style={{ backgroundColor: COLORS[index] }}
282-
/>
283-
<span className="text-midnight-950">
284-
{`${entry.name} (${sortedData[index].percentage}%)`}
285-
</span>
286-
</div>
287-
</li>
288-
))}
289-
</ul>
290-
)}
291-
/>
292-
)}
293374
</PieChart>
294375
</div>
295376
);

0 commit comments

Comments
 (0)