Help with tweaking the Madison Giammaria Hierarchical Gantt Visual

[Scobes]

Hi Folks. I am using the Madison Giammaria Hierarchical Gantt chart to plot project task progress for multiple project with various phases in each. In genreal it is working very well.

This is the URL for the visual: https://github.com/Giammaria/Vega-Visuals/tree/main/20240724-hierarchical-gantt-chart

I would really appreciate some help with a few issues though to make this more user friendly and give us the ability to share this with stakeholders more confidently;

1. Our data only contains start and end dates for the child tasks, not the parents (phases) or grandparents (projects). Like David Bacci's gantt, I would like these parents to take the earliest start and latest end date for their child items.

2. The same as the first point but for completion %. I would like this to be calculated automatically based on the completion of the child items.

3. The viewing window for the gantt chart does not extend to the bottom of the visual, leaving a large blank space at the bottom of the page. I would like this to be extended all the way.

4. The colours of each line item are rather dull until hovered over. I would like to remove this functionality so that the colours always remain bold, but only the text is made bold when hovered over (which does currently happen).

Could anyone please help me with these changes and advise on the code changes that would need to be made to get them working?

Your help is greatly appreciated.

[johnbasha33 · Accepted solution]

@Scobes 

You need to modify the Vega JSON (in the Gantt chart visual) to calculate the minimum start and maximum end dates of their children dynamically.

Rough Vega logic you would add:
{
"transform": [
{
"type": "aggregate",
"groupby": ["ParentName"],
"fields": ["StartDate", "EndDate"],
"ops": ["min", "max"],
"as": ["ParentStartDate", "ParentEndDate"]
}
]
}

You can average the child tasks' % complete values to create a parent's % complete.

Vega logic for that:
{
"transform": [
{
"type": "aggregate",
"groupby": ["ParentName"],
"fields": ["Completion"],
"ops": ["mean"],
"as": ["ParentCompletion"]
}
]
}

In Vega, the space depends on the scale range and size settings.

Check your height property inside your Vega spec:

"height": {"step": 30}

Currently, Vega is probably using something like "opacity": {"value": 0.5} and then "hover": {"opacity": 1}.

You can remove the "opacity" behavior altogether for the base state and only affect text on hover.

Fix in Vega mark definition:

• Find your marks array (where Gantt bars are defined).

• Inside encode -> update, remove or set opacity to 1.

Example fix:
"encode": {
"update": {
"opacity": {"value": 1},
"fill": {"scale": "color", "field": "ProjectPhase"}
},
"hover": {
"fontWeight": {"value": "bold"},
"fill": {"scale": "color", "field": "ProjectPhase"}
}
}

Did I answer your question? Mark my post as a solution! Appreciate your Kudos !!