Component | Timeline: Enhancements and fixes #536
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
rokotyan
force-pushed
the
fix/timeline-clipping
branch
3 times, most recently
from
8899b8d to
0b19cb4
Compare
rokotyan
force-pushed
the
fix/timeline-clipping
branch
4 times, most recently
from
8035c06 to
1b50ddc
Compare
rokotyan
force-pushed
the
fix/timeline-clipping
branch
4 times, most recently
from
1241041 to
19c1dbe
Compare
rokotyan
force-pushed
the
fix/timeline-clipping
branch
5 times, most recently
from
a8f34c1 to
29c5afd
Compare
rokotyan
force-pushed
the
fix/timeline-clipping
branch
from
29c5afd to
fb7dcc2
Compare
rokotyan
changed the title
This commit introduces several improvements to the Timeline component and related utilities: - Improves Timeline component clipping behavior with dedicated clipPath - Adds `labelTextAlign` config option to Timeline component to control label alignment - Moves text alignment utility to a shared function `textAlignToAnchor` - Fixes label positioning and width calculations - Makes Timeline automatically calculate line and row widths if they were not provided - Adds configurable clip path extension to XYContainer
- Introduce a dedicated TimelineRowLabel type to encapsulate label data, including formatted labels. - Added the `rowLabelStyle` config option. - Update the `groupBy` utility to pass the index to the accessor.
- Introduce `TimelineArrow` types and render state interfaces in types.ts - Add new arrow rendering group and data preparation logic in timeline/index.ts - Implement arrowLinePath utility in utils/path.ts to generate customizable SVG arrow paths - Add corresponding arrow style rules and theme variables in `timeline/style.ts` - Update timeline configuration and default constants for arrow head dimensions in config.ts and constants.ts - Re-export timeline types in src/types.ts
Introduce a new timeline arrows example in the xy-components library that demonstrates arrow configuration between timeline rows.
…ransitions - Introduce new timeline config options animationLineEnterPosition and animationLineExitPosition in config.ts to control the starting and exit positions of animated lines. - Update Timeline component to utilize these options, including support for functional configurations using the new isFunction import. - Refactor label and rect transitions with smartTransition for smoother enter/exit animations. - Adjust data bindings to use TimelineRowLabel keys for improved label rendering consistency.
… fix duration fallback - Introduce a new timeline animation example with configurable enter/exit animation line positions. - Update the timeline tooltip example to use TimelineRowLabel for enhanced type safety in tooltips. - Adjust timeline component to apply a default duration of 1000 when none is provided.
… domain, and arrow exit transition - Add a missing domain based on rowLabels to the ordinal scale for improved record mapping. - Wrap bound data for both lineStartIcon and lineEndIcon selections to ensure single datum binding. - Adjust arrow exit transition to fade out (opacity 0) before removal, correcting cleanup behavior.
- Added configurable hover style to timeline lines, changing stroke width and color on hover. - Defined new CSS variables for hover stroke width and color, including dark theme variants.
- Add a new `_rowIconsGroup` in the Timeline component to render icons before row labels, including position calculation using maximum icon size. - Update the timeline configuration (`config.ts`) to include a rowIcon callback and adjust the `rowLabelFormatter` to receive the row index. - Extend timeline types by introducing `TimelineRowIcon` and updating `TimelineRowLabel` to support `iconHref`, `iconSize`, and `iconColor`.
- Dummy arrow points to smooth transitions - Make scrolling work when hovering over labels - More robust bleed calculations - More robust `arrowPolylinePath` function - Clip path transition
rokotyan
force-pushed
the
fix/timeline-clipping
branch
from
fb7dcc2 to
121a04e
Compare
lee00678
approved these changes
May 28, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR introduces several improvements to the Timeline component:
New features:
labelTextAlignconfig option to Timeline component to control label alignmentFixes:
Refactoring:
textAlignToAnchorBefore. Setting
xDomainlead to this:After:
