apexgantt 3.1.1 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -0
- package/apexgantt.es.min.js +153 -64
- package/apexgantt.min.js +2 -2
- package/demo/basic-gantt-large-range.html +1 -1
- package/demo/basic-gantt.html +1 -1
- package/demo/data-parsing.html +1 -1
- package/demo/gantt-with-annotations.html +1 -1
- package/demo/gantt-with-interactions.html +2 -1
- package/lib/gantt.d.ts +10 -0
- package/lib/models/Options.d.ts +6 -1
- package/lib/models/Tasks.d.ts +9 -0
- package/lib/styles/Tasks.style.d.ts +1 -1
- package/lib/util/gantt-export.d.ts +1 -0
- package/lib/util/task.util.d.ts +7 -1
- package/package.json +1 -1
package/demo/basic-gantt.html
CHANGED
package/demo/data-parsing.html
CHANGED
|
@@ -8,9 +8,10 @@
|
|
|
8
8
|
<script src="../apexgantt.min.js"></script>
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
|
-
<div id="svg-gantt" style="margin: 0 auto
|
|
11
|
+
<div id="svg-gantt" style="margin: 0 auto"></div>
|
|
12
12
|
<script>
|
|
13
13
|
const ganttOptions = {
|
|
14
|
+
width: '90%',
|
|
14
15
|
enableTooltip: false,
|
|
15
16
|
enableTaskDrag: true,
|
|
16
17
|
enableTaskEdit: true,
|
package/lib/gantt.d.ts
CHANGED
|
@@ -14,6 +14,9 @@ export declare class ApexGantt extends BaseChart {
|
|
|
14
14
|
private scrollbarResizeObserver;
|
|
15
15
|
private splitBarResizeHandler;
|
|
16
16
|
private stateManager;
|
|
17
|
+
private containerResizeObserver;
|
|
18
|
+
private lastKnownWidth;
|
|
19
|
+
private resizeDebounceTimer;
|
|
17
20
|
constructor(element: HTMLElement, options?: GanttUserOptions);
|
|
18
21
|
static setLicense(key: string): void;
|
|
19
22
|
private setupShadowDOMEnvironment;
|
|
@@ -30,6 +33,7 @@ export declare class ApexGantt extends BaseChart {
|
|
|
30
33
|
private isColorDark;
|
|
31
34
|
private initializeTooltip;
|
|
32
35
|
render(data?: any): any;
|
|
36
|
+
private performAfterActions;
|
|
33
37
|
/**
|
|
34
38
|
* Setup proper positioning for chart container to support dialogs
|
|
35
39
|
*/
|
|
@@ -77,6 +81,12 @@ export declare class ApexGantt extends BaseChart {
|
|
|
77
81
|
* Normalize dimension value to CSS string
|
|
78
82
|
*/
|
|
79
83
|
private normalizeDimension;
|
|
84
|
+
/**
|
|
85
|
+
* resize observer for container to handle responsive width changes
|
|
86
|
+
*/
|
|
87
|
+
private setupContainerResizeObserver;
|
|
88
|
+
private handleContainerResize;
|
|
89
|
+
private performResize;
|
|
80
90
|
destroy(): void;
|
|
81
91
|
isDestroyed(): boolean;
|
|
82
92
|
}
|
package/lib/models/Options.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { ParsingConfig } from '../models/DataParser';
|
|
|
2
2
|
import { ThemeMode } from './Theme';
|
|
3
3
|
import { Task, TaskInput } from './Tasks';
|
|
4
4
|
import { Annotation, Orientation } from './Annotation';
|
|
5
|
+
import { ColumnListItem } from '../util/task.util';
|
|
5
6
|
import { ViewMode } from '../util/gantt.util';
|
|
6
7
|
|
|
7
8
|
export interface AnnotationOptions {
|
|
@@ -28,6 +29,9 @@ export interface CommonOptions {
|
|
|
28
29
|
readonly viewMode: ViewMode;
|
|
29
30
|
readonly width: number | string;
|
|
30
31
|
}
|
|
32
|
+
export interface ColumnOptions {
|
|
33
|
+
readonly columnConfig?: ColumnListItem[];
|
|
34
|
+
}
|
|
31
35
|
export interface FontOptions {
|
|
32
36
|
readonly fontColor: string;
|
|
33
37
|
readonly fontFamily: string;
|
|
@@ -61,7 +65,7 @@ export interface TooltipOptions {
|
|
|
61
65
|
readonly tooltipId: string;
|
|
62
66
|
readonly tooltipTemplate?: (task: Task, dateFormat: string) => string;
|
|
63
67
|
}
|
|
64
|
-
export type GanttOptionsInternal = AnnotationOptions & BorderOptions & CommonOptions & FontOptions & GanttBarOptions & GanttData & GanttRowOptions & InteractiveOptions & TooltipOptions;
|
|
68
|
+
export type GanttOptionsInternal = AnnotationOptions & BorderOptions & CommonOptions & ColumnOptions & FontOptions & GanttBarOptions & GanttData & GanttRowOptions & InteractiveOptions & TooltipOptions;
|
|
65
69
|
export interface GanttUserOptions {
|
|
66
70
|
readonly theme?: ThemeMode;
|
|
67
71
|
readonly annotationBgColor?: string;
|
|
@@ -80,6 +84,7 @@ export interface GanttUserOptions {
|
|
|
80
84
|
readonly canvasStyle?: string;
|
|
81
85
|
readonly cellBorderColor?: string;
|
|
82
86
|
readonly cellBorderWidth?: string;
|
|
87
|
+
readonly columnConfig?: ColumnListItem[];
|
|
83
88
|
readonly enableExport?: boolean;
|
|
84
89
|
readonly enableResize?: boolean;
|
|
85
90
|
readonly enableTaskDrag?: boolean;
|
package/lib/models/Tasks.d.ts
CHANGED
|
@@ -31,7 +31,16 @@ export declare class Tasks {
|
|
|
31
31
|
options: GanttOptions;
|
|
32
32
|
chartContext: ChartContext;
|
|
33
33
|
dataManager: DataManager;
|
|
34
|
+
private effectiveColumnList;
|
|
34
35
|
constructor(options: GanttOptions, chartContext: ChartContext, dataManager: DataManager);
|
|
36
|
+
/**
|
|
37
|
+
* Merges user column config with defaults
|
|
38
|
+
*/
|
|
39
|
+
private mergeColumnConfig;
|
|
40
|
+
/**
|
|
41
|
+
* Dynamic CSS for column widths based on configuration
|
|
42
|
+
*/
|
|
43
|
+
private injectDynamicColumnStyles;
|
|
35
44
|
generateBody(tasks: Task[], reRender: () => void): HTMLElement;
|
|
36
45
|
generateHeader(headerList: string[]): HTMLElement;
|
|
37
46
|
generateRow(task: Task, reRender: () => void): HTMLElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const TableStyle = "\n .tasks-container {\n height: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n overflow-x: visible;\n overflow-y: visible;\n }\n\n .tasks-header {\n flex-shrink: 0;\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--header-bg-color, #F3F3F3);\n overflow: hidden;\n }\n\n .tasks-header-row {\n display:
|
|
1
|
+
export declare const TableStyle = "\n .tasks-container {\n height: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n overflow-x: visible;\n overflow-y: visible;\n }\n\n .tasks-header {\n flex-shrink: 0;\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--header-bg-color, #F3F3F3);\n overflow: hidden;\n }\n\n .tasks-header-row {\n display: grid;\n width: 100%;\n }\n\n .tasks-header-cell {\n padding: 0 10px;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n align-items: center;\n border: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n color: var(--text-color, #000);\n box-sizing: border-box;\n font-weight: 600;\n }\n\n .tasks-body-wrapper {\n flex: 1;\n overflow: visible;\n position: relative;\n }\n\n .tasks-data-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n .tasks-data-row {\n display: grid;\n width: 100%;\n border-bottom: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n box-sizing: border-box;\n }\n\n .tasks-data-cell {\n padding: 0 10px;\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n align-items: center;\n border-left: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n border-right: var(--cell-border-width, 1px) solid var(--cell-border-color, #eff0f0);\n color: var(--text-color, #000);\n box-sizing: border-box;\n }\n\n .tasks-data-row .tasks-data-cell:first-child {\n border-left: none;\n }\n\n .tasks-data-row .tasks-data-cell:last-child {\n border-right: none;\n }\n\n .tasks-data-row .task-toggle-icon,\n .tasks-data-row .task-toggle-icon-blank {\n display: inline-block;\n margin-right: 5px;\n width: 10px;\n height: 10px;\n vertical-align: middle;\n flex-shrink: 0;\n }\n\n .tasks-data-row .task-toggle-icon {\n cursor: pointer;\n position: relative;\n }\n\n /* Chevron (expanded) - pointing down */\n .tasks-data-row .task-toggle-icon.expanded::before {\n content: '';\n position: absolute;\n width: 6px;\n height: 6px;\n border-right: 2px solid var(--text-color, #000000);\n border-bottom: 2px solid var(--text-color, #000000);\n transform: rotate(45deg);\n top: 0;\n left: 2px;\n }\n\n /* Chevron - pointing right (collapsed) */\n .tasks-data-row .task-toggle-icon.collapsed::before {\n content: '';\n position: absolute;\n width: 6px;\n height: 6px;\n border-right: 2px solid var(--text-color, #000000);\n border-bottom: 2px solid var(--text-color, #000000);\n transform: rotate(-45deg);\n top: 2px;\n left: 0;\n }\n\n .tasks-data-row .task-toggle-icon:hover::before {\n opacity: 0.7;\n }\n\n /* Shadow DOM specific */\n :host .tasks-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n :host .tasks-header {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const exportGantt: (element: HTMLElement) => Promise<void>;
|
package/lib/util/task.util.d.ts
CHANGED
|
@@ -21,9 +21,15 @@ export declare const ColumnKeyTitleMap: {
|
|
|
21
21
|
export interface ColumnListItem {
|
|
22
22
|
readonly key: ColumnKey;
|
|
23
23
|
readonly title: string;
|
|
24
|
-
readonly
|
|
24
|
+
readonly minWidth?: string;
|
|
25
|
+
readonly flexGrow?: number;
|
|
25
26
|
}
|
|
26
27
|
export declare const ColumnList: ColumnListItem[];
|
|
28
|
+
/**
|
|
29
|
+
* generates grid-template-columns string based on column configuration
|
|
30
|
+
* @returns CSS grid-template-columns value
|
|
31
|
+
*/
|
|
32
|
+
export declare function generateGridTemplateColumns(columns: ColumnListItem[]): string;
|
|
27
33
|
export declare function getTaskTextByColumn(task: Task, columnKey: ColumnKey, inputDateFormat: string): string;
|
|
28
34
|
export declare function getTaskRowElement(context: ChartContext, taskId: string): HTMLElement | null;
|
|
29
35
|
export declare function getRowBackgroundColor(index: number, rowBackgroundColors: readonly string[]): string;
|