[TIL] 오늘의 코드

Wontae·2020년 9월 20일
0
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>
            ```
profile
안녕하세요! 프론트엔드 개발자 정원태입니다.

0개의 댓글