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
71.54k stars 6.48k forks source link

How to set axisFormatter of gantt in mermaid CLI? #428

Closed cnglen closed 7 years ago

cnglen commented 7 years ago

$ mermaid -g gantt.config test.mmd
[SyntaxError: Unexpected token u] Num files to execute : 1 ready to execute png: test.mmd.png CONSOLE: [01:03:35 (219)] (from line # in "") CONSOLE: [01:03:35 (219)] (from line # in "") CONSOLE: [01:03:35 (220)] (from line # in "") CONSOLE: TypeError: Requested keys of a value that is not an object. (from line # in "") TypeError: null is not an object (evaluating 'oDOM.documentElement.attributes.getNamedItem('width').value') C-c C-c

$ cat gantt.config { "titleTopMargin":25, "barHeight":20, "barGap":4, "topPadding":50, "sidePadding":75, "gridLineStartPadding":35, "fontSize":11, "numberSectionStyles":3, "axisFormatter": [["%-m/%-d", function (d){return d.getDay() == 1;}]] }

whyzdev commented 7 years ago

try change to: "axisFormatter": [["%-m/%-d", "function (d){return d.getDay() == 1;"}]] the function code block need to be quoted as valid json array element.

cnglen commented 7 years ago

Tried, it doesn't report error. But the generated png only conatins strings.

$ mermaid -g my.config test.mmd Num files to execute : 1 ready to execute png: test.mmd.png CONSOLE: [04:34:56 (045)] (from line # in "") CONSOLE: [04:34:56 (045)] (from line # in "") CONSOLE: [04:34:56 (045)] (from line # in "") CONSOLE: [04:34:56 (046)] (from line # in "") CONSOLE: [04:34:56 (046)] (from line # in "") CONSOLE: [04:34:56 (064)] (from line # in "") saved png: test.mmd.png

$ cat my.config { "axisFormatter":[["%-m/-%d", "function (d) {return d.getDay() == 1;}"]] }

$ cat test.mmd gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d

cnglen commented 7 years ago

It does't work using escape quotes: { "axisFormatter":[["\"%-m/-%d\"", "function (d) {return d.getDay() == 1;}"]] }

whyzdev commented 7 years ago

you are right. i can reproduce with running from command-line. like #171, it's not supported or broken. please try use html in browser like:

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script src="../dist/mermaid.js"></script>
<script>
  var config = {
      logLevel:1,
      startOnLoad:true,
      gantt: {
        titleTopMargin:25,
        barHeight:20,
        barGap:4,
        topPadding:50,
        sidePadding:75,
        gridLineStartPadding:35,
        fontSize:11,
        numberSectionStyles:3,
        axisFormatter: [["%-m/%-d", function (d){return d.getDay() == 1;}]]
      }
  };
  mermaid.initialize(config);
  console.log(JSON.stringify(mermaid.sequenceConfig));
</script>
<div class="mermaid">
  gantt
  dateFormat YYYY-MM-DD
  title Adding GANTT diagram functionality to mermaid
  section A section
  Completed task :done, des1, 2014-01-06,2014-01-08
  Active task :active, des2, 2014-01-09, 3d
  Future task : des3, after des2, 5d
  Future task2 : des4, after des3, 5d
</div>
</body>
</html>
cnglen commented 7 years ago

Is there any to set axisFormatter in mermaid CLI?

I don't want to use html. I just want to generate a png from the memraid text.

whyzdev commented 7 years ago

yeah it's a manual workaround by doing in browser something like printing, taking screenshot, or save svg and convert to png. i think the issue needs fix for supporting the config by mermaid CLI interface. @knsv et al can confirm.

knsv commented 7 years ago

Closed by release 7.0.0, please reopen if issues remain.