[jQuery] 변화량의 증가/감소에 따라 아이콘 다르게 구현하기

 

안녕하세요 주갬입니다.

 

오늘은 변화량을 표현할 때 다양하게 활용할 수 있는 간단한 코드를 들고 왔습니다.

 

 

VOD 데이터는 저번 달 대비 190%가 늘었고

AUTH데이터는 저번 달 대비 33%가 줄었음을 강조하기 위해

색깔과 화살표 모양을 달리해주었습니다.

 

 

JQuery를 이용하여 이를 구현할 수 있습니다.

 

---

1. 주어진 데이터 변화량 계산

 

저는 저번 달과 이번 달을 비교했기 때문에 다음과 같은 식으로 변화량을 계산했습니다. 

('이번 달 값' - '저번 달 값') / '저번 달 값' * 100
= '변화량' / '저번 달 값' *100
= 변화된 %

 

여기서 '저번 달 값' 이 0이면 Division by zero가 발생하기 때문에 조건문을 이용해 예외처리를 해주어야 합니다.

 

//PHP
if($VODLastWeek > 0) {
	$changeAmountVOD = ($ThisWeekVOD - $LastWeekVOD)/$LastWeekVOD;
}

$rates['VOD'] = number_format($changeAmountVOD*100);

if($authLastWeek > 0) {
	$changeAmountAuth = ($ThisWeekAuth - $LastWeekAuth)/$LastWeekAuth;
}

$rates['Auth'] = number_format($changeAmountAuth*100);

if문에서 분모가 0이상임을 검증한 후 식대로 계산을 해 변화량을 계산해 줍니다.

그리고 이 계산된 변화량에 100을 곱한 후 number_format을 씌워 소수점을 없애줍니다.

 

다른 언어로 작성하더라도 비슷한 함수들이 존재할 테니 비슷한 로직으로 작성하시면 됩니다.

 

Division by Zero 에러 방지 -> 변화량 계산 -> 100 곱해주기 -> 소수점 없애기

 

 

2. jQuery를 이용해 변화량의 양/음에 따라 맞는 html코드 append

 

$.each(rates,function(key,value){
  if (value > 0) {
      $('#rates').append('<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> '
                          + value
                          +'%</span><span class="text-nowrap">  Since last month</span>'
      );
  }
  else {
      $('#rates').append('<span class="text-warning mr-2"><i class="fas fa-arrow-down"></i> '
                          + value
                          +'%</span><span class="text-nowrap">  Since last month</span>'
      );
  }
});

 

1번에서 rates 객체에 다음과 같은 값을 저장했습니다.

  { 'VOD' : 위에서 계산된 변화량%, 'Auth': 위에서 계산된 변화량% }

반복문을 돌려 rates객체 각 요소의 value값이 양인지 음인지 판별 후

양이면 success아이콘(색) + arrow-up(화살표) 아이콘을,

음이면 warning아이콘(색) + arrow-down(화살표) 아이콘을 html코드로 작성해줍니다.

 

그리고 표시하려는 위치에 append해주시면 됩니다.

 

 

---

간단하지만 유용하게 쓸 수 있는 변화량 표시 로직이였습니다.

 

다양한 곳에 도움이 되면 좋겠습니다.

읽어주셔서 감사합니다^^