Gantter-g with react

基于g引擎的甘特图组件

Install

npm install gantter-g

yarn add gantter-g

Usage

export default () => {
  return (
    <Gantter
      columns={[
        { key: 'name', name: '姓名', width: 200 },
        { key: 'gender', name: '性别', width: 100 },
        { key: 'age', name: '年龄', width: 200 }
      ]}
      dataSource={[
        {
          name: '张三',
          gender: '男',
          age: 20,
          distribution: [
            { name: '任务一', start: '2020-01-01', end: '2020-03-01', content: '任务介绍' },
            { name: '任务二', start: '2020-03-01', end: '2020-06-01', color: '#0000ff' },
            { name: '任务三', start: '2020-06-01', end: '2020-09-01' },
          ]
        },
        {
          name: '李四',
          gender: '男',
          age: 30,
          distribution: [
            { name: '任务一', start: '2020-01-01', end: '2020-03-01' },
            { name: '任务二', start: '2020-03-01', end: '2020-06-01' },
            { name: '任务三', start: '2020-06-01', end: '2020-09-01' },
          ]
        },
        {
          name: '赵五',
          gender: '男',
          age: 25,
          distribution: [
            { name: '任务一', start: '2020-01-01', end: '2020-03-01' },
            { name: '任务二', start: '2020-03-01', end: '2020-06-01' },
            { name: '任务三', start: '2020-06-01', end: '2020-09-01' },
          ]
        }
      ]}
      gantterReplaceKeys={{
        list: 'distribution',
        title: 'name'
      }}
      tooltip={{
        formatter: value => ([
          {
            text: value.name,
            style: {
              fontSize: 14,
              fontWeight: 'bold'
            }
          },
          {
            text: `${value.start} - ${value.end}`,
            style: {
              fontSize: 14
            }
          },
          {
            text: `周期：${(new Date(value.end).getTime() - new Date(value.start).getTime()) / (1000 * 3600 * 24)}天`,
            style: {
              fontSize: 14
            }
          }
        ])
      }}
      gantterBarText={{
        show: true,
        formatter: value =>({
          text: value.name
        })
      }}
      theme={{
        gantterStopColor: '#ececec',
        gantterProgressColor: '#64e25e',
        gantterUnbeginColor: '#4eacfd'
      }}
    />
  )
}

API

参数|说明|类型|默认值 --|:--:|--:|--: columns|表头|object[]|- dataSource|数据数组|object[]|- showOrder|是否显示序号|Boolean|true gantterReplaceKeys|进度替换字段|object|如下 tooltip|提示框|object|如下 gantterBarText|进度条上文字|object|如下 theme|主题设置|object|如下

columns

参数|说明|类型|默认值 --|:--:|--:|--: key|唯一标识|string|必填 name|名称|string|必填 width|列宽|number|100 tooltip|是否显示提示|boolean|false

gantterReplaceKeys

参数|说明|类型|默认值 --|:--:|--:|--: list|数组键名|string|list start|开始日期|string|start end|结束日期|string|end title|标题|string|title content|说明|string|content color|进度条颜色|string|color

tooltip

参数|说明|类型|默认值 --|:--:|--:|--: show|是否显示|boolean|true formatter|提示框显示内容|(value: gantterReplaceKey) => object[]|-

formatter返回格式

[
  {
    text: item[replaceKeys.title],
    style: {
      fontSize: 14,
      fontWeight: 'bold',
    }
  },
  {
    text: `${item[replaceKeys.start]} - ${item[replaceKeys.end]}`,
    style: {
      fontSize: 14
    }
  }
]

gantterBarText

参数|说明|类型|默认值 --|:--:|--:|--: show|是否显示|boolean|true formatter|进度条显示文字内容|(value: gantterReplaceKey) => string|-

theme

参数|说明|默认值 --|:--:|--: backgroundColor|通用背景色| borderColor|通用边框色| fontColor|通用文字颜色| dragDividerColor|拖动条颜色| dragDividerBorderColor|拖动条边框颜色| scrollBarSlideColor|滚动条滑道颜色| scrollBarThumbColor|滚动条滑块颜色| scrollBarThumbHoverColor|鼠标移入滑块颜色| scrollBarThumbDownColor|鼠标按下滑块颜色| tableHeaderDividerColor|表头分割线| tableHeaderBottomBorderColor|表头下边线| tableHeaderBackgroundColor|表头背景色| tableHeaderFontColor|表头文字颜色| tableRowDividerColor|表格横向分割线| tableColDividerColor|表格纵向分割线| tableOddBackgroundColor|表格奇数行背景| tableEvenBackgroundColor|表格偶数行背景| tableCellFontColor|表格文字背景| gantterStopColor|已结束进度条颜色| gantterProgressColor|进行中进度条颜色| gantterUnbeginColor|未开始进度条颜色| gantterDividerColor|甘特图分割线颜色| gantterBarShadowColor|鼠标移入进度条阴影颜色| gantterbarLineColor|进度条描边颜色| popoverBackground|气泡卡片背景色| popoverShadowColor|气泡卡片阴影颜色|

组件调试

yarn dev
yarn dev story

运行测试用例

yarn test

按照社区规范和最佳实践，生成构建产物

yarn build

继续创建更多项目要素

yarn new

其他

yarn lint         # 检查和修复所有代码
yarn change       # 添加 changeset，用于发版时生成 changelog
yarn bump         # 生成发版相关的修改，比如更新版本号、生成 changelog
yarn release      # 根据 bump 自动修改和人工修改的发版要求，发布项目