[vue-ganttastic] 무료 간트 차트 생성 라이브러리 (vue3)

상업용으로 사용될 수도 있는 프로젝트에서 간트차트를 넣어야 해서 알아보던 중 vue-ganttastic이라는 라이브러리를 알게 되었다. vue-ganttastic은 MIT 라이선스로 상업적 용도로 사용 가능하다. 

 

특징

• Vue3 지원
• 타입스크립트 지원
• 반응성
• 커스터마이징 옵션 (차트/바 스타일, slot, 이벤트 핸들러 등)

 

github 주소 -> https://github.com/zunnzunn/vue-ganttastic

 

 

단점

• 간트차트의 엑셀다운로드 같은 기능은 제공하지 않으며, 필요 시 raw 데이터를 이용해 직접 구현해야 한다.
• 커스터마이징이 제한적이다.

 

vue-ganttastic 설치 방법

 

npm을 이용해 설치한 후, scr/main.js와 같은 app 실행 포인트에서 import하면 g-gantt-chart와 g-gantt-row 등의 컴포넌트를 전역적으로 사용할 수 있다.

npm install @infectoone/vue-ganttastic

import { createApp } from "vue"
import App from "./App.vue"
...
import ganttastic from '@infectoone/vue-ganttastic'
...
createApp(App)
  .use(ganttastic)
  .mount('#app')

 

기본 사용법

<template>
  <g-gantt-chart
    chart-start="2021-07-12 12:00"
    chart-end="2021-07-14 12:00"
    precision="hour"
    bar-start="myBeginDate"
    bar-end="myEndDate"
  >
    <g-gantt-row label="My row 1" :bars="row1BarList" />
    <g-gantt-row label="My row 2" :bars="row2BarList" />
  </g-gantt-chart>
</template>

<script setup>
import { ref } from "vue"

const row1BarList = ref([
  {
    myBeginDate: "2021-07-13 13:00",
    myEndDate: "2021-07-13 19:00",
    ganttBarConfig: {
      // each bar must have a nested ganttBarConfig object ...
      id: "unique-id-1", // ... and a unique "id" property
      label: "Lorem ipsum dolor"
    }
  }
])
const row2BarList = ref([
  {
    myBeginDate: "2021-07-13 00:00",
    myEndDate: "2021-07-14 02:00",
    ganttBarConfig: {
      id: "another-unique-id-2",
      hasHandles: true,
      label: "Hey, look at me",
      style: {
        // arbitrary CSS styling for your bar
        background: "#e09b69",
        borderRadius: "20px",
        color: "black"
      }
    }
  }
])
</script>

 

기본 사용법은 다음과 같다.

1. 간트 차트 전체의 시작일(chart-start), 종료일(chart-end)를 지정한다.

2. precision은 차트의 시간 간격을 의미한다.

3. bar-start는 각 bar의 시작일, bar-end는 각 bar의 종료일이다.

4. 전체 간트 차트는 <g-gantt-chart> 컴포넌트이며, 각 개별 row에 대한 설정은 <g-gantt-row>를 통해 한다.

5. 위의 예시 코드에서각 bar에 대한 상세 설정은 row1BarList, row2BarLis에 정의 되어 있다.

 

위의 코드를 실행하면 아래와 같은 차트가 생성된다.

 

 

GGanttChart API 

Prop	형	기본값	설명
chart-start	string		차트 시작일
chart-end	string		차트 종료일
precision	string?	"hour"	시간축의 간격(시간, 일, 날짜, 주, 월)
bar-start	string		각 bar의 시작일을 나타내는 속성명
bar-end	string		각 bar의 종료일을 나타내는 속성명
date-format	string | false	"YYYY-MM-DD HH:mm"	차트 시작일, 종료일, bar 시작일, 종료일에 사용될 일시의 string format. 만약 앞에 언급된 날짜들에 JavaScript Date 객체를 사용하고 있다면 false를 사용.
width	string?	"100%"	차트의 너비 (ex) 80% or 800px)
hide-timeaxis	boolean?	FALSE	시간축 표시 여부
color-scheme	string | ColorScheme	"default"	차트 컬러 테마. 기존에 정의된 컬러 테마의 이름을 사용하거나, 직접 새로운 컬러를 지정 가능. 1. 기존 컬러 사용 시: default, creamy, crimson, dark, flare, fuchsia, grove, material-blue, sky, slumber, vue 2. 새로운 컬러 지정 시: {   primary: string,   secondary: string,   ternary: string,   quartenary: string,   hoverHighlight: string,   markerCurrentTime: string,   text: string,   background: string,   toast?: string }
grid	string?	FALSE	배경 그리드 표시 여부
current-time	boolean?	FALSE	현재 시간 표시 여부
current-time-label	string?	''	현재 시간 표시기 옆에 나타낼 라벨
push-on-overlap	boolean?	FALSE	새로운 바를 드래그 시 기존에 있던 바를 밀어내고 그 위치에 위치시킬지 여부
row-height	number?	40	각 행의 높이 (pixel 단위)
highlighted-units	number[]?	[]	강조할 time unit
font	string	"Helvetica"	차트 내 폰트
label-column-title	string?	''	라벨 컬럼 헤더
label-column-width	string?	150px	라벨 컬럼 너비

 

 

 

DB에서 데이터 읽어 간트 차트에 셋팅하기

1. 데이터를 조회하는 api를 호출해 데이터를 읽어온다.

2. 읽어온 이름을 bar의 형식에 맞추어 가공한다. (ex) newRow를 하나 선언한 뒤 bars에 시작이, 종료일, barConfig 설정을 지정해주고, 전체 bar를 포함하는 객체에 newRow를 push해준다.)

3. v-for를 이용해 g-gantt-row에 전체 데이터를 셋팅해준다. 

ex) <g-gantt-row v-for="row in taskRows" :key="row.label" :label="row.label" :bars="row.bars" />

 

나의 경우 taskRows에 bar의 정보를 동적으로 셋팅해 DB에 있는 데이터에 따라 간트차트를 생성하도록 했다.

또한 api의 return값으로 조건에 맞는 데이터 중 최소값은 minDate, 최대값은 maxDate로 받아서 chart-start, chart-end부분에 셋팅해주었다.

 

간트차트를 다 만들고 나니 엑셀로 다운로드를 받게 해주는 기능이 필요했다.

ganttastic에서 엑셀 다운로드를 지원하지 않으며, 엑셀 다운을 위해서는 아주 비싼 유료 라이브러리를 사용하는 옵션이 있었다.

하지만 내 프로젝트에서 아직 유료 라이브러리 사용을 고려할 단계는 아니어서, 최대한 ganttastic을 이용하고 싶었다.

그래서 생각한 방법은 backend에서 DB 데이터를 읽고 SXSSFWorkbook을 이용해 새로운 엑셀 파일을 만드는 것이었다.

검색해보면 엑셀 조건부 서식을 이용해 간트 차트를 만드는 방법이 있어, 그 방식으로 구현해서 원하는 결과를 얻을 수 있었다!

 

내가 원하는 모양으로 디자인과 데이터를 뽑아내려면 커스터마이징이 꽤나 많이 필요하지만 무료 옵션 중에서는 괜찮은 라이브러리라고 생각한다.

 

출처 : https://zunnzunn.github.io/vue-ganttastic/ (vue-ganttastic 공식 페이지)