const SHIP_DATA = [
{
id: 1,
option: '1일 이내',
count: 9,
},
{
id: 2,
option: '2일 이내',
count: 29,
},
{
id: 3,
option: '3일 이내',
count: 1,
},
{
id: 4,
option: '4일 이상',
count: 0,
},
];
const total = () => {
let total = 0;
for (let data of SHIP_DATA) {
total = total + data.count;
}
return total;
};
const max = () => {
let max = 0;
const counts = [];
for (let data of SHIP_DATA) {
counts.push(data.count);
}
max = Math.max(...counts);
return counts.indexOf(max);
};
<ul className="chart">
{SHIP_DATA.map((data, index) => {
const { id, option, count } = data;
let ratio = parseInt((count / total()) * 100);
return (
<li key={id}>
<span className="option">{option}</span>
<div className="line">
<div
className={
max() === index ? 'activeLine top' : 'activeLine'
}
style={{ width: `${ratio}%` }}
/>
<div className="backgroundLine"></div>
</div>
<span
className={max() === index ? 'count top' : 'count'}
>{`${count}건 (${count ? ratio : 0}%)`}</span>
</li>
);
})}
</ul>
```