[Vue-todo-list] #3 chart.js로 todo data 시각화하기 (1) - Line Chart

2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #2 카테고리가 있는 Todo List 만들기

2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일링

---

 

todolist 예제의 마지막 단계는 chart.js 연습을 위해서 Pie chart와 line chart 두 개를 보여주는 Daily Report로 꾸몄다. Line chart의 경우 localStorage에 저장되는 todo 객체의 createdAt Date 객체와 완료가 될 때 생성되는 completedAt Date 객체를 기반으로 알맞은 날짜에 해당하는 todo 객체의 length에 따라 두 개의 Line을 비교해주는 차트로 만들었다.

 

파란색 라인은 해당 날짜에 생성된 todo의 갯수, 빨간색 라인은 완료한 todo의 개수인데, 오늘 날짜가 라벨에서 가장 오른쪽에 위치하도록 해서 최근 7일 간의 데이터를 볼 수 있도록 했다.

 

다만 현재는 사용자가 todo done 목록에 있는 todo를 삭제할 경우 데이터가 연동되어 있는 Calendar와 Chart 모두에서도 시각화될 자료가 없어 나타나지 않는 문제가 있긴 하다.

 

npm으로 vue-chart.js를 추가해준 후, LineChart.js에 import 해주었다.

// LineChart.js
import { Vue } from "vue-property-decorator";
import { Line } from "vue-chartjs";

 

최근의 7일 간의 todo를 filter한 latestTodos 배열, 비교군이 될 최근 7일 간의 완료된 todos, 그리고 todos의 갯수를 반환해서 계산 시에 사용하게 될 temporary array인 numDaysLabels로 데이터를 잡아주었다.

chartdata는 chart.js guide document에서 정의한 대로 형식을 지켜 작성해준다.

 

나는 두 개의 라인을 갖는 차트를 그릴 예정이었으니 datasets에 두 객체를 마련했고, sub label에는 각각 이름을 붙여주었지만, 색인 역할을 하는 chartdata의 labels는 비워두고 동적으로 생성해주기로 했다.

 

마찬가지로 datasets의 각 객체의 data 속성도 빈 배열로 초기화만 해두었다.

data: () => ({
    latestTodos: [],
    latestDoneTodos: [],
    numDaysLabels: [],
    chartdata: {
      labels: [],
      datasets: [
        {
          label: "🎯 Created Todos",
          pointBackgroundColor: "#007bff",
          borderWidth: 1,
          pointBorderColor: "#007bff",
          borderColor: "#007bff",
          data: []
        },
        {
          label: "✨ Completed Todos",
          pointBackgroundColor: "#E74D4E",
          borderWidth: 1,
          pointBorderColor: "#dc3545",
          borderColor: "#E74D4E",
          data: []
        }
      ]
    },
    options: {
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true
            },
            gridLines: {
              display: true
            }
          }
        ],
        xAxes: [
          {
            grindLines: {
              display: false
            }
          }
        ]
      },
      legend: { display: true },
      responsive: true,
      maintainAspectRatio: false,
      hoverBorderWidth: 20
    }
  }),

chart.js 의 공식 문서에서는 mounted() 훅에서 this.renderChart(this.chartdata, this.options)로 데이터가 그려지는데 props로 좀 더 활용도를 높일 수 있다고 나와 있었지만, 컴포넌트 하나에서만 쓰기 때문에 바로 옵션 안에 data도 render 용 메서드도 다 한 번에 써두었다.

 

데이터들은 mounted 되기 전 created() 훅에서 모두 정의되고, 조정될 필요가 있기 때문에 created() 훅에서 아래 같이 메서드를 호출해주었다.

 

created() {
    this.chartdata.labels = this.locateLabelsOfDays();
    this.latestTodos = this.getLatestTodos();
    this.latestDoneTodos = this.getLatestDoneTodos();
    this.chartdata.datasets[0].data = this.getTodosOfDay();
    this.chartdata.datasets[1].data = this.getDoneTodosOfDay();
  },

 

색인 역할을 하는 요일 목록들은 '오늘 날짜'가 가장 오른쪽에 위치하도록 매일 매일 달라져야 하므로, locateLabelsOfDays() 메서드를 통해 정의하고, 최근 todos 두 개를 만들어준 뒤, 각 todos의 갯수를 요일의 index와 상응하도록 만든 배열 데이터를 chartdata.datasets의 data에 각각 주입해주었다.

 

동적으로 라벨 생성하기

 locateLabelsOfDays() {
      let labels = [];
      let numLabels = [];
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth();
      let day = today.getDate();
      while (labels.length < 7) {
        const labelOfDay = new Intl.DateTimeFormat("en-US", {
          weekday: "short"
        }).format(new Date(year, month, day));
        labels.unshift(labelOfDay);
        const numLabelOfDay = new Date(year, month, day).getDay();
        numLabels.unshift(numLabelOfDay);
        day--;
      }
      this.numDaysLabels = numLabels;
      return labels;
    },

Sun, Mon, Tue .. 등의 string을 이용해 label을 생성할 수도 있었겠지만, 다양한 Date 객체 관련 메서드를 써보고 싶어서

