포맷터 확장

노트

이 기능은 PRO 에디션에서만 사용할 수 있습니다.

gantt.ext.formatters 확장은 두 가지 포맷팅 메서드를 제공합니다:

• durationFormatter()
• linkFormatter()

또한 기존 포맷터를 기반으로 한 커스텀 포맷터 를 지정할 수 있습니다.

Duration Formatter

gantt.ext.formatters.durationFormatter(config) 메서드는 새로운 DurationFormatter 인스턴스를 반환합니다.

구성(Configuration)

• durationFormatter (config): DurationFormatter - Duration Formatter를 생성합니다
  • config? - (object) - 선택사항으로, 아래 속성을 포함할 수 있는 구성 객체입니다:
    • enter? - (string) - parse 메서드의 기본 형식을 지정합니다. 단위가 없는 입력 값이 들어올 때 사용됩니다. 기본값: "day".
    • store? - (string) - gantt에서 지속 시간 값 저장 형식을 지정합니다. 이 속성은 parse 메서드의 출력 값에 영향을 줍니다. 기본값: "hour".
    • format? - (string | Array <string>) - 출력 값의 형식을 지정합니다. 지원되는 값: "auto", "minute", "hour", "day", "week", "month", "year", 또는 이 값들 중 하나를 포함하는 배열. "auto" 값은 제공된 값에 따라 적절한 단위를 선택하도록 포맷터가 시도합니다(예: 더 큰 값은 days/months/years로 포맷되고, 더 작은 값은 minutes/hours로 포맷됩니다).
    • short? - (boolean) - 시간 단위의 짧은 레이블(약어)을 설정합니다. 기본값: false
    • minutesPerHour? - (number) - 분에서 시로, 시에서 분으로의 변환 방식을 정의합니다. 기본값: 60
    • hoursPerDay? - (number) - 시에서 일로, 일에서 시로의 변환 방식을 정의합니다. 기본값: 8
    • hoursPerWeek? - (number) - 시에서 주로의 변환 방식을 정의합니다. 기본값: 40
    • daysPerMonth? - (number) - 일에서 달로, 달에서 일로의 변환 방식을 정의합니다. 기본값: 30
    • daysPerYear? - (number) - 일에서 해로, 해에서 일로의 변환 방식을 정의합니다. 기본값: 365
    • labels? - (object) - 다양한 시간 단위에 대한 텍스트 레이블을 정의합니다. 이 레이블은 구문 분석된 값과 포맷된 값 모두에 사용됩니다.
      • minute? - (object) - 분에 대한 구성
        • full? - (string) - 분에 대한 전체 텍스트 레이블
        • plural? - (string) - 분의 복수형 레이블
        • short? - (string) - 분의 짧은 레이블
      • hour? - (object) - 시에 대한 구성
        • full? - (string) - 시의 전체 텍스트 레이블
        • plural? - (string) - 시의 복수형 레이블
        • short? - (string) - 시의 짧은 레이블
      • day? - (object) - 일에 대한 구성
        • full? - (string) - 일의 전체 텍스트 레이블
        • plural? - (string) - 일의 복수형 레이블
        • short? - (string) - 일의 짧은 레이블
      • week? - (object) - 주에 대한 구성
        • full? - (string) - 주의 전체 텍스트 레이블
        • plural? - (string) - 주의 복수형 레이블
        • short? - (string) - 주의 짧은 레이블
      • month? - (object) - 달에 대한 구성
        • full? - (string) - 달의 전체 텍스트 레이블
        • plural? - (string) - 달의 복수형 레이블
        • short? - (string) - 달의 짧은 레이블
      • year? - (object) - 해에 대한 구성
        • full? - (string) - 해의 전체 텍스트 레이블
        • plural? - (string) - 해의 복수형 레이블
        • short? - (string) - 해의 짧은 레이블

예제:

기본 설정으로 Duration Formatter 초기화:

const formatter = gantt.ext.formatters.durationFormatter();
// 팩토리 메서드를 사용해 포맷터 객체의 인스턴스를 생성

• enter:

formatter.parse("1"); // entered value: 1 day - if enter:"day" (default)
formatter.parse("1"); // entered value: 1 hour - if enter:"hour"

• store:

formatter.parse("1 day"); // stored value: 8 - if store:"hour"
formatter.parse("1 day"); // stored value: 480 - store:"minute" 

• format

gantt.ext.formatters.durationFormatter({
    format: ["hour", "minute"], /*!*/
    store:"minute"
}).format(260); // 4 hours 20 minutes

gantt.ext.formatters.durationFormatter({
    format: "hour", /*!*/
    store:"minute"    
}).format(260);// 4.33 hours

• short

gantt.ext.formatters.durationFormatter({
    format: ["week", "hour", "minute"],
    store:"minute",
    short: false /*!*/    
}).format(10021); //"4 weeks 7 hours 1 minute"
 
