Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Gantt Chart
Link to Figma: tba
Overview
- The Dynamic Gantt Chart component provides a visual timeline of tasks, events, or activities.
- It is designed for project management, scheduling, and resource allocation visualization.
- Users can see how activities are distributed over time and across resources.
- The chart highlights task durations, start and end dates, and dependencies.
...
- id – Specifies a unique identifier for the component used for programmatic access. For example,
"projectGanttChart"enables targeted manipulation of this specific chart. - dataTestId – Sets the testing hook ID for automated testing. For example, setting it to
"project-gantt-chart"allows test scripts to reliably locate this component. - enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, this chart can be highlighted during guided tours of the application.
- guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example,
{"en-US": "Project Timeline", "de-DE": "Projektzeitplan"}provides localized titles for the hotspot. - guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example,
{"en-US": "This chart shows your project schedule", "de-DE": "Diese Grafik zeigt Ihren Projektzeitplan"}provides localized descriptions.
Links
- Figma: tba
- Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/gantt-chart/common
Guidelines
Usage
- Title the chart for quick orientation using
titleTranslation; keep it concise and localized for all supported locales. - Prefer time windows relative to today for status views (e.g., “This week”) using
relativeTimeViewEnabled+relateTimeView; for fixed retrospectives, turn relative off. - Keep the current period visible in long-running dashboards with
dynamicTimeView: trueso the viewport advances automatically. - Bind the visible labels and bars deterministically by setting the required data expressions:
resourceColumnFieldExpression,eventNameExpression,eventResourceIdExpression,eventStartDateExpression,eventEndDateExpression. - Use a predictable default visual for bars with
globalEventColorand an optional default glyph viaglobalEventIconName; do not rely on color alone—ensureeventNameExpressionprovides clear text.
...
| Do | Don’t | Article setting(s) | |||
|---|---|---|---|---|---|
| Localize the chart title and resource header. | Ship English-only labels. | titleTranslation, resourceColumnCaptionTranslation | |||
| Use relative time windows for status views (e.g., this week). | Hard-code a past date range for live dashboards. | relativeTimeViewEnabled, relateTimeView | |||
| Keep the current period in view automatically. | Make users pan every hour to find “now”. | dynamicTimeView | |||
| Show a current-time line and update it at a reasonable cadence. | Leave users guessing where “now” is or update every 100 ms. | currentTimeLineEnabled, currentTimeLineUpdateIntervalInMs | |||
| Bind all required fields before fetching data. | Rely on defaults that don’t match your schema. | resourceColumnFieldExpression, eventNameExpression, eventResourceIdExpression, eventStartDateExpression, eventEndDateExpression | |||
| Use auto-width for varied names, fixed width for strict layouts. | Let long names clip or cause column thrash. | resourceColumnAutoWidth, resourceColumnWidth | |||
| Add padding using tokens for readability. | Let bars touch the edges. | paddingClass | |||
| Pair color with text (and optional default icon). | Encode meaning by color alone. | globalEventColor, globalEventIconName, eventNameExpression | Refresh on parameter changes. | Ignore global filter changes. | ON_GLOBAL_PARAMETERS_CHANGE, getEventsDataSourceHttpRequestParametersMap |
| Clean up timers/listeners on teardown. | Leak intervals after navigation. | ON_DESTROY, currentTimeLineUpdateIntervalInMs |
...
