@wimi/vtable-gantt 1.0.0

package/README.md

@@ -0,0 +1,213 @@
+<div align="center">
+  <a href="" target="_blank">
+    <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/500_200.svg"/>
+  </a>
+</div>
+
+<div align="center">
+  <h1>VTable-Gantt</h1>
+</div>
+
+<div align="center">
+
+VTable-Gantt create an efficient and flexible Gantt chart solution to make project management easier. Through simple configuration and custom layout, you can quickly get started and meet various complex needs. Improve team collaboration efficiency and achieve transparency of project progress.
+
+<p align="center">
+  <a href="https://visactor.io/vtable/guide/gantt/introduction">Introduction</a> •
+  <a href="https://visactor.io/vtable/demo/gantt/gantt-basic">Demo</a> •
+  <a href="https://visactor.io/vtable/guide/gantt/Getting_Started">Tutorial</a> •
+  <a href="https://visactor.io/vtable/option/Gantt">API</a>•
+</p>
+
+[![npm Version](https://img.shields.io/npm/v/@visactor/vtable-gantt.svg)](https://www.npmjs.com/package/@visactor/vtable-gantt)
+[![npm Download](https://img.shields.io/npm/dm/@visactor/vtable-gantt.svg)](https://www.npmjs.com/package/@visactor/vtable-gantt)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vtable/blob/main/LICENSE)
+
+</div>
+
+<div align="center">
+
+English| [简体中文](./README.zh-CN.md)
+
+</div>
+
+<div align="center">
+
+（video）
+
+</div>
+
+# Introduction
+
+VTable-Gantt is a Gantt chart component library in the VisActor visualization system, based on the table component VTable and the visualization rendering engine VRender. It is designed specifically for project management and task tracking, providing powerful visualization and interaction features. The core capabilities are as follows:
+
+1. High performance: Supports fast computation and rendering of large-scale project data, ensuring a smooth user experience.
+2. Flexible layout: Supports custom timeline, task bar styles, and layouts to meet different project management needs.
+3. Powerful interaction: Provides drag-and-drop, zoom, and edit functions for tasks, simplifying project management operations.
+4. Rich visualization capabilities: supports custom rendering of information cells and task bars, provides tree structure display, and improves the diversity and intuitiveness of data display.
+
+# Repo Intro
+
+This repository includes the following packages:
+
+1. packages/vtable: The core code repository of VTable
+2. packages/vtable-gantt: Gantt chart component code
+3. packages/vtable-editors: Table editor component code
+4. packages/vtable-plugins: Table plugin code
+5. packages/vtable-export: Table export tool code
+6. packages/vtable-search: Table search tool code
+7. packages/react-vtable: React version of the table component
+8. packages/vue-vtable: Vue version of the table component
+9. docs: Include VTable site tutorials, demos,apis and options, and also contains all Chinese and English documents.
+
+# Usage
+
+## Installation
+
+[npm package](https://www.npmjs.com/package/@visactor/vtable)
+
+```bash
+// npm
+npm install @visactor/vtable-gantt
+
+// yarn
+yarn add @visactor/vtable-gantt
+```
+
+## Quick Start
+
+```javascript
+import {Gantt} from '@visactor/vtable-gantt';
+const records = [
+  {
+    id: 1,
+    title: 'Task 1',
+    developer: 'liufangfang.jane@bytedance.com',
+    start: '2024-07-24',
+    end: '2024-07-26',
+    progress: 31,
+    priority: 'P0',
+  },
+  {
+    id: 2,
+    title: 'Task 2',
+    developer: 'liufangfang.jane@bytedance.com',
+    start: '07/24/2024',
+    end: '08/04/2024',
+    progress: 60,
+    priority: 'P0'
+  },
+  {
+    id: 3,
+    title: 'Task 3',
+    developer: 'liufangfang.jane@bytedance.com',
+    start: '2024-08-04',
+    end: '2024-08-04',
+    progress: 100,
+    priority: 'P1'
+  },
+  {
+    id: 4,
+    title: 'Task 4',
+    developer: 'liufangfang.jane@bytedance.com',
+    start: '2024-07-26',
+    end: '2024-07-28',
+    progress: 31,
+    priority: 'P0'
+  }
+];
+
+const columns = [
+  {
+    field: 'title',
+    title: 'title',
+    width: 'auto',
+    sort: true,
+    tree: true,
+    editor: 'input'
+  },
+  {
+    field: 'start',
+    title: 'start',
+    width: 'auto',
+    sort: true,
+    editor: 'date-input'
+  },
+  {
+    field: 'end',
+    title: 'end',
+    width: 'auto',
+    sort: true,
+    editor: 'date-input'
+  }
+];
+const option = {
+  overscrollBehavior: 'none',
+  records,
+  taskListTable: {
+    columns,
+  },
+  taskBar: {
+    startDateField: 'start',
+    endDateField: 'end',
+    progressField: 'progress'
+  },
+  timelineHeader: {
+    colWidth: 100,
+    backgroundColor: '#EEF1F5',
+    horizontalLine: {
+      lineWidth: 1,
+      lineColor: '#e1e4e8'
+    },
+    verticalLine: {
+      lineWidth: 1,
+      lineColor: '#e1e4e8'
+    },
+    scales: [
+      {
+        unit: 'day',
+        step: 1,
+        format(date) {
+          return date.dateIndex.toString();
+        },
+        style: {
+          fontSize: 20,
+          fontWeight: 'bold',
+          color: 'white',
+          strokeColor: 'black',
+          textAlign: 'right',
+          textBaseline: 'bottom',
+          backgroundColor: '#EEF1F5'
+        }
+      }
+    ]
+  },
+};
+const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID), option);
+```
+
+##
+
+[More demos and detailed tutorials](https://visactor.io/vtable)
+
+# Related Links
+
+- [Official website](https://visactor.io/vtable)
+
+# Ecosystem
+
+| Project                                                     | Description                                                                            |
+| ----------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| [AI-generated Components](https://visactor.io/ai-vtable)    | AI-generated table component.                                                          |
+
+# Contribution
+
+If you would like to contribute, please read the [Code of Conduct ](./CODE_OF_CONDUCT.md) 和 [ Guide](./CONTRIBUTING.zh-CN.md) first。
+
+Small streams converge to make great rivers and seas!
+
+<a href="https://github.com/visactor/vtable/graphs/contributors"><img src="https://contrib.rocks/image?repo=visactor/vtable" /></a>
+
+# License
+
+[MIT License](./LICENSE)

package/README.zh-CN.md

@@ -0,0 +1,215 @@
+<div align="center">
+  <a href="" target="_blank">
+    <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/500_200.svg"/>
+  </a>
+</div>
+
+<div align="center">
+  <h1>VTable-Gantt</h1>
+</div>
+
+<div align="center">
+
+VTable-Gantt 打造高效、灵活的甘特图解决方案，让项目管理更轻松。通过简单的配置和自定义布局，快速上手并满足各种复杂需求。提升团队协作效率，实现项目进度透明化。.
+
+<p align="center">
+  <a href="https://visactor.io/vtable/guide/gantt/introduction">Introduction</a> •
+  <a href="https://visactor.io/vtable/demo/gantt/gantt-basic">Demo</a> •
+  <a href="https://visactor.io/vtable/guide/gantt/Getting_Started">Tutorial</a> •
+  <a href="https://visactor.io/vtable/option/Gantt">API</a>•
+</p>
+
+[![npm Version](https://img.shields.io/npm/v/@visactor/vtable-gantt.svg)](https://www.npmjs.com/package/@visactor/vtable-gantt)
+[![npm Download](https://img.shields.io/npm/dm/@visactor/vtable-gantt.svg)](https://www.npmjs.com/package/@visactor/vtable-gantt)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vtable/blob/main/LICENSE)
+
+</div>
+
+<div align="center">
+
+简体中文| [English](./README.md)
+
+</div>
+
+<div align="center">
+
+（video）
+
+</div>
+
+# 介绍
+
+VTable-Gantt 是 VisActor 可视化体系中的甘特图组件库，基于表格组件VTabe和可视化渲染引擎 VRender 进行封装。它专为项目管理和任务跟踪设计，提供了强大的可视化和交互功能。核心能力如下：
+
+1. 高效性能：支持大规模项目数据的快速运算与渲染，确保流畅的用户体验。
+2. 灵活布局：支持自定义时间轴、任务条样式和布局，满足不同项目管理需求。
+3. 强大交互：提供任务的拖拽、缩放和编辑功能，简化项目管理操作。
+4. 丰富的可视化能力：支持信息单元格及任务条的自定义渲染，提供树形结构展示，提升数据展示的多样性和直观性。
+
+# 代码仓库介绍
+
+主要包含以下几个子项目:
+
+1. packages/vtable：表格组件代码
+2. packages/vtable-gantt: 甘特图组件代码
+3. packages/vtable-editors: 表格编辑器组件代码
+4. packages/vtable-plugins: 表格插件代码
+5. packages/vtable-export: 表格导出工具代码
+6. packages/vtable-search: 表格搜索工具代码
+7. packages/react-vtable: React 版本的表格组件
+8. packages/vue-vtable: Vue 版本的表格组件
+9. docs: 教程文档
+
+# 用法
+
+## 安装
+
+[npm package](https://www.npmjs.com/package/@visactor/vtable)
+
+```bash
+// npm
+npm install @visactor/vtable-gantt
+
+// yarn
+yarn add @visactor/vtable-gantt
+```
+
+## 快速上手
+
+```javascript
+import {Gantt} from '@visactor/vtable-gantt';
+
+const records = [
+  {
+    id: 1,
+    title: 'Task 1',
+    developer: 'liufangfang.jane@bytedance.com',
+    start: '2024-07-24',
+    end: '2024-07-26',
+    progress: 31,
+    priority: 'P0',
+  },
+  {
+    id: 2,
+    title: 'Task 2',
+    developer: 'liufangfang.jane@bytedance.com',
+    start: '07/24/2024',
+    end: '08/04/2024',
+    progress: 60,
+    priority: 'P0'
+  },
+  {
+    id: 3,
+    title: 'Task 3',
+    developer: 'liufangfang.jane@bytedance.com',
+    start: '2024-08-04',
+    end: '2024-08-04',
+    progress: 100,
+    priority: 'P1'
+  },
+  {
+    id: 4,
+    title: 'Task 4',
+    developer: 'liufangfang.jane@bytedance.com',
+    start: '2024-07-26',
+    end: '2024-07-28',
+    progress: 31,
+    priority: 'P0'
+  }
+];
+
+const columns = [
+  {
+    field: 'title',
+    title: 'title',
+    width: 'auto',
+    sort: true,
+    tree: true,
+    editor: 'input'
+  },
+  {
+    field: 'start',
+    title: 'start',
+    width: 'auto',
+    sort: true,
+    editor: 'date-input'
+  },
+  {
+    field: 'end',
+    title: 'end',
+    width: 'auto',
+    sort: true,
+    editor: 'date-input'
+  }
+];
+const option = {
+  overscrollBehavior: 'none',
+  records,
+  taskListTable: {
+    columns,
+  },
+  taskBar: {
+    startDateField: 'start',
+    endDateField: 'end',
+    progressField: 'progress'
+  },
+  timelineHeader: {
+    colWidth: 100,
+    backgroundColor: '#EEF1F5',
+    horizontalLine: {
+      lineWidth: 1,
+      lineColor: '#e1e4e8'
+    },
+    verticalLine: {
+      lineWidth: 1,
+      lineColor: '#e1e4e8'
+    },
+    scales: [
+      {
+        unit: 'day',
+        step: 1,
+        format(date) {
+          return date.dateIndex.toString();
+        },
+        style: {
+          fontSize: 20,
+          fontWeight: 'bold',
+          color: 'white',
+          strokeColor: 'black',
+          textAlign: 'right',
+          textBaseline: 'bottom',
+          backgroundColor: '#EEF1F5'
+        }
+      }
+    ]
+  },
+};
+const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID), option);
+
+```
+
+##
+
+[更多 demo 和详细教程](https://visactor.io/vtable)
+
+# 相关链接
+
+- [官网](https://visactor.io/vtable)
+
+# 生态系统
+
+| Project                                                     | Description                                                                            |
+| ----------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| [AI-generated Components](https://visactor.io/ai-vtable)    | AI-generated table component.                                                          |
+
+# 参与贡献
+
+如想参与贡献，请先阅读 [行为准则](./CODE_OF_CONDUCT.md) 和 [贡献指南](./CONTRIBUTING.zh-CN.md)。
+
+细流成河，终成大海！
+
+<a href="https://github.com/visactor/vtable/graphs/contributors"><img src="https://contrib.rocks/image?repo=visactor/vtable" /></a>
+
+# 许可证
+
+[MIT 协议](./LICENSE)

package/cjs/Gantt.d.ts

@@ -0,0 +1,200 @@
+import { Scenegraph } from './scenegraph/scenegraph';
+import type { ITaskBarStyle, GanttConstructorOptions, IGrid, ITimelineHeaderStyle, IMarkLine, ITaskBarLabelText, ITaskBarLabelTextStyle, IScrollStyle, IFrameStyle, ITableColumnsDefine, ITaskBarCustomLayout, ITimelineDateInfo, ITimelineScale, ILineStyle, ITaskCreationCustomLayout, ITaskLink, ITaskBarSelectedStyle, ITaskBarHoverStyle, ITaskLinkSelectedStyle, IPointStyle, TaskBarInteractionArgumentType, IEventOptions, IMilestoneStyle, IKeyboardOptions, IMarkLineCreateOptions } from './ts-types';
+import { TasksShowMode } from './ts-types';
+import type { ListTableConstructorOptions } from '@visactor/vtable';
+import { ListTable } from '@visactor/vtable';
+import { EventManager } from './event/event-manager';
+import { StateManager } from './state/state-manager';
+import { EventTarget } from './event/EventTarget';
+import { DataSource } from './data/DataSource';
+import { PluginManager } from './plugins/plugin-manager';
+import { ZoomScaleManager } from './zoom-scale';
+export declare function createRootElement(padding: any, className?: string): HTMLElement;
+export declare class Gantt extends EventTarget {
+    options: GanttConstructorOptions;
+    container: HTMLElement;
+    tableNoFrameWidth: number;
+    tableNoFrameHeight: number;
+    tableX: number;
+    tableY: number;
+    scenegraph: Scenegraph;
+    stateManager: StateManager;
+    eventManager: EventManager;
+    taskListTableInstance?: ListTable;
+    canvas: HTMLCanvasElement;
+    element: HTMLElement;
+    verticalSplitResizeLine: HTMLDivElement;
+    horizontalSplitLine: HTMLDivElement;
+    context: CanvasRenderingContext2D;
+    timeLineHeaderLevel: number;
+    itemCount: number;
+    drawHeight: number;
+    headerHeight: number;
+    gridHeight: number;
+    pluginManager: PluginManager;
+    parsedOptions: {
+        timeLineHeaderRowHeights: number[];
+        rowHeight: number;
+        timelineColWidth: number;
+        scrollStyle: IScrollStyle;
+        timelineHeaderVerticalLineStyle: ILineStyle;
+        timelineHeaderHorizontalLineStyle: ILineStyle;
+        timelineHeaderBackgroundColor: string;
+        timelineHeaderStyles: ITimelineHeaderStyle[];
+        sortedTimelineScales: (ITimelineScale & {
+            timelineDates?: ITimelineDateInfo[];
+        })[];
+        reverseSortedTimelineScales: (ITimelineScale & {
+            timelineDates?: ITimelineDateInfo[];
+        })[];
+        timeScaleIncludeHour: boolean;
+        grid: IGrid;
+        taskBarStyle: ITaskBarStyle | ((interactionArgs: TaskBarInteractionArgumentType) => ITaskBarStyle);
+        taskBarMilestoneStyle: IMilestoneStyle;
+        projectBarStyle: ITaskBarStyle | ((interactionArgs: TaskBarInteractionArgumentType) => ITaskBarStyle);
+        taskBarMilestoneHypotenuse: number;
+        taskBarHoverStyle: ITaskBarHoverStyle;
+        taskBarSelectedStyle: ITaskBarSelectedStyle;
+        taskBarSelectable: boolean;
+        taskBarLabelText: ITaskBarLabelText;
+        taskBarMoveable: boolean | ((interactionArgs: TaskBarInteractionArgumentType) => boolean);
+        moveTaskBarToExtendDateRange: boolean;
+        taskBarResizable: boolean | [boolean, boolean] | ((interactionArgs: TaskBarInteractionArgumentType) => boolean | [boolean, boolean]);
+        taskBarProgressAdjustable: boolean | ((interactionArgs: TaskBarInteractionArgumentType) => boolean);
+        taskBarDragOrder: boolean;
+        taskBarLabelStyle: ITaskBarLabelTextStyle;
+        taskBarCustomLayout: ITaskBarCustomLayout;
+        taskBarCreatable: boolean | ((interactionArgs: TaskBarInteractionArgumentType) => boolean);
+        taskBarCreationButtonStyle: ILineStyle & {
+            cornerRadius?: number;
+            backgroundColor?: string;
+        };
+        taskBarCreationCustomLayout: ITaskCreationCustomLayout;
+        taskBarCreationMaxWidth: number;
+        taskBarCreationMinWidth: number;
+        outerFrameStyle: IFrameStyle;
+        pixelRatio: number;
+        tasksShowMode: TasksShowMode;
+        projectSubTasksExpandable: boolean;
+        taskBarClip: boolean;
+        startDateField: string;
+        endDateField: string;
+        progressField: string;
+        minDate: Date;
+        maxDate: Date;
+        _minDateTime: number;
+        _maxDateTime: number;
+        markLine: IMarkLine[];
+        scrollToMarkLineDate: Date;
+        horizontalSplitLine: ILineStyle;
+        verticalSplitLine: ILineStyle;
+        verticalSplitLineHighlight: ILineStyle;
+        verticalSplitLineMoveable?: boolean;
+        overscrollBehavior: 'auto' | 'none';
+        dateFormat?: 'yyyy-mm-dd' | 'dd-mm-yyyy' | 'mm/dd/yyyy' | 'yyyy/mm/dd' | 'dd/mm/yyyy' | 'yyyy.mm.dd' | 'dd.mm.yyyy' | 'mm.dd.yyyy';
+        taskKeyField: string;
+        dependencyLinks?: ITaskLink[];
+        dependencyLinkCreatable: boolean;
+        dependencyLinkSelectable: boolean;
+        dependencyLinkDeletable: boolean;
+        dependencyLinkLineStyle: ILineStyle;
+        dependencyLinkSelectedLineStyle: ITaskLinkSelectedStyle;
+        dependencyLinkLineCreatePointStyle: IPointStyle;
+        dependencyLinkLineCreatingPointStyle: IPointStyle;
+        dependencyLinkLineCreatingStyle?: ILineStyle;
+        dependencyLinkDistanceToTaskBar?: number;
+        underlayBackgroundColor: string;
+        eventOptions: IEventOptions;
+        keyboardOptions: IKeyboardOptions;
+        markLineCreateOptions: IMarkLineCreateOptions;
+        zoom?: {
+            minMillisecondsPerPixel?: number;
+            maxMillisecondsPerPixel?: number;
+            step?: number;
+        };
+    };
+    private millisecondsPerPixel;
+    zoomScaleManager?: ZoomScaleManager;
+    recalculateTimeScale(): void;
+    zoomByFactor(factor: number, keepCenter?: boolean, centerX?: number): void;
+    taskTableWidth: number;
+    taskTableColumns: ITableColumnsDefine;
+    records: any[];
+    data: DataSource;
+    constructor(container: HTMLElement, options: GanttConstructorOptions);
+    renderTaskBarsTable(): void;
+    _updateSize(): void;
+    _updateListTableSize(taskListTableInstance: ListTable): void;
+    _generateListTable(): void;
+    _generateListTableOptions(): ListTableConstructorOptions;
+    getElement(): HTMLElement;
+    getContainer(): HTMLElement;
+    _sortScales(): void;
+    _generateTimeLineDateMap(): void;
+    getRowHeightByIndex(index: number): number;
+    getRowsHeightByIndex(startIndex: number, endIndex: number): number;
+    getAllRowsHeight(): number;
+    getAllHeaderRowsHeight(): number;
+    getAllDateColsWidth(): number;
+    getAllTaskBarsHeight(): number;
+    getRecordIndexByTaskShowIndex(showIndex: number): number | number[];
+    getTaskShowIndexByRecordIndex(index: number | number[]): number;
+    getRecordByIndex(taskShowIndex: number, sub_task_index?: number | number[]): any;
+    _refreshTaskBar(taskShowIndex: number, sub_task_index?: number): void;
+    _updateRecordToListTable(record: any, index: number | number[]): void;
+    getTaskInfoByTaskListIndex(taskShowIndex: number, sub_task_index?: number | number[]): {
+        taskRecord: any;
+        taskDays: number;
+        startDate: Date;
+        endDate: Date;
+        progress: number;
+    };
+    _updateStartDateToTaskRecord(startDate: Date, index: number, sub_task_index?: number | number[]): void;
+    _updateEndDateToTaskRecord(endDate: Date, index: number, sub_task_index?: number): void;
+    _updateStartEndDateToTaskRecord(startDate: Date, endDate: Date, index: number, sub_task_index?: number): void;
+    _updateProgressToTaskRecord(progress: number, index: number, sub_task_index?: number): void;
+    _dragOrderTaskRecord(source_index: number, source_sub_task_index: number, target_index: number, target_sub_task_index: number): void;
+    updateTaskRecord(record: any, task_index: number | number[]): void;
+    updateTaskRecord(record: any, task_index: number, sub_task_index: number): void;
+    setPixelRatio(pixelRatio: number): void;
+    updateTasksShowMode(tasksShowMode: TasksShowMode): void;
+    _resize(): void;
+    _syncPropsFromTable(): void;
+    private hasDataZoom;
+    private getDataZoomHeight;
+    getContext(): CanvasRenderingContext2D;
+    release(): void;
+    updateOption(options: GanttConstructorOptions): void;
+    setRecords(records: any[]): void;
+    updateScales(scales: ITimelineScale[]): void;
+    updateDateRange(minDate: string, maxDate: string): void;
+    updateMarkLine(markLine: IMarkLine[]): void;
+    addMarkLine(markLine: IMarkLine): void;
+    updateCurrentMarkLine(markLine: IMarkLine): void;
+    _scrollToMarkLine(): void;
+    scrollToMarkLine(date: Date): void;
+    addLink(link: ITaskLink): void;
+    deleteLink(link: ITaskLink): void;
+    get scrollTop(): number;
+    set scrollTop(value: number);
+    get scrollLeft(): number;
+    set scrollLeft(value: number);
+    getTaskBarRelativeRect(index: number): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    getDateColWidth(dateIndex: number): number;
+    getDateColsWidth(startDateIndex: number, endDateIndex: number): number;
+    getDateRangeByIndex(index: number): {
+        startDate: Date;
+        endDate: Date;
+    };
+    parseTimeFormat(date: string): string;
+    getTaskBarStyle(task_index: number, sub_task_index?: number | number[]): ITaskBarStyle;
+    formatDate(date: Date | string, format: string): string;
+    getCurrentMillisecondsPerPixel(): number;
+    setMillisecondsPerPixel(millisecondsPerPixel: number): void;
+    getCurrentZoomScaleLevel(): number;
+}