gantt.ext.formatters.durationFormatter({
    format: ["week", "hour", "minute"],
    store:"minute",
    short: true     /*!*/
}).format(10021); //"4wk 7h 1min"

전체 구성의 예:

const formatter = gantt.ext.formatters.durationFormatter({
    // 기본값
    enter: "day",
    store: "hour",
    format: "auto",
    short: false,
    minutesPerHour: 60,
    hoursPerDay: 8,
    hoursPerWeek: 40,
    daysPerMonth: 30,
    daysPerYear: 365,
    labels: {
        minute: {
            full: "minute",
            plural: "minutes",
            short: "min"
        },
        hour: {
            full: "hour",
            plural: "hours",
            short: "h"
        },
        day: {
            full: "day",
            plural: "days",
            short: "d"
        },
        week: {
            full: "week",
            plural: "weeks",
            short: "wk"
        },
        month: {
            full: "month",
            plural: "months",
            short: "mon"
        },
        year: {
            full: "year",
            plural: "years",
            short: "y"
        }
    }
});

API

생성된 DurationFormatter 인스턴스는 아래 메서드를 제공합니다:

• canParse (value): boolean - 주어진 문자열을 지속 시간 값으로 파싱할 수 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다
  • value - (string) - 확인할 문자열

const formatter = gantt.ext.formatters.durationFormatter();
console.log(formatter.canParse("1 day"));
// true

console.log(formatter.canParse("abc"));
// false

• format (value): string - 주어진 지속 기간 값을 지속 시간 문자열로 변환합니다
  • value - (number) - 변환될 지속 시간 값

const formatter = gantt.ext.formatters.durationFormatter();
console.log(formatter.format(24));
// 3 days

• parse (value): number - 주어진 문자열을 지속 시간 값으로 파싱합니다. 파싱할 수 없으면 'null'이 반환됩니다
  • value - (string) - 변환될 문자열

const formatter = gantt.ext.formatters.durationFormatter();
console.log(formatter.parse("1 day"));
// 8

작업 시간 계산에 대한 자세한 내용은 Work Time Calculation 문서를 참조하십시오.

Link Formatter

gantt.ext.formatters.linkFormatter(config) 메서드는 새로운 LinkFormatter 인스턴스를 반환합니다. 이 인스턴스는 Duration Formatter의 일부 메서드와 구성(configuration)을 재사용합니다.

구성(Configuration)

• linkFormatter (config): LinkFormatter - Link Formatter를 생성합니다
  • config? - (object) - 선택사항으로, 아래 속성을 포함할 수 있는 구성 객체입니다:
    • durationFormatter? - (DurationFormatter) - gantt.ext.formatters.durationFormatter() 로 생성된 DurationFormatter의 인스턴스입니다. 링크의 지연(lag) 및 선행(lead) 값을 구문 분석하고 형식화하는 방식에 영향을 줍니다:
    • labels? - (object) - 서로 다른 유형의 링크에 대한 지역화 문자열(레이블)
      • finish_to_start? - (string) - Finish to Start 링크의 레이블
      • start_to_start? - (string) - Start to Start 링크의 레이블
      • finish_to_finish? - (string) - Finish to Finish 링크의 레이블
      • start_to_finish? - (string) - Start to Finish 링크의 레이블

예제:

기본 설정으로 Link Formatter 초기화:

const formatter = gantt.ext.formatters.linkFormatter();
// 포맷터 객체의 인스턴스가 팩토리 메서드를 사용해 생성됩니다

• short:

gantt.ext.formatters.linkFormatter()
   .format({id:1, type:"1", source: 1, target: 2, lag: 5});
//"1SS+5 days"
 
var durationFormatter = gantt.ext.formatters.durationFormatter({
    short: true
});
gantt.ext.formatters.linkFormatter({durationFormatter: durationFormatter})
    .format({id:1, type:"2", source: 1, target: 2, lag: -1});
//"1FF-1d"

• labels:

const formatter = gantt.ext.formatters.linkFormatter({
    //default values
    durationFormatter: gantt.ext.formatters.durationFormatter(),
    labels: {
        finish_to_start: "FS",
        start_to_start: "SS",
        finish_to_finish: "FF",
        start_to_finish: "SF"
    }
});

API

생성된 LinkFormatter 인스턴스는 아래 메서드를 제공합니다:

• canParse (value): boolean - 주어진 문자열을 링크 객체로 파싱할 수 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다
  • value - (string) - 확인할 문자열

const formatter = gantt.ext.formatters.linkFormatter();
console.log(formatter.canParse("1FS + 1 day"));
// true
 
console.log(formatter.canParse("abc"));
// false

• format (link): string - 주어진 링크 값을 문자열로 변환합니다
  • value - (Link) - 변환될 링크 객체

const formatter = gantt.ext.formatters.linkFormatter();

formatter.format({id:1, type:"1", source: 1, target: 2, lag: 5});
//"1SS+5 days"

