search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
72.56k stars 6.62k forks source link

Gantt: historic timeline – three-digit years and inverted scale (for BC years) #4437

Open AlbertusMagnus7 opened 1 year ago

AlbertusMagnus7 commented 1 year ago

Description

The Gantt-charts could be a perfect option for historic timelines (whereas the timeline diagrams are not, as they do not allow for partially overlapping events such as the ones given in the examples below).

However, (a) years with only three (or less) digits, such as '230', do not seem to work as inputs.

Furthermore, (b) it doesn't seem possible to allow events to span across years before Christ, from, say 230 (BC) to 200 (BC) – as the scale only ever displays positively increasing years (such as from 200 to 230).

Steps to reproduce

Here is a working Gantt chart example:

gantt
    title A Historic Gantt Diagram (0)
    dateFormat  YYYY
    axisFormat %Y
    section Section
    A historic event           :1990,1993
    Another historic event     :1991,1995

But the following diagram (a) displays no extended events in the live editor:

gantt
    title A Historic Gantt Diagram (a)
    dateFormat  YYY
    axisFormat %Y
    section Section
    A historic event           :180,200
    Another historic event     :190,210

Nor does the following example (b) display the correct scale or events:

gantt
    title A Historic Gantt Diagram (b)
    dateFormat  YYY
    axisFormat %Y
    section Section
    A historic event           :200,180
    Another historic event     :210,190

Screenshots

No response

Code Sample

No response

Setup

Additional Context

No response

csherrell commented 8 months ago

I was looking into using Mermaid to make a Gantt chart for historic timelines in BC and this looks exactly like what I was looking for if it supported BC dates. I understand this could be difficult if the underlying data time object does not support it.

willismonroe commented 7 months ago

I'm having a similar issue. My strategy was to try and use negative years BP (before present). But mermaid-js doesn't seem to recognize negative numbers for the start/end dates for items.

