Handling gantt and flowchart-v2

cypress/platform/knsv.html

@@ -134,6 +134,38 @@ requirementDiagram
     test_req - traces -> test_req2
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
+      </div>
+      <div class="mermaid" style="width: 100%;">
+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
       </div>
       <div class="mermaid2" style="width: 100%;">
 stateDiagram
@@ -143,8 +175,8 @@ stateDiagram
   Inactive --> Idle: ACT
   Active --> Active: LOG
       </div>
-      <div class="mermaid" style="width: 100%;">
+      <div class="mermaid2" style="width: 100%;">
-      graph TB
+      flowchart TB
         accTitle: My flowchart
         accDescr: My flowchart Description
         subgraph One

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;

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]);
     }

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) || '',
+      tooltip: diagObj.db.getTooltip(vertex.id) || '',
-      domId: flowDb.lookUpDomId(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 = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`;
-    // } 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();
+  diagObj.db.clear();
-  const parser = flow.parser;
-  parser.yy = flowDb;
-
   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 {
+  diagObj.parser.parse(text);
-  parser.parse(text);
-  // } catch (err) {
-  // log.debug('Parsing failed');
-  // }
 
   // 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);
+  addVertices(vert, g, id, root, doc, diagObj);
-  addEdges(edges, g);
+  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) {

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();
+  // diagObj.db.clear();
-  parser.parse(text);
+  // 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(),
+      diagObj.db.getExcludes(),
-      parser.yy.getIncludes()
+      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;
     }