gantt-canvas-chart 1.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present, chandq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,117 @@
+# Gantt Canvas Chart
+
+A high-performance Gantt chart implementation using HTML5 Canvas with virtual rendering for optimal performance. This component is framework-agnostic and can be integrated into any web application regardless of the technology stack.
+
+## Features
+
+### High-Performance Virtual Rendering
+
+- Utilizes HTML5 Canvas for efficient rendering
+- Implements virtual scrolling to handle large datasets without performance degradation
+- Only renders visible elements, optimizing both memory and CPU usage
+- Smooth scrolling experience even with thousands of tasks
+
+### Framework Agnostic
+
+- Pure TypeScript implementation with no framework dependencies
+- Can be easily integrated into React, Vue, Angular, or vanilla JavaScript projects
+- Simple API for initialization and data updates
+- Lightweight and fast integration
+
+### Comprehensive Gantt Functionality
+
+- **Multiple View Modes**: Day, Week, Month, and Year views
+- **Task Visualization**: Plan vs Actual progress comparison
+- **Dependency Lines**: Visualize task dependencies with smart routing
+- **Customizable Styling**: Configurable colors and appearance
+- **Interactive Elements**: Tooltip support with detailed information
+- **Today Indicator**: Clear visualization of current date
+- **Grid Lines**: Toggle row and column lines for better readability
+- **Responsive Design**: Automatically adapts to container size changes
+
+### Rich Visualization Options
+
+- Plan timelines with customizable border colors
+- Actual progress bars with configurable background colors
+- Support for different task types including leave/vacation tasks
+- Multiple annotation options (left, center, right remarks)
+- Custom CSS classes for specific styling needs
+
+## Installation
+
+```bash
+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>
+```
+
+## Usage Example
+
+```typescript
+import { GanttChart } from 'gantt-canvas-chart';
+
+// Prepare your data
+const ganttData = [
+  {
+    name: 'Project Phase 1',
+    tasks: [
+      {
+        id: '1',
+        name: 'Research',
+        planStart: '2023-06-01',
+        planEnd: '2023-06-15',
+        actualStart: '2023-06-01',
+        actualEnd: '2023-06-17',
+        dependencies: []
+      },
+      {
+        id: '2',
+        name: 'Design',
+        planStart: '2023-06-16',
+        planEnd: '2023-06-30',
+        actualStart: '2023-06-18',
+        actualEnd: '2023-07-05',
+        dependencies: ['1']
+      }
+    ]
+  },
+  {
+    name: 'Project Phase 2',
+    tasks: [
+      {
+        id: '3',
+        name: 'Implementation',
+        planStart: '2023-07-01',
+        planEnd: '2023-07-31',
+        actualStart: '2023-07-06',
+        actualEnd: '2023-07-28',
+        dependencies: ['2']
+      }
+    ]
+  }
+];
+
+// Configuration options
+const config = {
+  viewMode: 'Month',
+  rowHeight: 48,
+  headerHeight: 56,
+  showPlan: true,
+  showActual: true,
+  showTooltip: true
+};
+
+// Initialize the chart
+const container = document.getElementById('gantt-container');
+const ganttChart = new GanttChart(container, ganttData, config);
+
+// Update data dynamically
+ganttChart.setData(newData);
+
+// Update configuration
+ganttChart.updateConfig({ viewMode: 'Week' });
+```

package/dist/core/dateUtils.d.ts

@@ -0,0 +1,14 @@
+export declare class DateUtils {
+    static readonly ONE_DAY_MS: number;
+    static format(date: Date, format?: string): string;
+    static addDays(date: Date, days: number): Date;
+    static addMonths(date: Date, months: number): Date;
+    static addYears(date: Date, years: number): Date;
+    static diffDays(date1: Date, date2: Date): number;
+    static diffDaysInclusive(date1: Date, date2: Date): number;
+    static getDaysInMonth(year: number, month: number): number;
+    static getWeekNumber(d: Date): number;
+    static getStartOfWeek(d: Date): Date;
+    static getStartOfMonth(d: Date): Date;
+    static getStartOfYear(d: Date): Date;
+}

package/dist/core/ganttChart.d.ts

@@ -0,0 +1,61 @@
+import { GanttData, GanttConfig } from './types';
+
+export declare class GanttChart {
+    private rootContainer;
+    private container;
+    private data;
+    private config;
+    private headerCanvas;
+    private mainCanvas;
+    private scrollDummy;
+    private tooltip;
+    private headerCtx;
+    private mainCtx;
+    private timelineStart;
+    private timelineEnd;
+    private pixelsPerDay;
+    private scrollLeft;
+    private scrollTop;
+    private visibleDateRange;
+    private today;
+    private devicePixelRatio;
+    private viewportWidth;
+    private viewportHeight;
+    private totalWidth;
+    private totalHeight;
+    private resizeObserver;
+    private taskPositions;
+    private taskMap;
+    constructor(rootContainer: HTMLElement, data: GanttData, config?: GanttConfig);
+    private init;
+    private buildTaskMap;
+    private setupEvents;
+    updateConfig(newConfig: GanttConfig): void;
+    setData(newData: GanttData): void;
+    destroy(): void;
+    private calculateFullTimeline;
+    private updatePixelsPerDay;
+    private dateToX;
+    private xToDate;
+    private handleResize;
+    private handleScroll;
+    setScrollTop(scrollTop: number): void;
+    private updateVirtualRanges;
+    private updateDimensions;
+    private setupCanvas;
+    private calculateAllTaskPositions;
+    private getIterationStartDate;
+    render(): void;
+    private renderHeader;
+    private renderMain;
+    private drawArrow;
+    private drawAllDependencies;
+    private drawAllTasks;
+    private drawGrid;
+    private drawToday;
+    private drawTask;
+    private getTaskStyles;
+    private handleMouseMove;
+    private getTaskTooltipHtml;
+    private handleMouseLeave;
+}

package/dist/core/types.d.ts

@@ -0,0 +1,52 @@
+export interface Task {
+    id: string;
+    name: string;
+    type?: 'task' | 'leave';
+    planStart?: string;
+    planEnd?: string;
+    actualStart?: string;
+    actualEnd?: string;
+    dependencies?: string[];
+    leftRemark?: string;
+    rightRemark?: string;
+    centerRemark?: string;
+    styleClass?: string;
+    planBorderColor?: string;
+    actualBgColor?: string;
+}
+export interface Row {
+    id: string;
+    name: string;
+    tasks: Task[];
+}
+export type GanttData = Row[];
+export interface GanttConfig {
+    viewMode?: 'Day' | 'Week' | 'Month' | 'Year';
+    planBorderColor?: string;
+    actualBgColor?: string;
+    rowHeight?: number;
+    headerHeight?: number;
+    showPlan?: boolean;
+    showActual?: boolean;
+    showRowLines?: boolean;
+    showColLines?: boolean;
+    showLeftRemark?: boolean;
+    showRightRemark?: boolean;
+    showCenterRemark?: boolean;
+    showTooltip?: boolean;
+    tooltipColor?: 'black' | 'white';
+    offsetTop?: number;
+    offsetLeft?: number;
+}
+export interface TaskPosition {
+    x_plan_start: number;
+    x_plan_end: number;
+    x_actual_start: number | null;
+    x_actual_end: number | null;
+    y: number;
+    row: number;
+}
+export interface VisibleDateRange {
+    start: Date;
+    end: Date;
+}

package/dist/core/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 获取第一个有效值
+ * @param args 有效值可选项
+ * @returns
+ */
+export declare function firstValidValue(...args: any[]): any;