marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-18 19:54:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Support customization of gantt diagram xAxis format using diagram code

Browse Source
This commit is contained in:
Tyler Long
2018-03-13 14:01:44 +08:00
parent 7ef1b28c83
commit f62736c749
6 changed files with 34 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dist/index.html vendored
View File

@@ -36,6 +36,7 @@ Alice->John: Yes... John, how are you?
<div class="mermaid"> <div class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m
title Adding GANTT diagram to mermaid title Adding GANTT diagram to mermaid
section A section section A section

11
src/diagrams/gantt/ganttDb.js
View File

@@ -2,6 +2,7 @@ import moment from 'moment'
import { logger } from '../../logger' import { logger } from '../../logger'
let dateFormat = '' let dateFormat = ''
let axisFormat = ''
let title = '' let title = ''
let sections = [] let sections = []
let tasks = [] let tasks = []
@@ -18,6 +19,14 @@ export const clear = function () {
rawTasks = [] rawTasks = []
} }
export const setAxisFormat = function (txt) {
axisFormat = txt
}
export const getAxisFormat = function () {
return axisFormat
}
export const setDateFormat = function (txt) { export const setDateFormat = function (txt) {
dateFormat = txt dateFormat = txt
} }
@@ -342,6 +351,8 @@ const compileTasks = function () {
export default { export default {
clear, clear,
setDateFormat, setDateFormat,
setAxisFormat,
getAxisFormat,
setTitle, setTitle,
getTitle, getTitle,
addSection, addSection,

2
src/diagrams/gantt/ganttRenderer.js
View File

@@ -244,7 +244,7 @@ export const draw = function (text, id) {
function makeGrid (theSidePad, theTopPad, w, h) { function makeGrid (theSidePad, theTopPad, w, h) {
let xAxis = d3.axisBottom(timeScale) let xAxis = d3.axisBottom(timeScale)
.tickSize(-h + theTopPad + conf.gridLineStartPadding) .tickSize(-h + theTopPad + conf.gridLineStartPadding)
.tickFormat(d3.timeFormat(conf.axisFormat || '%Y-%m-%d')) .tickFormat(d3.timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'))
svg.append('g') svg.append('g')
.attr('class', 'grid') .attr('class', 'grid')

2
src/diagrams/gantt/parser/gantt.jison
View File

@@ -19,6 +19,7 @@
\%%[^\n]* /* skip comments */ \%%[^\n]* /* skip comments */
"gantt" return 'gantt'; "gantt" return 'gantt';
"dateFormat"\s[^#\n;]+ return 'dateFormat'; "dateFormat"\s[^#\n;]+ return 'dateFormat';
"axisFormat"\s[^#\n;]+ return 'axisFormat';
\d\d\d\d"-"\d\d"-"\d\d return 'date'; \d\d\d\d"-"\d\d"-"\d\d return 'date';
"title"\s[^#\n;]+ return 'title'; "title"\s[^#\n;]+ return 'title';
"section"\s[^#:\n;]+ return 'section'; "section"\s[^#:\n;]+ return 'section';
@@ -54,6 +55,7 @@ line
statement statement
: 'dateFormat' {yy.setDateFormat($1.substr(11));$$=$1.substr(11);} : 'dateFormat' {yy.setDateFormat($1.substr(11));$$=$1.substr(11);}
| 'axisFormat' {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);}
| title {yy.setTitle($1.substr(6));$$=$1.substr(6);} | title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
| section {yy.addSection($1.substr(8));$$=$1.substr(8);} | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
| taskTxt taskData {yy.addTask($1,$2);$$='task';} | taskTxt taskData {yy.addTask($1,$2);$$='task';}

33
src/diagrams/gantt/parser/gantt.js
View File

@@ -72,12 +72,12 @@
} }
*/ */
var parser = (function(){ var parser = (function(){
var o=function(k,v,o,l){for(o=o||{},l=k.length;l--;o[k[l]]=v);return o},$V0=[6,8,10,11,12,13,14],$V1=[1,9],$V2=[1,10],$V3=[1,11],$V4=[1,12]; var o=function(k,v,o,l){for(o=o||{},l=k.length;l--;o[k[l]]=v);return o},$V0=[6,8,10,11,12,13,14,15],$V1=[1,9],$V2=[1,10],$V3=[1,11],$V4=[1,12],$V5=[1,13];
var parser = {trace: function trace() { }, var parser = {trace: function trace() { },
yy: {}, yy: {},
symbols_: {"error":2,"start":3,"gantt":4,"document":5,"EOF":6,"line":7,"SPACE":8,"statement":9,"NL":10,"dateFormat":11,"title":12,"section":13,"taskTxt":14,"taskData":15,"$accept":0,"$end":1}, symbols_: {"error":2,"start":3,"gantt":4,"document":5,"EOF":6,"line":7,"SPACE":8,"statement":9,"NL":10,"dateFormat":11,"axisFormat":12,"title":13,"section":14,"taskTxt":15,"taskData":16,"$accept":0,"$end":1},
terminals_: {2:"error",4:"gantt",6:"EOF",8:"SPACE",10:"NL",11:"dateFormat",12:"title",13:"section",14:"taskTxt",15:"taskData"}, terminals_: {2:"error",4:"gantt",6:"EOF",8:"SPACE",10:"NL",11:"dateFormat",12:"axisFormat",13:"title",14:"section",15:"taskTxt",16:"taskData"},
productions_: [0,[3,3],[5,0],[5,2],[7,2],[7,1],[7,1],[7,1],[9,1],[9,1],[9,1],[9,2]], productions_: [0,[3,3],[5,0],[5,2],[7,2],[7,1],[7,1],[7,1],[9,1],[9,1],[9,1],[9,1],[9,2]],
performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate /* action[1] */, $$ /* vstack */, _$ /* lstack */) { performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate /* action[1] */, $$ /* vstack */, _$ /* lstack */) {
/* this == yyval */ /* this == yyval */
@@ -102,17 +102,20 @@ case 8:
yy.setDateFormat($$[$0].substr(11));this.$=$$[$0].substr(11); yy.setDateFormat($$[$0].substr(11));this.$=$$[$0].substr(11);
break; break;
case 9: case 9:
yy.setTitle($$[$0].substr(6));this.$=$$[$0].substr(6); yy.setAxisFormat($$[$0].substr(11));this.$=$$[$0].substr(11);
break; break;
case 10: case 10:
yy.addSection($$[$0].substr(8));this.$=$$[$0].substr(8); yy.setTitle($$[$0].substr(6));this.$=$$[$0].substr(6);
break; break;
case 11: case 11:
yy.addSection($$[$0].substr(8));this.$=$$[$0].substr(8);
break;
case 12:
yy.addTask($$[$0-1],$$[$0]);this.$='task'; yy.addTask($$[$0-1],$$[$0]);this.$='task';
break; break;
} }
}, },
table: [{3:1,4:[1,2]},{1:[3]},o($V0,[2,2],{5:3}),{6:[1,4],7:5,8:[1,6],9:7,10:[1,8],11:$V1,12:$V2,13:$V3,14:$V4},o($V0,[2,7],{1:[2,1]}),o($V0,[2,3]),{9:13,11:$V1,12:$V2,13:$V3,14:$V4},o($V0,[2,5]),o($V0,[2,6]),o($V0,[2,8]),o($V0,[2,9]),o($V0,[2,10]),{15:[1,14]},o($V0,[2,4]),o($V0,[2,11])], table: [{3:1,4:[1,2]},{1:[3]},o($V0,[2,2],{5:3}),{6:[1,4],7:5,8:[1,6],9:7,10:[1,8],11:$V1,12:$V2,13:$V3,14:$V4,15:$V5},o($V0,[2,7],{1:[2,1]}),o($V0,[2,3]),{9:14,11:$V1,12:$V2,13:$V3,14:$V4,15:$V5},o($V0,[2,5]),o($V0,[2,6]),o($V0,[2,8]),o($V0,[2,9]),o($V0,[2,10]),o($V0,[2,11]),{16:[1,15]},o($V0,[2,4]),o($V0,[2,12])],
defaultActions: {}, defaultActions: {},
parseError: function parseError(str, hash) { parseError: function parseError(str, hash) {
if (hash.recoverable) { if (hash.recoverable) {
@@ -606,9 +609,9 @@ case 4:return 4;
break; break;
case 5:return 11; case 5:return 11;
break; break;
case 6:return 'date'; case 6:return 12;
break; break;
case 7:return 12; case 7:return 'date';
break; break;
case 8:return 13; case 8:return 13;
break; break;
@@ -616,16 +619,18 @@ case 9:return 14;
break; break;
case 10:return 15; case 10:return 15;
break; break;
case 11:return ':'; case 11:return 16;
break; break;
case 12:return 6; case 12:return ':';
break; break;
case 13:return 'INVALID'; case 13:return 6;
break;
case 14:return 'INVALID';
break; break;
} }
}, },
rules: [/^(?:[\n]+)/i,/^(?:\s+)/i,/^(?:#[^\n]*)/i,/^(?:%[^\n]*)/i,/^(?:gantt\b)/i,/^(?:dateFormat\s[^#\n;]+)/i,/^(?:\d\d\d\d-\d\d-\d\d\b)/i,/^(?:title\s[^#\n;]+)/i,/^(?:section\s[^#:\n;]+)/i,/^(?:[^#:\n;]+)/i,/^(?::[^#\n;]+)/i,/^(?::)/i,/^(?:$)/i,/^(?:.)/i], rules: [/^(?:[\n]+)/i,/^(?:\s+)/i,/^(?:#[^\n]*)/i,/^(?:%[^\n]*)/i,/^(?:gantt\b)/i,/^(?:dateFormat\s[^#\n;]+)/i,/^(?:axisFormat\s[^#\n;]+)/i,/^(?:\d\d\d\d-\d\d-\d\d\b)/i,/^(?:title\s[^#\n;]+)/i,/^(?:section\s[^#:\n;]+)/i,/^(?:[^#:\n;]+)/i,/^(?::[^#\n;]+)/i,/^(?::)/i,/^(?:$)/i,/^(?:.)/i],
conditions: {"INITIAL":{"rules":[0,1,2,3,4,5,6,7,8,9,10,11,12,13],"inclusive":true}} conditions: {"INITIAL":{"rules":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14],"inclusive":true}}
}); });
return lexer; return lexer;
})(); })();

2
todo.md
View File

@@ -3,5 +3,3 @@
- Create a desktop client - Create a desktop client
- Flowchart `interpolate` is useless because there is no rendering code using it - Flowchart `interpolate` is useless because there is no rendering code using it
- Each type of diagram should have its own set of CSS. - Each type of diagram should have its own set of CSS.
- Support customization of gantt diagram xAxis format using diagram code
- Some one created a great PR: https://github.com/knsv/mermaid/pull/624