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 自动修改和人工修改的发版要求，发布项目