I think the issue is that mermaid-js uses day-js to parse dates and day-js can't parse negative years (it can calculate with them, via subtract from a positive year, but it can't parse a negative year from a string). I just filled a bug report with dayjs (https://github.com/iamkun/dayjs/issues/2636) to see if this can get fixed. It's not easy though with things like the Julian to Gregorian change etc...

pajaro1966 commented 6 months ago

I've used Gantt charts for historical purposes with previous versions of Mermaid on Notable (markdown notes creator and manager) and with the current and they work well. All you have to do is to write negative numbers and establish the duration adding it literally (1y = 1 year).

image

This is the code:


gantt

dateFormat YYYY
axisFormat %Y

section 431-404 a.C. Guerra del Peloponeso
431–404 a.C. Guerra del Peloponeso: a0, -0431, 28y
440 a.C. Ruptura de la paz: rebelión de Samos contra Atenas:a1, -0440, 1y
435-433 a.C. Guerra entre Corinto y Córcira: a6, -0435, 3y
431-421 a.C. La guerra arquidámica :a2, -0431, 10y
421 a.C. Paz Nicias :a3, -0421, 1y
415-413 a.C. Expedición a Sicilia :a4, -0415, 3y
414-404 a.C. Apoyo aqueménida a Esparta: a5, -0414, 11y
413-404 La segunda guerra Guerra de Decelia: a5, -0413, 10y
411 a.C. Revolución oligárquica, los Cuatrocientos: a7, -0411, 1y
404 a.C. El gobierno de los Treinta Tiranos: a7, -0404, 1y
404 a.C. Rendición de Atenas: a6, -0404, 1y
403 a.C. Trasíbulo restaura la democracia: a7, -0403, 1y

section Lisias
459 a.C. Nacimiento :a1, -459, 1y
445 a.C. Nacimiento :a1, -445, 1y
445-430 a.C. Vida en Atenas :a1, -445, 16y
444 a.C. Fundacion de Turio : a2, -444, 1y
430-412 a.C. Estancia en Turio : a2, -430, 19y
412 a.C. Expulsión de Turio y regreso a Atenas: a2, -412, 1y
404 a.C. Pérdida de bienes y muerte de Polemarco: a2, -404, 1y
Post ±403 a.C. Acciones legales contra Eratóstenes: a2, -403, 1y
±403-380 a.C. Acciones legales contra Eratóstenes: a2, -403, 24y
380 a.C. Muerte :a2, -380, 1y

This is the rendering on GitHub:


gantt

dateFormat YYYY
axisFormat %Y

section 431-404 a.C. Guerra del Peloponeso
431–404 a.C. Guerra del Peloponeso: a0, -0431, 28y
440 a.C. Ruptura de la paz: rebelión de Samos contra Atenas:a1, -0440, 1y
435-433 a.C. Guerra entre Corinto y Córcira: a6, -0435, 3y
431-421 a.C. La guerra arquidámica :a2, -0431, 10y
421 a.C. Paz Nicias :a3, -0421, 1y
415-413 a.C. Expedición a Sicilia :a4, -0415, 3y
414-404 a.C. Apoyo aqueménida a Esparta: a5, -0414, 11y
413-404 La segunda guerra Guerra de Decelia: a5, -0413, 10y
411 a.C. Revolución oligárquica, los Cuatrocientos: a7, -0411, 1y
404 a.C. El gobierno de los Treinta Tiranos: a7, -0404, 1y
404 a.C. Rendición de Atenas: a6, -0404, 1y
403 a.C. Trasíbulo restaura la democracia: a7, -0403, 1y

section Lisias
459 a.C. Nacimiento :a1, -459, 1y
445 a.C. Nacimiento :a1, -445, 1y
445-430 a.C. Vida en Atenas :a1, -445, 16y
444 a.C. Fundacion de Turio : a2, -444, 1y
430-412 a.C. Estancia en Turio : a2, -430, 19y
412 a.C. Expulsión de Turio y regreso a Atenas: a2, -412, 1y
404 a.C. Pérdida de bienes y muerte de Polemarco: a2, -404, 1y
Post ±403 a.C. Acciones legales contra Eratóstenes: a2, -403, 1y
±403-380 a.C. Acciones legales contra Eratóstenes: a2, -403, 24y
380 a.C. Muerte :a2, -380, 1y

Enjoy.

AlbertusMagnus7 commented 6 months ago

Thanks for your replies.

Your suggestion to use durations rather than specifying absolute dates solves problem (a).

But I can't reproduce a working Gantt chart including negative numbers using that strategy (using the mermaid live editor for testing) –– and your GitHub rendering doesn't either.

Updated (a') works as required:

gantt
    title A Historic Gantt Diagram (a')

    dateFormat  YYY
    axisFormat %Y

    section Section
    A historic event           :180, 20y
    Another historic event     :190, 20y

Altered (b') does not display BC-events correctly but makes them all AC (i.e. positive numbers and ascending); it seems to ignore the minus sign:

gantt
    title A Historic Gantt Diagram (b')

    dateFormat  YYY
    axisFormat %Y

    section Section
    An intended "negative" historic event   :-200,20y
    Another "negative" historic event       :-210,20y
    A "positive" event                      : 200,20y
pajaro1966 commented 6 months ago

I have no problem to reproduce it on Live Mermaid, but it doesn't work for me on VS Code:

image

pajaro1966 commented 6 months ago

Code:


gantt

title A Historic Gantt Diagram (b')
dateFormat  YYY
axisFormat %Y

section Section
An intended "negative" historic event   :-0200,20y
Another "negative" historic event       :-0210,20y
A "positive" event                      :0200,20y

Rendering


gantt

title A Historic Gantt Diagram (b')
dateFormat  YYY
axisFormat %Y

section Section
An intended "negative" historic event   :-0200,20y
Another "negative" historic event       :-0210,20y
A "positive" event                      :0200,20y
pajaro1966 commented 6 months ago

Anyway, there is several problems with negative years. I think this should be fixed, because Gantt graphs are FAR much better that the TimeLine graphs for creating time lines. My results are different according to the app I use. I hope this helps you.

pajaro1966 commented 6 months ago

I've made a DB in Filemaker for creating Mermaid diagrams with the last version of Mermaid and there seems to be no problem with your code as you have written it:

image

pajaro1966 commented 6 months ago

If you change the order of initial and ending date, the results seems to be correct. But they shouldn't. The more I look, the less I understand: image

aSilverFox commented 1 week ago

This seems to change depnding on which program mermaid is being rendered in, but I've found a workaround: If you set the date format to X dateFormat X and set the axisFormat to %s axisFormat %s, then you can use an end date or length using \<length>s

Using this system this:

gantt
    title A Historic Gantt Diagram (b')

    dateFormat  X
    axisFormat %s

    section Section
    An intended "negative" historic event   :-200,20s
    Another "negative" historic event       :-210,20s
    A "positive" event                      : 200,20s

Renders as this: image (rendered in Obsidian)