react-gantt-lightweight

react 轻量级甘特图 目前只能精确到日,月 后期年会加上

Install

npm i react-gantt-lightweight
或者
 yarn add react-gantt-lightweight

demo

https://react-gantt.vercel.app/

import { useRef } from "react";
import {
  Gantt,
  GanttDataProps,
  GanttHeadProps,
  GanttPropsRefProps,
} from "react-gantt-lightweight";
const list: GanttDataProps[] = [
  {
    startTime: "2024-03-10 00:00:00",
    endTime: "2024-03-30 00:00:00",
    finishTime: null,
    dept: "技术部",
    num: "2人",
    time: "2天",
    start: false,
    time2: "结束时间",
    renderHead: () => <div>略略略</div>,
    renderoBar: (width, activeWidth, surplusWidth, overtimeWidth) => {
      console.log(width + "进度条宽度");
      console.log(activeWidth + "选中进度条宽度");
      console.log(surplusWidth + "剩余进度条宽度");
      console.log(overtimeWidth + "超出的宽度");
      return <div></div>;
    },
  },

  {
    startTime: "2024-03-11 00:00:00",
    endTime: "2024-03-25 12:00:00",
    finishTime: null,
    dept: "技术部",
    num: "2人",
    time: "2天",
    start: true,
    time2: "结束时间",

    children: [
      {
        start: false,
        startTime: "2024-03-22 00:00:00",
        endTime: "2024-04-20 12:00:00",
        finishTime: null,
        dept: "前端",
        num: "2人",
        time: "2天",
        time2: "结束时间",
      },
    ],
  },
  {
    startTime: "2024-03-11 00:00:00",
    endTime: "2024-03-25 12:00:00",
    finishTime: "2024-03-22 00:00:00",
    dept: "技术部",
    num: "2人",
    time: "2天",
    start: true,
    time2: "结束时间",
  },
  {
    startTime: "2024-03-07 00:00:00",
    endTime: "2024-03-27 12:00:00",
    finishTime: null,
    dept: "技术部",
    num: "2人",
    time: "2天",
    start: true,
    time2: "结束时间",
  },
  {
    startTime: "2024-03-11 00:00:00",
    endTime: "2024-03-25 12:00:00",
    finishTime: "2024-03-27 00:00:00",
    dept: "技术部",
    num: "2人",
    time: "2天",
    start: true,
    time2: "结束时间",
    renderoBar: (width) => {
      return (
        <div
          style={{
            fontSize: "12px",
            color: "#fff",
            paddingLeft: "10px",
            width: width + "px",
          }}
        >
          自定义任务内容-哈哈哈哈哈
        </div>
      );
    },
    children: [
      {
        start: true,
        startTime: "2024-03-12 00:00:00",
        endTime: "2024-03-19 12:00:00",
        finishTime: "2024-03-15 12:00:00",
        renderHeadChild: () => <div>自定义render</div>,
        renderoBar: () => {
          return <div> 任务标题</div>;
        },
        dept: "前端",
        num: "2人",
        time: "2天",
        time2: "结束时间",
      },
      {
        start: true,
        startTime: "2024-03-13 00:00:00",
        endTime: "2024-03-24 17:00:00",
        finishTime: "2024-03-29 12:00:00",
        dept: "前端",
        num: "2人",
        time: "2天",
        time2: "结束时间",
      },
      {
        start: true,
        startTime: "2024-04-13 09:00:00",
        endTime: "2024-04-15 17:00:00",
        finishTime: null,
        dept: "前端",
        num: "2人",
        time: "2天",
        time2: "结束时间",
        renderoBar: () => {
          return <div> 任务标题</div>;
        },
      },

      {
        start: false,
        startTime: "2024-04-13 09:00:00",
        endTime: "2024-04-15 17:00:00",
        finishTime: null,
        dept: "前端手收尸",
        num: "2人",
        time: "2天",
        time2: "结束时间",
      },
    ],
  },
];

const head: GanttHeadProps[] = [
  {
    title: "部门",
    key: "dept",
  },
  {
    title: "人数",
    key: "num",
  },
  {
    title: "已用工时",
  },
  {
    title: "任务时间",
  },
];

function App() {
  const ganttRef = useRef < GanttPropsRefProps > null;
  return (
    <div>
      <Gantt height="400px" data={list} head={head} ref={ganttRef} />
      <button
        onClick={() => {
          ganttRef.current?.initGantt();
        }}
      >
        刷新
      </button>
    </div>
  );
}

export default App;

API

props

参数	类型	默认值	描述
data	GanttDataProps[]	[]	数据
head	GanttHeadProps[]	[]	左侧表头
ganttType	"day" | "month"	day	day日期 month月份
height	string	auto	甘特图高度
headWidth	string	400px	左侧宽度
showLine	boolean	true	鼠标悬浮进度条查看时间线
headBodyPaddingY	number	10	左侧表格body区域Y轴内边距
headBodyPaddingX	number	0	左侧表格body区域X轴内边距
open	boolean	true	是否显示左侧收起按钮
onClickText	()=>{}	()=>{}	点击右侧文字事件
ref	GanttPropsRefProps	null	ref

GanttDataProps

参数	类型	默认值	描述
start	boolean	true	任务是否开始
startTime	YYYY-MM-dd HH:mm:ss	必传	任务开始时间
endTime	YYYY-MM-dd HH:mm:ss	必传	任务结束时间
finishTime	YYYY-MM-dd HH:mm:ss | null	必传	任务结束时间
children	GanttDataProps[]	[]	子级任务
renderoBar	()=>JSX.Element	width 进度条宽度(不包含超出的宽度) activeWidth 选中进度条宽度 surplusWidth 剩余进度条宽度 overflowWidth 超出的宽度(超时的宽度) renderoBar?: ( width:number, activeWidth: number, surplusWidth: number, overflowWidth?: number ) => JSX.Element;	自定义进度条的宽度
renderHead	()=>JSX.Element	()=>JSX.Element	左侧表头 body 第一级渲染内容
renderHeadChild	()=>JSX.Element	()=>JSX.Element	左侧表头 body 第二级级渲染内容

GanttHeadProps

参数	类型	默认值	描述
title	string		表格标题
width	string	aotu	标题宽度
key	string		对应data的key
align	"center" | "left" | "right"	center	对齐方式
renderTableHead	() => JSX.Element	() => JSX.Element	自定义内容

GanttPropsRefProps

参数	类型	默认值	描述
initGantt	()=>{}	()=>{}	初始化甘特图
setGanttType	(type:"day" | "month")=>void	(type:"day" | "month")=>void	切换显示类型