React Gantt Chart로 Flight Tracker 애플리케이션을 개발하는 방법

당사의 SyncfusionReact Gantt Chart component은 타임라인, 작업 표시줄, 열 머리글, 셀, 레이블 및 도구 설명과 같은 다양한 Gantt 요소의 사용자 정의를 지원하는 특수 차트 도구입니다.

이 기사에서는 비행 추적기 애플리케이션을 개발하기 위해 이러한 Gantt 차트 요소를 사용자 정의하는 방법을 살펴봅니다. 우리 모두 알다시피, 항공편은 서로 다른 시간에 서로 다른 공항에서 예정되어 있습니다. 이 애플리케이션에서는 예정된 모든 경기와 서로 다른 공항에서의 실시간 추적 상태를 표시할 것입니다.

비행 추적기 응용 프로그램의 접힌 보기

또한 다음 스크린샷과 같이 각 공항을 확장하여 각 항공편의 상태를 자세히 확인할 수 있습니다.

비행 추적기 응용 프로그램의 상세 보기

Gantt 차트 요소의 사용자 정의

비행 추적기 애플리케이션을 개발하기 위해 다음 간트 차트 요소를 사용자 정의할 것입니다.

Taskbar

Grid cell

Header column

Tooltip

작업 표시줄

작업 표시줄을 사용하여 자동 또는 수동, 예약되지 않음 또는 예약됨(상위, 하위, 마일스톤)과 같은 다양한 상태를 표시할 수 있습니다. taskbarTemplate 또는 queryTaskbarInfo 클라이언트 측 이벤트를 사용하여 사용자 정의할 수 있습니다.

다음 코드 예제를 참조하십시오.

// Based on the current time, validated the flights into three categories: 
// 1. Completed journey – Denoted by green
// 2. In journey - Denoted by light green
// 3. Not yet started - Denoted by gray

taskbarTemplate(props) {
        var startTime = props.ganttProperties.startDate.getTime();
        var endTime = props.ganttProperties.endDate.getTime();
        var currentTime = new Date('02/13/2021 15:25:00').getTime();
        if (endTime < currentTime) {
            return (
                <div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style={{ height: "100%", borderRadius: "5px", backgroundColor: "#006400" }}>
                    {<div>
                        <span className="e-task-label" style={{ position: "absolute", zIndex: 1, top: "15px", fontFamily: "Segoe UI", fontSize: "12px", color: 'white', textOverflow: "ellipsis", overflow: "hidden" }}>
                            <b>{props.Name}</b></span>
                    </div>}

                </div>);
        } else if (startTime < currentTime) {
            return (
                <div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style={{ height: "100%", borderRadius: "5px", backgroundColor: "#90EE90" }}>
                    {<div>
                        <span className="e-task-label" style={{ position: "absolute", zIndex: 1, top: "15px", fontFamily: "Segoe UI", fontSize: "12px", color: 'white', textOverflow: "ellipsis", overflow: "hidden" }}>
                            <b>{props.Name}</b></span>
                    </div>}

                </div>);

        } else {
            return (
                <div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style={{ height: "100%", borderRadius: "5px", backgroundColor: "#C0C0C0" }}>
                    {<div>
                        <span className="e-task-label" style={{ position: "absolute", zIndex: 1, top: "15px", fontFamily: "Segoe UI", fontSize: "12px", color: 'white', textOverflow: "ellipsis", overflow: "hidden" }}>
                            <b>{props.Name}</b></span>
                    </div>}

                </div>);

        }
    };

React Gantt 차트에서 작업 표시줄 요소 사용자 정의

그리드 셀

querycellinfo 클라이언트 측 이벤트를 사용하여 그리드 셀을 사용자 정의할 수 있습니다. 이 이벤트의 인수에는 데이터, 열 및 셀 요소 값이 있습니다. 이 이벤트는 각 셀을 렌더링하기 전에 트리거됩니다. 이 이벤트에서 각 셀의 셀 요소를 사용자 정의하십시오.

