gantt-canvas-chart 1.0.0 → 1.0.1-alpha.0

package/dist/core/ganttChart.d.ts

@@ -26,6 +26,9 @@ export declare class GanttChart {
     private resizeObserver;
     private taskPositions;
     private taskMap;
+    private boundHandleMouseMove;
+    private boundHandleMouseLeave;
+    private boundHandleScroll;
     constructor(rootContainer: HTMLElement, data: GanttData, config?: GanttConfig);
     private init;
     private buildTaskMap;
@@ -58,4 +61,11 @@ export declare class GanttChart {
     private handleMouseMove;
     private getTaskTooltipHtml;
     private handleMouseLeave;
+    /**
+     * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
+     * @param diffMilliseconds 距离目标日期时间的差异毫秒数
+     * @param pixelsPerDay 每日的像素数
+     * @returns
+     */
+    static getTaskWidthPercent(diffMilliseconds: number, pixelsPerDay: number): number;
 }

package/dist/core/types.d.ts

@@ -13,6 +13,9 @@ export interface Task {
     styleClass?: string;
     planBorderColor?: string;
     actualBgColor?: string;
+    _data?: any;
+    planOffsetPercent?: [number, number];
+    actualOffsetPercent?: [number, number];
 }
 export interface Row {
     id: string;
@@ -35,8 +38,16 @@ export interface GanttConfig {
     showCenterRemark?: boolean;
     showTooltip?: boolean;
     tooltipColor?: 'black' | 'white';
+    todayColor?: string;
     offsetTop?: number;
     offsetLeft?: number;
+    viewFactors?: {
+        Day: number;
+        Week: number;
+        Month: number;
+        Year: number;
+    };
+    tooltipFormat?: null | ((task: Row, date: Date, config: GanttConfig) => string);
 }
 export interface TaskPosition {
     x_plan_start: number;

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.0
+ * gantt-canvas-chart v1.0.1-alpha.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -22,7 +22,10 @@ class DateUtils {
       format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
     for (let k in o)
       if (new RegExp("(" + k + ")").test(format))
-        format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
+        format = format.replace(
+          RegExp.$1,
+          RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
+        );
     return format;
   }
   static addDays(date, days) {
@@ -42,7 +45,9 @@ class DateUtils {
     return r;
   }
   static diffDays(date1, date2) {
-    return Math.round((new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()).getTime() - new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()).getTime()) / this.ONE_DAY_MS);
+    return Math.round(
+      (new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()).getTime() - new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()).getTime()) / this.ONE_DAY_MS
+    );
   }
   static diffDaysInclusive(date1, date2) {
     return this.diffDays(date1, date2) + 1;
@@ -59,8 +64,7 @@ class DateUtils {
   static getStartOfWeek(d) {
     const date = new Date(d);
     const day = date.getDay() || 7;
-    if (day !== 1)
-      date.setHours(-24 * (day - 1));
+    if (day !== 1) date.setHours(-24 * (day - 1));
     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
   }
   static getStartOfMonth(d) {
@@ -104,6 +108,9 @@ class GanttChart {
   resizeObserver;
   taskPositions;
   taskMap;
+  boundHandleMouseMove;
+  boundHandleMouseLeave;
+  boundHandleScroll;
   constructor(rootContainer, data, config = {}) {
     const container = document.createElement("div");
     const scrollEl = document.createElement("div");
@@ -134,9 +141,12 @@ class GanttChart {
       showRightRemark: false,
       showCenterRemark: false,
       showTooltip: true,
+      tooltipFormat: null,
       tooltipColor: "black",
+      todayColor: "#ff4d4f",
       offsetTop: 0,
       offsetLeft: 0,
+      viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#caeed2",
       actualBgColor: "#78c78f",
       ...config
@@ -165,6 +175,9 @@ class GanttChart {
     this.totalHeight = 0;
     this.taskPositions = /* @__PURE__ */ new Map();
     this.taskMap = /* @__PURE__ */ new Map();
+    this.boundHandleMouseMove = this.handleMouseMove.bind(this);
+    this.boundHandleMouseLeave = this.handleMouseLeave.bind(this);
+    this.boundHandleScroll = this.handleScroll.bind(this);
     this.init();
   }
   init() {
@@ -181,7 +194,7 @@ class GanttChart {
     });
   }
   setupEvents() {
-    this.container.addEventListener("scroll", this.handleScroll.bind(this));
+    this.container.addEventListener("scroll", this.boundHandleScroll);
     this.handleResize = this.handleResize.bind(this);
     if (window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(this.handleResize);
@@ -190,8 +203,8 @@ class GanttChart {
       }, 100);
     }
     if (this.config.showTooltip) {
-      this.mainCanvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
-      this.mainCanvas.addEventListener("mouseleave", this.handleMouseLeave.bind(this));
+      this.mainCanvas.addEventListener("mousemove", this.boundHandleMouseMove);
+      this.mainCanvas.addEventListener("mouseleave", this.boundHandleMouseLeave);
     }
   }
   updateConfig(newConfig) {
@@ -216,6 +229,9 @@ class GanttChart {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
+    this.container.removeEventListener("scroll", this.boundHandleScroll);
+    this.mainCanvas.removeEventListener("mousemove", this.boundHandleMouseMove);
+    this.mainCanvas.removeEventListener("mouseleave", this.boundHandleMouseLeave);
     this.container.remove();
   }
   calculateFullTimeline() {
@@ -228,17 +244,13 @@ class GanttChart {
       this.taskMap.forEach(({ task }) => {
         const pStart = new Date(task.planStart);
         const pEnd = new Date(task.planEnd);
-        if (pStart < minDate)
-          minDate = pStart;
-        if (pEnd > maxDate)
-          maxDate = pEnd;
+        if (pStart < minDate) minDate = pStart;
+        if (pEnd > maxDate) maxDate = pEnd;
         if (task.actualStart) {
           const aStart = new Date(task.actualStart);
           const aEnd = new Date(task.actualEnd);
-          if (aStart < minDate)
-            minDate = aStart;
-          if (aEnd > maxDate)
-            maxDate = aEnd;
+          if (aStart < minDate) minDate = aStart;
+          if (aEnd > maxDate) maxDate = aEnd;
         }
       });
     }
@@ -265,8 +277,7 @@ class GanttChart {
     }
   }
   updatePixelsPerDay() {
-    const viewFactors = { Day: 80, Week: 20, Month: 15, Year: 6 };
-    this.pixelsPerDay = viewFactors[this.config.viewMode];
+    this.pixelsPerDay = this.config.viewFactors[this.config.viewMode];
   }
   dateToX(date) {
     return DateUtils.diffDays(this.timelineStart, date) * this.pixelsPerDay;
@@ -294,8 +305,7 @@ class GanttChart {
     requestAnimationFrame(() => this.render());
   }
   setScrollTop(scrollTop) {
-    if (this.scrollTop !== scrollTop)
-      this.container.scrollTop = scrollTop;
+    if (this.scrollTop !== scrollTop) this.container.scrollTop = scrollTop;
   }
   updateVirtualRanges() {
     const buffer = 200;
@@ -504,16 +514,13 @@ class GanttChart {
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
     this.taskMap.forEach(({ task }) => {
-      if (!task.dependencies || task.dependencies.length === 0)
-        return;
+      if (!task.dependencies || task.dependencies.length === 0) return;
       const toPos = this.taskPositions.get(task.id);
-      if (!toPos)
-        return;
+      if (!toPos) return;
       const toRowIndex = this.taskMap.get(task.id).row;
       task.dependencies.forEach((depId) => {
         const fromPos = this.taskPositions.get(depId);
-        if (!fromPos)
-          return;
+        if (!fromPos) return;
         const fromRowIndex = this.taskMap.get(depId).row;
         const isAdjacent = Math.abs(toRowIndex - fromRowIndex) === 1;
         const fromX = Math.max(fromPos.x_plan_end, fromPos.x_actual_end || fromPos.x_plan_end);
@@ -566,12 +573,10 @@ class GanttChart {
     for (let i = 0; i < this.data.length; i++) {
       const row = this.data[i];
       const y = i * this.config.rowHeight;
-      if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight)
-        continue;
+      if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
       row.tasks.forEach((task) => {
         const pos = this.taskPositions.get(task.id);
-        if (!pos)
-          return;
+        if (!pos) return;
         if (pos.x_plan_end < this.scrollLeft || pos.x_plan_start > this.scrollLeft + this.viewportWidth) {
           if (!pos.x_actual_start || pos.x_actual_end < this.scrollLeft || pos.x_actual_start > this.scrollLeft + this.viewportWidth)
             return;
@@ -587,8 +592,7 @@ class GanttChart {
     if (this.config.showRowLines) {
       for (let i = 0; i <= this.data.length; i++) {
         const y = i * this.config.rowHeight;
-        if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight)
-          continue;
+        if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
         ctx.moveTo(this.scrollLeft, y);
         ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
       }
@@ -649,17 +653,14 @@ class GanttChart {
               nextDate = DateUtils.addMonths(currentDate, 6);
             else if (currentDate.getMonth() === 6 && currentDate.getDate() === 1)
               nextDate = DateUtils.addMonths(currentDate, 6);
-            else
-              nextDate = DateUtils.addDays(currentDate, 1);
+            else nextDate = DateUtils.addDays(currentDate, 1);
             break;
           default:
             nextDate = DateUtils.addDays(currentDate, 1);
             break;
         }
-        if (nextDate.getTime() === currentDate.getTime())
-          currentDate = DateUtils.addDays(currentDate, 1);
-        else
-          currentDate = nextDate;
+        if (nextDate.getTime() === currentDate.getTime()) currentDate = DateUtils.addDays(currentDate, 1);
+        else currentDate = nextDate;
       }
     }
     ctx.stroke();
@@ -667,7 +668,7 @@ class GanttChart {
   drawToday(ctx) {
     const x = this.dateToX(this.today);
     if (x >= this.scrollLeft && x <= this.scrollLeft + this.viewportWidth) {
-      ctx.strokeStyle = "#ff4d4f";
+      ctx.strokeStyle = this.config.todayColor;
       ctx.lineWidth = 2;
       ctx.beginPath();
       ctx.moveTo(x, this.scrollTop);
@@ -681,17 +682,23 @@ class GanttChart {
     const taskY = y + this.config.rowHeight * 0.15 + offset;
     const taskHeight = this.config.rowHeight * 0.7 - offset;
     const textY = y + this.config.rowHeight / 2 + offset;
+    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 (this.config.showActual && pos.x_actual_start) {
-      const aWidth = (pos.x_actual_end ? pos.x_actual_end : pos.x_plan_end) - pos.x_actual_start;
       ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-      ctx.fillRect(pos.x_actual_start, taskY, aWidth, taskHeight);
+      const aWidth = (pos.x_actual_end ? pos.x_actual_end : this.dateToX(this.today)) - pos.x_actual_start;
+      pos.x_actual_start += aWidth * offsetX_actual;
+      pos.x_actual_end && (pos.x_actual_end = pos.x_actual_start + aWidth * percent_actual);
+      ctx.fillRect(pos.x_actual_start, taskY, aWidth * percent_actual, taskHeight);
     }
     if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
       ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
+      pos.x_plan_start += width * offsetX;
+      pos.x_plan_end && (pos.x_plan_end = pos.x_plan_start + width * percent_plan);
       ctx.lineWidth = 4;
       ctx.beginPath();
       ctx.moveTo(pos.x_plan_start, taskY);
-      ctx.lineTo(pos.x_plan_start + width, taskY);
+      ctx.lineTo(pos.x_plan_start + width * percent_plan, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#333";
@@ -734,25 +741,32 @@ class GanttChart {
     const chartY = mouseY + this.scrollTop;
     const rowIndex = Math.floor(chartY / this.config.rowHeight);
     const date = this.xToDate(chartX);
-    if (rowIndex < 0 || rowIndex >= this.data.length)
-      return this.handleMouseLeave();
+    if (rowIndex < 0 || rowIndex >= this.data.length) return this.handleMouseLeave();
     const row = this.data[rowIndex];
-    const overlappingTasks = row.tasks.filter((task) => {
-      const pStart = new Date(task.planStart), pEnd = DateUtils.addDays(new Date(task.planEnd), 1);
-      if (date >= pStart && date < pEnd)
-        return true;
-      if (task.actualStart) {
-        const aStart = new Date(task.actualStart), aEnd = DateUtils.addDays(new Date(task.actualEnd), 1);
-        if (date >= aStart && date < aEnd)
-          return true;
+    if (this.config.tooltipFormat) {
+      const htmlStr = this.config.tooltipFormat(row, date, this.config);
+      if (!htmlStr) {
+        return this.handleMouseLeave();
       }
-      return false;
-    });
-    if (overlappingTasks.length === 0)
-      return this.handleMouseLeave();
-    let html = `<strong>${row.name}</strong> (${DateUtils.format(date, "yyyy-MM-dd")})<hr class="__gantt_tooltip-divider">`;
-    overlappingTasks.forEach((task) => html += this.getTaskTooltipHtml(task));
-    this.tooltip.innerHTML = html;
+      this.tooltip.innerHTML = htmlStr;
+    } else {
+      const overlappingTasks = row.tasks.filter((task) => {
+        const pStart = new Date(task.planStart), pEnd = DateUtils.addDays(new Date(task.planEnd), 1);
+        if (date >= pStart && date < pEnd) return true;
+        if (task.actualStart) {
+          const aStart = new Date(task.actualStart), aEnd = DateUtils.addDays(new Date(task.actualEnd), 1);
+          if (date >= aStart && date < aEnd) return true;
+        }
+        return false;
+      });
+      if (overlappingTasks.length === 0) return this.handleMouseLeave();
+      let html = `<strong>${row.name}</strong> (${DateUtils.format(
+        date,
+        "yyyy-MM-dd"
+      )})<hr class="__gantt_tooltip-divider">`;
+      overlappingTasks.forEach((task) => html += this.getTaskTooltipHtml(task));
+      this.tooltip.innerHTML = html;
+    }
     this.tooltip.style.display = "block";
     if (this.config.tooltipColor === "white") {
       this.tooltip.style.background = "#fff";
@@ -760,10 +774,8 @@ class GanttChart {
     }
     const tipRect = this.tooltip.getBoundingClientRect();
     let x = e.clientX + 15, y = e.clientY + 15;
-    if (x + tipRect.width > window.innerWidth)
-      x = e.clientX - 15 - tipRect.width;
-    if (y + tipRect.height > window.innerHeight)
-      y = e.clientY - 15 - tipRect.height;
+    if (x + tipRect.width > window.innerWidth) x = e.clientX - 15 - tipRect.width;
+    if (y + tipRect.height > window.innerHeight) y = e.clientY - 15 - tipRect.height;
     this.tooltip.style.left = `${x + this.config.offsetLeft}px`;
     this.tooltip.style.top = `${y + this.config.offsetTop}px`;
   }
@@ -786,5 +798,15 @@ class GanttChart {
   handleMouseLeave() {
     this.tooltip.style.display = "none";
   }
+  /**
+   * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
+   * @param diffMilliseconds 距离目标日期时间的差异毫秒数
+   * @param pixelsPerDay 每日的像素数
+   * @returns
+   */
+  static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {
+    return diffMilliseconds * pixelsPerDay / DateUtils.ONE_DAY_MS;
+  }
 }
+exports.DateUtils = DateUtils;
 exports.GanttChart = GanttChart;

package/dist/index.css

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

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.0
+ * gantt-canvas-chart v1.0.1-alpha.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -20,7 +20,10 @@ class DateUtils {
       format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
     for (let k in o)
       if (new RegExp("(" + k + ")").test(format))
-        format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
+        format = format.replace(
+          RegExp.$1,
+          RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
+        );
     return format;
   }
   static addDays(date, days) {
@@ -40,7 +43,9 @@ class DateUtils {
     return r;
   }
   static diffDays(date1, date2) {
-    return Math.round((new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()).getTime() - new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()).getTime()) / this.ONE_DAY_MS);
+    return Math.round(
+      (new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()).getTime() - new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()).getTime()) / this.ONE_DAY_MS
+    );
   }
   static diffDaysInclusive(date1, date2) {
     return this.diffDays(date1, date2) + 1;
@@ -57,8 +62,7 @@ class DateUtils {
   static getStartOfWeek(d) {
     const date = new Date(d);
     const day = date.getDay() || 7;
-    if (day !== 1)
-      date.setHours(-24 * (day - 1));
+    if (day !== 1) date.setHours(-24 * (day - 1));
     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
   }
   static getStartOfMonth(d) {
@@ -102,6 +106,9 @@ class GanttChart {
   resizeObserver;
   taskPositions;
   taskMap;
+  boundHandleMouseMove;
+  boundHandleMouseLeave;
+  boundHandleScroll;
   constructor(rootContainer, data, config = {}) {
     const container = document.createElement("div");
     const scrollEl = document.createElement("div");
@@ -132,9 +139,12 @@ class GanttChart {
       showRightRemark: false,
       showCenterRemark: false,
       showTooltip: true,
+      tooltipFormat: null,
       tooltipColor: "black",
+      todayColor: "#ff4d4f",
       offsetTop: 0,
       offsetLeft: 0,
+      viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#caeed2",
       actualBgColor: "#78c78f",
       ...config
@@ -163,6 +173,9 @@ class GanttChart {
     this.totalHeight = 0;
     this.taskPositions = /* @__PURE__ */ new Map();
     this.taskMap = /* @__PURE__ */ new Map();
+    this.boundHandleMouseMove = this.handleMouseMove.bind(this);
+    this.boundHandleMouseLeave = this.handleMouseLeave.bind(this);
+    this.boundHandleScroll = this.handleScroll.bind(this);
     this.init();
   }
   init() {
@@ -179,7 +192,7 @@ class GanttChart {
     });
   }
   setupEvents() {
-    this.container.addEventListener("scroll", this.handleScroll.bind(this));
+    this.container.addEventListener("scroll", this.boundHandleScroll);
     this.handleResize = this.handleResize.bind(this);
     if (window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(this.handleResize);
@@ -188,8 +201,8 @@ class GanttChart {
       }, 100);
     }
     if (this.config.showTooltip) {
-      this.mainCanvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
-      this.mainCanvas.addEventListener("mouseleave", this.handleMouseLeave.bind(this));
+      this.mainCanvas.addEventListener("mousemove", this.boundHandleMouseMove);
+      this.mainCanvas.addEventListener("mouseleave", this.boundHandleMouseLeave);
     }
   }
   updateConfig(newConfig) {
@@ -214,6 +227,9 @@ class GanttChart {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
+    this.container.removeEventListener("scroll", this.boundHandleScroll);
+    this.mainCanvas.removeEventListener("mousemove", this.boundHandleMouseMove);
+    this.mainCanvas.removeEventListener("mouseleave", this.boundHandleMouseLeave);
     this.container.remove();
   }
   calculateFullTimeline() {
@@ -226,17 +242,13 @@ class GanttChart {
       this.taskMap.forEach(({ task }) => {
         const pStart = new Date(task.planStart);
         const pEnd = new Date(task.planEnd);
-        if (pStart < minDate)
-          minDate = pStart;
-        if (pEnd > maxDate)
-          maxDate = pEnd;
+        if (pStart < minDate) minDate = pStart;
+        if (pEnd > maxDate) maxDate = pEnd;
         if (task.actualStart) {
           const aStart = new Date(task.actualStart);
           const aEnd = new Date(task.actualEnd);
-          if (aStart < minDate)
-            minDate = aStart;
-          if (aEnd > maxDate)
-            maxDate = aEnd;
+          if (aStart < minDate) minDate = aStart;
+          if (aEnd > maxDate) maxDate = aEnd;
         }
       });
     }
@@ -263,8 +275,7 @@ class GanttChart {
     }
   }
   updatePixelsPerDay() {
-    const viewFactors = { Day: 80, Week: 20, Month: 15, Year: 6 };
-    this.pixelsPerDay = viewFactors[this.config.viewMode];
+    this.pixelsPerDay = this.config.viewFactors[this.config.viewMode];
   }
   dateToX(date) {
     return DateUtils.diffDays(this.timelineStart, date) * this.pixelsPerDay;
@@ -292,8 +303,7 @@ class GanttChart {
     requestAnimationFrame(() => this.render());
   }
   setScrollTop(scrollTop) {
-    if (this.scrollTop !== scrollTop)
-      this.container.scrollTop = scrollTop;
+    if (this.scrollTop !== scrollTop) this.container.scrollTop = scrollTop;
   }
   updateVirtualRanges() {
     const buffer = 200;
@@ -502,16 +512,13 @@ class GanttChart {
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
     this.taskMap.forEach(({ task }) => {
-      if (!task.dependencies || task.dependencies.length === 0)
-        return;
+      if (!task.dependencies || task.dependencies.length === 0) return;
       const toPos = this.taskPositions.get(task.id);
-      if (!toPos)
-        return;
+      if (!toPos) return;
       const toRowIndex = this.taskMap.get(task.id).row;
       task.dependencies.forEach((depId) => {
         const fromPos = this.taskPositions.get(depId);
-        if (!fromPos)
-          return;
+        if (!fromPos) return;
         const fromRowIndex = this.taskMap.get(depId).row;
         const isAdjacent = Math.abs(toRowIndex - fromRowIndex) === 1;
         const fromX = Math.max(fromPos.x_plan_end, fromPos.x_actual_end || fromPos.x_plan_end);
@@ -564,12 +571,10 @@ class GanttChart {
     for (let i = 0; i < this.data.length; i++) {
       const row = this.data[i];
       const y = i * this.config.rowHeight;
-      if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight)
-        continue;
+      if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
       row.tasks.forEach((task) => {
         const pos = this.taskPositions.get(task.id);
-        if (!pos)
-          return;
+        if (!pos) return;
         if (pos.x_plan_end < this.scrollLeft || pos.x_plan_start > this.scrollLeft + this.viewportWidth) {
           if (!pos.x_actual_start || pos.x_actual_end < this.scrollLeft || pos.x_actual_start > this.scrollLeft + this.viewportWidth)
             return;
@@ -585,8 +590,7 @@ class GanttChart {
     if (this.config.showRowLines) {
       for (let i = 0; i <= this.data.length; i++) {
         const y = i * this.config.rowHeight;
-        if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight)
-          continue;
+        if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
         ctx.moveTo(this.scrollLeft, y);
         ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
       }
@@ -647,17 +651,14 @@ class GanttChart {
               nextDate = DateUtils.addMonths(currentDate, 6);
             else if (currentDate.getMonth() === 6 && currentDate.getDate() === 1)
               nextDate = DateUtils.addMonths(currentDate, 6);
-            else
-              nextDate = DateUtils.addDays(currentDate, 1);
+            else nextDate = DateUtils.addDays(currentDate, 1);
             break;
           default:
             nextDate = DateUtils.addDays(currentDate, 1);
             break;
         }
-        if (nextDate.getTime() === currentDate.getTime())
-          currentDate = DateUtils.addDays(currentDate, 1);
-        else
-          currentDate = nextDate;
+        if (nextDate.getTime() === currentDate.getTime()) currentDate = DateUtils.addDays(currentDate, 1);
+        else currentDate = nextDate;
       }
     }
     ctx.stroke();
@@ -665,7 +666,7 @@ class GanttChart {
   drawToday(ctx) {
     const x = this.dateToX(this.today);
     if (x >= this.scrollLeft && x <= this.scrollLeft + this.viewportWidth) {
-      ctx.strokeStyle = "#ff4d4f";
+      ctx.strokeStyle = this.config.todayColor;
       ctx.lineWidth = 2;
       ctx.beginPath();
       ctx.moveTo(x, this.scrollTop);
@@ -679,17 +680,23 @@ class GanttChart {
     const taskY = y + this.config.rowHeight * 0.15 + offset;
     const taskHeight = this.config.rowHeight * 0.7 - offset;
     const textY = y + this.config.rowHeight / 2 + offset;
+    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 (this.config.showActual && pos.x_actual_start) {
-      const aWidth = (pos.x_actual_end ? pos.x_actual_end : pos.x_plan_end) - pos.x_actual_start;
       ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-      ctx.fillRect(pos.x_actual_start, taskY, aWidth, taskHeight);
+      const aWidth = (pos.x_actual_end ? pos.x_actual_end : this.dateToX(this.today)) - pos.x_actual_start;
+      pos.x_actual_start += aWidth * offsetX_actual;
+      pos.x_actual_end && (pos.x_actual_end = pos.x_actual_start + aWidth * percent_actual);
+      ctx.fillRect(pos.x_actual_start, taskY, aWidth * percent_actual, taskHeight);
     }
     if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
       ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
+      pos.x_plan_start += width * offsetX;
+      pos.x_plan_end && (pos.x_plan_end = pos.x_plan_start + width * percent_plan);
       ctx.lineWidth = 4;
       ctx.beginPath();
       ctx.moveTo(pos.x_plan_start, taskY);
-      ctx.lineTo(pos.x_plan_start + width, taskY);
+      ctx.lineTo(pos.x_plan_start + width * percent_plan, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#333";
@@ -732,25 +739,32 @@ class GanttChart {
     const chartY = mouseY + this.scrollTop;
     const rowIndex = Math.floor(chartY / this.config.rowHeight);
     const date = this.xToDate(chartX);
-    if (rowIndex < 0 || rowIndex >= this.data.length)
-      return this.handleMouseLeave();
+    if (rowIndex < 0 || rowIndex >= this.data.length) return this.handleMouseLeave();
     const row = this.data[rowIndex];
-    const overlappingTasks = row.tasks.filter((task) => {
-      const pStart = new Date(task.planStart), pEnd = DateUtils.addDays(new Date(task.planEnd), 1);
-      if (date >= pStart && date < pEnd)
-        return true;
-      if (task.actualStart) {
-        const aStart = new Date(task.actualStart), aEnd = DateUtils.addDays(new Date(task.actualEnd), 1);
-        if (date >= aStart && date < aEnd)
-          return true;
+    if (this.config.tooltipFormat) {
+      const htmlStr = this.config.tooltipFormat(row, date, this.config);
+      if (!htmlStr) {
+        return this.handleMouseLeave();
       }
-      return false;
-    });
-    if (overlappingTasks.length === 0)
-      return this.handleMouseLeave();
-    let html = `<strong>${row.name}</strong> (${DateUtils.format(date, "yyyy-MM-dd")})<hr class="__gantt_tooltip-divider">`;
-    overlappingTasks.forEach((task) => html += this.getTaskTooltipHtml(task));
-    this.tooltip.innerHTML = html;
+      this.tooltip.innerHTML = htmlStr;
+    } else {
+      const overlappingTasks = row.tasks.filter((task) => {
+        const pStart = new Date(task.planStart), pEnd = DateUtils.addDays(new Date(task.planEnd), 1);
+        if (date >= pStart && date < pEnd) return true;
+        if (task.actualStart) {
+          const aStart = new Date(task.actualStart), aEnd = DateUtils.addDays(new Date(task.actualEnd), 1);
+          if (date >= aStart && date < aEnd) return true;
+        }
+        return false;
+      });
+      if (overlappingTasks.length === 0) return this.handleMouseLeave();
+      let html = `<strong>${row.name}</strong> (${DateUtils.format(
+        date,
+        "yyyy-MM-dd"
+      )})<hr class="__gantt_tooltip-divider">`;
+      overlappingTasks.forEach((task) => html += this.getTaskTooltipHtml(task));
+      this.tooltip.innerHTML = html;
+    }
     this.tooltip.style.display = "block";
     if (this.config.tooltipColor === "white") {
       this.tooltip.style.background = "#fff";
@@ -758,10 +772,8 @@ class GanttChart {
     }
     const tipRect = this.tooltip.getBoundingClientRect();
     let x = e.clientX + 15, y = e.clientY + 15;
-    if (x + tipRect.width > window.innerWidth)
-      x = e.clientX - 15 - tipRect.width;
-    if (y + tipRect.height > window.innerHeight)
-      y = e.clientY - 15 - tipRect.height;
+    if (x + tipRect.width > window.innerWidth) x = e.clientX - 15 - tipRect.width;
+    if (y + tipRect.height > window.innerHeight) y = e.clientY - 15 - tipRect.height;
     this.tooltip.style.left = `${x + this.config.offsetLeft}px`;
     this.tooltip.style.top = `${y + this.config.offsetTop}px`;
   }
@@ -784,7 +796,17 @@ class GanttChart {
   handleMouseLeave() {
     this.tooltip.style.display = "none";
   }
+  /**
+   * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
+   * @param diffMilliseconds 距离目标日期时间的差异毫秒数
+   * @param pixelsPerDay 每日的像素数
+   * @returns
+   */
+  static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {
+    return diffMilliseconds * pixelsPerDay / DateUtils.ONE_DAY_MS;
+  }
 }
 export {
+  DateUtils,
   GanttChart
 };

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.0
+ * gantt-canvas-chart v1.0.1-alpha.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -24,7 +24,10 @@
         format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
       for (let k in o)
         if (new RegExp("(" + k + ")").test(format))
-          format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
+          format = format.replace(
+            RegExp.$1,
+            RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
+          );
       return format;
     }
     static addDays(date, days) {
@@ -44,7 +47,9 @@
       return r;
     }
     static diffDays(date1, date2) {
-      return Math.round((new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()).getTime() - new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()).getTime()) / this.ONE_DAY_MS);
+      return Math.round(
+        (new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()).getTime() - new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()).getTime()) / this.ONE_DAY_MS
+      );
     }
     static diffDaysInclusive(date1, date2) {
       return this.diffDays(date1, date2) + 1;
@@ -61,8 +66,7 @@
     static getStartOfWeek(d) {
       const date = new Date(d);
       const day = date.getDay() || 7;
-      if (day !== 1)
-        date.setHours(-24 * (day - 1));
+      if (day !== 1) date.setHours(-24 * (day - 1));
       return new Date(date.getFullYear(), date.getMonth(), date.getDate());
     }
     static getStartOfMonth(d) {
@@ -106,6 +110,9 @@
     resizeObserver;
     taskPositions;
     taskMap;
+    boundHandleMouseMove;
+    boundHandleMouseLeave;
+    boundHandleScroll;
     constructor(rootContainer, data, config = {}) {
       const container = document.createElement("div");
       const scrollEl = document.createElement("div");
@@ -136,9 +143,12 @@
         showRightRemark: false,
         showCenterRemark: false,
         showTooltip: true,
+        tooltipFormat: null,
         tooltipColor: "black",
+        todayColor: "#ff4d4f",
         offsetTop: 0,
         offsetLeft: 0,
+        viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
         planBorderColor: "#caeed2",
         actualBgColor: "#78c78f",
         ...config
@@ -167,6 +177,9 @@
       this.totalHeight = 0;
       this.taskPositions = /* @__PURE__ */ new Map();
       this.taskMap = /* @__PURE__ */ new Map();
+      this.boundHandleMouseMove = this.handleMouseMove.bind(this);
+      this.boundHandleMouseLeave = this.handleMouseLeave.bind(this);
+      this.boundHandleScroll = this.handleScroll.bind(this);
       this.init();
     }
     init() {
@@ -183,7 +196,7 @@
       });
     }
     setupEvents() {
-      this.container.addEventListener("scroll", this.handleScroll.bind(this));
+      this.container.addEventListener("scroll", this.boundHandleScroll);
       this.handleResize = this.handleResize.bind(this);
       if (window.ResizeObserver) {
         this.resizeObserver = new ResizeObserver(this.handleResize);
@@ -192,8 +205,8 @@
         }, 100);
       }
       if (this.config.showTooltip) {
-        this.mainCanvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
-        this.mainCanvas.addEventListener("mouseleave", this.handleMouseLeave.bind(this));
+        this.mainCanvas.addEventListener("mousemove", this.boundHandleMouseMove);
+        this.mainCanvas.addEventListener("mouseleave", this.boundHandleMouseLeave);
       }
     }
     updateConfig(newConfig) {
@@ -218,6 +231,9 @@
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
       }
+      this.container.removeEventListener("scroll", this.boundHandleScroll);
+      this.mainCanvas.removeEventListener("mousemove", this.boundHandleMouseMove);
+      this.mainCanvas.removeEventListener("mouseleave", this.boundHandleMouseLeave);
       this.container.remove();
     }
     calculateFullTimeline() {
@@ -230,17 +246,13 @@
         this.taskMap.forEach(({ task }) => {
           const pStart = new Date(task.planStart);
           const pEnd = new Date(task.planEnd);
-          if (pStart < minDate)
-            minDate = pStart;
-          if (pEnd > maxDate)
-            maxDate = pEnd;
+          if (pStart < minDate) minDate = pStart;
+          if (pEnd > maxDate) maxDate = pEnd;
           if (task.actualStart) {
             const aStart = new Date(task.actualStart);
             const aEnd = new Date(task.actualEnd);
-            if (aStart < minDate)
-              minDate = aStart;
-            if (aEnd > maxDate)
-              maxDate = aEnd;
+            if (aStart < minDate) minDate = aStart;
+            if (aEnd > maxDate) maxDate = aEnd;
           }
         });
       }
@@ -267,8 +279,7 @@
       }
     }
     updatePixelsPerDay() {
-      const viewFactors = { Day: 80, Week: 20, Month: 15, Year: 6 };
-      this.pixelsPerDay = viewFactors[this.config.viewMode];
+      this.pixelsPerDay = this.config.viewFactors[this.config.viewMode];
     }
     dateToX(date) {
       return DateUtils.diffDays(this.timelineStart, date) * this.pixelsPerDay;
@@ -296,8 +307,7 @@
       requestAnimationFrame(() => this.render());
     }
     setScrollTop(scrollTop) {
-      if (this.scrollTop !== scrollTop)
-        this.container.scrollTop = scrollTop;
+      if (this.scrollTop !== scrollTop) this.container.scrollTop = scrollTop;
     }
     updateVirtualRanges() {
       const buffer = 200;
@@ -506,16 +516,13 @@
       ctx.lineCap = "round";
       ctx.lineJoin = "round";
       this.taskMap.forEach(({ task }) => {
-        if (!task.dependencies || task.dependencies.length === 0)
-          return;
+        if (!task.dependencies || task.dependencies.length === 0) return;
         const toPos = this.taskPositions.get(task.id);
-        if (!toPos)
-          return;
+        if (!toPos) return;
         const toRowIndex = this.taskMap.get(task.id).row;
         task.dependencies.forEach((depId) => {
           const fromPos = this.taskPositions.get(depId);
-          if (!fromPos)
-            return;
+          if (!fromPos) return;
           const fromRowIndex = this.taskMap.get(depId).row;
           const isAdjacent = Math.abs(toRowIndex - fromRowIndex) === 1;
           const fromX = Math.max(fromPos.x_plan_end, fromPos.x_actual_end || fromPos.x_plan_end);
@@ -568,12 +575,10 @@
       for (let i = 0; i < this.data.length; i++) {
         const row = this.data[i];
         const y = i * this.config.rowHeight;
-        if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight)
-          continue;
+        if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
         row.tasks.forEach((task) => {
           const pos = this.taskPositions.get(task.id);
-          if (!pos)
-            return;
+          if (!pos) return;
           if (pos.x_plan_end < this.scrollLeft || pos.x_plan_start > this.scrollLeft + this.viewportWidth) {
             if (!pos.x_actual_start || pos.x_actual_end < this.scrollLeft || pos.x_actual_start > this.scrollLeft + this.viewportWidth)
               return;
@@ -589,8 +594,7 @@
       if (this.config.showRowLines) {
         for (let i = 0; i <= this.data.length; i++) {
           const y = i * this.config.rowHeight;
-          if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight)
-            continue;
+          if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
           ctx.moveTo(this.scrollLeft, y);
           ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
         }
@@ -651,17 +655,14 @@
                 nextDate = DateUtils.addMonths(currentDate, 6);
               else if (currentDate.getMonth() === 6 && currentDate.getDate() === 1)
                 nextDate = DateUtils.addMonths(currentDate, 6);
-              else
-                nextDate = DateUtils.addDays(currentDate, 1);
+              else nextDate = DateUtils.addDays(currentDate, 1);
               break;
             default:
               nextDate = DateUtils.addDays(currentDate, 1);
               break;
           }
-          if (nextDate.getTime() === currentDate.getTime())
-            currentDate = DateUtils.addDays(currentDate, 1);
-          else
-            currentDate = nextDate;
+          if (nextDate.getTime() === currentDate.getTime()) currentDate = DateUtils.addDays(currentDate, 1);
+          else currentDate = nextDate;
         }
       }
       ctx.stroke();
@@ -669,7 +670,7 @@
     drawToday(ctx) {
       const x = this.dateToX(this.today);
       if (x >= this.scrollLeft && x <= this.scrollLeft + this.viewportWidth) {
-        ctx.strokeStyle = "#ff4d4f";
+        ctx.strokeStyle = this.config.todayColor;
         ctx.lineWidth = 2;
         ctx.beginPath();
         ctx.moveTo(x, this.scrollTop);
@@ -683,17 +684,23 @@
       const taskY = y + this.config.rowHeight * 0.15 + offset;
       const taskHeight = this.config.rowHeight * 0.7 - offset;
       const textY = y + this.config.rowHeight / 2 + offset;
+      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 (this.config.showActual && pos.x_actual_start) {
-        const aWidth = (pos.x_actual_end ? pos.x_actual_end : pos.x_plan_end) - pos.x_actual_start;
         ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-        ctx.fillRect(pos.x_actual_start, taskY, aWidth, taskHeight);
+        const aWidth = (pos.x_actual_end ? pos.x_actual_end : this.dateToX(this.today)) - pos.x_actual_start;
+        pos.x_actual_start += aWidth * offsetX_actual;
+        pos.x_actual_end && (pos.x_actual_end = pos.x_actual_start + aWidth * percent_actual);
+        ctx.fillRect(pos.x_actual_start, taskY, aWidth * percent_actual, taskHeight);
       }
       if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
         ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
+        pos.x_plan_start += width * offsetX;
+        pos.x_plan_end && (pos.x_plan_end = pos.x_plan_start + width * percent_plan);
         ctx.lineWidth = 4;
         ctx.beginPath();
         ctx.moveTo(pos.x_plan_start, taskY);
-        ctx.lineTo(pos.x_plan_start + width, taskY);
+        ctx.lineTo(pos.x_plan_start + width * percent_plan, taskY);
         ctx.stroke();
       }
       ctx.fillStyle = "#333";
@@ -736,25 +743,32 @@
       const chartY = mouseY + this.scrollTop;
       const rowIndex = Math.floor(chartY / this.config.rowHeight);
       const date = this.xToDate(chartX);
-      if (rowIndex < 0 || rowIndex >= this.data.length)
-        return this.handleMouseLeave();
+      if (rowIndex < 0 || rowIndex >= this.data.length) return this.handleMouseLeave();
       const row = this.data[rowIndex];
-      const overlappingTasks = row.tasks.filter((task) => {
-        const pStart = new Date(task.planStart), pEnd = DateUtils.addDays(new Date(task.planEnd), 1);
-        if (date >= pStart && date < pEnd)
-          return true;
-        if (task.actualStart) {
-          const aStart = new Date(task.actualStart), aEnd = DateUtils.addDays(new Date(task.actualEnd), 1);
-          if (date >= aStart && date < aEnd)
-            return true;
+      if (this.config.tooltipFormat) {
+        const htmlStr = this.config.tooltipFormat(row, date, this.config);
+        if (!htmlStr) {
+          return this.handleMouseLeave();
         }
-        return false;
-      });
-      if (overlappingTasks.length === 0)
-        return this.handleMouseLeave();
-      let html = `<strong>${row.name}</strong> (${DateUtils.format(date, "yyyy-MM-dd")})<hr class="__gantt_tooltip-divider">`;
-      overlappingTasks.forEach((task) => html += this.getTaskTooltipHtml(task));
-      this.tooltip.innerHTML = html;
+        this.tooltip.innerHTML = htmlStr;
+      } else {
+        const overlappingTasks = row.tasks.filter((task) => {
+          const pStart = new Date(task.planStart), pEnd = DateUtils.addDays(new Date(task.planEnd), 1);
+          if (date >= pStart && date < pEnd) return true;
+          if (task.actualStart) {
+            const aStart = new Date(task.actualStart), aEnd = DateUtils.addDays(new Date(task.actualEnd), 1);
+            if (date >= aStart && date < aEnd) return true;
+          }
+          return false;
+        });
+        if (overlappingTasks.length === 0) return this.handleMouseLeave();
+        let html = `<strong>${row.name}</strong> (${DateUtils.format(
+          date,
+          "yyyy-MM-dd"
+        )})<hr class="__gantt_tooltip-divider">`;
+        overlappingTasks.forEach((task) => html += this.getTaskTooltipHtml(task));
+        this.tooltip.innerHTML = html;
+      }
       this.tooltip.style.display = "block";
       if (this.config.tooltipColor === "white") {
         this.tooltip.style.background = "#fff";
@@ -762,10 +776,8 @@
       }
       const tipRect = this.tooltip.getBoundingClientRect();
       let x = e.clientX + 15, y = e.clientY + 15;
-      if (x + tipRect.width > window.innerWidth)
-        x = e.clientX - 15 - tipRect.width;
-      if (y + tipRect.height > window.innerHeight)
-        y = e.clientY - 15 - tipRect.height;
+      if (x + tipRect.width > window.innerWidth) x = e.clientX - 15 - tipRect.width;
+      if (y + tipRect.height > window.innerHeight) y = e.clientY - 15 - tipRect.height;
       this.tooltip.style.left = `${x + this.config.offsetLeft}px`;
       this.tooltip.style.top = `${y + this.config.offsetTop}px`;
     }
@@ -788,7 +800,17 @@
     handleMouseLeave() {
       this.tooltip.style.display = "none";
     }
+    /**
+     * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
+     * @param diffMilliseconds 距离目标日期时间的差异毫秒数
+     * @param pixelsPerDay 每日的像素数
+     * @returns
+     */
+    static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {
+      return diffMilliseconds * pixelsPerDay / DateUtils.ONE_DAY_MS;
+    }
   }
+  exports2.DateUtils = DateUtils;
   exports2.GanttChart = GanttChart;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 }));

package/dist/main.d.ts

@@ -1,3 +1,4 @@
 import { GanttChart } from './core/ganttChart';
+import { DateUtils } from './core/dateUtils';
 
-export { GanttChart };
+export { GanttChart, DateUtils };

package/package.json

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