@visactor/vtable-gantt 1.7.1 → 1.7.2

package/README.md

@@ -5,22 +5,22 @@
 </div>
 
 <div align="center">
-  <h1>VTable</h1>
+  <h1>VTable-Gantt</h1>
 </div>
 
 <div align="center">
 
-VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.
+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="">Introduction</a> •
-  <a href="">demo</a> •
-  <a href="">Tutorial</a> •
-  <a href="">API</a>•
+  <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.svg)](https://www.npmjs.com/package/@visactor/vtable)
-[![npm Download](https://img.shields.io/npm/dm/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/vtable)
+[![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>
@@ -39,20 +39,25 @@ English| [简体中文](./README.zh-CN.md)
 
 # Introduction
 
-VTable is a canvas table library based on visual rendering engine [VRender](https://github.com/VisActor/VRender). 
+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:
 
-The core capabilities are as follows:
-
-1. Extreme performance: Supports fast computation and rendering of millions of data points.
-2. Multidimensional analysis: Automatically analyzes and presents multidimensional data.
-3. Strong expressiveness: Provides flexible and powerful graphic capabilities, seamlessly integrating with charts of [VChart](https://github.com/VisActor/VChart).
+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. vtable: VTable components
-2. vtable-docs: VTable documentation
+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-export: Table export tool code
+5. packages/vtable-search: Table search tool code
+6. packages/react-vtable: React version of the table component
+7. packages/vue-vtable: Vue version of the table component
+8. docs: Include VTable site tutorials, demos,apis and options, and also contains all Chinese and English documents.
 
 # Usage
 
@@ -62,66 +67,122 @@ This repository includes the following packages:
 
 ```bash
 // npm
-npm install @visactor/vtable
+npm install @visactor/vtable-gantt
 
 // yarn
-yarn add @visactor/vtable
+yarn add @visactor/vtable-gantt
 ```
 
 ## Quick Start
 
 ```javascript
-import * as VTable from '@visactor/vtable';
-
-const columns =[
-    {
-        "field": "Order ID",
-        "caption": "Order ID",
-    },
-    {
-        "field": "Customer ID",
-        "caption": "Customer ID",
-    },
-    {
-        "field": "Product Name",
-        "caption": "Product Name",
-    },
-    {
-        "field": "Sales",
-        "caption": "Sales",
-    },
-    {
-        "field": "Profit",
-        "caption": "Profit",
-    }
+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 option = {
-  records:[
-      {
-      "Order ID": "CA-2018-156720",
-      "Customer ID": "JM-15580",
-      "Product Name": "Bagged Rubber Bands",
-      "Sales": "3.024",
-      "Profit": "-0.605"
+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'
   },
   {
-      "Order ID": "CA-2018-115427",
-      "Customer ID": "EB-13975",
-      "Product Name": "GBC Binding covers",
-      "Sales": "20.72",
-      "Profit": "6.475"
+    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'
+        }
+      }
+    ]
   },
-  ...
-  ],
-  columns,
-  widthMode:'standard'
 };
-const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
-
-
-
-
+const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID), option);
 ```
 
 ##

package/README.zh-CN.md

@@ -0,0 +1,214 @@
+<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-export: 表格导出工具代码
+5. packages/vtable-search: 表格搜索工具代码
+6. packages/react-vtable: React 版本的表格组件
+7. packages/vue-vtable: Vue 版本的表格组件
+8. 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/index.d.ts

@@ -3,5 +3,5 @@ import * as TYPES from './ts-types';
 import type { ColumnDefine, ColumnsDefine, LinkColumnDefine, ChartColumnDefine, ImageColumnDefine, SparklineColumnDefine, ProgressbarColumnDefine, TextColumnDefine, GroupColumnDefine, TextAlignType, TextBaselineType } from '@visactor/vtable';
 import { Gantt } from './Gantt';
 import * as tools from './tools';
-export declare const version = "1.7.1";
+export declare const version = "1.7.2";
 export { TYPES, GanttConstructorOptions, Gantt, ColumnsDefine, ColumnDefine, LinkColumnDefine, ChartColumnDefine, ImageColumnDefine, SparklineColumnDefine, ProgressbarColumnDefine, TextColumnDefine, GroupColumnDefine, TextAlignType, TextBaselineType, tools };

package/cjs/index.js

@@ -44,5 +44,5 @@ Object.defineProperty(exports, "Gantt", {
 
 const tools = __importStar(require("./tools"));
 
-exports.tools = tools, exports.version = "1.7.1";
+exports.tools = tools, exports.version = "1.7.2";
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,kDAAoC;AAqBlC,sBAAK;AAPP,mCAAgC;AAS9B,sFATO,aAAK,OASP;AARP,+CAAiC;AAoB/B,sBAAK;AAnBM,QAAA,OAAO,GAAG,OAAO,CAAC","file":"index.js","sourcesContent":["import type { GanttConstructorOptions } from './ts-types';\nimport * as TYPES from './ts-types';\nimport type {\n  ColumnDefine,\n  ColumnsDefine,\n  LinkColumnDefine,\n  ChartColumnDefine,\n  ImageColumnDefine,\n  SparklineColumnDefine,\n  ProgressbarColumnDefine,\n  TextColumnDefine,\n  GroupColumnDefine,\n  TextAlignType,\n  TextBaselineType\n} from '@visactor/vtable';\nimport { Gantt } from './Gantt';\nimport * as tools from './tools';\nexport const version = \"1.7.1\";\n/**\n * @namespace VTable\n */\nexport {\n  TYPES,\n  GanttConstructorOptions,\n  Gantt,\n  ColumnsDefine,\n  ColumnDefine,\n  LinkColumnDefine,\n  ChartColumnDefine,\n  ImageColumnDefine,\n  SparklineColumnDefine,\n  ProgressbarColumnDefine,\n  TextColumnDefine,\n  GroupColumnDefine,\n  TextAlignType,\n  TextBaselineType,\n  tools\n};\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,kDAAoC;AAqBlC,sBAAK;AAPP,mCAAgC;AAS9B,sFATO,aAAK,OASP;AARP,+CAAiC;AAoB/B,sBAAK;AAnBM,QAAA,OAAO,GAAG,OAAO,CAAC","file":"index.js","sourcesContent":["import type { GanttConstructorOptions } from './ts-types';\nimport * as TYPES from './ts-types';\nimport type {\n  ColumnDefine,\n  ColumnsDefine,\n  LinkColumnDefine,\n  ChartColumnDefine,\n  ImageColumnDefine,\n  SparklineColumnDefine,\n  ProgressbarColumnDefine,\n  TextColumnDefine,\n  GroupColumnDefine,\n  TextAlignType,\n  TextBaselineType\n} from '@visactor/vtable';\nimport { Gantt } from './Gantt';\nimport * as tools from './tools';\nexport const version = \"1.7.2\";\n/**\n * @namespace VTable\n */\nexport {\n  TYPES,\n  GanttConstructorOptions,\n  Gantt,\n  ColumnsDefine,\n  ColumnDefine,\n  LinkColumnDefine,\n  ChartColumnDefine,\n  ImageColumnDefine,\n  SparklineColumnDefine,\n  ProgressbarColumnDefine,\n  TextColumnDefine,\n  GroupColumnDefine,\n  TextAlignType,\n  TextBaselineType,\n  tools\n};\n"]}

package/cjs/tools/isx.js

@@ -113,5 +113,4 @@ exports.isDocument = isDocument;
 
 const isGlobal = v => (0, exports.isIt)(v, "global");
 
-exports.isGlobal = isGlobal;
-//# sourceMappingURL=isx.js.map
+exports.isGlobal = isGlobal;

package/cjs/ts-types/events.js

@@ -2,4 +2,5 @@
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-});
+});
+//# sourceMappingURL=events.js.map