Skip to content

Commit be1a2ab

Browse files
github-actions[bot]MarkusNeusinger
github-actions[bot]
authored and
MarkusNeusinger
committed
fix(highcharts): address review feedback for gantt-dependencies
Attempt 2/3 - fixes based on AI review
1 parent 2b5a908 commit be1a2ab

1 file changed

Lines changed: 68 additions & 40 deletions

File tree

‎plots/gantt-dependencies/implementations/highcharts.py‎

Lines changed: 68 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
""" pyplots.ai
1+
"""pyplots.ai
22
gantt-dependencies: Gantt Chart with Dependencies
33
Library: highcharts 1.10.3 | Python 3.14
44
Quality: 89/100 | Updated: 2026-02-25
@@ -20,19 +20,41 @@
2020

2121
# Chart configuration using Highcharts Gantt with parent/child grouping
2222
# Software Development Project: 4 phases, 12 tasks + 2 milestones, finish-to-start dependencies
23+
# Critical path highlighted with bold red connectors; non-critical shown as light dashed lines
2324
# Refined muted palette: slate blue, amber, muted purple, teal
2425
chart_config = """
2526
Highcharts.ganttChart('container', {
2627
chart: {
2728
width: 4800,
28-
height: 2700,
29+
height: 2550,
2930
backgroundColor: '#FAFBFC',
3031
spacingTop: 50,
31-
spacingBottom: 50,
32+
spacingBottom: 40,
3233
spacingLeft: 50,
3334
spacingRight: 50,
3435
style: {
3536
fontFamily: '"Segoe UI", "Helvetica Neue", Arial, sans-serif'
37+
},
38+
events: {
39+
load: function() {
40+
var ren = this.renderer;
41+
var x = this.plotLeft + this.plotWidth - 560;
42+
var y = this.plotTop + this.plotHeight + 10;
43+
// Critical path legend
44+
ren.path(['M', x, y, 'L', x + 55, y])
45+
.attr({ 'stroke-width': 4, stroke: '#C0392B' })
46+
.add();
47+
ren.text('Critical Path', x + 68, y + 6)
48+
.css({ fontSize: '20px', color: '#5D6D7E', fontWeight: '600' })
49+
.add();
50+
// Non-critical legend
51+
ren.path(['M', x + 280, y, 'L', x + 335, y])
52+
.attr({ 'stroke-width': 2, stroke: '#B0BEC5', 'stroke-dasharray': '6,4' })
53+
.add();
54+
ren.text('Non-Critical', x + 348, y + 6)
55+
.css({ fontSize: '20px', color: '#95A5A6', fontWeight: '400' })
56+
.add();
57+
}
3658
}
3759
},
3860
title: {
@@ -106,18 +128,18 @@
106128
align: 'left',
107129
padding: 12,
108130
style: {
109-
fontSize: '18px',
131+
fontSize: '22px',
110132
fontWeight: '600',
111-
textOutline: '2.5px #FAFBFC'
133+
textOutline: '3px #FAFBFC'
112134
},
113135
format: '{point.name}',
114136
overflow: 'allow',
115137
crop: false
116138
},
117139
connectors: {
118-
lineWidth: 3,
119-
dashStyle: 'Solid',
120-
lineColor: '#5D6D7E',
140+
lineWidth: 2,
141+
dashStyle: 'ShortDash',
142+
lineColor: '#B0BEC5',
121143
radius: 10,
122144
startMarker: {
123145
enabled: false
@@ -126,15 +148,15 @@
126148
enabled: true,
127149
width: 12,
128150
height: 12,
129-
color: '#5D6D7E'
151+
color: '#B0BEC5'
130152
}
131153
}
132154
}
133155
},
134156
series: [{
135157
name: 'Project Schedule',
136158
data: [
137-
// Phase 1: Requirements (Jan 1 - Jan 20) — Slate Blue
159+
// Phase 1: Requirements (Jan 1 - Jan 22) — Slate Blue
138160
{
139161
id: 'requirements',
140162
name: 'Requirements Phase',
@@ -154,7 +176,7 @@
154176
parent: 'requirements',
155177
start: Date.UTC(2024, 0, 11),
156178
end: Date.UTC(2024, 0, 17),
157-
dependency: 'req_gather',
179+
dependency: { to: 'req_gather', lineColor: '#C0392B', lineWidth: 4 },
158180
color: '#306998'
159181
},
160182
{
@@ -163,7 +185,7 @@
163185
parent: 'requirements',
164186
start: Date.UTC(2024, 0, 18),
165187
end: Date.UTC(2024, 0, 22),
166-
dependency: 'req_analysis',
188+
dependency: { to: 'req_analysis', lineColor: '#C0392B', lineWidth: 4 },
167189
color: '#306998'
168190
},
169191
// Milestone: Requirements Baseline
@@ -173,7 +195,7 @@
173195
parent: 'requirements',
174196
start: Date.UTC(2024, 0, 22),
175197
milestone: true,
176-
dependency: 'req_approval',
198+
dependency: { to: 'req_approval', lineColor: '#C0392B', lineWidth: 4 },
177199
color: '#1A3A5C'
178200
},
179201
// Phase 2: Design (Jan 23 - Feb 9) — Amber
@@ -188,7 +210,7 @@
188210
parent: 'design',
189211
start: Date.UTC(2024, 0, 23),
190212
end: Date.UTC(2024, 1, 2),
191-
dependency: 'milestone_req',
213+
dependency: { to: 'milestone_req', lineColor: '#C0392B', lineWidth: 4 },
192214
color: '#D4920B'
193215
},
194216
{
@@ -197,7 +219,7 @@
197219
parent: 'design',
198220
start: Date.UTC(2024, 0, 23),
199221
end: Date.UTC(2024, 1, 5),
200-
dependency: 'milestone_req',
222+
dependency: { to: 'milestone_req', lineColor: '#B0BEC5', lineWidth: 2, dashStyle: 'ShortDash' },
201223
color: '#E8A817'
202224
},
203225
{
@@ -206,10 +228,10 @@
206228
parent: 'design',
207229
start: Date.UTC(2024, 1, 3),
208230
end: Date.UTC(2024, 1, 9),
209-
dependency: 'design_arch',
231+
dependency: { to: 'design_arch', lineColor: '#C0392B', lineWidth: 4 },
210232
color: '#D4920B'
211233
},
212-
// Phase 3: Development (Feb 10 - Mar 15) — Muted Purple
234+
// Phase 3: Development (Feb 7 - Mar 15) — Muted Purple
213235
{
214236
id: 'development',
215237
name: 'Development Phase',
@@ -221,7 +243,7 @@
221243
parent: 'development',
222244
start: Date.UTC(2024, 1, 12),
223245
end: Date.UTC(2024, 2, 4),
224-
dependency: 'design_db',
246+
dependency: { to: 'design_db', lineColor: '#C0392B', lineWidth: 4 },
225247
color: '#7B5EA7'
226248
},
227249
{
@@ -230,7 +252,7 @@
230252
parent: 'development',
231253
start: Date.UTC(2024, 1, 7),
232254
end: Date.UTC(2024, 2, 1),
233-
dependency: 'design_ui',
255+
dependency: { to: 'design_ui', lineColor: '#B0BEC5', lineWidth: 2, dashStyle: 'ShortDash' },
234256
color: '#9B7EC8'
235257
},
236258
{
@@ -239,7 +261,10 @@
239261
parent: 'development',
240262
start: Date.UTC(2024, 2, 5),
241263
end: Date.UTC(2024, 2, 15),
242-
dependency: ['dev_backend', 'dev_frontend'],
264+
dependency: [
265+
{ to: 'dev_backend', lineColor: '#C0392B', lineWidth: 4 },
266+
{ to: 'dev_frontend', lineColor: '#B0BEC5', lineWidth: 2, dashStyle: 'ShortDash' }
267+
],
243268
color: '#7B5EA7'
244269
},
245270
// Phase 4: Testing (Mar 5 - Mar 29) — Teal
@@ -254,7 +279,7 @@
254279
parent: 'testing',
255280
start: Date.UTC(2024, 2, 5),
256281
end: Date.UTC(2024, 2, 15),
257-
dependency: 'dev_backend',
282+
dependency: { to: 'dev_backend', lineColor: '#B0BEC5', lineWidth: 2, dashStyle: 'ShortDash' },
258283
color: '#0F8B8D'
259284
},
260285
{
@@ -263,7 +288,10 @@
263288
parent: 'testing',
264289
start: Date.UTC(2024, 2, 16),
265290
end: Date.UTC(2024, 2, 22),
266-
dependency: ['dev_integration', 'test_unit'],
291+
dependency: [
292+
{ to: 'dev_integration', lineColor: '#C0392B', lineWidth: 4 },
293+
{ to: 'test_unit', lineColor: '#B0BEC5', lineWidth: 2, dashStyle: 'ShortDash' }
294+
],
267295
color: '#0F8B8D'
268296
},
269297
{
@@ -272,7 +300,7 @@
272300
parent: 'testing',
273301
start: Date.UTC(2024, 2, 23),
274302
end: Date.UTC(2024, 2, 29),
275-
dependency: 'test_integration',
303+
dependency: { to: 'test_integration', lineColor: '#C0392B', lineWidth: 4 },
276304
color: '#0F8B8D'
277305
},
278306
// Milestone: Release Ready
@@ -282,7 +310,7 @@
282310
parent: 'testing',
283311
start: Date.UTC(2024, 2, 29),
284312
milestone: true,
285-
dependency: 'test_uat',
313+
dependency: { to: 'test_uat', lineColor: '#C0392B', lineWidth: 4 },
286314
color: '#1A3A5C'
287315
}
288316
]
@@ -298,7 +326,7 @@
298326
<script>{highcharts_gantt_js}</script>
299327
</head>
300328
<body style="margin:0; padding:0; background:#FAFBFC;">
301-
<div id="container" style="width:4800px; height:2700px;"></div>
329+
<div id="container" style="width:4800px; height:2550px;"></div>
302330
<script>
303331
{chart_config}
304332
</script>
@@ -367,9 +395,9 @@
367395
borderRadius: 5,
368396
connectors: {
369397
lineWidth: 2,
370-
lineColor: '#5D6D7E',
398+
lineColor: '#B0BEC5',
371399
radius: 8,
372-
endMarker: { enabled: true, color: '#5D6D7E' }
400+
endMarker: { enabled: true, color: '#B0BEC5' }
373401
}
374402
}
375403
},
@@ -378,22 +406,22 @@
378406
data: [
379407
{ id: 'requirements', name: 'Requirements Phase', color: '#306998' },
380408
{ id: 'req_gather', name: 'Gather Requirements', parent: 'requirements', start: Date.UTC(2024, 0, 1), end: Date.UTC(2024, 0, 10), color: '#306998' },
381-
{ id: 'req_analysis', name: 'Requirements Analysis', parent: 'requirements', start: Date.UTC(2024, 0, 11), end: Date.UTC(2024, 0, 17), dependency: 'req_gather', color: '#306998' },
382-
{ id: 'req_approval', name: 'Stakeholder Approval', parent: 'requirements', start: Date.UTC(2024, 0, 18), end: Date.UTC(2024, 0, 22), dependency: 'req_analysis', color: '#306998' },
383-
{ id: 'milestone_req', name: 'Requirements Baseline \\u2713', parent: 'requirements', start: Date.UTC(2024, 0, 22), milestone: true, dependency: 'req_approval', color: '#1A3A5C' },
409+
{ id: 'req_analysis', name: 'Requirements Analysis', parent: 'requirements', start: Date.UTC(2024, 0, 11), end: Date.UTC(2024, 0, 17), dependency: { to: 'req_gather', lineColor: '#C0392B', lineWidth: 3 }, color: '#306998' },
410+
{ id: 'req_approval', name: 'Stakeholder Approval', parent: 'requirements', start: Date.UTC(2024, 0, 18), end: Date.UTC(2024, 0, 22), dependency: { to: 'req_analysis', lineColor: '#C0392B', lineWidth: 3 }, color: '#306998' },
411+
{ id: 'milestone_req', name: 'Requirements Baseline \\u2713', parent: 'requirements', start: Date.UTC(2024, 0, 22), milestone: true, dependency: { to: 'req_approval', lineColor: '#C0392B', lineWidth: 3 }, color: '#1A3A5C' },
384412
{ id: 'design', name: 'Design Phase', color: '#D4920B' },
385-
{ id: 'design_arch', name: 'Architecture Design', parent: 'design', start: Date.UTC(2024, 0, 23), end: Date.UTC(2024, 1, 2), dependency: 'milestone_req', color: '#D4920B' },
386-
{ id: 'design_ui', name: 'UI/UX Design', parent: 'design', start: Date.UTC(2024, 0, 23), end: Date.UTC(2024, 1, 5), dependency: 'milestone_req', color: '#E8A817' },
387-
{ id: 'design_db', name: 'Database Design', parent: 'design', start: Date.UTC(2024, 1, 3), end: Date.UTC(2024, 1, 9), dependency: 'design_arch', color: '#D4920B' },
413+
{ id: 'design_arch', name: 'Architecture Design', parent: 'design', start: Date.UTC(2024, 0, 23), end: Date.UTC(2024, 1, 2), dependency: { to: 'milestone_req', lineColor: '#C0392B', lineWidth: 3 }, color: '#D4920B' },
414+
{ id: 'design_ui', name: 'UI/UX Design', parent: 'design', start: Date.UTC(2024, 0, 23), end: Date.UTC(2024, 1, 5), dependency: { to: 'milestone_req', lineColor: '#B0BEC5', lineWidth: 2, dashStyle: 'ShortDash' }, color: '#E8A817' },
415+
{ id: 'design_db', name: 'Database Design', parent: 'design', start: Date.UTC(2024, 1, 3), end: Date.UTC(2024, 1, 9), dependency: { to: 'design_arch', lineColor: '#C0392B', lineWidth: 3 }, color: '#D4920B' },
388416
{ id: 'development', name: 'Development Phase', color: '#7B5EA7' },
389-
{ id: 'dev_backend', name: 'Backend Development', parent: 'development', start: Date.UTC(2024, 1, 12), end: Date.UTC(2024, 2, 4), dependency: 'design_db', color: '#7B5EA7' },
390-
{ id: 'dev_frontend', name: 'Frontend Development', parent: 'development', start: Date.UTC(2024, 1, 7), end: Date.UTC(2024, 2, 1), dependency: 'design_ui', color: '#9B7EC8' },
391-
{ id: 'dev_integration', name: 'System Integration', parent: 'development', start: Date.UTC(2024, 2, 5), end: Date.UTC(2024, 2, 15), dependency: ['dev_backend', 'dev_frontend'], color: '#7B5EA7' },
417+
{ id: 'dev_backend', name: 'Backend Development', parent: 'development', start: Date.UTC(2024, 1, 12), end: Date.UTC(2024, 2, 4), dependency: { to: 'design_db', lineColor: '#C0392B', lineWidth: 3 }, color: '#7B5EA7' },
418+
{ id: 'dev_frontend', name: 'Frontend Development', parent: 'development', start: Date.UTC(2024, 1, 7), end: Date.UTC(2024, 2, 1), dependency: { to: 'design_ui', lineColor: '#B0BEC5', lineWidth: 2, dashStyle: 'ShortDash' }, color: '#9B7EC8' },
419+
{ id: 'dev_integration', name: 'System Integration', parent: 'development', start: Date.UTC(2024, 2, 5), end: Date.UTC(2024, 2, 15), dependency: [{ to: 'dev_backend', lineColor: '#C0392B', lineWidth: 3 }, { to: 'dev_frontend', lineColor: '#B0BEC5', lineWidth: 2, dashStyle: 'ShortDash' }], color: '#7B5EA7' },
392420
{ id: 'testing', name: 'Testing Phase', color: '#0F8B8D' },
393-
{ id: 'test_unit', name: 'Unit Testing', parent: 'testing', start: Date.UTC(2024, 2, 5), end: Date.UTC(2024, 2, 15), dependency: 'dev_backend', color: '#0F8B8D' },
394-
{ id: 'test_integration', name: 'Integration Testing', parent: 'testing', start: Date.UTC(2024, 2, 16), end: Date.UTC(2024, 2, 22), dependency: ['dev_integration', 'test_unit'], color: '#0F8B8D' },
395-
{ id: 'test_uat', name: 'User Acceptance Testing', parent: 'testing', start: Date.UTC(2024, 2, 23), end: Date.UTC(2024, 2, 29), dependency: 'test_integration', color: '#0F8B8D' },
396-
{ id: 'milestone_release', name: 'Release Ready \\u2605', parent: 'testing', start: Date.UTC(2024, 2, 29), milestone: true, dependency: 'test_uat', color: '#1A3A5C' }
421+
{ id: 'test_unit', name: 'Unit Testing', parent: 'testing', start: Date.UTC(2024, 2, 5), end: Date.UTC(2024, 2, 15), dependency: { to: 'dev_backend', lineColor: '#B0BEC5', lineWidth: 2, dashStyle: 'ShortDash' }, color: '#0F8B8D' },
422+
{ id: 'test_integration', name: 'Integration Testing', parent: 'testing', start: Date.UTC(2024, 2, 16), end: Date.UTC(2024, 2, 22), dependency: [{ to: 'dev_integration', lineColor: '#C0392B', lineWidth: 3 }, { to: 'test_unit', lineColor: '#B0BEC5', lineWidth: 2, dashStyle: 'ShortDash' }], color: '#0F8B8D' },
423+
{ id: 'test_uat', name: 'User Acceptance Testing', parent: 'testing', start: Date.UTC(2024, 2, 23), end: Date.UTC(2024, 2, 29), dependency: { to: 'test_integration', lineColor: '#C0392B', lineWidth: 3 }, color: '#0F8B8D' },
424+
{ id: 'milestone_release', name: 'Release Ready \\u2605', parent: 'testing', start: Date.UTC(2024, 2, 29), milestone: true, dependency: { to: 'test_uat', lineColor: '#C0392B', lineWidth: 3 }, color: '#1A3A5C' }
397425
]
398426
}]
399427
});

0 commit comments

Comments
 (0)