mermaid - npm Package Compare versions

Comparing version 7.1.2 to 8.0.0-alpha.1

package.json

 {
   "name": "mermaid",
-  "version": "7.1.2",
+  "version": "8.0.0-alpha.1",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
@@ -19,8 +19,9 @@ "main": "dist/mermaid.core.js",
     "release": "yarn build -p --config webpack.config.prod.babel.js",
-    "upgrade": "yarn-upgrade-all && yarn remove d3 && yarn add d3@3.5.17",
+    "upgrade": "yarn-upgrade-all && yarn remove less jasmine && yarn add --dev less@2.7.3 jasmine@2.99.0",
     "lint": "standard",
-    "karma": "node -r babel-register node_modules/.bin/karma start karma.conf.js --single-run",
+    "karma": "node -r babel-register node_modules/.bin/karma start karma.conf.js",
     "test": "yarn lint && yarn karma",
     "jison": "node -r babel-register node_modules/.bin/gulp jison",
-    "prepublishOnly": "yarn build && yarn release && yarn test"
+    "prepublishOnly": "yarn build && yarn release && yarn test",
+    "prepush": "yarn test"
   },
@@ -40,16 +41,17 @@ "repository": {
   "dependencies": {
-    "d3": "3.5.17",
-    "dagre-d3-renderer": "^0.4.25",
-    "dagre-layout": "^0.8.0",
+    "d3": "^4.13.0",
+    "dagre-d3-renderer": "^0.5.1",
+    "dagre-layout": "^0.8.6",
+    "graphlibrary": "^2.2.0",
     "he": "^1.1.1",
-    "lodash": "^4.17.4",
-    "moment": "^2.20.1"
+    "lodash": "^4.17.5",
+    "moment": "^2.21.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.4",
     "babel-plugin-lodash": "^3.3.2",
     "babel-preset-env": "^1.6.1",
     "codeclimate-test-reporter": "^0.5.0",
-    "css-loader": "^0.28.7",
+    "css-loader": "^0.28.10",
     "css-to-string-loader": "^0.1.3",
@@ -60,19 +62,21 @@ "extract-text-webpack-plugin": "^3.0.2",
     "gulp-jison": "^1.2.0",
+    "husky": "^0.14.3",
     "inject-loader": "^3.0.1",
-    "jasmine": "^2.8.0",
+    "jasmine": "2.99.0",
     "jasmine-es6": "^0.4.3",
     "jison": "^0.4.18",
-    "karma": "^1.7.1",
+    "karma": "^2.0.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-jasmine": "^1.1.1",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.9",
-    "less": "^2.7.3",
-    "less-loader": "^4.0.5",
-    "puppeteer": "^0.13.0",
-    "standard": "^10.0.3",
-    "style-loader": "^0.19.1",
-    "webpack": "^3.10.0",
+    "karma-webpack": "^2.0.13",
+    "less": "2.7.3",
+    "less-loader": "^4.0.6",
+    "puppeteer": "^1.1.1",
+    "standard": "^11.0.0",
+    "style-loader": "^0.20.2",
+    "webpack": "^4.1.1",
+    "webpack-cli": "^2.0.10",
     "webpack-node-externals": "^1.6.0",
-    "yarn-upgrade-all": "^0.2.0"
+    "yarn-upgrade-all": "^0.3.0"
   },
@@ -79,0 +83,0 @@ "files": [

src/diagrams/classDiagram/classDb.js

@@ -41,3 +41,3 @@
 export const addRelation = function (relation) {
-  logger.warn('Adding relation: ' + JSON.stringify(relation))
+  logger.debug('Adding relation: ' + JSON.stringify(relation))
   addClass(relation.id1)
@@ -44,0 +44,0 @@ addClass(relation.id2)

src/diagrams/classDiagram/classRenderer.js

@@ -1,6 +0,6 @@
-
 import dagre from 'dagre-layout'
+import graphlib from 'graphlibrary'
+import * as d3 from 'd3'
 
 import classDb from './classDb'
-import d3 from '../../d3'
 import { logger } from '../../logger'
@@ -141,3 +141,3 @@ import { parser } from './parser/classDiagram'
   // This is the accessor function we talked about above
-  const lineFunction = d3.svg.line()
+  const lineFunction = d3.line()
     .x(function (d) {
@@ -149,3 +149,3 @@ return d.x
     })
-    .interpolate('basis')
+    .curve(d3.curveBasis)
 
@@ -238,3 +238,3 @@ const svgPath = elem.append('path')
 
-  const membersLine = g.append('line')      // text label for the x axis
+  const membersLine = g.append('line') // text label for the x axis
     .attr('x1', 0)
@@ -244,3 +244,3 @@ .attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2)
 
-  const members = g.append('text')      // text label for the x axis
+  const members = g.append('text') // text label for the x axis
     .attr('x', conf.padding)
@@ -259,3 +259,3 @@ .attr('y', titleHeight + (conf.dividerMargin) + conf.textHeight)
 
-  const methodsLine = g.append('line')      // text label for the x axis
+  const methodsLine = g.append('line') // text label for the x axis
     .attr('x1', 0)
@@ -265,3 +265,3 @@ .attr('y1', conf.padding + titleHeight + conf.dividerMargin + membersBox.height)
 
-  const methods = g.append('text')      // text label for the x axis
+  const methods = g.append('text') // text label for the x axis
     .attr('x', conf.padding)
@@ -320,3 +320,3 @@ .attr('y', titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight)
   // Layout graph, Create a new directed graph
-  const g = new dagre.graphlib.Graph({
+  const g = new graphlib.Graph({
     multigraph: true
@@ -323,0 +323,0 @@ })

src/diagrams/example/exampleRenderer.js

@@ -0,5 +1,5 @@
+import * as d3 from 'd3'
+
 import db from './exampleDb'
 import exampleParser from './parser/example.js'
-import d3 from '../../d3'
-
 import { logger } from '../../logger'
@@ -24,3 +24,3 @@
 
-  g.append('text')      // text label for the x axis
+  g.append('text') // text label for the x axis
     .attr('x', 100)
@@ -27,0 +27,0 @@ .attr('y', 40)

src/diagrams/flowchart/flowRenderer.js

@@ -0,5 +1,7 @@
+import graphlib from 'graphlibrary'
+import * as d3 from 'd3'
+
 import graphDb from './graphDb'
 import flow from './parser/flow'
 import dot from './parser/dot'
-import d3 from '../../d3'
 import dagreD3 from 'dagre-d3-renderer'
@@ -268,3 +270,3 @@ import { logger } from '../../logger'
   // Create the input mermaid.graph
-  const g = new dagreD3.graphlib.Graph({
+  const g = new graphlib.Graph({
     multigraph: true,
@@ -271,0 +273,0 @@ compound: true

src/diagrams/flowchart/graphDb.js

@@ -0,4 +1,5 @@
+import * as d3 from 'd3'
+
 import { logger } from '../../logger'
 import utils from '../../utils'
-import d3 from '../../d3'
 
@@ -251,3 +252,3 @@ let vertices = {}
   let tooltipElem = d3.select('.mermaidTooltip')
-  if (tooltipElem[0][0] === null) {
+  if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
     tooltipElem = d3.select('body')
@@ -254,0 +255,0 @@ .append('div')

src/diagrams/gantt/gantt.spec.js

@@ -10,3 +10,3 @@ /* eslint-env jasmine */
 
-  it('should handle an dateFormat definition', function () {
+  it('should handle a dateFormat definition', function () {
     const str = 'gantt\ndateFormat yyyy-mm-dd'
@@ -16,3 +16,3 @@
   })
-  it('should handle an dateFormat definition', function () {
+  it('should handle a title definition', function () {
     const str = 'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid'
@@ -22,12 +22,10 @@
   })
-  it('should handle an dateFormat definition', function () {
-    const str = 'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid'
+  it('should handle a section definition', function () {
+    const str = 'gantt\n' +
+      'dateFormat yyyy-mm-dd\n' +
+      'title Adding gantt diagram functionality to mermaid\n' +
+      'section Documentation'
 
     parser.parse(str)
   })
-  it('should handle an section definition', function () {
-    const str = 'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid'
-
-    parser.parse(str)
-  })
   /**
@@ -34,0 +32,0 @@ * Beslutsflöde inligt nedan. Obs bla bla bla

src/diagrams/gantt/ganttRenderer.js

@@ -1,7 +0,7 @@
-
 import moment from 'moment'
+import * as d3 from 'd3'
 
 import { parser } from './parser/gantt'
 import ganttDb from './ganttDb'
-import d3 from '../../d3'
+import { logger } from '../../logger'
 
@@ -63,9 +63,9 @@ parser.yy = ganttDb
   // Set timescale
-  const timeScale = d3.time.scale()
+  const timeScale = d3.scaleTime()
     .domain([d3.min(taskArray, function (d) {
       return d.startTime
     }),
-      d3.max(taskArray, function (d) {
-        return d.endTime
-      })])
+    d3.max(taskArray, function (d) {
+      return d.endTime
+    })])
     .rangeRound([0, w - conf.leftPadding - conf.rightPadding])
@@ -102,3 +102,3 @@
 
-    const colorScale = d3.scale.linear()
+    const colorScale = d3.scaleLinear()
       .domain([0, categories.length])
@@ -259,58 +259,29 @@ .range(['#00B9FA', '#F95002'])
   function makeGrid (theSidePad, theTopPad, w, h) {
-    const pre = [
-      ['.%L', function (d) {
-        return d.getMilliseconds()
-      }],
-      [':%S', function (d) {
-        return d.getSeconds()
-      }],
-      // Within a hour
-      ['h1 %I:%M', function (d) {
-        return d.getMinutes()
-      }]]
-    const post = [
-      ['%Y', function () {
-        return true
-      }]]
+    const formatMillisecond = d3.timeFormat('.%L')
+    const formatSecond = d3.timeFormat(':%S')
+    const formatMinute = d3.timeFormat('%I:%M')
+    const formatHour = d3.timeFormat('%I %p')
+    const formatDay = d3.timeFormat('%Y-%m-%d')
+    const formatWeek = d3.timeFormat('%Y-%m-%d')
+    const formatMonth = d3.timeFormat('%b-%Y')
+    const formatYear = d3.timeFormat('%Y')
 
-    let mid = [
-      // Within a day
-      ['%I:%M', function (d) {
-        return d.getHours()
-      }],
-      // Day within a week (not monday)
-      ['%a %d', function (d) {
-        return d.getDay() && d.getDate() !== 1
-      }],
-      // within a month
-      ['%b %d', function (d) {
-        return d.getDate() !== 1
-      }],
-      // Month
-      ['%B', function (d) {
-        return d.getMonth()
-      }]
-    ]
-    let formatter
-    if (typeof conf.axisFormatter !== 'undefined') {
-      mid = []
-      conf.axisFormatter.forEach(function (item) {
-        const n = []
-        n[0] = item[0]
-        n[1] = item[1]
-        mid.push(n)
-      })
+    const multiFormat = date => {
+      return (d3.timeSecond(date) < date ? formatMillisecond
+        : d3.timeMinute(date) < date ? formatSecond
+          : d3.timeHour(date) < date ? formatMinute
+            : d3.timeDay(date) < date ? formatHour
+              : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek)
+                : d3.timeYear(date) < date ? formatMonth
+                  : formatYear)(date)
     }
-    formatter = pre.concat(mid).concat(post)
 
-    let xAxis = d3.svg.axis()
-      .scale(timeScale)
-      .orient('bottom')
-      .tickSize(-h + theTopPad + conf.gridLineStartPadding, 0, 0)
-      .tickFormat(d3.time.format.multi(formatter))
+    // todo: if (typeof conf.axisFormatter !== 'undefined')
 
-    if (daysInChart > 7 && daysInChart < 230) {
-      xAxis = xAxis.ticks(d3.time.monday.range)
-    }
+    let xAxis = d3.axisBottom(timeScale)
+      .tickSize(-h + theTopPad + conf.gridLineStartPadding)
+      .tickFormat(multiFormat)
 
+    logger.debug(daysInChart) // just to pass lint
+
     svg.append('g')
@@ -317,0 +288,0 @@ .attr('class', 'grid')

src/diagrams/gitGraph/gitGraphRenderer.js

 import _ from 'lodash'
+import * as d3 from 'd3'
 
 import db from './gitGraphAst'
 import gitGraphParser from './parser/gitGraph'
-import d3 from '../../d3'
 import { logger } from '../../logger'
@@ -55,5 +55,8 @@
 function svgDrawLine (svg, points, colorIdx, interpolate) {
-  interpolate = interpolate || 'basis'
+  let curve = d3.curveBasis
+  if (interpolate === 'linear') {
+    curve = d3.curveLinear
+  }
   const color = config.branchColors[colorIdx % config.branchColors.length]
-  const lineGen = d3.svg.line()
+  const lineGen = d3.line()
     .x(function (d) {
@@ -65,3 +68,3 @@ return Math.round(d.x)
     })
-    .interpolate(interpolate)
+    .curve(curve)
 
@@ -68,0 +71,0 @@ svg

src/diagrams/sequenceDiagram/sequenceDiagram.spec.js

@@ -18,3 +18,3 @@ /* eslint-env jasmine */
 const renderer = MyModuleInjector({
-  '../../d3': d3
+  'd3': d3
 })
@@ -21,0 +21,0 @@

src/diagrams/sequenceDiagram/sequenceRenderer.js

@@ -0,4 +1,5 @@
+import * as d3 from 'd3'
+
 import svgDraw from './svgDraw'
 import { logger } from '../../logger'
-import d3 from '../../d3'
 import { parser } from './parser/sequenceDiagram'
@@ -212,3 +213,3 @@ import sequenceDb from './sequenceDb'
 
-  const textElem = g.append('text')      // text label for the x axis
+  const textElem = g.append('text') // text label for the x axis
     .attr('x', txtCenter)
@@ -220,8 +221,3 @@ .attr('y', verticalPos - 7)
 
-  let textWidth
-  if (typeof textElem[0][0].getBBox !== 'undefined') {
-    textWidth = textElem[0][0].getBBox().width
-  } else {
-    textWidth = textElem[0][0].getBoundingClientRect()
-  }
+  let textWidth = (textElem._groups || textElem)[0][0].getBBox().width
 
@@ -263,3 +259,3 @@ let line
   line.attr('stroke', 'black')
-  line.style('fill', 'none')     // remove any fill colour
+  line.style('fill', 'none') // remove any fill colour
   if (msg.type === parser.yy.LINETYPE.SOLID || msg.type === parser.yy.LINETYPE.DOTTED) {
@@ -457,3 +453,3 @@ line.attr('marker-end', 'url(' + url + '#arrowhead)')
         } catch (e) {
-          console.error('error while drawing message', e)
+          logger.error('error while drawing message', e)
         }
@@ -460,0 +456,0 @@ }

src/diagrams/sequenceDiagram/svgDraw.js

@@ -36,10 +36,2 @@ export const drawRect = function (elem, rectData) {
   span.text(nText)
-  if (typeof textElem.textwrap !== 'undefined') {
-    textElem.textwrap({
-      x: textData.x, // bounding box is 300 pixels from the left
-      y: textData.y, // bounding box is 400 pixels from the top
-      width: width, // bounding box is 500 pixels across
-      height: 1800 // bounding box is 600 pixels tall
-    }, textData.textMargin)
-  }
 
@@ -65,2 +57,3 @@ return textElem
 }
+
 let actorCnt = -1
@@ -155,3 +148,3 @@ /**
   txt.labelMargin = 1.5 * 10 // This is the small box that says "loop"
-  txt.class = 'labelText'    // Its size & position are fixed.
+  txt.class = 'labelText' // Its size & position are fixed.
 
@@ -273,16 +266,6 @@ drawLabel(g, txt)
 
-    if (typeof (text.textwrap) !== 'undefined') {
-      text.textwrap({ // d3textwrap
-        x: x + width / 2, y: y, width: width, height: height
-      }, 0)
-      // vertical aligment after d3textwrap expans tspan to multiple tspans
-      let tspans = text.selectAll('tspan')
-      if (tspans.length > 0 && tspans[0].length > 0) {
-        tspans = tspans[0]
-        // set y of <text> to the mid y of the first line
-        text.attr('y', y + (height / 2.0 - text[0][0].getBBox().height * (1 - 1.0 / tspans.length) / 2.0))
-          .attr('dominant-baseline', 'central')
-          .attr('alignment-baseline', 'central')
-      }
-    }
+    text.attr('y', y + height / 2.0)
+      .attr('dominant-baseline', 'central')
+      .attr('alignment-baseline', 'central')
+
     _setTextAttrs(text, textAttrs)
@@ -289,0 +272,0 @@ }

src/mermaid.js

@@ -67,3 +67,3 @@ /**
       : nodes instanceof window.Node ? [nodes]
-        : nodes  // Last case  - sequence config was passed pick next
+        : nodes // Last case  - sequence config was passed pick next
 
@@ -70,0 +70,0 @@ if (typeof global.mermaid_config !== 'undefined') {

src/mermaidAPI.js

@@ -14,2 +14,4 @@ /**
 */
+import * as d3 from 'd3'
+
 import { logger, setLogLevel } from './logger'
@@ -36,3 +38,2 @@ import graph from './diagrams/flowchart/graphDb'
 import gitGraphAst from './diagrams/gitGraph/gitGraphAst'
-import d3 from './d3'
 import pkg from '../package.json'
@@ -494,3 +495,3 @@
   } catch (e) {
-    logger.warn(e)
+    logger.error(e)
   }
@@ -497,0 +498,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

95171

increased by10.05%

Worsened metrics

Total package byte prevSize

12328047

decreased by-9.79%

Dependency count

7

increased by16.67%

Dev dependency count

30

increased by7.14%

Number of package files

80

decreased by-1.23%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Addedgraphlibrary@^2.2.0

• + Addedcommander@2.20.3(transitive)

• + Addedd3@4.13.0(transitive)

• + Addedd3-array@1.2.1(transitive)

• + Addedd3-axis@1.0.8(transitive)

• + Addedd3-brush@1.0.4(transitive)

• + Addedd3-chord@1.0.4(transitive)

• + Addedd3-collection@1.0.4(transitive)

• + Addedd3-color@1.0.3(transitive)

• + Addedd3-dispatch@1.0.3(transitive)

• + Addedd3-drag@1.2.1(transitive)

• + Addedd3-dsv@1.0.8(transitive)

• + Addedd3-ease@1.0.3(transitive)

• + Addedd3-force@1.1.0(transitive)

• + Addedd3-format@1.2.2(transitive)

• + Addedd3-geo@1.9.1(transitive)

• + Addedd3-hierarchy@1.1.5(transitive)

• + Addedd3-interpolate@1.1.6(transitive)

• + Addedd3-path@1.0.5(transitive)

• + Addedd3-polygon@1.0.3(transitive)

• + Addedd3-quadtree@1.0.3(transitive)

• + Addedd3-queue@3.0.7(transitive)

• + Addedd3-random@1.1.0(transitive)

• + Addedd3-request@1.0.6(transitive)

• + Addedd3-scale@1.0.7(transitive)

• + Addedd3-selection@1.3.0(transitive)

• + Addedd3-shape@1.2.0(transitive)

• + Addedd3-time@1.0.8(transitive)

• + Addedd3-time-format@2.1.1(transitive)

• + Addedd3-timer@1.0.7(transitive)

• + Addedd3-transition@1.1.1(transitive)

• + Addedd3-voronoi@1.1.2(transitive)

• + Addedd3-zoom@1.7.1(transitive)

• + Addeddagre-d3-renderer@0.5.8(transitive)

• + Addediconv-lite@0.4.24(transitive)

• + Addedrw@1.3.3(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedxmlhttprequest@1.8.0(transitive)

• - Removedd3@3.5.17(transitive)

• - Removeddagre-d3-renderer@0.4.26(transitive)

• - Removedgraphlib@2.1.8(transitive)

• Updatedd3@^4.13.0

• Updateddagre-d3-renderer@^0.5.1

• Updateddagre-layout@^0.8.6

• Updatedlodash@^4.17.5

• Updatedmoment@^2.21.0