# @zonejs/zosc-gantt

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

Latest version **1.0.11** (published 2023-01-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zonejs/zosc-gantt
pnpm add @zonejs/zosc-gantt
yarn add @zonejs/zosc-gantt
bun add @zonejs/zosc-gantt
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2023-01-04 |
| First published | 2022-09-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 5 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 16553 |
| Maintainers | gnb, yanleying, superzmb |

## Links

- npm: https://www.npmjs.com/package/@zonejs/zosc-gantt
- Repository: https://code.choerodon.com.cn/bu-smemp-z/zosc-gantt
- npm.io page: https://npm.io/package/@zonejs/zosc-gantt

## Dependencies (5)

- [dayjs](https://npm.io/package/dayjs.md) ^1.9.7
- [ahooks](https://npm.io/package/ahooks.md) ^2.9.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.20
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [document-offset](https://npm.io/package/document-offset.md) ^1.0.4

## Recent versions

- 1.0.11 (latest) — 2023-01-04
- 1.0.10 — 2023-01-04
- 1.0.9 — 2022-12-28
- 1.0.8 — 2022-12-27
- 1.0.7 — 2022-12-19
- 1.0.6 — 2022-09-23
- 1.0.5 — 2022-09-22
- 1.0.4 — 2022-09-15
- 1.0.3 — 2022-09-11
- 1.0.2 — 2022-09-08
- 1.0.1 — 2022-09-08
- 1.0.0 — 2022-09-03

## README

# 基于React的甘特图组件

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

## 使用

### 安装

使用yarn

```bash
yarn add @zonejs/zosc-gantt
```

使用npm

```bash
npm install @zonejs/zosc-gantt --save
```

### 基本使用

```js
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"))
```

<h2 align="center">配置项</h2>

##### `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`

##### `renderBar`

- 说明: 任务条自定义渲染
- 类型: `(barInfo, { width, height }) => React.ReactNode`
  - barInfo: `Gantt.Bar<RecordType>`
  - width: `number`
  - height: `number`

##### `renderBarThumb`

- 说明: 创建时的任务条自定义渲染
- 类型: `(record, type: 'left' | 'right') => React.ReactNode`

##### `onBarClick`

- 说明: 任务条点击回调
- 类型: `(record) => void`

##### `tableCollapseAble`

- 说明: 是否可以收起table
- 默认: `true`
- 类型: `boolean`

##### `multiple`

- 说明: 时间集合
- 类型: `boolean`
- 默认: `false | string`

##### `onBarDoubleClick`

- 说明: 任务条双击回调
- 类型: `(record) => void`

##### `onBarContextMenu`

- 说明: 任务条右击回调
- 类型: `(record) => void`

##### `reservedHeight`

- 说明: 内部预留高度
- 类型: `number`
- 默认: `0`

##### `showToday`

- 说明: 是否展示今天标记
- 类型: `boolean`
- 默认: `true`

##### `selectionColor`

- 说明: 移入行颜色
- 类型: `string`
- 默认: `#0000000a`

##### `selectedColor`

- 说明: 选中行颜色
- 类型: `string`
- 默认: `#0000000a`

---
_Source: https://npm.io/package/@zonejs/zosc-gantt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._