@zonejs/zosc-gantt NPM

基于React的甘特图组件

⚠️ ⚠️ ⚠️ 该组件目前还在开发中，请谨慎使用 ⚠️ ⚠️ ⚠️

使用

安装

使用yarn

yarn add @zonejs/zosc-gantt

使用npm

npm install @zonejs/zosc-gantt --save

基本使用

import React from 'react';
import ReactDOM from 'react-dom';
import Gantt from '@choerodon/gantt';

ReactDOM.render(<div style={{ width: '100%', height: 500 }}>
    <Gantt
      data={[{
        name: '一个名称',
        startDate: '2020-10-01',
        endDate: '2020-10-08',
        collapsed: false,
        children: [{
          startDate: '2020-10-01',
          endDate: '2020-10-08',
          name: '一个名称',
          collapsed: false
        }]
      }]}
      columns={[{
        name: 'name',
        label: '名称',
      }]}
      onUpdate={async () => {
        return true
      }}
    />
  </div>,document.getElementById("root"))

`data`

说明: 甘特图的数据

单任务传参
[{
  name: '一个名称',
  startDate: '2020-10-01',
  endDate: '2020-10-08',
  collapsed: false,
  children: [{
    startDate: '2020-10-01',
    endDate: '2020-10-08',
    name: '一个名称',
    collapsed: false
  }]
}]

多任务传参
multiple='timeRange'
[{
  name: '一个名称',
  timeRange: [
    { startDate: '2022-07-21', endDate: '2022-07-28' },
    { startDate: '2022-07-31', endDate: '2022-08-08' },
  ],
  collapsed: false,
  children: [{
    name: '一个名称',
    timeRange: [
      { startDate: '2022-07-21', endDate: '2022-07-28' },
      { startDate: '2022-07-31', endDate: '2022-08-08' },
    ],
    collapsed: false
  }]
}]

`columns`

说明: table的列配置
类型: Gantt.Column[]
- width: number
- minWidth: number
- maxWidth: number
- flex: number
- name: string
- label: string
- render: (record) => React.ReactNode

`startDateKey`

说明: 开始时间对应的key
类型: string
默认: startDate

`endDateKey`

说明: 结束时间对应的key
类型: string
默认: endDate

`onUpdate`

说明: 时间更新的回调，返回true代表修改成功
类型: (record, startDate, endDate) => boolean
- record: Gantt.Record<RecordType>
- startDate: string
- endDate: string

`isRestDay`

说明: 甘特图的节假日判断，返回true代表节假日
默认: 周六和周日节假日
类型: (date: string) => boolean

`getBarColor`

说明: 任务条的颜色配置
类型: (record => { backgroundColor: string; borderColor: string }

`showBackToday`

说明: 是否展示回到今天的按钮
类型: boolean
默认: true

`showUnitSwitch`

说明: 是否展示单位切换按钮
类型: boolean
默认: true

`unit`

说明: 单位
类型: string
默认: day
可选值: hour,day,week,month,quarter,halfYear

`onRow`

说明: table的行事件配置，目前支持onClick
类型: (record) => void

`tableIndent`

说明: table每一级的缩进
类型: number
默认: 30

`expandIcon`

说明: table展开图标
类型: ({level, collapsed, onClick}) => React.ReactNode
- level: number
- collapsed: boolean
- onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void