new Intl.DateTimeFormat() 메서드를 찾았다. 표준 내장 객체로 Intl.DateTimeFormat은 언어 설정에 따라 날짜와 시간 서식을 지원한다. 옵션으로 세밀하게 원하는 데이터를 파싱할 수 있다. 나는 영문으로 short 버전의 요일 이름을 얻기 위해 "en-US", short 등의 옵션을 가졌지만, 한글 요일 이름도 물론 가질 수 있고, long, medium 등의 옵션으로 보다 긴 이름을 추출할 수도 있다.

 

MDN_Intl.DateTimeFormat

Intl.DateTimeFormat - JavaScript | MDN

 

오늘 날짜가 일요일이라면, [월화수목금토일] 순으로 최근 과거 요일이 멀수록 왼쪽에 위치해야 했기 때문에 unshift()로 배열에 원소를 추가해주는 방법을 썼다.

 

최근 날짜의 todos 갖고 오기

위에서는 created() 사이클에서 getLatesTodos를 가지고 오는 방법을 약간 수정해 아래처럼 개선했다.

this.latestTodos = this.getLatesTodos("created");
this.latestDoneTodos = this.getLatesTodos("completed");

똑같이 쓰인 코드를 정리해 하나로 재사용했다. 구분은 String 인자로 두었다.

 

getLatesTodos(param) {
      let d = new Date();
      let day = d.getDate();
      const lastDateOfWeek = new Date(d.setDate(day - 7));
      if (param === "created") {
        return this.$store.state.todos.filter(
          todo =>
            new Date(todo.createdAt) <= new Date() &&
            new Date(todo.createdAt) >= lastDateOfWeek
        );
      } else {
        return this.$store.state.todos.filter(
          todo =>
            new Date(todo.completedAt) <= new Date() &&
            new Date(todo.completedAt) >= lastDateOfWeek
        );
      }
    },

일주일 전의 날짜를 변환하는 방법은 생각보다 간단했는데 setDate()를 이용해서 해결할 수 있었다.

 

오늘 날짜를 얻기 위해 new Date() 객체를 변수 d에 담고, 요일을 얻어 day에 담는다.

 

Date 객체 값끼리의 비교를 위해 위처럼 반환된 결과를 넣어 Date 객체를 생성한다. Date는 비교 연산자를 통해 비교 가능하다.

? operand

이때 todo가 done 표시가 되기만 하면 completedAt 데이터가 생겨버려서, 사용자가 취소했다가 다시 pending todo 자리로 옮겼을 때에도 여전히 해당 데이터가 잔존하는 문제가 있었다. 이때는 object의 completedAt 속성을 delete로 지워주기만 하면 되는데, 아래처럼 typescript 에러가 났다.

 

the operand of 'delete' operator must be optional

 

알고보니 Todo는 아래처럼 타입이 선언된 상태였는데, completedAt이 빈 값일 경우가 고려가 안 되어 있어서였다.

 

interface Todo {
  title: string;
  isDone: boolean;
  isEditable: boolean;
  cate: string;
  createdAt: Date;
  completedAt: Date;
}

 

위 코드에서 completedAt 속성만 아래처럼 바꿔준다. 해당 오류가 사라진다.

completedAt?: Date;

 

이 문제는 이 문서를 참고했다.

datasets의 date 채우기

여기서도 아까처럼 반복되는 함수가 있어서 코드 정리를 한 번 했다.

this.chartdata.datasets[0].data = this.getTodosOfDay("createdAt");
this.chartdata.datasets[1].data = this.getTodosOfDay("completedAt");

인자로 준 string은 나중에 todo의 속성 이름으로 그대로 쓰일 것이므로 맞추는 것이 좋다.

 

getTodosOfDay(param) {
      let LengthOftodos = this.latestTodos;
      let localNums = this.numDaysLabels.slice();
      for (let i = 0; i < localNums.length; i++) {
        let cnt = 0;
        LengthOftodos.forEach(todo => {
          const dayOfTodo = new Date(todo[param]).getDay();
          if (dayOfTodo === localNums[i]) cnt++;
        });
        localNums[i] = cnt;
      }
      return localNums;
    }

[param]으로 된 부분만 제외하면 동일한 코드나 마찬가지였다. Object의 속성에 접근하는 방법은 dot 으로 구분해서 써주거나 Object["property"]로 접근하는 방법이 있다. param이 string 타입으로 들어오므로 todo[param]으로 적어주면 조건으로 분기할 필요 없이 코드가 더욱 간결해진다.

 

원래는 함수를 두 개로 나눠 쓰며 임시 배열 역할을 하는 numDaysLabels를 두 번에 나눠 쓰기 위해 slice() 함수로 배열을 복사하는 방법을 썼는데, 여기서는 사실 그럴 필요가 없어서 slice() 메서드를 삭제해도 무방하다.

 

위 메서드에서 중요한 점은 데이터가 존재하지 않을 때도 0 값은 무조건 넣어주어야 한다는 점! 그래프가 망가지지 않게 데이터 보정을 위해서이다.

 

상대적으로 간단한 Pie chart에 비해 데이터를 가공할 일이 많았던 부분이라 공부가 많이 됐다. 원래는 직접 라인 차트를 구현해서 하는 것까지가 목표였는데, 이번 프로젝트에서는 못해서 아쉬웠다. 데이터 시각화에 대한 관심이 계속 높아져서, 차트나 애니메이션 등을 직접 구현하는 공부는 앞으로도 계속 관심있게 해나갈 것 같다.

 

 

 

💌 LineChart.js 컴포넌트에 대한 전체 소스는 이곳에서