Vue Day.js 라이브러리로 진행률(%) 표시하기

 

 

 

예제 보기

 

 

 

 

 

 

 

 

코드 내용

 

 

<template>
<div>
  <p v-for="data in serverData" :key="data">
    <h3>{{ data.title }}</h3>
    {{
      `
      ${dayjs(data.startDate).format('YYYY/MM/DD HH:mm')}
      ~ ${dayjs(data.endDate).format('YYYY/MM/DD HH:mm')}
      ->
      ${Math.floor(getCalcProgress(data.startDate, data.endDate))}%
      `
    }}
  </p>
</div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import dayjs from 'dayjs';

const serverData = [
{
  title: '어제부터 내일까지를 진행률 %로 나타내면?',
  startDate: dayjs().subtract(1, 'day'),
  endDate: dayjs().add(1, 'day'),
},
{
  title: '24년 1월 13일 시작, 1월 15일 종료일경우',
  startDate: '20240113',
  endDate: '20240115',
},
{
  title: '2024년 진행률',
  startDate: '20240101',
  endDate: '20250101',
},
{
  title: '2023년 진행률',
  startDate: '20230101',
  endDate: '20240101',
},
// .. 계속
];

const getCalcProgress = (startDate, endDate) => {
/* 계산에 필요한 일자 계산 : 시작, 종료, 오늘, 기간, 경과일  */
const start = dayjs(startDate);
const end = dayjs(endDate);
const today = dayjs();
const total = end.diff(start);
const elapsed = today.diff(start);
/* 계산 진행후, 계산된 결과 값이 0 미만, 100 초과가 되지않도록 리턴 */
const caclResult = (elapsed / total) * 100;
return Math.max(0, Math.min(100, caclResult));
};
</script>

 

 

 

 

 

코드 설명

서버로부터 시작일과 종료일이 각 varchar(8)인 데이터 목록을 받아왔다는 가정을 했다.

해당 목록을 반복문으로 보여줄때 dayjs 라이브러리를 이용해 진행률이 나올 수 있도록 함수를 작성했다 ✍

 

리턴할때 Math 객체의 max, min 함수를 이용해서 리턴되는 값은 0 미만이거나, 100이 초과될 수 없도록해주었고

해당 함수를 사용할땐 Math 객체의 floor를 함께 이용해서 소수점이 표시되지않도록 해주었다.

 

 

 

 

 

참고 문서

 

https://m1nwoo.tistory.com/37

Vue 날짜 표시 라이브러리 Day.js