• parse (value): object - 주어진 문자열을 링크 객체로 파싱합니다. 파싱할 수 없으면 'null'이 반환됩니다. 주어진 링크의 link.target 값은 항상 "null" 값이 될 수 있습니다.
  • value - (string) - 변환될 문자열

const formatter = gantt.ext.formatters.linkFormatter();

formatter.parse("1SS+5 days");
// {id:1, type:"1", source: 1, target: null, lag: 5}

Format info

LinkFormatter는 두 가지 형식의 링크를 지원합니다:

• $(WBS) - 축약 형식
  • $(WBS) - 작업 WBS 코드

const formatter = gantt.ext.formatters.linkFormatter();

console.log(formatter.parse("1.1"));
// {id:1, type:"0", source: 2, target: 3, lag: 0}

console.log(formatter.format({id:2, type:"0", source: 1, target: 3, lag: 0}));
// 1.1

• $(WBS)$(TYPE)$(LAG) - 전체 형식
  • $(WBS) - 작업 WBS 코드
  • $(TYPE) - 링크 유형. 지원 값: 'FF', 'FS', 'SS', 'SF', 또는 LinkFormatter의 구성의 labels 로 정의된 값
  • $(LAG) - 링크 지연(lag). 값은 양수 또는 음수가 될 수 있습니다 - +1 day, -1 day. 지원 형식은 생성자에 전달된 durationFormatter 매개변수에 의해 정의됩니다.

const formatter = gantt.ext.formatters.linkFormatter();

console.log(formatter.parse("1.1SS + 1 day"));
// {id:1, type:"1", source: 2, target: null, lag: 1}

console.log(formatter.format({id:1, type:"1", source: 2, target: 3, lag: 1}));
// 1.1SS + 1 day

종료-시작(Finish-To-Start) 링크 중 지연/선도 없이 포맷된 항목은 축약 형식을 사용하여 포맷되고, 다른 링크들은 전체 형식으로 포맷됩니다. 또한, 만약 parse 메서드에 작업의 WBS 코드만 제공되면, 포맷터는 Finish-to-Start 유형과 0 지연 시간을 가정합니다.

LinkFormatter 메서드에 대한 자세한 내용은 Inline Editing in Grid 문서를 참조하십시오.

Custom Formatter

Gantt 기능은 기존 Gantt 포맷터를 기반으로 커스텀 포맷터를 생성할 수 있도록 합니다. 인라인 에디터에 커스텀 포맷터를 추가할 수 있습니다. 내부적으로 Gantt는 기대하는 형식으로 데이터를 저장하고, 사용자가 인라인 에디터를 열 때 사용자가 필요한 값을 표시합니다.

커스텀 포맷터는 두 개의 함수: format() 와 parse() 를 가진 객체입니다.

• format() 함수는 숫자(커스텀 지속 시간 포맷터) 또는 링크(커스텀 링크 포맷터) 중 하나를 필요한 값으로 변환합니다. parse() 함수는 포맷된 값을 숫자(커스텀 지속 시간 포맷터) 또는 링크(커스텀 링크 포맷터)로 변환합니다.

다음은 커스텀 포맷터의 예시입니다:

const customDurationFormatter = {
    format: function (duration) {
        let formattedDuration;
        // 숫자에서 원하는 값으로 변환하는 코드
        return formattedDuration;
    },
    parse: function (formattedValue) {
        let duration;
        // 원하는 값에서 숫자로 변환하는 코드
        return duration;
    }
};

const customLinkFormatter = {
    format: function (link) {
        let formattedLink;
        // 링크 객체에서 원하는 값으로 변환하는 코드
        return formattedLink;
    },
    parse: function (formattedValue) {
        let link;
        // 원하는 값에서 `link` 객체로 변환하는 코드
        return link
    }
};

커스텀 포맷터의 값은 기존 포맷터를 사용하고 그 반환 값을 수정하는 방식으로 사용할 수 있습니다.

커스텀 포맷터는 일반 포맷터와 동일하게 인라인 에디터에 지정됩니다. 예를 들면:

const durationEditor = { 
    type: "duration", map_to: "duration", formatter: customDurationFormatter 
};

다음은 커스텀 지속 시간 포맷터와 커스텀 링크 포맷터의 예시입니다:

관련 샘플 Custom duration and link formatters

커스텀 복수형 규칙(Plural forms)

기본 Duration Formatter의 구성은 명사에 대한 복수형을 하나의 형태로 사용하는 것을 허용합니다. 영어의 경우 복수형은 접미사를 추가하거나 명사를 바꾸는 방식으로 형성됩니다.

다른 언어에서는 복수형에 여러 변형이 있을 수 있으며, 서로 다른 복수형 규칙이 적용될 수 있습니다. 필요에 따라 언어에 맞춘 규칙을 지정하는 커스텀 포맷터를 사용할 수 있습니다. 아래 예시는 일본어 로케일에 적합한 필요한 규칙을 적용하는 방법을 보여줍니다:

관련 샘플 Custom duration formatter with different plural values for Japanese locale