Skip to content

Commit 8abe425

Browse files
junedchhipajunedchhipa
committed
release: 3.8.0
1 parent 86c204e commit 8abe425

39 files changed

+2448
-81
lines changed

‎apexgantt.es.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apexgantt.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/accessibility-demo.html‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>ApexGantt — Accessibility Demo (WCAG 2.1 AA)</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap" rel="stylesheet" />
8+
<script src="../apexgantt.min.js"></script>
9+
<style>
10+
body {
11+
font-family: 'Quicksand', sans-serif;
12+
margin: 0;
13+
padding: 20px;
14+
background: #f5f7fa;
15+
}
16+
17+
h1 {
18+
font-size: 1.5rem;
19+
margin-bottom: 4px;
20+
}
21+
22+
.subtitle {
23+
color: #555;
24+
margin-bottom: 20px;
25+
font-size: 0.9rem;
26+
}
27+
28+
.instructions {
29+
background: #e8f4fd;
30+
border: 1px solid #b3d8f5;
31+
border-radius: 6px;
32+
padding: 14px 18px;
33+
margin-bottom: 20px;
34+
font-size: 0.875rem;
35+
line-height: 1.6;
36+
}
37+
38+
.instructions h2 {
39+
margin: 0 0 8px;
40+
font-size: 1rem;
41+
}
42+
43+
.instructions ul {
44+
margin: 0;
45+
padding-left: 20px;
46+
}
47+
48+
kbd {
49+
background: #fff;
50+
border: 1px solid #ccc;
51+
border-radius: 3px;
52+
padding: 1px 5px;
53+
font-family: monospace;
54+
font-size: 0.85em;
55+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
56+
}
57+
58+
#gantt-a11y {
59+
margin: 0 auto;
60+
}
61+
</style>
62+
</head>
63+
<body>
64+
<h1>ApexGantt — Accessibility Demo</h1>
65+
<p class="subtitle">WCAG 2.1 AA · ARIA roles · Keyboard navigation · Focus management · prefers-reduced-motion</p>
66+
67+
<div id="gantt-a11y"></div>
68+
69+
<div class="instructions">
70+
<h2>⌨️ Keyboard Navigation</h2>
71+
<ul>
72+
<li>Click any task row or press <kbd>Tab</kbd> to focus the task list.</li>
73+
<li><kbd>↑</kbd> / <kbd>↓</kbd> — move between rows</li>
74+
<li><kbd>→</kbd> — expand a collapsed parent / move to first child</li>
75+
<li><kbd>←</kbd> — collapse an expanded parent / move to parent row</li>
76+
<li><kbd>Home</kbd> — jump to first row &nbsp;|&nbsp; <kbd>End</kbd> — jump to last row</li>
77+
<li><kbd>Space</kbd> — select / deselect the focused row</li>
78+
<li><kbd>Enter</kbd> — open the edit form for the focused row (when task editing is enabled)</li>
79+
<li><kbd>Escape</kbd> — release focus from the task list</li>
80+
<li>
81+
Task bars in the timeline are focusable via <kbd>Tab</kbd>; press <kbd>Enter</kbd> or <kbd>Space</kbd> to open
82+
the edit form.
83+
</li>
84+
</ul>
85+
</div>
86+
87+
<script>
88+
const ganttOptions = {
89+
taskListAriaLabel: 'Project task list — WCAG 2.1 AA demo',
90+
enableTaskEdit: true,
91+
enableTaskDrag: true,
92+
enableTaskResize: true,
93+
enableTooltip: true,
94+
height: 500,
95+
series: [
96+
{
97+
id: 'phase1',
98+
startTime: '03-01-2025',
99+
endTime: '03-31-2025',
100+
name: 'Phase 1 — Planning',
101+
progress: 100,
102+
},
103+
{
104+
id: 'p1t1',
105+
startTime: '03-01-2025',
106+
endTime: '03-10-2025',
107+
name: 'Requirements gathering',
108+
parentId: 'phase1',
109+
progress: 100,
110+
},
111+
{
112+
id: 'p1t2',
113+
startTime: '03-11-2025',
114+
endTime: '03-20-2025',
115+
name: 'Stakeholder sign-off',
116+
parentId: 'phase1',
117+
dependency: 'p1t1',
118+
progress: 100,
119+
},
120+
{
121+
id: 'p1t3',
122+
startTime: '03-21-2025',
123+
endTime: '03-31-2025',
124+
name: 'Architecture design',
125+
parentId: 'phase1',
126+
dependency: 'p1t2',
127+
progress: 100,
128+
},
129+
{
130+
id: 'ms1',
131+
startTime: '03-31-2025',
132+
name: 'Planning complete ✓',
133+
dependency: 'p1t3',
134+
type: 'milestone',
135+
},
136+
{
137+
id: 'phase2',
138+
startTime: '04-01-2025',
139+
endTime: '05-15-2025',
140+
name: 'Phase 2 — Development',
141+
progress: 60,
142+
},
143+
{
144+
id: 'p2t1',
145+
startTime: '04-01-2025',
146+
endTime: '04-18-2025',
147+
name: 'Backend API',
148+
parentId: 'phase2',
149+
progress: 85,
150+
},
151+
{
152+
id: 'p2t2',
153+
startTime: '04-01-2025',
154+
endTime: '04-25-2025',
155+
name: 'Frontend UI',
156+
parentId: 'phase2',
157+
progress: 70,
158+
},
159+
{
160+
id: 'p2t3',
161+
startTime: '04-26-2025',
162+
endTime: '05-15-2025',
163+
name: 'Integration & QA',
164+
parentId: 'phase2',
165+
dependency: 'p2t1',
166+
progress: 20,
167+
},
168+
{
169+
id: 'phase3',
170+
startTime: '05-16-2025',
171+
endTime: '05-30-2025',
172+
name: 'Phase 3 — Launch',
173+
progress: 0,
174+
},
175+
{
176+
id: 'p3t1',
177+
startTime: '05-16-2025',
178+
endTime: '05-23-2025',
179+
name: 'User acceptance testing',
180+
parentId: 'phase3',
181+
dependency: 'p2t3',
182+
progress: 0,
183+
},
184+
{
185+
id: 'p3t2',
186+
startTime: '05-24-2025',
187+
endTime: '05-29-2025',
188+
name: 'Production deployment',
189+
parentId: 'phase3',
190+
dependency: 'p3t1',
191+
progress: 0,
192+
},
193+
{
194+
id: 'ms2',
195+
startTime: '05-30-2025',
196+
name: 'Project launch 🚀',
197+
dependency: 'p3t2',
198+
type: 'milestone',
199+
},
200+
],
201+
tooltipTemplate: (task, dateFormat) => {
202+
return `
203+
<div style="padding:10px 14px;">
204+
<strong>${task.name}</strong><br/>
205+
<small>Start: ${task.startTime}</small><br/>
206+
<small>End: ${task.endTime || '—'}</small><br/>
207+
<small>Progress: ${task.progress ?? 0}%</small>
208+
</div>
209+
`;
210+
},
211+
};
212+
213+
const gantt = new ApexGantt(document.getElementById('gantt-a11y'), ganttOptions);
214+
gantt.render();
215+
</script>
216+
</body>
217+
</html>

