Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Timeline does not honor width configuration #5858

Open
tncbbthositg opened this issue Sep 13, 2024 · 2 comments · May be fixed by #6100
Open

Timeline does not honor width configuration #5858

tncbbthositg opened this issue Sep 13, 2024 · 2 comments · May be fixed by #6100
Labels
Contributor needed Graph: Block Status: Approved Is ready to be worked on Type: Bug / Error Something isn't working or is incorrect

Comments

@tncbbthositg
Copy link

Description

When I try to alter the width of the nodes in the timeline diagram with the width configuration, the width configuration is not applied.

It appears to be hardcoded here:
https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts#L332

Steps to reproduce

Create a timeline
Configure the width
Feel sad

Screenshots

No response

Code Sample

{
  "theme": "default",
  "themeVariables": {
    "fontSize": "24px"
  },
  "timeline": {
    "width": 300
  }
}

timeline
title Sample Timeline

2022
    : October <br> Something that happened in October

2023
    : Something that happened in 2023

Setup

Live Editor
Chrome

Suggested Solutions

https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts#L332

This should probably be conf.width . . . or conf.timeline.width.

Additional Context

No response
@tncbbthositg tncbbthositg added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Sep 13, 2024
@jgreywolf
Copy link
Contributor

@tncbbthositg Would you be willing to submit a PR?

@jgreywolf jgreywolf added Contributor needed Status: Approved Is ready to be worked on Graph: Block and removed Status: Triage Needs to be verified, categorized, etc labels Sep 25, 2024
@afmireski
Copy link

Hello, is this issue still relevant? I'm new to open source, but I'd like to try solving it. @jgreywolf, would it be okay if I gave it a try?

afmireski added a commit to afmireski/mermaid that referenced this issue Nov 30, 2024
@afmireski
mermaid-js#5858 - fix: Timeline node width made dynamic
146b86c 
- Refactored timelineRenderer.drawEvents
    - Added DEFAULT_NODE_WIDTH of 150
    - Used conf?.timeline?.width as a dynamic value, or default value if
not provided
- Added integration tests in
cypress/integration/rendering/timeline.spec.ts to cover changes
@afmireski afmireski linked a pull request Nov 30, 2024 that will close this issue
Open
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Contributor needed Graph: Block Status: Approved Is ready to be worked on Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

#5858 - fix: Timeline node width made dynamic afmireski/mermaid
3 participants
@tncbbthositg @jgreywolf @afmireski