gantt-canvas-chart 1.6.1 → 1.6.2

package/README.md

@@ -46,11 +46,14 @@ npm install gantt-canvas-chart
 Or include directly via CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/gantt-canvas-chart/dist/gantt-chart.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gantt-canvas-chart/dist/index.umd.js"></script>
 ```
 
 ## Usage Example
 
+![Project plan](/assets/project-plan.jpg)
+![Project member tasks](/assets/project-member-task.jpg)
+
 ```typescript
 import { GanttChart } from 'gantt-canvas-chart';
 
@@ -115,3 +118,68 @@ ganttChart.setData(newData);
 // Update configuration
 ganttChart.updateConfig({ viewMode: 'Week' });
 ```
+
+## Full options list
+
+```typescript
+interface Task {
+  id: string;
+  name: string;
+  type?: 'task' | 'leave' | 'overtime' | string;
+  planStart?: string; // Plan start date, date separated by '/'
+  planEnd?: string;
+  actualStart?: string;
+  actualEnd?: string;
+  dependencies?: string[];
+  leftRemark?: string;
+  rightRemark?: string;
+  centerRemark?: string;
+  styleClass?: string;
+  planBorderColor?: string;
+  actualBgColor?: string;
+  hide?: boolean; // Whether to hide this data, default false
+  _data?: any; // Store custom data
+  planOffsetPercent?: [number, number]; // Draw daily task progress (plan) based on [start coordinate offset percentage, progress percentage]
+  actualOffsetPercent?: [number, number]; // Draw daily task progress (actual) based on [start coordinate offset percentage, progress percentage]
+}
+
+interface Row {
+  id: string;
+  name: string;
+  hide?: boolean; // Whether to hide this row
+  tasks: Task[];
+}
+
+type GanttData = Row[];
+
+type LoadMoreDirection = 'left' | 'right' | 'bottom';
+
+interface GanttConfig {
+  viewMode?: 'Day' | 'Week' | 'Month' | 'Year';
+  planBorderColor?: string;
+  actualBgColor?: string;
+  headerBgColor?: string;
+  rowHeight?: number;
+  headerHeight?: number;
+  showPlan?: boolean;
+  showActual?: boolean;
+  showRowLines?: boolean;
+  showColLines?: boolean;
+  showLeftRemark?: boolean;
+  showRightRemark?: boolean;
+  showCenterRemark?: boolean;
+  showTooltip?: boolean;
+  tooltipColor?: 'black' | 'white';
+  todayColor?: string;
+  weekendBgColor?: string; // Weekend/holiday header background color
+  holidays?: string[]; // Collection of holiday dates, recommended format yyyy/MM/dd
+  dateSeparator?: string; // Date format separator in GanttData, default '/'
+  offsetTop?: number; // Tooltip position top offset (when embedded in micro frontend framework, child app page elements have offset relative to main app)
+  offsetLeft?: number; // Tooltip position left offset (when embedded in micro frontend framework, child app page elements have offset relative to main app)
+  scrollEdgeThresholds?: number; // Scroll edge threshold to trigger load more
+  xGap?: number; // Gap between tasks, default 0
+  enabledLoadMore?: [LoadMoreDirection?, LoadMoreDirection?, LoadMoreDirection?];
+  viewFactors?: { Day: number; Week: number; Month: number; Year: number };
+  tooltipFormat?: null | ((task: Row, date: Date, config: GanttConfig) => string);
+}
+```

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.6.1
+ * gantt-canvas-chart v1.6.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -203,6 +203,8 @@ class GanttChart {
       showRightRemark: false,
       showCenterRemark: false,
       showTooltip: true,
+      queryStartDate: null,
+      queryEndDate: null,
       tooltipFormat: null,
       tooltipColor: "black",
       todayColor: "#ff4d4f",
@@ -358,9 +360,10 @@ class GanttChart {
     const currentYear = this.today.getFullYear();
     let minDate = new Date(9999, 0, 1);
     let maxDate = new Date(1e3, 0, 1);
+    const { queryStartDate, queryEndDate } = this.config;
     if (this.data.length === 0) {
-      minDate = /* @__PURE__ */ new Date();
-      maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
+      minDate = queryStartDate ? queryStartDate : /* @__PURE__ */ new Date();
+      maxDate = DateUtils.addDays(queryEndDate ? queryEndDate : /* @__PURE__ */ new Date(), 60);
     } else {
       this.taskMap.forEach(({ task }) => {
         if (task.hide) {
@@ -380,6 +383,12 @@ class GanttChart {
     }
     this.minDate = minDate;
     this.maxDate = maxDate;
+    if (queryStartDate && queryStartDate < minDate) {
+      minDate = queryStartDate;
+    }
+    if (queryEndDate && queryEndDate > maxDate) {
+      maxDate = queryEndDate;
+    }
     const minYear = minDate.getFullYear();
     const maxYear = maxDate.getFullYear();
     minDate = DateUtils.addDays(minYear === 9999 ? new Date(currentYear, 0, 1) : minDate, -7);
@@ -597,9 +606,9 @@ class GanttChart {
     return ctx;
   }
   /**
-   * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
-   * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
-   */
+    * Helper function: Pixel alignment (ensures 1px lines are crisp on different devices like MAC/Windows)
+    * Used for 1px lines to position them at x.5 coordinates, filling a physical pixel to avoid blurriness
+    */
   snap(val) {
     return Math.floor(val) + 0.5;
   }
@@ -1204,9 +1213,9 @@ class GanttChart {
     this.showTooltip = false;
   }
   /**
-   * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
-   * @param diffMilliseconds 距离目标日期时间的差异毫秒数
-   * @param pixelsPerDay 每日的像素数
+   * Calculate the percentage width of a task (convenient for drawing daily tasks accurate to specific times)
+   * @param diffMilliseconds The difference in milliseconds from the target date
+   * @param pixelsPerDay Number of pixels per day
    * @returns
    */
   static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.6.1
+ * gantt-canvas-chart v1.6.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */

package/dist/index.d.ts

@@ -121,8 +121,8 @@ export declare class GanttChart {
     private updateDimensions;
     private setupCanvas;
     /**
-     * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
-     * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+     * Helper function: Pixel alignment (ensures 1px lines are crisp on different devices like MAC/Windows)
+     * Used for 1px lines to position them at x.5 coordinates, filling a physical pixel to avoid blurriness
      */
     snap(val: number): number;
     private calculateAllTaskPositions;
@@ -142,9 +142,9 @@ export declare class GanttChart {
     private getTaskTooltipHtml;
     private handleMouseLeave;
     /**
-     * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
-     * @param diffMilliseconds 距离目标日期时间的差异毫秒数
-     * @param pixelsPerDay 每日的像素数
+     * Calculate the percentage width of a task (convenient for drawing daily tasks accurate to specific times)
+     * @param diffMilliseconds The difference in milliseconds from the target date
+     * @param pixelsPerDay Number of pixels per day
      * @returns
      */
     static getTaskWidthPercent(diffMilliseconds: number, pixelsPerDay: number): number;
@@ -180,6 +180,8 @@ export declare interface GanttConfig {
     showRightRemark?: boolean;
     showCenterRemark?: boolean;
     showTooltip?: boolean;
+    queryStartDate?: Date | null;
+    queryEndDate?: Date | null;
     tooltipColor?: 'black' | 'white';
     todayColor?: string;
     weekendBgColor?: string;

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.6.1
+ * gantt-canvas-chart v1.6.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -201,6 +201,8 @@ class GanttChart {
       showRightRemark: false,
       showCenterRemark: false,
       showTooltip: true,
+      queryStartDate: null,
+      queryEndDate: null,
       tooltipFormat: null,
       tooltipColor: "black",
       todayColor: "#ff4d4f",
@@ -356,9 +358,10 @@ class GanttChart {
     const currentYear = this.today.getFullYear();
     let minDate = new Date(9999, 0, 1);
     let maxDate = new Date(1e3, 0, 1);
+    const { queryStartDate, queryEndDate } = this.config;
     if (this.data.length === 0) {
-      minDate = /* @__PURE__ */ new Date();
-      maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
+      minDate = queryStartDate ? queryStartDate : /* @__PURE__ */ new Date();
+      maxDate = DateUtils.addDays(queryEndDate ? queryEndDate : /* @__PURE__ */ new Date(), 60);
     } else {
       this.taskMap.forEach(({ task }) => {
         if (task.hide) {
@@ -378,6 +381,12 @@ class GanttChart {
     }
     this.minDate = minDate;
     this.maxDate = maxDate;
+    if (queryStartDate && queryStartDate < minDate) {
+      minDate = queryStartDate;
+    }
+    if (queryEndDate && queryEndDate > maxDate) {
+      maxDate = queryEndDate;
+    }
     const minYear = minDate.getFullYear();
     const maxYear = maxDate.getFullYear();
     minDate = DateUtils.addDays(minYear === 9999 ? new Date(currentYear, 0, 1) : minDate, -7);
@@ -595,9 +604,9 @@ class GanttChart {
     return ctx;
   }
   /**
-   * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
-   * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
-   */
+    * Helper function: Pixel alignment (ensures 1px lines are crisp on different devices like MAC/Windows)
+    * Used for 1px lines to position them at x.5 coordinates, filling a physical pixel to avoid blurriness
+    */
   snap(val) {
     return Math.floor(val) + 0.5;
   }
@@ -1202,9 +1211,9 @@ class GanttChart {
     this.showTooltip = false;
   }
   /**
-   * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
-   * @param diffMilliseconds 距离目标日期时间的差异毫秒数
-   * @param pixelsPerDay 每日的像素数
+   * Calculate the percentage width of a task (convenient for drawing daily tasks accurate to specific times)
+   * @param diffMilliseconds The difference in milliseconds from the target date
+   * @param pixelsPerDay Number of pixels per day
    * @returns
    */
   static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.6.1
+ * gantt-canvas-chart v1.6.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -205,6 +205,8 @@
         showRightRemark: false,
         showCenterRemark: false,
         showTooltip: true,
+        queryStartDate: null,
+        queryEndDate: null,
         tooltipFormat: null,
         tooltipColor: "black",
         todayColor: "#ff4d4f",
@@ -360,9 +362,10 @@
       const currentYear = this.today.getFullYear();
       let minDate = new Date(9999, 0, 1);
       let maxDate = new Date(1e3, 0, 1);
+      const { queryStartDate, queryEndDate } = this.config;
       if (this.data.length === 0) {
-        minDate = /* @__PURE__ */ new Date();
-        maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
+        minDate = queryStartDate ? queryStartDate : /* @__PURE__ */ new Date();
+        maxDate = DateUtils.addDays(queryEndDate ? queryEndDate : /* @__PURE__ */ new Date(), 60);
       } else {
         this.taskMap.forEach(({ task }) => {
           if (task.hide) {
@@ -382,6 +385,12 @@
       }
       this.minDate = minDate;
       this.maxDate = maxDate;
+      if (queryStartDate && queryStartDate < minDate) {
+        minDate = queryStartDate;
+      }
+      if (queryEndDate && queryEndDate > maxDate) {
+        maxDate = queryEndDate;
+      }
       const minYear = minDate.getFullYear();
       const maxYear = maxDate.getFullYear();
       minDate = DateUtils.addDays(minYear === 9999 ? new Date(currentYear, 0, 1) : minDate, -7);
@@ -599,9 +608,9 @@
       return ctx;
     }
     /**
-     * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
-     * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
-     */
+      * Helper function: Pixel alignment (ensures 1px lines are crisp on different devices like MAC/Windows)
+      * Used for 1px lines to position them at x.5 coordinates, filling a physical pixel to avoid blurriness
+      */
     snap(val) {
       return Math.floor(val) + 0.5;
     }
@@ -1206,9 +1215,9 @@
       this.showTooltip = false;
     }
     /**
-     * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
-     * @param diffMilliseconds 距离目标日期时间的差异毫秒数
-     * @param pixelsPerDay 每日的像素数
+     * Calculate the percentage width of a task (convenient for drawing daily tasks accurate to specific times)
+     * @param diffMilliseconds The difference in milliseconds from the target date
+     * @param pixelsPerDay Number of pixels per day
      * @returns
      */
     static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-canvas-chart",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "High performance Gantt chart component based on Canvas, can be applied to any framework",
   "type": "module",
   "main": "dist/index.es.js",