+gantt
+ dateFormat YYYY-MM-DD
+ title Adding GANTT diagram functionality to mermaid
+ excludes weekends
+ %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+ 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
+
+ section Critical tasks
+ Completed task in the critical line :crit, done, 2014-01-06,24h
+ Implement parser and jison :crit, done, after des1, 2d
+ Create tests for parser :crit, active, 3d
+ Future task in critical line :crit, 5d
+ Create tests for renderer :2d
+ Add to mermaid :1d
+ Functionality added :milestone, 2014-01-25, 0d
+
+ section Documentation
+ Describe gantt syntax :active, a1, after des1, 3d
+ Add gantt diagram to demo page :after a1 , 20h
+ Add another diagram to demo page :doc1, after a1 , 48h
+
+ section Last section
+ Describe gantt syntax :after doc1, 3d
+ Add gantt diagram to demo page :20h
+ Add another diagram to demo page :48h
stateDiagram
@@ -143,8 +175,8 @@ stateDiagram
Inactive --> Idle: ACT
Active --> Active: LOG
-
- graph TB
+
+ flowchart TB
accTitle: My flowchart
accDescr: My flowchart Description
subgraph One
diff --git a/src/Diagram.js b/src/Diagram.js
index 3d7a1cbe0..4d60c5353 100644
--- a/src/Diagram.js
+++ b/src/Diagram.js
@@ -69,6 +69,7 @@ class Diagram {
flowRenderer.setConf(cnf.flowchart);
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
flowDb.clear();
+ flowDb.setGen('gen-1');
this.parser = flowParser;
this.parser.parser.yy = flowDb;
this.db = flowDb;
@@ -78,6 +79,7 @@ class Diagram {
flowRendererV2.setConf(cnf.flowchart);
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
flowDb.clear();
+ flowDb.setGen('gen-2');
this.parser = flowParser;
this.parser.parser.yy = flowDb;
this.db = flowDb;
@@ -101,6 +103,8 @@ class Diagram {
this.txt = this.txt + '\n';
break;
case 'gantt':
+ cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+ ganttRenderer.setConf(cnf.gantt);
this.parser = ganttParser;
this.parser.parser.yy = ganttDb;
this.db = ganttDb;
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index 5cdec50bf..c35816fec 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -489,7 +489,6 @@ export const addSubGraph = function (_id, list, _title) {
const { nodeList: nl, dir } = uniq(nodeList.concat.apply(nodeList, list));
nodeList = nl;
if (version === 'gen-1') {
- log.warn('LOOKING UP');
for (let i = 0; i < nodeList.length; i++) {
nodeList[i] = lookUpDomId(nodeList[i]);
}
diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js
index 7c719ecad..9fc28f266 100644
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@@ -28,8 +28,9 @@ export const setConf = function (cnf) {
* @param svgId
* @param root
* @param doc
+ * @param diagObj
*/
-export const addVertices = function (vert, g, svgId, root, doc) {
+export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
const svg = root.select(`[id="${svgId}"]`);
const keys = Object.keys(vert);
@@ -152,8 +153,8 @@ export const addVertices = function (vert, g, svgId, root, doc) {
id: vertex.id,
link: vertex.link,
linkTarget: vertex.linkTarget,
- tooltip: flowDb.getTooltip(vertex.id) || '',
- domId: flowDb.lookUpDomId(vertex.id),
+ tooltip: diagObj.db.getTooltip(vertex.id) || '',
+ domId: diagObj.db.lookUpDomId(vertex.id),
haveCallback: vertex.haveCallback,
width: vertex.type === 'group' ? 500 : undefined,
dir: vertex.dir,
@@ -171,7 +172,7 @@ export const addVertices = function (vert, g, svgId, root, doc) {
class: classStr,
style: styles.style,
id: vertex.id,
- domId: flowDb.lookUpDomId(vertex.id),
+ domId: diagObj.db.lookUpDomId(vertex.id),
width: vertex.type === 'group' ? 500 : undefined,
type: vertex.type,
dir: vertex.dir,
@@ -186,8 +187,9 @@ export const addVertices = function (vert, g, svgId, root, doc) {
*
* @param {object} edges The edges to add to the graph
* @param {object} g The graph object
+ * @param diagObj
*/
-export const addEdges = function (edges, g) {
+export const addEdges = function (edges, g, diagObj) {
log.info('abc78 edges = ', edges);
let cnt = 0;
let linkIdCnt = {};
@@ -304,11 +306,7 @@ export const addEdges = function (edges, g) {
edgeData.arrowheadStyle = 'fill: #333';
edgeData.labelpos = 'c';
}
- // if (evaluate(getConfig().flowchart.htmlLabels) && false) {
- // // eslint-disable-line
- // edgeData.labelType = 'html';
- // edgeData.label = `${edge.text}`;
- // } else {
+
edgeData.labelType = 'text';
edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
@@ -317,7 +315,6 @@ export const addEdges = function (edges, g) {
}
edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
- // }
edgeData.id = linkId;
edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
@@ -331,22 +328,19 @@ export const addEdges = function (edges, g) {
* Returns the all the styles from classDef statements in the graph definition.
*
* @param text
+ * @param diagObj
* @returns {object} ClassDef styles
*/
-export const getClasses = function (text) {
+export const getClasses = function (text, diagObj) {
log.info('Extracting classes');
- flowDb.clear();
- const parser = flow.parser;
- parser.yy = flowDb;
-
+ diagObj.db.clear();
try {
// Parse the graph definition
- parser.parse(text);
+ diagObj.parse(text);
+ return diagObj.db.getClasses();
} catch (e) {
return;
}
-
- return flowDb.getClasses();
};
/**
@@ -356,22 +350,15 @@ export const getClasses = function (text) {
* @param id
*/
-export const draw = function (text, id) {
+export const draw = function (text, id, _version, diagObj) {
log.info('Drawing flowchart');
- flowDb.clear();
+ diagObj.db.clear();
flowDb.setGen('gen-2');
- const parser = flow.parser;
- parser.yy = flowDb;
-
// Parse the graph definition
- // try {
- parser.parse(text);
- // } catch (err) {
- // log.debug('Parsing failed');
- // }
+ diagObj.parser.parse(text);
// Fetch the default direction, use TD if none was found
- let dir = flowDb.getDirection();
+ let dir = diagObj.db.getDirection();
if (typeof dir === 'undefined') {
dir = 'TD';
}
@@ -409,18 +396,18 @@ export const draw = function (text, id) {
});
let subG;
- const subGraphs = flowDb.getSubGraphs();
+ const subGraphs = diagObj.db.getSubGraphs();
log.info('Subgraphs - ', subGraphs);
for (let i = subGraphs.length - 1; i >= 0; i--) {
subG = subGraphs[i];
log.info('Subgraph - ', subG);
- flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir);
+ diagObj.db.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir);
}
// Fetch the vertices/nodes and edges/links from the parsed graph definition
- const vert = flowDb.getVertices();
+ const vert = diagObj.db.getVertices();
- const edges = flowDb.getEdges();
+ const edges = diagObj.db.getEdges();
log.info(edges);
let i = 0;
@@ -435,8 +422,8 @@ export const draw = function (text, id) {
g.setParent(subG.nodes[j], subG.id);
}
}
- addVertices(vert, g, id, root, doc);
- addEdges(edges, g);
+ addVertices(vert, g, id, root, doc, diagObj);
+ addEdges(edges, g, diagObj);
// Add custom shapes
// flowChartShapes.addToRenderV2(addShape);
@@ -445,7 +432,7 @@ export const draw = function (text, id) {
const svg = root.select(`[id="${id}"]`);
// Adds title and description to the flow chart
- addSVGAccessibilityFields(parser.yy, svg, id);
+ addSVGAccessibilityFields(diagObj.db, svg, id);
// Run the renderer. This is what draws the final graph.
const element = root.select('#' + id + ' g');
@@ -454,7 +441,7 @@ export const draw = function (text, id) {
setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth);
// Index nodes
- flowDb.indexNodes('subGraph' + i);
+ diagObj.db.indexNodes('subGraph' + i);
// Add label rects for non html labels
if (!conf.htmlLabels) {
diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js
index 0065f14d9..56b3e00b1 100644
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@@ -11,23 +11,20 @@ import {
axisTop,
timeFormat,
} from 'd3';
-import { parser } from './parser/gantt';
import common from '../common/common';
-import ganttDb from './ganttDb';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
-parser.yy = ganttDb;
export const setConf = function () {
log.debug('Something is calling, setConf, remove the call');
};
let w;
-export const draw = function (text, id) {
+export const draw = function (text, id, version, diagObj) {
const conf = getConfig().gantt;
- parser.yy.clear();
- parser.parse(text);
+ // diagObj.db.clear();
+ // parser.parse(text);
const securityLevel = getConfig().securityLevel;
// Handle root and Document for when rendering in sanbox mode
@@ -52,7 +49,7 @@ export const draw = function (text, id) {
w = conf.useWidth;
}
- const taskArray = parser.yy.getTasks();
+ const taskArray = diagObj.db.getTasks();
// Set height based on number of tasks
const h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
@@ -109,12 +106,12 @@ export const draw = function (text, id) {
svg
.append('text')
- .text(parser.yy.getDiagramTitle())
+ .text(diagObj.db.getDiagramTitle())
.attr('x', w / 2)
.attr('y', conf.titleTopMargin)
.attr('class', 'titleText');
- addSVGAccessibilityFields(parser.yy, svg, id);
+ addSVGAccessibilityFields(diagObj.db, svg, id);
/**
* @param tasks
@@ -139,8 +136,8 @@ export const draw = function (text, id) {
pageWidth,
pageHeight,
tasks,
- parser.yy.getExcludes(),
- parser.yy.getIncludes()
+ diagObj.db.getExcludes(),
+ diagObj.db.getIncludes()
);
makeGrid(leftPadding, topPadding, pageWidth, pageHeight);
drawRects(tasks, gap, topPadding, leftPadding, barHeight, colorScale, pageWidth, pageHeight);
@@ -187,7 +184,7 @@ export const draw = function (text, id) {
// Draw the rects representing the tasks
const rectangles = svg.append('g').selectAll('rect').data(theArray).enter();
- const links = ganttDb.getLinks();
+ const links = diagObj.db.getLinks();
// Render the tasks with links
// Render the other tasks
@@ -430,14 +427,14 @@ export const draw = function (text, id) {
0
);
const maxTime = tasks.reduce((max, { endTime }) => (max ? Math.max(max, endTime) : endTime), 0);
- const dateFormat = parser.yy.getDateFormat();
+ const dateFormat = diagObj.db.getDateFormat();
if (!minTime || !maxTime) return;
const excludeRanges = [];
let range = null;
let d = moment(minTime);
while (d.valueOf() <= maxTime) {
- if (parser.yy.isInvalidDate(d, dateFormat, excludes, includes)) {
+ if (diagObj.db.isInvalidDate(d, dateFormat, excludes, includes)) {
if (!range) {
range = {
start: d.clone(),
@@ -495,7 +492,7 @@ export const draw = function (text, id) {
function makeGrid(theSidePad, theTopPad, w, h) {
let bottomXAxis = axisBottom(timeScale)
.tickSize(-h + theTopPad + conf.gridLineStartPadding)
- .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
+ .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
svg
.append('g')
@@ -509,10 +506,10 @@ export const draw = function (text, id) {
.attr('font-size', 10)
.attr('dy', '1em');
- if (ganttDb.topAxisEnabled() || conf.topAxis) {
+ if (diagObj.db.topAxisEnabled() || conf.topAxis) {
let topXAxis = axisTop(timeScale)
.tickSize(-h + theTopPad + conf.gridLineStartPadding)
- .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
+ .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
svg
.append('g')
@@ -592,7 +589,7 @@ export const draw = function (text, id) {
* @param h
*/
function drawToday(theSidePad, theTopPad, w, h) {
- const todayMarker = ganttDb.getTodayMarker();
+ const todayMarker = diagObj.db.getTodayMarker();
if (todayMarker === 'off') {
return;
}