‎demo/baseline.html‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>ApexGantt — Baseline Overlay (Planned vs. Actual)</title>
7+
<script src="../apexgantt.min.js"></script>
8+
<style>
9+
body {
10+
font-family: sans-serif;
11+
margin: 20px;
12+
background: #f8f9fa;
13+
}
14+
15+
h1 {
16+
font-size: 20px;
17+
margin-bottom: 4px;
18+
}
19+
20+
p {
21+
color: #555;
22+
margin-bottom: 16px;
23+
font-size: 14px;
24+
}
25+
26+
.legend {
27+
display: flex;
28+
gap: 20px;
29+
margin-bottom: 16px;
30+
font-size: 13px;
31+
align-items: center;
32+
}
33+
34+
.legend-item {
35+
display: flex;
36+
align-items: center;
37+
gap: 6px;
38+
}
39+
40+
/* Solid bar representing the actual schedule */
41+
.legend-actual {
42+
width: 40px;
43+
height: 14px;
44+
border-radius: 3px;
45+
background: #87b7fe;
46+
}
47+
48+
/* Hatched bar representing the baseline plan */
49+
.legend-baseline {
50+
width: 40px;
51+
height: 14px;
52+
border-radius: 3px;
53+
background-color: #87b7fe;
54+
background-image: repeating-linear-gradient(
55+
-45deg,
56+
transparent 0px,
57+
transparent 4px,
58+
rgba(0, 0, 0, 0.18) 4px,
59+
rgba(0, 0, 0, 0.18) 7px
60+
);
61+
opacity: 0.5;
62+
}
63+
</style>
64+
</head>
65+
<body>
66+
<h1>Baseline Overlay — Planned vs. Actual Bars</h1>
67+
<p>
68+
The hatched overlay shows the original planned (baseline) schedule. It uses the same colour as the actual bar but
69+
with a diagonal stripe pattern and reduced opacity so both periods are easy to compare at a glance.
70+
</p>
71+
72+
<div id="svg-gantt" style="margin: 0 auto"></div>
73+
74+
<script>
75+
const ganttOptions = {
76+
enableTaskDrag: false,
77+
enableTaskResize: false,
78+
baseline: {
79+
enabled: true,
80+
opacity: 0.5,
81+
},
82+
series: [
83+
{
84+
id: 'design',
85+
name: 'Design',
86+
startTime: '01-10-2026',
87+
endTime: '01-20-2026',
88+
progress: 100,
89+
baseline: {
90+
start: '01-08-2026',
91+
end: '01-18-2026',
92+
},
93+
},
94+
{
95+
id: 'development',
96+
name: 'Development',
97+
startTime: '01-21-2026',
98+
endTime: '02-10-2026',
99+
progress: 60,
100+
baseline: {
101+
start: '01-19-2026',
102+
end: '02-05-2026',
103+
},
104+
},
105+
{
106+
id: 'dev-frontend',
107+
name: 'Frontend',
108+
parentId: 'development',
109+
startTime: '01-21-2026',
110+
endTime: '02-03-2026',
111+
progress: 75,
112+
baseline: {
113+
start: '01-19-2026',
114+
end: '02-01-2026',
115+
},
116+
},
117+
{
118+
id: 'dev-backend',
119+
name: 'Backend',
120+
parentId: 'development',
121+
startTime: '01-28-2026',
122+
endTime: '02-10-2026',
123+
progress: 45,
124+
baseline: {
125+
start: '01-26-2026',
126+
end: '02-05-2026',
127+
},
128+
},
129+
{
130+
id: 'testing',
131+
name: 'Testing',
132+
startTime: '02-11-2026',
133+
endTime: '02-20-2026',
134+
progress: 10,
135+
baseline: {
136+
start: '02-06-2026',
137+
end: '02-14-2026',
138+
},
139+
},
140+
{
141+
id: 'no-baseline',
142+
name: 'Deployment (no baseline)',
143+
startTime: '02-21-2026',
144+
endTime: '02-25-2026',
145+
progress: 0,
146+
},
147+
],
148+
};
149+
150+
const gantt = new ApexGantt(document.getElementById('svg-gantt'), ganttOptions);
151+
gantt.render();
152+
</script>
153+
</body>
154+
</html>

0 commit comments

Comments
 (0)