// Based on the current time, validated the flights into three categories: 
    // 1. Completed journey - Denoted by green
    // 2. In journey - Denoted by light green 
    // 3. Not yet started - Denoted by gray  
    queryCell(props) {
        if (!props.data.hasChildRecords && props.column.field == 'Name') {
            var startTime = props.data.ganttProperties.startDate.getTime();
            var endTime = props.data.ganttProperties.endDate.getTime();
            var currentTime = new Date('02/13/2021 15:25:00').getTime();
            if (endTime < currentTime) {
                props.cell.style.backgroundColor = '#006400';
            } else if (startTime < currentTime) {
                props.cell.style.backgroundColor = '#90EE90';
            } else {
                props.cell.style.backgroundColor = '#C0C0C0';
            }
        }
    }

React Gantt 차트에서 그리드 셀 요소 사용자 정의

헤더 열

헤더 열은 header template 속성을 사용하여 사용자 지정할 수 있습니다. 템플릿 내에서 HTML 요소를 렌더링하여 열 머리글을 사용자 지정할 수도 있습니다.

다음 코드를 참조하십시오.

<ColumnsDirective>
                    {/**Column header template*/}
                    <ColumnDirective field="Model" headerText='Flight' headerTemplate={() => {
                        return (<div style={{ marginLeft: "20px" }}><img src="./image/airplane.png" width="20" height="20" className="e-image" /></div>);
                    }} ></ColumnDirective>
                </ColumnsDirective>

React Gantt 차트에서 머리글 열 요소 사용자 정의

툴팁

Gantt 차트 작업 표시줄 도구 설명은 template 속성을 사용하여 사용자 지정할 수도 있습니다. 도구 설명에서 렌더링할 템플릿 내부의 Gantt 데이터를 가져옵니다.

다음 코드를 참조하십시오.

// Template code for taskbar tooltip.
    tooltipTemplate(props) {
        var data = props.taskData;        
        return (
            <table>
                <tr><img src="./image/airplane.png" ></img></tr>
                <tr><td>Flight</td><td>{data.Name}</td></tr>
                <tr><td>From</td><td>{data.From}</td></tr>
                <tr><td>To</td><td>{data.To}</td></tr>
                <tr><td>Dep</td><td>{data.Dep.getHours()} : {data.Dep.getMinutes()}</td></tr>
                <tr><td>Arr</td><td>{data.Arr.getHours()} : {data.Arr.getMinutes()}</td></tr>
                <tr><td>Model</td><td>{data.Model}</td></tr>
            </table>
        );
    }

React Gantt 차트에서 툴팁 요소 사용자 정의

GitHub 샘플

자세한 내용은 Flight tracker application using React Gantt Chart demo 을 참조하십시오.

결론

이 기사에서는 SyncfusionReact Gantt Chart component을 사용자 정의하여 비행 추적기 애플리케이션을 개발하는 방법을 설명했습니다. 이 블로그 게시물에 제공된 아이디어를 시도하고 아래 댓글 섹션에 피드백을 남겨주세요. Gantt Chart의 기능에 대한 자세한 내용은 이 페이지sample browser 및 이 페이지documentation를 참조하십시오.

간트 차트는 Blazor , ASP.NET ( MVC 및 Web Forms ), JavaScript , Angular , Vue , WPF 및 UWP 플랫폼에서도 사용할 수 있습니다. 놀라운 웹 응용 프로그램을 구축하는 데 사용하십시오!

support forum , Direct-Trac support system 또는 feedback portal 을 통해 저희에게 연락하실 수 있습니다. 기꺼이 도와드리겠습니다!

이 블로그 게시물이 마음에 들면 다음 기사도 마음에 드실 것입니다.

[블로그]

How to Integrate Syncfusion React Components into a Meteor Application [블로그]

[블로그]

React Succinctly [전자책]