Gantt: add top xaxis #1954

nacc · 2021-03-23T17:09:54Z

📑 Summary

Add a top x-axis to Gantt charts that mirrors the bottom x-axis

📏 Design Decisions

Straightforward copy and paste of existing code.

📋 Tasks

Make sure you

📖 have read the contribution guidelines
💻 have added unit/e2e tests (if appropriate)
🔖 targeted develop branch

knsv

Thanks @nacc, this look great!

There are one thing that would make this even better. The feature need an on on/off switch similar to mirrorActors in sequence diagrams. Two things that we need to do:

Add this in the configuration options so that it possible to turn is on/off on a site level when you add Mermaid
Add a topAxis directive which will make it possible to turn on topAxis even if the site confiuration as topAxis as off

Is the on/off switch something you could help with?

Thanks again
/Knut

nacc · 2021-03-24T15:55:21Z

@knsv yep I can do that. I'll update the PR today!

nacc · 2021-03-24T16:39:00Z

I think my branch has the changes requested correctly. I'm not a JS person at all, so please point me in a corrected direction if I did something wrong :)

knsv · 2021-04-01T06:53:45Z

Thanks will review this PR today.

knsv · 2021-04-01T11:15:12Z

Hello! I am reviewing this now. I tested it in my local development environment and the top axis is not coming at the top for me:

Did something go wrong?

This is the html file I used:

<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
      rel="stylesheet"
    />
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
    <style>
      body {
        /* background: rgb(221, 208, 208); */
        /* background:#333; */
        font-family: 'Arial';
        }
      h1 { color: grey;}
      .mermaid2 {
        display: none;
      }
      .mermaid svg {
        font-size: 12px !important;
      }
    </style>
  </head>
  <body>
    <h1>info below</h1>
    <div class="flex">

      <div class="mermaid" style="width: 100%; height: 20%;">
gantt
      dateFormat  YYYY-MM-DD
      axisFormat  %d/%m
      title Adding GANTT diagram to mermaid
      excludes weekdays 2014-01-10

      section A section
      Completed task            :done,    des1, 2014-01-06,2014-01-08
      Active task               :active,  des2, 2014-01-09, 3d

      </div>
        <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
        };
      mermaid.initialize({
        logLevel: 0,
        flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
        htmlLabels: false,
        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
        fontFamily: '"arial", sans-serif',
        fontFamily: 'courier',
        curve: 'cardinal',
        securityLevel: 'loose',
        gantt:{topAxis: true}
      });
      function callback(){alert('It worked');}
    </script>
  </body>
</html>

nacc · 2021-04-01T20:28:38Z

Urgh, I see the problem, it was my misunderstanding of what hte translate method did. Fix incoming!

nacc · 2021-04-01T20:32:19Z

Can you try with the fixlet I just pushed?

nacc · 2021-04-01T20:44:50Z

@knsv the failure seems unrelated to my changes, from something in a different diagram type?

I am leveraging a Gantt chart to generate a years-long Roadmap from text. This is for a large team, so it is quite large. A request I get from my stakeholders is for a top labelling axis in parallel to the current bottom one, so that the dates are labelled no matter where we are scrolled on the screen.

nacc · 2021-04-01T20:45:52Z

(trying to rebase now)

knsv · 2021-04-11T10:01:08Z

will give it a spin!

knsv · 2021-04-22T07:36:07Z

I tried this again and it is getting closer. The axis is at the top of the diagram.

The problem is caused by

Any reason why you have that there or should I just remove it?

nacc · 2021-04-22T10:47:53Z

I tried this again and it is getting closer. The axis is at the top of the diagram.

The problem is caused by

Any reason why you have that there or should I just remove it?

Ah ha! Probably c&p failure on my part. Definitely can be removed or possibly will need adjusting to -1em? I'm treating the top axis like a mirror of the bottom, ideally.

knsv · 2021-04-24T21:28:40Z

Ok, then I think this one is ready. I will remove that line and merge it! Thanks

nacc force-pushed the gantt-top-xaxis branch from dd945ca to 98f147e Compare March 23, 2021 17:54

knsv self-requested a review March 24, 2021 06:42

knsv requested changes Mar 24, 2021

View reviewed changes

nacc added 6 commits April 1, 2021 15:45

gantt/ganttRenderer: rename xAxis to bottomXAxis

79b3015

gantt: add a topAxis directive to allow per diagram configuration

2d0aab2

gantt: add a toplevel topAxis configuration option

120b890

gantt: only display topAxis if configured or directive is set

f78d4b1

ganttRenderer: put top axis, if configured at the top

b558d67

nacc force-pushed the gantt-top-xaxis branch from 3422550 to b558d67 Compare April 1, 2021 20:45

knsv merged commit adab981 into mermaid-js:develop Apr 25, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gantt: add top xaxis #1954

Gantt: add top xaxis #1954

nacc commented Mar 23, 2021 •

edited

knsv left a comment

nacc commented Mar 24, 2021

nacc commented Mar 24, 2021

knsv commented Apr 1, 2021

knsv commented Apr 1, 2021

nacc commented Apr 1, 2021

nacc commented Apr 1, 2021

nacc commented Apr 1, 2021

nacc commented Apr 1, 2021

knsv commented Apr 11, 2021

knsv commented Apr 22, 2021 •

edited

nacc commented Apr 22, 2021

knsv commented Apr 24, 2021

Gantt: add top xaxis #1954

Gantt: add top xaxis #1954

Conversation

nacc commented Mar 23, 2021 • edited

📑 Summary

📏 Design Decisions

📋 Tasks

knsv left a comment

Choose a reason for hiding this comment

nacc commented Mar 24, 2021

nacc commented Mar 24, 2021

knsv commented Apr 1, 2021

knsv commented Apr 1, 2021

nacc commented Apr 1, 2021

nacc commented Apr 1, 2021

nacc commented Apr 1, 2021

nacc commented Apr 1, 2021

knsv commented Apr 11, 2021

knsv commented Apr 22, 2021 • edited

nacc commented Apr 22, 2021

knsv commented Apr 24, 2021

nacc commented Mar 23, 2021 •

edited

knsv commented Apr 22, 2021 •

edited