8000 Gantt: add 'year' in axis ticks · Issue #6533 · mermaid-js/mermaid · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Gantt: add 'year' in axis ticks #6533

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
Open
generrosity opened this issue Apr 26, 2025 · 0 comments
Open

Gantt: add 'year' in axis ticks #6533

generrosity opened this issue Apr 26, 2025 · 0 comments
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@generrosity
Copy link
Contributor
generrosity commented Apr 26, 2025 •
edited
Loading

Description

Currently, the automatic axis are good for long historical dates, but axis ticks only includes intervals up to 'month'

Image

Looking on the D3 website mentioned they changed format two years ago (#todo update link?) but looking back it just shows how D3 can be used.

The D3/src folder contains 'year' as does duration.js updated with it Apr 2021
I'm hoping this change might be relatively trivial?

Steps to reproduce

  • Use the following mermaid/gantt code.
    • Note - It will default to using '5year' ticks if setting is 'year' or not present.
  • Confirm '6month' and '12month' work
  • Confirm with higher dates Mermaid respectfully handles 10year, 20year, 50year, 100year, etc
  • Confirm '1year' '4year' '10year' are the same as no setting
    • example 4year comes from the NZ government voting cycle
    • ideally shows correctly and doesn't replicate a 10month 'bug'
gantt
  dateFormat YYYY
  AxisFormat %y
  tickInterval 11year %% 1year 4year 10year
  section Test
  Waffle: 1970, 2020
Loading

Screenshots

examples;
6month ☑️
Image

12month ☑️ ('1year' workaround)
Image

1year ❎ (shows 5year)
Image

4year ❎ (shows 5year)
Image

10year ❎ (shows 5year)
Image

~ Setting Removed ☑️ (shows 5year, good default)
Image

What I mean by the 🟩 10month 'bug' - this might be intentional to only show marks on Oct and NewYear, rather than every 10months? Just a warning just incase code is copied.
Image

Mermaid has good handling - 10year, 20year, 50year, 100year, etc even to 9999
Image
Image
Image

Code Sample

Setup

  • Mermaid version: Latest (using Mermaid website editable fields)
  • Browser and Version: Latest Chrome

Suggested Solutions

  • allow token in tickInterval pattern

I've done a quick look through code, and results below. I ^think^ that D3 supporting the term already will mean that it might be fairly trivial to impliment? And to test?

I think the main pattern definition is here, with two case statement straight after and in the following function for topaxis. There is a D3 import at the top.

Reference here and Commented reference here

Additional Context

Many thanks for all the work done, and consideration 😁
@generrosity generrosity added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Apr 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@generrosity
0