apexgantt 3.1.1 → 3.3.0

package/README.md

@@ -67,6 +67,7 @@ The layout can be configured by either setting the properties in the table below
 | barTextColor              | `#FFFFFF`                     | Text color for timeline bar                         |
 | cellBorderColor           | `#eff0f0`                     | Border color for all table cells and timeline cells |
 | cellBorderWidth           | `1px`                         | Border width for all table cells and timeline cells |
+| columnConfig              | `undefined`                   | Custom column widths                                |
 | enableToolbar             | `false`                       | Enable/disable graph toolbar                        |
 | enableResize              | `true`                        | Enable/disable gantt sidebar resize                 |
 | enableExport              | `true`                        | Enable/disable gantt export options                 |
@@ -185,6 +186,44 @@ Each tasks should be in below format
 ];
 ```
 
+## Column Configuration
+
+Customize task table column widths:
+
+```js
+import {ColumnKey} from 'apexgantt';
+
+const gantt = new ApexGantt(element, {
+  series: tasks,
+  columnConfig: [
+    {
+      key: ColumnKey.Name,
+      title: 'Task Name',
+      minWidth: '100px',
+      flexGrow: 3,
+    },
+    {
+      key: ColumnKey.StartTime,
+      title: 'Start',
+      minWidth: '100px',
+      flexGrow: 1.5,
+    },
+    {
+      key: ColumnKey.Duration,
+      title: 'Duration',
+      minWidth: '80px',
+      flexGrow: 1,
+    },
+    {
+      key: ColumnKey.Progress,
+      title: 'Progress',
+      minWidth: '80px',
+      flexGrow: 1,
+    },
+  ],
+});
+```
+
 ## Data Parsing
 
 Map your existing data structure to ApexGantt format without manual transformation.

package/apexgantt.es.min.js

@@ -5965,6 +5965,13 @@ const _Watermark = class _Watermark {
 _Watermark.WATERMARK_CLASS = "apexgantt-watermark";
 _Watermark.WATERMARK_TEXT = "Powered by apexcharts.com";
 let Watermark = _Watermark;
+function getParentElement(element) {
+  const rootNode = element.getRootNode();
+  if (rootNode instanceof ShadowRoot) {
+    return rootNode.host;
+  }
+  return element.parentElement;
+}
 function getCumulativeTransform(element) {
   let scaleX = 1;
   let scaleY = 1;
@@ -5996,7 +6003,7 @@ function getCumulativeTransform(element) {
         console.warn("Failed to parse transform matrix:", transform2, e);
       }
     }
-    currentElement = currentElement.parentElement;
+    currentElement = getParentElement(currentElement);
   }
   return { scaleX, scaleY, translateX, translateY };
 }
@@ -13903,7 +13910,8 @@ const ColumnList = [
       "name"
       /* Name */
     ],
-    width: "160px"
+    minWidth: "120px",
+    flexGrow: 3
   },
   {
     key: "startTime",
@@ -13911,7 +13919,8 @@ const ColumnList = [
       "startTime"
       /* StartTime */
     ],
-    width: "100px"
+    minWidth: "70px",
+    flexGrow: 1.5
   },
   {
     key: "duration",
@@ -13919,7 +13928,8 @@ const ColumnList = [
       "duration"
       /* Duration */
     ],
-    width: "80px"
+    minWidth: "50px",
+    flexGrow: 1
   },
   {
     key: "progress",
@@ -13927,9 +13937,17 @@ const ColumnList = [
       "progress"
       /* Progress */
     ],
-    width: "80px"
+    minWidth: "50px",
+    flexGrow: 1
   }
 ];
+function generateGridTemplateColumns(columns) {
+  return columns.map((col) => {
+    const minWidth = col.minWidth || "30px";
+    const flexGrow = col.flexGrow || 1;
+    return `minmax(${minWidth}, ${flexGrow}fr)`;
+  }).join(" ");
+}
 function getTaskTextByColumn(task, columnKey, inputDateFormat) {
   const taskColumnValue = task[columnKey];
   if (columnKey === "startTime") {
@@ -14057,6 +14075,40 @@ class Tasks {
     this.options = options;
     this.chartContext = chartContext;
     this.dataManager = dataManager;
+    this.effectiveColumnList = this.mergeColumnConfig();
+    this.injectDynamicColumnStyles();
+  }
+  /**
+   * Merges user column config with defaults
+   */
+  mergeColumnConfig() {
+    if (!this.options.columnConfig || this.options.columnConfig.length === 0) {
+      return ColumnList;
+    }
+    return ColumnList.map((defaultCol) => {
+      var _a;
+      const userCol = (_a = this.options.columnConfig) == null ? void 0 : _a.find((col) => col.key === defaultCol.key);
+      return userCol ? { ...defaultCol, ...userCol } : defaultCol;
+    });
+  }
+  /**
+   * Dynamic CSS for column widths based on configuration
+   */
+  injectDynamicColumnStyles() {
+    const gridTemplate = generateGridTemplateColumns(this.effectiveColumnList);
+    const chartInstanceId = this.chartContext.getInstanceId();
+    const dynamicStyles = `
+      .tasks-container .tasks-header[data-chart-instance="${chartInstanceId}"] .tasks-header-row {
+        grid-template-columns: ${gridTemplate};
+      }
+
+      .tasks-container .tasks-data-row[data-chart-instance="${chartInstanceId}"] {
+        grid-template-columns: ${gridTemplate};
+      }
+    `;
+    this.chartContext.injectStyles(dynamicStyles, `tasks-dynamic-columns-${chartInstanceId}`, {
+      priority: "high"
+    });
   }
   generateBody(tasks, reRender) {
     const bodyContainer = createBox(this.chartContext, { className: "tasks-data-container" });
@@ -14069,19 +14121,13 @@ class Tasks {
     const { headerBackground, rowHeight, fontColor } = this.options;
     const chartInstanceId = this.chartContext.getInstanceId();
     headerContainer.setAttribute("data-chart-instance", chartInstanceId);
-    forEach(headerList, (header, index) => {
-      const columnDef = ColumnList[index];
+    forEach(headerList, (header) => {
       const headerCell = createBox(this.chartContext, {
         className: "tasks-header-cell",
         content: header
       });
       headerCell.style.height = `${rowHeight * 2}px`;
       headerCell.style.color = fontColor;
-      if (columnDef == null ? void 0 : columnDef.width) {
-        headerCell.style.width = columnDef.width;
-        headerCell.style.minWidth = columnDef.width;
-        headerCell.style.flexBasis = columnDef.width;
-      }
       headerRow.append(headerCell);
     });
     headerContainer.append(headerRow);
@@ -14095,7 +14141,7 @@ class Tasks {
     row.setAttribute("data-taskid", task.id);
     row.setAttribute("data-chart-instance", chartInstanceId);
     row.style.height = `${rowHeight}px`;
-    forEach(ColumnList, ({ key, width: width2 }) => {
+    forEach(this.effectiveColumnList, ({ key }) => {
       const cell = createBox(this.chartContext, {
         className: "tasks-data-cell",
         content: getTaskTextByColumn(task, key, this.options.inputDateFormat)
@@ -14104,11 +14150,6 @@ class Tasks {
       cell.setAttribute("data-chart-instance", chartInstanceId);
       cell.style.height = `${rowHeight}px`;
       cell.style.color = fontColor;
-      if (width2) {
-        cell.style.width = width2;
-        cell.style.minWidth = width2;
-        cell.style.flexBasis = width2;
-      }
       if (key === ColumnKey.Name) {
         cell.style.paddingLeft = `${task.level * 15}px`;
         cell.style.textAlign = "left";
@@ -14167,7 +14208,7 @@ class Tasks {
     row.setAttribute("data-taskid", `empty-${index}`);
     row.setAttribute("data-chart-instance", chartInstanceId);
     row.style.height = `${rowHeight}px`;
-    forEach(ColumnList, ({ key, width: width2 }) => {
+    forEach(this.effectiveColumnList, ({ key }) => {
       const cell = createBox(this.chartContext, {
         className: "tasks-data-cell",
         content: ""
@@ -14176,17 +14217,12 @@ class Tasks {
       cell.setAttribute("data-chart-instance", chartInstanceId);
       cell.style.height = `${rowHeight}px`;
       cell.style.color = fontColor;
-      if (width2) {
-        cell.style.width = width2;
-        cell.style.minWidth = width2;
-        cell.style.flexBasis = width2;
-      }
       row.append(cell);
     });
     return row;
   }
   render(reRender) {
-    const headerRow = this.generateHeader(ColumnList.map((col) => col.title));
+    const headerRow = this.generateHeader(this.effectiveColumnList.map((col) => col.title));
     const dataRows = this.generateBody(this.dataManager.getFlatVisibleTasks(), reRender);
     return [headerRow, dataRows];
   }
@@ -14294,6 +14330,32 @@ class DataManager {
   }
   getDateRange(add = 0, viewMode) {
     const tasks = this.getTasks();
+    if (tasks.length === 0) {
+      const today = dayjs();
+      const startDate = today.startOf(viewMode);
+      let defaultRange = 1;
+      switch (viewMode) {
+        case "day":
+          defaultRange = 30;
+          break;
+        case "week":
+          defaultRange = 12;
+          break;
+        case "month":
+          defaultRange = 12;
+          break;
+        case "quarter":
+          defaultRange = 4;
+          break;
+        case "year":
+          defaultRange = 5;
+          break;
+        default:
+          defaultRange = 12;
+      }
+      const endDate = startDate.add(defaultRange + add, viewMode);
+      return [startDate, endDate];
+    }
     const startDates = tasks.map((task) => dayjs(task.startTime));
     const endDates = tasks.filter((task) => !!task.endTime).map((task) => dayjs(task.endTime));
     return [dayjs.min(startDates), dayjs.max(endDates).add(add, viewMode)];
@@ -15293,7 +15355,7 @@ const TableStyle = `
   }
 
   .tasks-header-row {
-    display: flex;
+    display: grid;
     width: 100%;
   }
 
