gantt-canvas-chart 1.3.1 → 1.5.0

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.1
+ * gantt-canvas-chart v1.5.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -121,6 +121,9 @@ class GanttChart {
   onDataLoad = null;
   scrollLoadTimer = null;
   constructor(rootContainer, data, config = {}) {
+    if (rootContainer.querySelector(".__gantt-chart-container")) {
+      throw new Error("GanttChart already exists in this container");
+    }
     const container = document.createElement("div");
     const scrollEl = document.createElement("div");
     const headerCanvas = document.createElement("canvas");
@@ -157,6 +160,7 @@ class GanttChart {
       todayColor: "#ff4d4f",
       offsetTop: 0,
       offsetLeft: 0,
+      scrollEdgeThresholds: 10,
       enabledLoadMore: [],
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#C1EFCF",
@@ -201,8 +205,8 @@ class GanttChart {
   }
   init() {
     this.buildTaskMap();
-    this.calculateFullTimeline();
     this.updatePixelsPerDay();
+    this.calculateFullTimeline();
     this.setupEvents();
     this.handleResize();
   }
@@ -274,6 +278,9 @@ class GanttChart {
       maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
     } else {
       this.taskMap.forEach(({ task }) => {
+        if (task.hide) {
+          return;
+        }
         const pStart = new Date(task.planStart);
         const pEnd = new Date(task.planEnd);
         if (pStart < minDate) minDate = pStart;
@@ -307,8 +314,8 @@ class GanttChart {
         break;
       case "Day":
       default:
-        this.timelineStart = DateUtils.addDays(minDate, -3);
-        this.timelineEnd = DateUtils.addDays(maxDate, 3);
+        this.timelineStart = DateUtils.addDays(minDate, 3);
+        this.timelineEnd = DateUtils.addDays(maxDate, -5);
         break;
     }
   }
@@ -372,9 +379,10 @@ class GanttChart {
     const viewportHeight = this.viewportHeight;
     const totalWidth = this.totalWidth;
     const totalHeight = this.totalHeight;
-    const atLeftEdge = scrollLeft <= 5;
-    const atRightEdge = scrollLeft + viewportWidth >= totalWidth - 5;
-    const atBottomEdge = scrollTop + viewportHeight >= totalHeight - 5;
+    const thresholds = this.config.scrollEdgeThresholds;
+    const atLeftEdge = scrollLeft <= thresholds;
+    const atRightEdge = scrollLeft + viewportWidth >= totalWidth - thresholds;
+    const atBottomEdge = scrollTop + viewportHeight >= totalHeight - thresholds;
     try {
       if (this.hasMoreDataLeft && atLeftEdge && scrollLeft < this.lastScrollLeft) {
         await this.loadMoreData("left");
@@ -390,9 +398,7 @@ class GanttChart {
   }
   // Add this method to reset scroll loading state
   resetScrollLoadingState() {
-    this.hasMoreDataLeft = true;
-    this.hasMoreDataRight = true;
-    this.hasMoreDataBottom = true;
+    this.updateLoadMoreConf();
     this.lastScrollLeft = 0;
     this.lastScrollTop = 0;
     if (this.scrollLoadTimer !== null) {
@@ -475,7 +481,7 @@ class GanttChart {
     if (this.scrollTop !== scrollTop) this.container.scrollTop = scrollTop;
   }
   updateVirtualRanges() {
-    const buffer = 200;
+    const buffer = 100;
     this.visibleDateRange = {
       start: this.xToDate(this.scrollLeft - buffer),
       end: this.xToDate(this.scrollLeft + this.viewportWidth + buffer)
@@ -505,8 +511,14 @@ class GanttChart {
     this.taskPositions.clear();
     for (let i = 0; i < this.data.length; i++) {
       const row = this.data[i];
+      if (row.hide) {
+        continue;
+      }
       const y = i * this.config.rowHeight;
       row.tasks.forEach((task) => {
+        if (task.hide) {
+          return;
+        }
         const x_plan_start = this.dateToX(new Date(task.planStart));
         const x_plan_end = this.dateToX(DateUtils.addDays(task.planEnd, 1));
         let x_actual_start = null, x_actual_end = null;
@@ -514,19 +526,25 @@ class GanttChart {
         let offset_x_actual_start = null, offset_x_actual_end = null;
         let x_plan_width = 0;
         let x_actual_width = 0;
+        let isValidPlanTask = false, isValidActualTask = false;
         const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
         const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
-        if (x_plan_start && x_plan_end) {
+        if (x_plan_start && x_plan_end && x_plan_start < x_plan_end) {
           x_plan_width = x_plan_end - x_plan_start;
           offset_x_plan_start = x_plan_start + x_plan_width * offsetX;
           x_plan_end && (offset_x_plan_end = offset_x_plan_start + x_plan_width * percent_plan);
+          isValidPlanTask = true;
         }
         if (task.actualStart) {
           x_actual_start = this.dateToX(new Date(task.actualStart));
+          isValidActualTask = true;
         }
         if (task.actualEnd) {
           x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));
         }
+        if (!isValidPlanTask && !isValidActualTask) {
+          return;
+        }
         if (x_actual_start) {
           x_actual_width = (x_actual_end ? x_actual_end : this.dateToX(this.today)) - x_actual_start;
           offset_x_actual_start = Math.round(x_actual_start + x_actual_width * offsetX_actual);

package/dist/index.css

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

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export declare function firstValidValue(...args: any[]): any;
 export declare class GanttChart {
     private rootContainer;
     container: HTMLElement;
-    private data;
+    data: GanttData;
     private config;
     private headerCanvas;
     private mainCanvas;
@@ -142,6 +142,7 @@ export declare interface GanttConfig {
     todayColor?: string;
     offsetTop?: number;
     offsetLeft?: number;
+    scrollEdgeThresholds?: number;
     enabledLoadMore?: [LoadMoreDirection?, LoadMoreDirection?, LoadMoreDirection?];
     viewFactors?: {
         Day: number;
@@ -159,13 +160,14 @@ export declare type LoadMoreDirection = 'left' | 'right' | 'bottom';
 export declare interface Row {
     id: string;
     name: string;
+    hide?: boolean;
     tasks: Task[];
 }
 
 export declare interface Task {
     id: string;
     name: string;
-    type?: 'task' | 'leave';
+    type?: 'task' | 'leave' | 'overtime' | string;
     planStart?: string;
     planEnd?: string;
     actualStart?: string;
@@ -177,6 +179,7 @@ export declare interface Task {
     styleClass?: string;
     planBorderColor?: string;
     actualBgColor?: string;
+    hide?: boolean;
     _data?: any;
     planOffsetPercent?: [number, number];
     actualOffsetPercent?: [number, number];

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.1
+ * gantt-canvas-chart v1.5.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -119,6 +119,9 @@ class GanttChart {
   onDataLoad = null;
   scrollLoadTimer = null;
   constructor(rootContainer, data, config = {}) {
+    if (rootContainer.querySelector(".__gantt-chart-container")) {
+      throw new Error("GanttChart already exists in this container");
+    }
     const container = document.createElement("div");
     const scrollEl = document.createElement("div");
     const headerCanvas = document.createElement("canvas");
@@ -155,6 +158,7 @@ class GanttChart {
       todayColor: "#ff4d4f",
       offsetTop: 0,
       offsetLeft: 0,
+      scrollEdgeThresholds: 10,
       enabledLoadMore: [],
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#C1EFCF",
@@ -199,8 +203,8 @@ class GanttChart {
   }
   init() {
     this.buildTaskMap();
-    this.calculateFullTimeline();
     this.updatePixelsPerDay();
+    this.calculateFullTimeline();
     this.setupEvents();
     this.handleResize();
   }
@@ -272,6 +276,9 @@ class GanttChart {
       maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
     } else {
       this.taskMap.forEach(({ task }) => {
+        if (task.hide) {
+          return;
+        }
         const pStart = new Date(task.planStart);
         const pEnd = new Date(task.planEnd);
         if (pStart < minDate) minDate = pStart;
@@ -305,8 +312,8 @@ class GanttChart {
         break;
       case "Day":
       default:
-        this.timelineStart = DateUtils.addDays(minDate, -3);
-        this.timelineEnd = DateUtils.addDays(maxDate, 3);
+        this.timelineStart = DateUtils.addDays(minDate, 3);
+        this.timelineEnd = DateUtils.addDays(maxDate, -5);
         break;
     }
   }
@@ -370,9 +377,10 @@ class GanttChart {
     const viewportHeight = this.viewportHeight;
     const totalWidth = this.totalWidth;
     const totalHeight = this.totalHeight;
-    const atLeftEdge = scrollLeft <= 5;
-    const atRightEdge = scrollLeft + viewportWidth >= totalWidth - 5;
-    const atBottomEdge = scrollTop + viewportHeight >= totalHeight - 5;
+    const thresholds = this.config.scrollEdgeThresholds;
+    const atLeftEdge = scrollLeft <= thresholds;
+    const atRightEdge = scrollLeft + viewportWidth >= totalWidth - thresholds;
+    const atBottomEdge = scrollTop + viewportHeight >= totalHeight - thresholds;
     try {
       if (this.hasMoreDataLeft && atLeftEdge && scrollLeft < this.lastScrollLeft) {
         await this.loadMoreData("left");
@@ -388,9 +396,7 @@ class GanttChart {
   }
   // Add this method to reset scroll loading state
   resetScrollLoadingState() {
-    this.hasMoreDataLeft = true;
-    this.hasMoreDataRight = true;
-    this.hasMoreDataBottom = true;
+    this.updateLoadMoreConf();
     this.lastScrollLeft = 0;
     this.lastScrollTop = 0;
     if (this.scrollLoadTimer !== null) {
@@ -473,7 +479,7 @@ class GanttChart {
     if (this.scrollTop !== scrollTop) this.container.scrollTop = scrollTop;
   }
   updateVirtualRanges() {
-    const buffer = 200;
+    const buffer = 100;
     this.visibleDateRange = {
       start: this.xToDate(this.scrollLeft - buffer),
       end: this.xToDate(this.scrollLeft + this.viewportWidth + buffer)
@@ -503,8 +509,14 @@ class GanttChart {
     this.taskPositions.clear();
     for (let i = 0; i < this.data.length; i++) {
       const row = this.data[i];
+      if (row.hide) {
+        continue;
+      }
       const y = i * this.config.rowHeight;
       row.tasks.forEach((task) => {
+        if (task.hide) {
+          return;
+        }
         const x_plan_start = this.dateToX(new Date(task.planStart));
         const x_plan_end = this.dateToX(DateUtils.addDays(task.planEnd, 1));
         let x_actual_start = null, x_actual_end = null;
@@ -512,19 +524,25 @@ class GanttChart {
         let offset_x_actual_start = null, offset_x_actual_end = null;
         let x_plan_width = 0;
         let x_actual_width = 0;
+        let isValidPlanTask = false, isValidActualTask = false;
         const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
         const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
-        if (x_plan_start && x_plan_end) {
+        if (x_plan_start && x_plan_end && x_plan_start < x_plan_end) {
           x_plan_width = x_plan_end - x_plan_start;
           offset_x_plan_start = x_plan_start + x_plan_width * offsetX;
           x_plan_end && (offset_x_plan_end = offset_x_plan_start + x_plan_width * percent_plan);
+          isValidPlanTask = true;
         }
         if (task.actualStart) {
           x_actual_start = this.dateToX(new Date(task.actualStart));
+          isValidActualTask = true;
         }
         if (task.actualEnd) {
           x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));
         }
+        if (!isValidPlanTask && !isValidActualTask) {
+          return;
+        }
         if (x_actual_start) {
           x_actual_width = (x_actual_end ? x_actual_end : this.dateToX(this.today)) - x_actual_start;
           offset_x_actual_start = Math.round(x_actual_start + x_actual_width * offsetX_actual);

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.1
+ * gantt-canvas-chart v1.5.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -123,6 +123,9 @@
     onDataLoad = null;
     scrollLoadTimer = null;
     constructor(rootContainer, data, config = {}) {
+      if (rootContainer.querySelector(".__gantt-chart-container")) {
+        throw new Error("GanttChart already exists in this container");
+      }
       const container = document.createElement("div");
       const scrollEl = document.createElement("div");
       const headerCanvas = document.createElement("canvas");
@@ -159,6 +162,7 @@
         todayColor: "#ff4d4f",
         offsetTop: 0,
         offsetLeft: 0,
+        scrollEdgeThresholds: 10,
         enabledLoadMore: [],
         viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
         planBorderColor: "#C1EFCF",
@@ -203,8 +207,8 @@
     }
     init() {
       this.buildTaskMap();
-      this.calculateFullTimeline();
       this.updatePixelsPerDay();
+      this.calculateFullTimeline();
       this.setupEvents();
       this.handleResize();
     }
@@ -276,6 +280,9 @@
         maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
       } else {
         this.taskMap.forEach(({ task }) => {
+          if (task.hide) {
+            return;
+          }
           const pStart = new Date(task.planStart);
           const pEnd = new Date(task.planEnd);
           if (pStart < minDate) minDate = pStart;
@@ -309,8 +316,8 @@
           break;
         case "Day":
         default:
-          this.timelineStart = DateUtils.addDays(minDate, -3);
-          this.timelineEnd = DateUtils.addDays(maxDate, 3);
+          this.timelineStart = DateUtils.addDays(minDate, 3);
+          this.timelineEnd = DateUtils.addDays(maxDate, -5);
           break;
       }
     }
@@ -374,9 +381,10 @@
       const viewportHeight = this.viewportHeight;
       const totalWidth = this.totalWidth;
       const totalHeight = this.totalHeight;
-      const atLeftEdge = scrollLeft <= 5;
-      const atRightEdge = scrollLeft + viewportWidth >= totalWidth - 5;
-      const atBottomEdge = scrollTop + viewportHeight >= totalHeight - 5;
+      const thresholds = this.config.scrollEdgeThresholds;
+      const atLeftEdge = scrollLeft <= thresholds;
+      const atRightEdge = scrollLeft + viewportWidth >= totalWidth - thresholds;
+      const atBottomEdge = scrollTop + viewportHeight >= totalHeight - thresholds;
       try {
         if (this.hasMoreDataLeft && atLeftEdge && scrollLeft < this.lastScrollLeft) {
           await this.loadMoreData("left");
@@ -392,9 +400,7 @@
     }
     // Add this method to reset scroll loading state
     resetScrollLoadingState() {
-      this.hasMoreDataLeft = true;
-      this.hasMoreDataRight = true;
-      this.hasMoreDataBottom = true;
+      this.updateLoadMoreConf();
       this.lastScrollLeft = 0;
       this.lastScrollTop = 0;
       if (this.scrollLoadTimer !== null) {
@@ -477,7 +483,7 @@
       if (this.scrollTop !== scrollTop) this.container.scrollTop = scrollTop;
     }
     updateVirtualRanges() {
-      const buffer = 200;
+      const buffer = 100;
       this.visibleDateRange = {
         start: this.xToDate(this.scrollLeft - buffer),
         end: this.xToDate(this.scrollLeft + this.viewportWidth + buffer)
@@ -507,8 +513,14 @@
       this.taskPositions.clear();
       for (let i = 0; i < this.data.length; i++) {
         const row = this.data[i];
+        if (row.hide) {
+          continue;
+        }
         const y = i * this.config.rowHeight;
         row.tasks.forEach((task) => {
+          if (task.hide) {
+            return;
+          }
           const x_plan_start = this.dateToX(new Date(task.planStart));
           const x_plan_end = this.dateToX(DateUtils.addDays(task.planEnd, 1));
           let x_actual_start = null, x_actual_end = null;
@@ -516,19 +528,25 @@
           let offset_x_actual_start = null, offset_x_actual_end = null;
           let x_plan_width = 0;
           let x_actual_width = 0;
+          let isValidPlanTask = false, isValidActualTask = false;
           const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
           const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
-          if (x_plan_start && x_plan_end) {
+          if (x_plan_start && x_plan_end && x_plan_start < x_plan_end) {
             x_plan_width = x_plan_end - x_plan_start;
             offset_x_plan_start = x_plan_start + x_plan_width * offsetX;
             x_plan_end && (offset_x_plan_end = offset_x_plan_start + x_plan_width * percent_plan);
+            isValidPlanTask = true;
           }
           if (task.actualStart) {
             x_actual_start = this.dateToX(new Date(task.actualStart));
+            isValidActualTask = true;
           }
           if (task.actualEnd) {
             x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));
           }
+          if (!isValidPlanTask && !isValidActualTask) {
+            return;
+          }
           if (x_actual_start) {
             x_actual_width = (x_actual_end ? x_actual_end : this.dateToX(this.today)) - x_actual_start;
             offset_x_actual_start = Math.round(x_actual_start + x_actual_width * offsetX_actual);

package/package.json

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