Given a gantt chart with at least two tasks, with a dependency from a task to the last one, When we display the dependencies, Then a vertical scrollbar appears at the right of the chart. 😕 Context ======= As explain in commit ["Introduce arrows for dependencies"][0], we use a safety gap to ensure that path, arrows, half turn can be displayed. ``` svg ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ ┃ ┃ ┃ ┃ ┌──────────────────┐━┓ ┃ ┃ │ │ ┃ ┃ ┃ ┏━━━━━━━━━━━━━━━━━━━━━━━┛ ┃ ┃ ┃ │ │ ┃ ┃ ┃ │ │ ┃ ┃ ┃ │ │ ┃ ┃ ┃ │ │ ┃ ┃ ┃ │ │ ┃ ┃ ┃ │ │ ┃ | gap ┃ ┃ │ │ ┃ v ┃ ┗━▶└──────────────────┘---------+- ┃ | ┃ | ┃ | ┃ | ┗━━━━━━━━━━━━━━━━━━━━━━━|━━━━┛----+- | | gap | | ----->+----+ | | ``` We chose an arbitrary value of 2 × offset + radius to have enough room. If we zoom in: ``` gap │◀──────────────────▶▒ │ ▒ │offset radius offset▒ │◀────▶│◀────▶│◀────▶▒ │ │ │ ▒ │ │ │ ▒ │ │ │ ▒ ██████████ │ ▒ ██ │ ▒ █ │ ▒ █│ ▒ █│ ▒ █ ▒ █ ▒ █ ▒ ▒ ▒ ``` Problem ======= The extra offset is a wasted space, but most important, it adds unecessary height to the svg graph, producing a scroll overflow when the arrow start from or points to the last task of the graph. Since the arrow is positionned at the middle of the task bar, the gap should be lesser than the half of the height of the task. For example, until now, gap was 24 (2 × 8 + 8) while the height of the task is 40: 24 > 40/2 => meh ☹️. ``` ┆ ╠═══════════╬══│════════┃════════════════════════════════════════ ║ ║ │ ┃ ʌ ║ ║ │ ┃ ┏━━━━━━━━━━━━━━━━━━━┓ | ║ task #123 ║ │ -----┗━▶┃███████████████████┃ | Task height ║ ║ │ ʌ ┗━━━━━━━━━━━━━━━━━━━┛ | ║ ║ │ |gap v ╚═══════════╩══│═════|═══════════════════════════════════════════ │ v └─────────────────┄┄ svg ``` Solution ======== The proposal is to remove the extra offset from the gap (but keep 1px room for the display of the line): ``` gap │◀────────────▶▒ │ ▒ │offset radius ▒ │◀────▶│◀────▶│▒ │ │ │▒ │ │ │▒ │ │ │▒ ████████████ │▒ ██ │▒ █ │▒ █│▒ █│▒ █▒ █▒ █▒ ▒ ▒ ``` With the current settings we have now: gap = offset + radius + 1 = 17 wich is less than 40/2 => no moar scrollbar 🎉 Part of story #19734: have a Roadmap widget on dashboard [0]: git #tuleap/stable/acb60c4c1af35694ed8fbc1f17a0e29435f8c922 Change-Id: I1cbb785faca14bfd4c67a67de153669f6a61c37b

+47 −42

Author

Nicolas Terray (nterray) 2021-04-19 15:00

Committer

Nicolas Terray (nterray) 2021-04-20 07:31

Hash ccd280f4deda779659e14b20d3d957c8071a9f36

Parent 35e938c79fabc4ae846b128bb8032ee9945b6955

Reference git #tuleap/stable/ccd280f4deda779659e14b20d3d957c8071a9f36