@acrool/react-gantt NPM

Acrool

Acrool is an Task manager platform to visually design, generate terraform code and manage cloud infrastructure, collaboratively.

If you want to know how to use this Gantt chart, you can use it in Acrool

Start for free

Supports

Supports interactive operations: move task time, zoom in and out, and change project order
Support full screen
Supports three-tier architecture: project/team/task
Support holiday mode
Support calendar lazy loading

Install

yarn add @acrool/react-gantt

Usage

import AcroolGantt, {ETaskStatus, IData} from '@acrool/react-gantt';
import '@acrool/react-gantt/dist/index.css';


export const data: IData[] = [
    {
        'id': '01h40wr7tqyas5xsj78tysj9m3',
        'text': 'RICH GAME Mobile 改版',
        'dataLevel': EDataLevel.Project,
        'children': [
            {
                'id': '01gwcrb1yry5ka7g18j6kab2en@PM',
                'text': 'PM',
                'barColor': '#fa6120',
                'dataLevel': EDataLevel.Team,
                'children': [
                    {
                        'id': '01h40wt8kwnw8rez1yy9jbyhvr@PM',
                        'text': 'demand analysis',
                        'progressRate': 0,
                        'estimateWorkTime': 16,
                        'estimateStartDate': '2024-07-10',
                        'estimateEndDate': '2024-07-20',
                        'dataLevel': EDataLevel.Task,
                        'status': ETaskStatus.ReadyStart,
                        'links': ['01h412rzv4s5p7sdw5g435dwc0@PM']

                    },
                ]
            },
        ]
    },
    {
        'id': '01h63jvjbnzr7yx9483f0p34zb',
        'text': 'Agent backend',
        'dataLevel': EDataLevel.Project,
        'milestones': [
            {date: '2024-08-01', name: 'Demand negotiation'},
            {date: '2024-08-20', name: 'Closing date'},
            {date: '2024-11-30', name: 'Payment date'}
        ],
        'children': [
            {
                'id': '01gvz5dzfj2k361jba1brhnz0p',
                'text': 'Frontend',
                'dataLevel': EDataLevel.Team,
                'barColor': '#00bde5',
                'children': [
                    {
                        'id': '01h63pkhr2ymzknjk5a0vfj235_A1',
                        'text': 'Added 2024 login page',
                        // 'assigners': [assignr.imagine],
                        'progressRate': 100,
                        'estimateWorkTime': 4,
                        'estimateStartDate': '2024-12-01',
                        'estimateEndDate': '2024-12-08',
                        'status': ETaskStatus.ReadyStart,
                        'dataLevel': EDataLevel.Task,
                    },
                    {
                        'id': '01h63pkhrwms9necc3veac6rc8_A1',
                        'text': 'New 2024 report-deposits and withdrawals',
                        'assigners': [assignr.gary],
                        'progressRate': 40,
                        'estimateWorkTime': 8,
                        'estimateStartDate': '2024-12-09',
                        'estimateEndDate': '2024-12-14',
                        'dataLevel': EDataLevel.Task,
                    },
                ],
            },
        ]
    }
];

export const CustomBanner = () => {
    return <AcroolGantt
        data={data}
        isExpandAll={isExpandAll}
        preVisibleDay={startDate}
        nextVisibleDay={endDate}
        onTaskChangeDate={handleTaskChangeDate}
        onInsertTask={handleTaskInsertDate}

        onScrollStart={handleOnScrollStart}
        onScrollEnd={handleOnScrollEnd}

        onLinkAdd={handleAddLink}
        onLinkDelete={handleDeleteLink}
        isSkipHoliday={isSkipHoliday}

        isVisibleStatus={false}
        isVisibleProgressRate={false}
        isVisibleWorkTime

        onTaskChangeSequence={handleOnTaskChangeSequence}
        onClickTask={id => console.log('onClickTask', id)}
        defaultPositionDay={defaultPositionDay}

        isFullScreen={isFullScreen}
        onFullScreen={() => setFullScreen(curr => !curr)}
    />
}