@@ -15308,7 +15370,6 @@ const TableStyle = `
     border: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);
     color: var(--text-color, #000);
     box-sizing: border-box;
-    flex-shrink: 0;
     font-weight: 600;
   }
 
@@ -15325,7 +15386,7 @@ const TableStyle = `
   }
 
   .tasks-data-row {
-    display: flex;
+    display: grid;
     width: 100%;
     border-bottom: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);
     box-sizing: border-box;
@@ -15343,7 +15404,6 @@ const TableStyle = `
     border-right: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);
     color: var(--text-color, #000);
     box-sizing: border-box;
-    flex-shrink: 0;
   }
 
   .tasks-data-row .tasks-data-cell:first-child {
@@ -16240,7 +16300,7 @@ class SplitView {
 
     .split-view-container .split-left-container {
       flex-grow: 0 !important;
-      flex-shrink: 0 !important;
+      flex-shrink: 1 !important;
       overflow: visible;
       display: flex !important;
       flex-direction: column;
@@ -16398,8 +16458,8 @@ class SplitView {
         if (!containerRect)
           return;
         const newWidth = moveEvent.clientX - containerRect.left;
-        const minWidth = 50;
-        const maxWidth = containerRect.width - 100;
+        const minWidth = 0;
+        const maxWidth = containerRect.width - 50;
         const clampedWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
         this.leftContainer.style.flexBasis = `${clampedWidth}px`;
         this.dispatchResizeEvent();
@@ -16428,25 +16488,29 @@ class SplitView {
       switch (e.key) {
         case "ArrowLeft":
           e.preventDefault();
-          newWidth = Math.max(50, currentWidth - step);
+          newWidth = Math.max(0, currentWidth - step);
           this.leftContainer.style.flexBasis = `${newWidth}px`;
+          this.dispatchResizeEvent();
           break;
         case "ArrowRight":
           e.preventDefault();
           newWidth = currentWidth + step;
           this.leftContainer.style.flexBasis = `${newWidth}px`;
+          this.dispatchResizeEvent();
           break;
         case "Home":
           e.preventDefault();
-          this.leftContainer.style.flexBasis = "50px";
+          this.leftContainer.style.flexBasis = "0px";
+          this.dispatchResizeEvent();
           break;
         case "End": {
           e.preventDefault();
           const container = this.splitBarContainer.parentElement;
           if (container) {
-            const maxWidth = container.clientWidth - 100;
+            const maxWidth = container.clientWidth - 50;
             this.leftContainer.style.flexBasis = `${maxWidth}px`;
           }
+          this.dispatchResizeEvent();
           break;
         }
       }
@@ -16496,12 +16560,11 @@ class GanttStateManager {
    */
   captureState(element, dataManager, viewMode) {
     const horizontalScroll = element.querySelector(".timeline-horizontal-scroll");
-    const tasksBodyWrapper = element.querySelector(".tasks-body-wrapper");
-    const timelineBodyWrapper = element.querySelector(".timeline-body-wrapper");
+    const splitViewContainer = element.querySelector(".split-view-container");
     this.state.scrollPosition = {
       horizontal: (horizontalScroll == null ? void 0 : horizontalScroll.scrollLeft) || 0,
-      tasksVertical: (tasksBodyWrapper == null ? void 0 : tasksBodyWrapper.scrollTop) || 0,
-      timelineVertical: (timelineBodyWrapper == null ? void 0 : timelineBodyWrapper.scrollTop) || 0
+      tasksVertical: (splitViewContainer == null ? void 0 : splitViewContainer.scrollTop) || 0,
+      timelineVertical: (splitViewContainer == null ? void 0 : splitViewContainer.scrollTop) || 0
     };
     this.state.viewMode = viewMode;
     this.state.collapsedTasks = new Set(
@@ -16515,20 +16578,16 @@ class GanttStateManager {
     if (!skipScroll) {
       requestAnimationFrame(() => {
         const horizontalScroll = element.querySelector(".timeline-horizontal-scroll");
-        const tasksBodyWrapper = element.querySelector(".tasks-body-wrapper");
-        const timelineBodyWrapper = element.querySelector(".timeline-body-wrapper");
+        const splitViewContainer = element.querySelector(".split-view-container");
         if (horizontalScroll) {
           horizontalScroll.scrollLeft = this.state.scrollPosition.horizontal;
         }
-        if (tasksBodyWrapper) {
-          tasksBodyWrapper.scrollTop = this.state.scrollPosition.tasksVertical;
+        if (splitViewContainer) {
+          splitViewContainer.scrollTop = this.state.scrollPosition.tasksVertical;
         }
-        if (timelineBodyWrapper) {
-          timelineBodyWrapper.scrollTop = this.state.scrollPosition.timelineVertical;
-          const timelineHeader = element.querySelector(".timeline-header");
-          if (timelineHeader) {
-            timelineHeader.scrollLeft = this.state.scrollPosition.horizontal;
-          }
+        const timelineHeader = element.querySelector(".timeline-header");
+        if (timelineHeader) {
+          timelineHeader.scrollLeft = this.state.scrollPosition.horizontal;
         }
       });
     }
@@ -16714,6 +16773,10 @@ class ApexGantt extends BaseChart {
     this.isSyncingScroll = false;
     this.scrollbarResizeObserver = null;
     this.splitBarResizeHandler = null;
+    this.containerResizeObserver = null;
+    this.lastKnownWidth = 0;
+    this.lastKnownHeight = 0;
+    this.resizeDebounceTimer = null;
     const themeDefaults = getDefaultOptions(options == null ? void 0 : options.theme);
     let processedSeries;
     if (options == null ? void 0 : options.parsing) {
@@ -16948,21 +17011,11 @@ class ApexGantt extends BaseChart {
     this.setCSSVariables();
     this.initializeTooltip();
     this.element.innerHTML = "";
-    const existingDimensions = this.hasExplicitDimensions();
+    this.hasExplicitDimensions();
     const normalizedHeight = this.normalizeDimension(height2);
     const normalizedWidth = this.normalizeDimension(width2);
-    if (normalizedHeight === "100%" && existingDimensions.height) {
-      const computedHeight = window.getComputedStyle(this.element).height;
-      this.element.style.height = computedHeight;
-    } else {
-      this.element.style.height = normalizedHeight;
-    }
-    if (normalizedWidth === "100%" && existingDimensions.width) {
-      const computedWidth = window.getComputedStyle(this.element).width;
-      this.element.style.width = computedWidth;
-    } else {
-      this.element.style.width = normalizedWidth;
-    }
+    this.element.style.width = normalizedWidth;
+    this.element.style.height = normalizedHeight;
     this.element.style.display = "flex";
     this.element.style.flexDirection = "column";
     this.element.style.boxSizing = "border-box";
@@ -16996,14 +17049,7 @@ class ApexGantt extends BaseChart {
     this.setupDependencyArrowEvents();
     this.renderDependencyArrows();
     requestAnimationFrame(() => {
-      this.syncTasksColumnWidths();
-      this.compensateForScrollbar();
-      this.updateHorizontalScrollbarContent();
-      this.setupTimelineHorizontalScroll();
-      this.positionHorizontalScrollbar();
-      this.setupScrollbarResizeObserver();
-      this.disableHeaderMousewheelScroll();
-      this.fillEmptyRowsAfterRender();
+      this.performAfterActions();
     });
     if (isReRender) {
       requestAnimationFrame(() => {
@@ -17012,6 +17058,18 @@ class ApexGantt extends BaseChart {
     }
     return this.element;
   }
+  performAfterActions() {
+    this.syncTasksColumnWidths();
+    this.compensateForScrollbar();
+    this.updateHorizontalScrollbarContent();
+    this.setupTimelineHorizontalScroll();
+    this.positionHorizontalScrollbar();
+    this.setupContainerResizeObserver();
+    this.setupScrollbarResizeObserver();
+    this.setupRowBackgroundColors();
+    this.disableHeaderMousewheelScroll();
+    this.fillEmptyRowsAfterRender();
+  }
   /**
    * Setup proper positioning for chart container to support dialogs
    */
@@ -17350,15 +17408,7 @@ class ApexGantt extends BaseChart {
       }
     }
     requestAnimationFrame(() => {
-      this.syncTasksColumnWidths();
-      this.compensateForScrollbar();
-      this.updateHorizontalScrollbarContent();
-      this.setupTimelineHorizontalScroll();
-      this.positionHorizontalScrollbar();
-      this.setupScrollbarResizeObserver();
-      this.setupRowBackgroundColors();
-      this.disableHeaderMousewheelScroll();
-      this.fillEmptyRowsAfterRender();
+      this.performAfterActions();
     });
   }
   updateToolbarAfterZoom() {
@@ -17587,6 +17637,10 @@ class ApexGantt extends BaseChart {
     if (!ganttContainer || !timelineBody || !tasksBody) {
       return;
     }
+    const oldEmptyTimelineRows = timelineBody.querySelectorAll(".timeline-empty-row");
+    oldEmptyTimelineRows.forEach((row) => row.remove());
+    const oldEmptyTaskRows = tasksBody.querySelectorAll(".tasks-empty-row");
+    oldEmptyTaskRows.forEach((row) => row.remove());
     const containerHeight = ganttContainer.clientHeight;
     const existingRows = timelineBody.querySelectorAll(".timeline-data-row:not(.timeline-empty-row)");
     const existingRowCount = existingRows.length;
@@ -17595,8 +17649,17 @@ class ApexGantt extends BaseChart {
     const emptyRowsNeeded = Math.max(0, totalRowsNeeded - existingRowCount);
     if (emptyRowsNeeded === 0)
       return;
+    let cellCount = 0;
     const firstRow = timelineBody.querySelector(".timeline-data-row");
-    const cellCount = firstRow ? firstRow.querySelectorAll(".timeline-data-cell").length : 0;
+    if (firstRow) {
+      cellCount = firstRow.querySelectorAll(".timeline-data-cell").length;
+    } else {
+      const timelineHeader = ganttContainer.querySelector(".timeline-header");
+      if (timelineHeader) {
+        const headerCells = timelineHeader.querySelectorAll(".timeline-header-cell");
+        cellCount = headerCells.length;
+      }
+    }
     if (cellCount === 0)
       return;
     for (let i = 0; i < emptyRowsNeeded; i++) {
@@ -17635,7 +17698,7 @@ class ApexGantt extends BaseChart {
     row.setAttribute("data-taskid", `empty-${index}`);
     row.setAttribute("data-chart-instance", chartInstanceId);
     row.style.height = `${rowHeight}px`;
-    ColumnList.forEach(({ key, width: width2 }) => {
+    ColumnList.forEach(({ key }) => {
       const cell = createBox(this.chartContext, {
         className: "tasks-data-cell",
         content: ""
@@ -17644,11 +17707,6 @@ class ApexGantt extends BaseChart {
       cell.setAttribute("data-chart-instance", chartInstanceId);
       cell.style.height = `${rowHeight}px`;
       cell.style.color = fontColor;
-      if (width2) {
-        cell.style.width = width2;
-        cell.style.minWidth = width2;
-        cell.style.flexBasis = width2;
-      }
       row.appendChild(cell);
     });
     return row;
@@ -17756,8 +17814,84 @@ class ApexGantt extends BaseChart {
     }
     return value;
   }
+  /**
+   * resize observer for container to handle responsive width and height changes
+   */
+  setupContainerResizeObserver() {
+    if (!this.element) {
+      return;
+    }
+    if (this.containerResizeObserver) {
+      this.containerResizeObserver.disconnect();
+    }
+    const normalizedWidth = this.normalizeDimension(this.options.width);
+    const normalizedHeight = this.normalizeDimension(this.options.height);
+    const isPercentageWidth = typeof normalizedWidth === "string" && normalizedWidth.includes("%");
+    const isPercentageHeight = typeof normalizedHeight === "string" && normalizedHeight.includes("%");
+    if (!isPercentageWidth && !isPercentageHeight) {
+      return;
+    }
+    this.lastKnownWidth = this.element.offsetWidth;
+    this.lastKnownHeight = this.element.offsetHeight;
+    this.containerResizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = entry.contentRect.width;
+        const newHeight = entry.contentRect.height;
+        const widthChanged = Math.abs(newWidth - this.lastKnownWidth) > 1;
+        const heightChanged = Math.abs(newHeight - this.lastKnownHeight) > 1;
+        if (widthChanged || heightChanged) {
+          this.lastKnownWidth = newWidth;
+          this.lastKnownHeight = newHeight;
+          this.handleContainerResize();
+        }
+      }
+    });
+    this.containerResizeObserver.observe(this.element);
+  }
+  handleContainerResize() {
+    if (this.resizeDebounceTimer !== null) {
+      window.clearTimeout(this.resizeDebounceTimer);
+    }
+    this.resizeDebounceTimer = window.setTimeout(() => {
+      this.performResize();
+      this.resizeDebounceTimer = null;
+    }, 150);
+  }
+  performResize() {
+    if (!this.element || this.isDestroyed()) {
+      return;
+    }
+    const normalizedWidth = this.normalizeDimension(this.options.width);
+    const normalizedHeight = this.normalizeDimension(this.options.height);
+    const isPercentageWidth = typeof normalizedWidth === "string" && normalizedWidth.includes("%");
+    const isPercentageHeight = typeof normalizedHeight === "string" && normalizedHeight.includes("%");
+    if (isPercentageWidth) {
+      const computedWidth = window.getComputedStyle(this.element.parentElement || this.element).width;
+      const currentElementWidth = window.getComputedStyle(this.element).width;
+      if (computedWidth !== currentElementWidth) {
+        requestAnimationFrame(() => {
+          this.positionHorizontalScrollbar();
+          this.updateHorizontalScrollbarContent();
+          this.syncTasksColumnWidths();
+        });
+      }
+    }
+    if (isPercentageHeight) {
+      requestAnimationFrame(() => {
+        this.fillEmptyRowsAfterRender();
+      });
+    }
+  }
   destroy() {
     try {
+      if (this.containerResizeObserver) {
+        this.containerResizeObserver.disconnect();
+        this.containerResizeObserver = null;
+      }
+      if (this.resizeDebounceTimer !== null) {
+        window.clearTimeout(this.resizeDebounceTimer);
+        this.resizeDebounceTimer = null;
+      }
       if (this.zoomHandler) {
         const chartInstanceId = this.getInstanceId();
         const timelineElement = this.chartContext.querySelector(