[WIP] Component | Timeline: Enhancements and fixes #536
Conversation
This file contains 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
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
rokotyan
force-pushed
the
fix/timeline-clipping
branch
from
fbd4d48 to
a10887e
Compare
rokotyan
force-pushed
the
fix/timeline-clipping
branch
from
b88d697 to
8899b8d
Compare
rokotyan
force-pushed
the
fix/timeline-clipping
branch
2 times, most recently
from
2ff25ee to
6ea2f2a
Compare
- 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.
rokotyan
force-pushed
the
fix/timeline-clipping
branch
from
6ea2f2a to
8bb8742
Compare
- 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
rokotyan
force-pushed
the
fix/timeline-clipping
branch
from
48ad3f0 to
8035c06
Compare
Introduce a new timeline arrows example in the xy-components library that demonstrates arrow configuration between timeline rows.
rokotyan
force-pushed
the
fix/timeline-clipping
branch
from
8035c06 to
1b50ddc
Compare
…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.
rokotyan
force-pushed
the
fix/timeline-clipping
branch
2 times, most recently
from
faff8c0 to
2cf7333
Compare
- 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.
rokotyan
force-pushed
the
fix/timeline-clipping
branch
from
2cf7333 to
1241041
Compare
- 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`.
rokotyan
force-pushed
the
fix/timeline-clipping
branch
from
1241041 to
19c1dbe
Compare
rokotyan
force-pushed
the
fix/timeline-clipping
branch
from
19c1dbe to
a495444
Compare
- Dummy arrow points to smooth transitions - Make scrolling work when hovering over labels - More robust bleed calculations - Clip path transition
rokotyan
force-pushed
the
fix/timeline-clipping
branch
from
a495444 to
dfaad01
Compare
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:
