mermaid-js#1031 Adding stricter code checks

sid94mishra · Oct 27, 2019 · a5cc1e8 · a5cc1e8
1 parent aac5197
commit a5cc1e8
Show file tree

Hide file tree

Showing 16 changed files with 91 additions and 65 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+**/*.spec.js
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,7 +1,8 @@
 {
   "env": {
     "browser": true,
-    "es6": true
+    "es6": true,
+    "node": true
   },
   "parserOptions": {
       "ecmaFeatures": {
@@ -10,7 +11,7 @@
       },
       "sourceType": "module"
   },
-  "extends": ["prettier"],
+  "extends": ["prettier", "eslint:recommended"],
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": ["error"]

diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js
@@ -0,0 +1,33 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('State diagram', () => {
+  it('should render a flowchart full of circles', () => {
+    imgSnapshotTest(
+      `
+    graph LR
+      47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
+      37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
+      35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
+      41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
+      44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
+      46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
+      40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
+      38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
+      43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
+      42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
+      45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
+      35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
+      41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
+      41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
+      39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
+      39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
+      39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
+      39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
+      35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
+      36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
+      `,
+      {}
+    );
+  });
+});
diff --git a/src/diagrams/class/classRenderer.js b/src/diagrams/class/classRenderer.js
@@ -204,14 +204,12 @@ const drawEdge = function(elem, path, relation) {
   x = labalPosition.x;
   y = labalPosition.y;
 
-  let p1_card_x,
-    p1_card_y,
-    p1_card_padd_x = conf.padding * 2,
-    p1_card_padd_y = conf.padding;
-  let p2_card_x,
-    p2_card_y,
-    p2_card_padd_x = conf.padding * 2,
-    p2_card_padd_y = -conf.padding / 2;
+  let p1_card_x, p1_card_y;
+  // p1_card_padd_x = conf.padding * 2,
+  // p1_card_padd_y = conf.padding;
+  let p2_card_x, p2_card_y;
+  // p2_card_padd_x = conf.padding * 2,
+  // p2_card_padd_y = -conf.padding / 2;
   if (l % 2 !== 0 && l > 1) {
     let cardinality_1_point = utils.calcCardinalityPosition(
       relation.relation.type1 !== 'none',
@@ -258,8 +256,7 @@ const drawEdge = function(elem, path, relation) {
   logger.info('Rendering relation ' + JSON.stringify(relation));
   if (typeof relation.relationTitle1 !== 'undefined' && relation.relationTitle1 !== 'none') {
     const g = elem.append('g').attr('class', 'cardinality');
-    const label = g
-      .append('text')
+    g.append('text')
       .attr('class', 'type1')
       .attr('x', p1_card_x)
       .attr('y', p1_card_y)
@@ -269,8 +266,7 @@ const drawEdge = function(elem, path, relation) {
   }
   if (typeof relation.relationTitle2 !== 'undefined' && relation.relationTitle2 !== 'none') {
     const g = elem.append('g').attr('class', 'cardinality');
-    const label = g
-      .append('text')
+    g.append('text')
       .attr('class', 'type2')
       .attr('x', p2_card_x)
       .attr('y', p2_card_y)

diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
@@ -223,7 +223,7 @@ const setClickFun = function(_id, functionName) {
     return;
   }
   if (typeof vertices[id] !== 'undefined') {
-    funs.push(function(element) {
+    funs.push(function() {
       const elem = document.querySelector(`[id="${id}"]`);
       if (elem !== null) {
         elem.addEventListener(
@@ -395,7 +395,7 @@ export const addSubGraph = function(_id, list, _title) {
         return false;
       }
       if (type in prims) {
-        return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
+        return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true); // eslint-disable-line
       } else {
         return objs.indexOf(item) >= 0 ? false : objs.push(item);
       }

diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
@@ -376,7 +376,7 @@ export const draw = function(text, id) {
   };
 
   // Override normal arrowhead defined in d3. Remove style & add class to allow css styling.
-  render.arrows().normal = function normal(parent, id, edge, type) {
+  render.arrows().normal = function normal(parent, id) {
     const marker = parent
       .append('marker')
       .attr('id', id)

diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js
@@ -387,10 +387,11 @@ const compileTasks = function() {
     const task = rawTasks[pos];
     let startTime = '';
     switch (rawTasks[pos].raw.startTime.type) {
-      case 'prevTaskEnd':
+      case 'prevTaskEnd': {
         const prevTask = findTaskById(task.prevTaskId);
         task.startTime = prevTask.endTime;
         break;
+      }
       case 'getStartDate':
         startTime = getStartDate(undefined, dateFormat, rawTasks[pos].raw.startTime.startData);
         if (startTime) {
@@ -501,7 +502,7 @@ const setClickFun = function(id, functionName, functionArgs) {
  * @param callbackFunction A function to be executed when clicked on the task or the task's text
  */
 const pushFun = function(id, callbackFunction) {
-  funs.push(function(element) {
+  funs.push(function() {
     // const elem = d3.select(element).select(`[id="${id}"]`)
     const elem = document.querySelector(`[id="${id}"]`);
     if (elem !== null) {
@@ -510,7 +511,7 @@ const pushFun = function(id, callbackFunction) {
       });
     }
   });
-  funs.push(function(element) {
+  funs.push(function() {
     // const elem = d3.select(element).select(`[id="${id}-text"]`)
     const elem = document.querySelector(`[id="${id}-text"]`);
     if (elem !== null) {

diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js
@@ -102,7 +102,7 @@ export const draw = function(text, id) {
     drawToday(leftPadding, topPadding, pageWidth, pageHeight);
   }
 
-  function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w, h) {
+  function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w) {
     // Draw background rects covering the entire width of the graph, these form the section rows.
     svg
       .append('g')
@@ -401,7 +401,7 @@ export const draw = function(text, id) {
     const hash = {};
     const result = [];
     for (let i = 0, l = arr.length; i < l; ++i) {
-      if (!hash.hasOwnProperty(arr[i])) {
+      if (!hash.hasOwnProperty(arr[i])) { // eslint-disable-line
         // it works with objects! in FF, at least
         hash[arr[i]] = true;
         result.push(arr[i]);

diff --git a/src/diagrams/pie/pieRenderer.js b/src/diagrams/pie/pieRenderer.js
@@ -21,7 +21,7 @@ export const setConf = function(cnf) {
  * @param id
  */
 let w;
-export const draw = (txt, id, ver) => {
+export const draw = (txt, id) => {
   try {
     const parser = pieParser.parser;
     parser.yy = pieData;

diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
@@ -514,11 +514,12 @@ export const draw = function(text, id) {
         bounds.newLoop(undefined, msg.message);
         bounds.bumpVerticalPos(conf.boxMargin);
         break;
-      case parser.yy.LINETYPE.RECT_END:
+      case parser.yy.LINETYPE.RECT_END: {
         const rectData = bounds.endLoop();
         svgDraw.drawBackgroundRect(diagram, rectData);
         bounds.bumpVerticalPos(conf.boxMargin);
         break;
+      }
       case parser.yy.LINETYPE.OPT_START:
         bounds.bumpVerticalPos(conf.boxMargin);
         bounds.newLoop(msg.message);

diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js
@@ -16,7 +16,7 @@ export const drawRect = function(elem, rectData) {
   return rectElem;
 };
 
-export const drawText = function(elem, textData, width) {
+export const drawText = function(elem, textData) {
   // Remove and ignore br:s
   const nText = textData.text.replace(/<br\/?>/gi, ' ');
 
@@ -374,7 +374,7 @@ const _drawTextCandidateFunc = (function() {
 
   function _setTextAttrs(toText, fromTextAttrsDict) {
     for (const key in fromTextAttrsDict) {
-      if (fromTextAttrsDict.hasOwnProperty(key)) {
+      if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line
         toText.attr(key, fromTextAttrsDict[key]);
       }
     }

diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js
@@ -2,7 +2,7 @@ import * as d3 from 'd3';
 import idCache from './id-cache.js';
 import stateDb from './stateDb';
 import utils from '../../utils';
-import { getConfig, conf } from '../../config';
+import { getConfig } from '../../config';
 
 // let conf;
 
@@ -131,15 +131,15 @@ export const drawDescrState = (g, stateDef) => {
  */
 export const addIdAndBox = (g, stateDef) => {
   // TODO Move hardcodings to conf
-  const addTspan = function(textEl, txt, isFirst) {
-    const tSpan = textEl
-      .append('tspan')
-      .attr('x', 2 * getConfig().state.padding)
-      .text(txt);
-    if (!isFirst) {
-      tSpan.attr('dy', getConfig().state.textHeight);
-    }
-  };
+  // const addTspan = function(textEl, txt, isFirst) {
+  //   const tSpan = textEl
+  //     .append('tspan')
+  //     .attr('x', 2 * getConfig().state.padding)
+  //     .text(txt);
+  //   if (!isFirst) {
+  //     tSpan.attr('dy', getConfig().state.textHeight);
+  //   }
+  // };
   const title = g
     .append('text')
     .attr('x', 2 * getConfig().state.padding)
@@ -148,7 +148,7 @@ export const addIdAndBox = (g, stateDef) => {
     .attr('class', 'state-title')
     .text(stateDef.id);
 
-  const titleHeight = title.node().getBBox().height;
+  const titleBox = title.node().getBBox();
 
   const lineY = 1 - getConfig().state.textHeight;
   const descrLine = g
@@ -159,7 +159,7 @@ export const addIdAndBox = (g, stateDef) => {
     .attr('class', 'descr-divider');
 
   const graphBox = g.node().getBBox();
-  title.attr('x', graphBox.width / 2 - title.node().getBBox().width / 2);
+  title.attr('x', graphBox.width / 2 - titleBox.width / 2);
   descrLine.attr('x2', graphBox.width + getConfig().state.padding);
 
   // White color
@@ -241,7 +241,7 @@ const drawForkJoinState = (g, stateDef) => {
     .attr('y', getConfig().state.padding);
 };
 
-export const drawText = function(elem, textData, width) {
+export const drawText = function(elem, textData) {
   // Remove and ignore br:s
   const nText = textData.text.replace(/<br\/?>/gi, ' ');
 
@@ -264,7 +264,7 @@ export const drawText = function(elem, textData, width) {
 
 const _drawLongText = (_text, x, y, g) => {
   let textHeight = 0;
-  let textWidth = 0;
+
   const textElem = g.append('text');
   textElem.style('text-anchor', 'start');
   textElem.attr('class', 'noteText');
@@ -317,8 +317,7 @@ export const drawNote = (text, g) => {
  * @param {*} stateDef
  */
 
-let cnt = 0;
-export const drawState = function(elem, stateDef, graph, doc) {
+export const drawState = function(elem, stateDef) {
   const id = stateDef.id;
   const stateInfo = {
     id: id,

diff --git a/src/diagrams/state/stateDb.js b/src/diagrams/state/stateDb.js
@@ -9,7 +9,7 @@ const setRootDoc = o => {
 const getRootDoc = () => rootDoc;
 
 const extract = doc => {
-  const res = { states: [], relations: [] };
+  // const res = { states: [], relations: [] };
   clear();
 
   doc.forEach(item => {
@@ -37,8 +37,8 @@ let documents = {
 let currentDocument = documents.root;
 
 let startCnt = 0;
-let endCnt = 0;
-let stateCnt = 0;
+let endCnt = 0; // eslint-disable-line
+// let stateCnt = 0;
 
 /**
  * Function called by parser when a node definition has been found.

diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
@@ -4,15 +4,12 @@ import graphlib from 'graphlib';
 import { logger } from '../../logger';
 import stateDb from './stateDb';
 import { parser } from './parser/stateDiagram';
-import utils from '../../utils';
-import idCache from './id-cache';
-import { drawState, addIdAndBox, drawEdge, drawNote } from './shapes';
+// import idCache from './id-cache';
+import { drawState, addIdAndBox, drawEdge } from './shapes';
 import { getConfig } from '../../config';
 
 parser.yy = stateDb;
 
-let total = 0;
-
 // TODO Move conf object to main conf in mermaidAPI
 let conf;
 // {
@@ -28,20 +25,20 @@ let conf;
 
 const transformationLog = {};
 
-export const setConf = function(cnf) {};
+export const setConf = function() {};
 
 // Todo optimize
-const getGraphId = function(label) {
-  const keys = idCache.keys();
+// const getGraphId = function(label) {
+//   const keys = idCache.keys();
 
-  for (let i = 0; i < keys.length; i++) {
-    if (idCache.get(keys[i]).label === label) {
-      return keys[i];
-    }
-  }
+//   for (let i = 0; i < keys.length; i++) {
+//     if (idCache.get(keys[i]).label === label) {
+//       return keys[i];
+//     }
+//   }
 
-  return undefined;
-};
+//   return undefined;
+// };
 
 /**
  * Setup arrow head and define the marker. The result is appended to the svg.
@@ -90,7 +87,7 @@ export const draw = function(text, id) {
   });
 
   const rootDoc = stateDb.getRootDoc();
-  const n = renderDoc(rootDoc, diagram);
+  renderDoc(rootDoc, diagram);
 
   const bounds = diagram.node().getBBox();
 
@@ -129,7 +126,6 @@ const renderDoc = (doc, diagram, parentId) => {
       // multigraph: false,
       compound: true,
       // acyclicer: 'greedy',
-      rankdir: 'LR',
       ranker: 'tight-tree',
       ranksep: conf.edgeLengthFactor
       // isMultiGraph: false
@@ -159,7 +155,6 @@ const renderDoc = (doc, diagram, parentId) => {
 
   const keys = Object.keys(states);
 
-  total = keys.length;
   let first = true;
 
   for (let i = 0; i < keys.length; i++) {

diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
@@ -317,7 +317,6 @@ const config = {
     forkWidth: 70,
     forkHeight: 7,
     // Used
-    padding: 5,
     miniPadding: 2,
     // Font size factor, this is used to guess the width of the edges labels before rendering by dagre
     // layout. This might need updating if/when switching font