Available only in PRO Edition
이 기능은 PRO 에디션에서만 사용할 수 있습니다.
gantt.ext.formatters 확장 기능은 값을 포맷팅하는 두 가지 방법을 제공합니다:
또한 기존 포매터를 기반으로 사용자 지정 포매터를 생성할 수도 있습니다.
gantt.ext.formatters.durationFormatter(config) 메서드는 새로운 DurationFormatter 인스턴스를 생성합니다.
예시:
기본 설정으로 Duration Formatter 생성:
const formatter = gantt.ext.formatters.durationFormatter();
// 팩토리 메서드를 통해 포매터 인스턴스가 생성됩니다.
formatter.parse("1"); // enter:"day"(기본값)이면 1일로 해석
formatter.parse("1"); // enter:"hour"이면 1시간으로 해석
formatter.parse("1 day"); // store:"hour"이면 8로 저장
formatter.parse("1 day"); // store:"minute"이면 480으로 저장
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" 출력
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"
}
}
});
DurationFormatter 인스턴스는 다음과 같은 메서드를 제공합니다:
const formatter = gantt.ext.formatters.durationFormatter();
console.log(formatter.canParse("1 day"));
// true
console.log(formatter.canParse("abc"));
// false
const formatter = gantt.ext.formatters.durationFormatter();
console.log(formatter.format(24));
// 출력: 3 days
const formatter = gantt.ext.formatters.durationFormatter();
console.log(formatter.parse("1 day"));
// 출력: 8
durationFormatter에 대한 자세한 내용은 작업 시간 계산 문서에서 확인할 수 있습니다.
gantt.ext.formatters.linkFormatter(config) 메서드는 새로운 LinkFormatter 인스턴스를 생성합니다. 일부 메서드 및 설정은 Duration Formatter와 공유합니다.
예시:
기본 설정으로 Link Formatter 생성:
const formatter = gantt.ext.formatters.linkFormatter();
// 팩토리 메서드를 통해 포매터 인스턴스가 생성됩니다.
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"
const formatter = gantt.ext.formatters.linkFormatter({
//기본값
durationFormatter: gantt.ext.formatters.durationFormatter(),
labels: {
finish_to_start: "FS",
start_to_start: "SS",
finish_to_finish: "FF",
start_to_finish: "SF"
}
});
LinkFormatter 인스턴스는 다음과 같은 메서드를 제공합니다:
const formatter = gantt.ext.formatters.linkFormatter();
console.log(formatter.canParse("1FS + 1 day"));
// true
console.log(formatter.canParse("abc"));
// false
const formatter = gantt.ext.formatters.linkFormatter();
formatter.format({id:1, type:"1", source: 1, target: 2, lag: 5});
// 출력: "1SS+5 days"
const formatter = gantt.ext.formatters.linkFormatter();
formatter.parse("1SS+5 days");
// 출력: {id:1, type:"1", source: 1, target: null, lag: 5}
LinkFormatter는 두 가지 링크 포맷을 지원합니다:
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
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 코드만 제공하면, 포매터는 래그가 0인 Finish-to-Start 타입으로 간주합니다.
linkFormatter 메서드에 대한 자세한 내용은 그리드에서 인라인 편집 문서를 참고하세요.
Gantt 도구는 내장 포매터를 기반으로 커스텀 포매터를 만들 수 있습니다. 이러한 커스텀 포매터는 인라인 에디터에 추가할 수 있습니다. 내부적으로 Gantt는 데이터를 기대하는 형식으로 유지하지만, 사용자가 인라인 에디터를 열면 원하는 포맷으로 값을 보여줍니다.
커스텀 포매터는 format() 함수와 parse() 함수 두 가지로 구성된 객체입니다.
format() 함수는 (커스텀 duration 포매터의 경우) 숫자나 (커스텀 링크 포매터의 경우) 링크를 원하는 표시값으로 변환합니다. 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
};
아래는 커스텀 duration 및 링크 포매터를 구현하는 예시입니다:
Related sample: Custom duration and link formatters
기본 Duration Formatter는 영어 복수형 규칙(주로 접미사 추가 또는 명사 일부 변경)을 처리하도록 설계되어 있습니다.
다른 언어는 여러 복수형이 존재하거나 적용 규칙이 다를 수 있습니다. 이런 경우, 해당 언어에 맞는 규칙을 적용하는 커스텀 포매터를 만들 수 있습니다. 아래 예시는 일본어에 맞는 복수형 규칙을 구현하는 방법을 보여줍니다:
Related sample: Custom duration formatter with different plural values for Japanese locale
Back to top