-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTopAgents.js
101 lines (87 loc) · 2.89 KB
/
TopAgents.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import React, { useState, useEffect } from "react";
import { CircleWidget } from "./CircleWidget";
import "./TopAgents.css";
export const TopAgents = ({
chartSizeWidth = "300",
chartSizeHeight = "300",
chartColor = "purple",
}) => {
const [selected, setSelected] = useState([true, false, false, false]);
const [numbers] = useState([11, 55, 79, 90]);
const [percents, setPercents] = useState([]);
const [titles] = useState(["11", "55", "79", "90"]);
const computeElementsValues = (sum) => {
};
const setSelectedValues = () => {
const selectedValues = [];
numbers.forEach((val, index) => {
const boolValue = index === 0 ? true : false;
selectedValues.push(boolValue);
});
setSelected(selectedValues);
};
useEffect(() => {
const sumOfNumbers = numbers.reduce((acc, curr) => {
return acc + curr;
}, 0);
const percentValues = [];
numbers.forEach((value) => {
const percentValue = (value * 100) / sumOfNumbers;
percentValues.push(Math.floor(percentValue));
});
setPercents(percentValues);
return () => console.log("celanup");
}, [numbers]);
const changeState = (index,e) => {
let states = [...selected];
if (states[index] === true) return;
let previousState = states[index];
states[index] = !states[index];
for (let i = 0; i < states.length; i++) {
if (i !== index) {
states[i] = previousState;
}
}
setSelected([...states]);
};
return (
<>
<h2 className="top-agents-title">Top Agents / Offices</h2>
<div className="top-agents-container">
{selected.map((value, index) => {
return value === true ? (
<CircleWidget
width={`${chartSizeWidth}px`}
height={`${chartSizeHeight}px`}
propColor={chartColor}
fillValue={numbers[index]}
key={index+index}
title={titles[index]}
animation={index}
className={"path-fill"}
/>
) : null;
})}
<div className="top-agents-options-list">
{numbers.map((val, index) => (
<div className="top-agents-flex-item">
<CircleWidget
width="40px"
height="40px"
isRadioButton
propColor={chartColor}
isSelected={selected[index]}
onClick={(e) => changeState(index,e)}
fillValue="100"
key={index}
/>
<span className="top-agents-option-title">Andrew Haw</span>
<span className="top-agents-bold-text">{titles[index]}k</span>
<span className="top-agents-gray-text">({percents[index]}%)</span>
</div>
))}
</div>
</div>
</>
);
};