@acrool/react-kanban

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 dayjs acrool-react-kanban

Usage

import BearGantt, {ETaskStatus, IData} from 'acrool-react-kanban';
import 'acrool-react-kanban/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 <BearGantt
        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)}
    />
}

License

MIT © imagine10255