From 79b30153ba14b0b8daa460206d98cd421a8959c9 Mon Sep 17 00:00:00 2001 From: Nishanth Aravamudan Date: Tue, 23 Mar 2021 12:02:30 -0500 Subject: [PATCH 01/24] gantt/ganttRenderer: rename xAxis to bottomXAxis --- src/diagrams/gantt/ganttRenderer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index 82e5634fc..3687f9d30 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -354,7 +354,7 @@ export const draw = function(text, id) { } function makeGrid(theSidePad, theTopPad, w, h) { - let xAxis = axisBottom(timeScale) + let bottomXAxis = axisBottom(timeScale) .tickSize(-h + theTopPad + conf.gridLineStartPadding) .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); @@ -362,7 +362,7 @@ export const draw = function(text, id) { .append('g') .attr('class', 'grid') .attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')') - .call(xAxis) + .call(bottomXAxis) .selectAll('text') .style('text-anchor', 'middle') .attr('fill', '#000') From 6629061abdaa313ec50cd48c2e8585036c7747f4 Mon Sep 17 00:00:00 2001 From: Nishanth Aravamudan Date: Tue, 23 Mar 2021 12:03:45 -0500 Subject: [PATCH 02/24] gantt/ganttRenderer: add top x-axis for large Gantt charts I am leveraging a Gantt chart to generate a years-long Roadmap from text. This is for a large team, so it is quite large. A request I get from my stakeholders is for a top labelling axis in parallel to the current bottom one, so that the dates are labelled no matter where we are scrolled on the screen. --- src/diagrams/gantt/ganttRenderer.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index 3687f9d30..d8ee9bb06 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -6,6 +6,7 @@ import { scaleLinear, interpolateHcl, axisBottom, + axisTop, timeFormat } from 'd3'; import { parser } from './parser/gantt'; @@ -369,6 +370,22 @@ export const draw = function(text, id) { .attr('stroke', 'none') .attr('font-size', 10) .attr('dy', '1em'); + + let topXAxis = axisTop(timeScale) + .tickSize(-h + theTopPad + conf.gridLineStartPadding) + .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); + + svg + .append('g') + .attr('class', 'grid') + .attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')') + .call(topXAxis) + .selectAll('text') + .style('text-anchor', 'middle') + .attr('fill', '#000') + .attr('stroke', 'none') + .attr('font-size', 10) + .attr('dy', '1em'); } function vertLabels(theGap, theTopPad) { From 2d0aab223c6791753969c76e6590317eed466744 Mon Sep 17 00:00:00 2001 From: Nishanth Aravamudan Date: Wed, 24 Mar 2021 11:21:39 -0500 Subject: [PATCH 03/24] gantt: add a topAxis directive to allow per diagram configuration --- src/diagrams/gantt/ganttDb.js | 12 ++++++++++++ src/diagrams/gantt/parser/gantt.jison | 2 ++ 2 files changed, 14 insertions(+) diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js index d64498374..8fd100e0c 100644 --- a/src/diagrams/gantt/ganttDb.js +++ b/src/diagrams/gantt/ganttDb.js @@ -16,6 +16,7 @@ let currentSection = ''; const tags = ['active', 'done', 'crit', 'milestone']; let funs = []; let inclusiveEndDates = false; +let topAxis = false; // The serial order of the task in the script let lastOrder = 0; @@ -39,6 +40,7 @@ export const clear = function() { todayMarker = ''; excludes = []; inclusiveEndDates = false; + topAxis = false; lastOrder = 0; }; @@ -70,6 +72,14 @@ export const endDatesAreInclusive = function() { return inclusiveEndDates; }; +export const enableTopAxis = function() { + topAxis = true; +}; + +export const topAxisEnabled = function() { + return topAxis; +}; + export const getDateFormat = function() { return dateFormat; }; @@ -594,6 +604,8 @@ export default { getDateFormat, enableInclusiveEndDates, endDatesAreInclusive, + enableTopAxis, + topAxisEnabled, setAxisFormat, getAxisFormat, setTodayMarker, diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison index f63e367ef..f5746a32f 100644 --- a/src/diagrams/gantt/parser/gantt.jison +++ b/src/diagrams/gantt/parser/gantt.jison @@ -68,6 +68,7 @@ that id. "gantt" return 'gantt'; "dateFormat"\s[^#\n;]+ return 'dateFormat'; "inclusiveEndDates" return 'inclusiveEndDates'; +"topAxis" return 'topAxis'; "axisFormat"\s[^#\n;]+ return 'axisFormat'; "excludes"\s[^#\n;]+ return 'excludes'; "todayMarker"\s[^\n;]+ return 'todayMarker'; @@ -108,6 +109,7 @@ line statement : dateFormat {yy.setDateFormat($1.substr(11));$$=$1.substr(11);} | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);} + | topAxis {yy.TopAxis();$$=$1.substr(8);} | axisFormat {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);} | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);} | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);} From 120b89041b2a9aa303020f6c575535eaabd890a6 Mon Sep 17 00:00:00 2001 From: Nishanth Aravamudan Date: Wed, 24 Mar 2021 11:38:03 -0500 Subject: [PATCH 04/24] gantt: add a toplevel topAxis configuration option --- src/defaultConfig.js | 12 ++++++++++++ src/mermaidAPI.js | 1 + 2 files changed, 13 insertions(+) diff --git a/src/defaultConfig.js b/src/defaultConfig.js index 9fb279bb2..7b9098eb3 100644 --- a/src/defaultConfig.js +++ b/src/defaultConfig.js @@ -613,6 +613,18 @@ const config = { */ useMaxWidth: true, + /** + *| Parameter | Description |Type | Required | Values| + *| --- | --- | --- | --- | --- | + *| topAxis | See notes | Boolean | 4 | True, False | + * + ***Notes:**when this flag is set date labels will be added to the +top of the chart + * + ***Default value false**. + */ + topAxis: false, + useWidth: undefined }, diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index e7e04829c..3ff2cb284 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -671,6 +671,7 @@ export default mermaidAPI; * fontFamily:'"Open-Sans", "sans-serif"', * numberSectionStyles:4, * axisFormat:'%Y-%m-%d', + * topAxis:false, * } * }; * mermaid.initialize(config); From f78d4b13eb411cd5604769ca70f2a9e6b90bba0e Mon Sep 17 00:00:00 2001 From: Nishanth Aravamudan Date: Wed, 24 Mar 2021 11:38:21 -0500 Subject: [PATCH 05/24] gantt: only display topAxis if configured or directive is set --- src/diagrams/gantt/ganttRenderer.js | 30 +++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index d8ee9bb06..56dfe4362 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -371,21 +371,23 @@ export const draw = function(text, id) { .attr('font-size', 10) .attr('dy', '1em'); - let topXAxis = axisTop(timeScale) - .tickSize(-h + theTopPad + conf.gridLineStartPadding) - .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); + if (ganttDb.topAxisEnabled() || conf.topAxis) { + let topXAxis = axisTop(timeScale) + .tickSize(-h + theTopPad + conf.gridLineStartPadding) + .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); - svg - .append('g') - .attr('class', 'grid') - .attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')') - .call(topXAxis) - .selectAll('text') - .style('text-anchor', 'middle') - .attr('fill', '#000') - .attr('stroke', 'none') - .attr('font-size', 10) - .attr('dy', '1em'); + svg + .append('g') + .attr('class', 'grid') + .attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')') + .call(topXAxis) + .selectAll('text') + .style('text-anchor', 'middle') + .attr('fill', '#000') + .attr('stroke', 'none') + .attr('font-size', 10) + .attr('dy', '1em'); + } } function vertLabels(theGap, theTopPad) { From b558d67fcdf3110d245174cfad3ffca5f9fb7df3 Mon Sep 17 00:00:00 2001 From: Nishanth Aravamudan Date: Thu, 1 Apr 2021 15:31:51 -0500 Subject: [PATCH 06/24] ganttRenderer: put top axis, if configured at the top --- src/diagrams/gantt/ganttRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index 56dfe4362..60a1b9461 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -379,7 +379,7 @@ export const draw = function(text, id) { svg .append('g') .attr('class', 'grid') - .attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')') + .attr('transform', 'translate(' + theSidePad + ', ' + theTopPad + ')') .call(topXAxis) .selectAll('text') .style('text-anchor', 'middle') From c7e05df9c0b94c3cb53b8b310f1e0d64fda1e6f9 Mon Sep 17 00:00:00 2001 From: Matthieu MOREL Date: Wed, 7 Apr 2021 19:43:07 +0200 Subject: [PATCH 07/24] Create dependabot.yml --- .github/dependabot.yml | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .github/dependabot.yml diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 000000000..894c440a0 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,8 @@ +version: 2 + +updates: +- package-ecosystem: javascript + directory: / + target-branch: develop + schedule: + interval: daily From 74c109d6f1966727eed7c75e4698eb15d620d04c Mon Sep 17 00:00:00 2001 From: Matthieu MOREL Date: Wed, 7 Apr 2021 20:03:48 +0200 Subject: [PATCH 08/24] Update pr-labeler.yml to support Dependabot --- .github/pr-labeler.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 077cc568b..5ed526bc5 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,3 +1,4 @@ 'Type: Bug / Error': 'bug/*' 'Type: Enhancement': 'feature/*' 'Type: Other': 'other/*' +'Type: Dependabot': 'dependabot/*' From 8af62c37bb36e193fb1930780f8fb440440e5326 Mon Sep 17 00:00:00 2001 From: Matthieu MOREL Date: Wed, 7 Apr 2021 22:47:15 +0200 Subject: [PATCH 09/24] Update dependabot.yml --- .github/dependabot.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 894c440a0..2faf97966 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,7 +1,7 @@ version: 2 updates: -- package-ecosystem: javascript +- package-ecosystem: npm directory: / target-branch: develop schedule: From 7866e761cc8c48576ae36c5456c53469a171bb1f Mon Sep 17 00:00:00 2001 From: Matthieu MOREL Date: Wed, 7 Apr 2021 23:03:18 +0200 Subject: [PATCH 10/24] Update dependabot.yml For npm and github-actions --- .github/dependabot.yml | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 2faf97966..2b09726b9 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -6,3 +6,8 @@ updates: target-branch: develop schedule: interval: daily +- package-ecosystem: github-actions + directory: / + target-branch: develop + schedule: + interval: daily From 9eedd6c57ae08ad3cc2ae0d480bd399af01eb029 Mon Sep 17 00:00:00 2001 From: laDanz Date: Fri, 9 Apr 2021 14:12:45 +0200 Subject: [PATCH 11/24] Update development.md little grammar fix --- docs/development.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/development.md b/docs/development.md index adc51cccf..22b110e28 100644 --- a/docs/development.md +++ b/docs/development.md @@ -74,7 +74,7 @@ To start working with the e2e tests: The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress. -When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag for review it if it differs. +When running in CI it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag it for review if it differs. This is what a rendering test looks like: From 84f664de14b4650932988533a1768a8f4f74db58 Mon Sep 17 00:00:00 2001 From: Ahmad Nassri Date: Mon, 12 Apr 2021 15:56:17 -0400 Subject: [PATCH 12/24] fix(id-generator): re-write generator to allow it to function properly after compiling in cli --- src/mermaid.js | 2 +- src/utils.js | 22 ++++++++++++---------- src/utils.spec.js | 6 +++--- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/mermaid.js b/src/mermaid.js index b872df2fc..d6e67f699 100644 --- a/src/mermaid.js +++ b/src/mermaid.js @@ -78,7 +78,7 @@ const init = function() { mermaidAPI.updateSiteConfig({ gantt: mermaid.ganttConfig }); } - const idGeneratior = utils.initIdGeneratior(conf.deterministicIds, conf.deterministicIDSeed); + const idGeneratior = new utils.initIdGeneratior(conf.deterministicIds, conf.deterministicIDSeed); let txt; diff --git a/src/utils.js b/src/utils.js index 97b6d125f..b6e2a9d9a 100644 --- a/src/utils.js +++ b/src/utils.js @@ -793,17 +793,19 @@ export const configureSvgSize = function(svgElem, height, width, useMaxWidth) { d3Attrs(svgElem, attrs); }; -export const initIdGeneratior = function(deterministic, seed) { - if (!deterministic) return { next: () => Date.now() }; - class iterator { - constructor() { - return (this.count = seed ? seed.length : 0); - } - next() { - return this.count++; - } +export const initIdGeneratior = class iterator { + constructor (deterministic, seed) { + this.deterministic = deterministic; + this.seed = seed; + + this.count = seed ? seed.length : 0 + } + + next() { + if (!this.deterministic) return Date.now(); + + return this.count++; } - return new iterator(); }; export default { diff --git a/src/utils.spec.js b/src/utils.spec.js index 66b13a276..c490099dd 100644 --- a/src/utils.spec.js +++ b/src/utils.spec.js @@ -256,7 +256,7 @@ describe('when calculating SVG size', function() { describe('when initializing the id generator', function () { it('should return a random number generator based on Date', function (done) { - const idGenerator = utils.initIdGeneratior(false) + const idGenerator = new utils.initIdGeneratior(false) expect(typeof idGenerator.next).toEqual('function') const lastId = idGenerator.next() setTimeout(() => { @@ -266,7 +266,7 @@ describe('when initializing the id generator', function () { }); it('should return a non random number generator', function () { - const idGenerator = utils.initIdGeneratior(true) + const idGenerator = new utils.initIdGeneratior(true) expect(typeof idGenerator.next).toEqual('function') const start = 0 const lastId = idGenerator.next() @@ -275,7 +275,7 @@ describe('when initializing the id generator', function () { }); it('should return a non random number generator based on seed', function () { - const idGenerator = utils.initIdGeneratior(true, 'thisIsASeed') + const idGenerator = new utils.initIdGeneratior(true, 'thisIsASeed') expect(typeof idGenerator.next).toEqual('function') const start = 11 const lastId = idGenerator.next() From f78d8b3e5ee37f9085c2e2b58ba529a322361937 Mon Sep 17 00:00:00 2001 From: Ahmad Nassri Date: Mon, 12 Apr 2021 16:28:14 -0400 Subject: [PATCH 13/24] fix(lint): correct lint errors --- src/utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils.js b/src/utils.js index b6e2a9d9a..f1eac0bee 100644 --- a/src/utils.js +++ b/src/utils.js @@ -794,11 +794,11 @@ export const configureSvgSize = function(svgElem, height, width, useMaxWidth) { }; export const initIdGeneratior = class iterator { - constructor (deterministic, seed) { + constructor(deterministic, seed) { this.deterministic = deterministic; this.seed = seed; - this.count = seed ? seed.length : 0 + this.count = seed ? seed.length : 0; } next() { From 0c60ee5f1d653facb0a0aa0ea5a76cb19dd380f5 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Fri, 16 Apr 2021 23:36:15 -0700 Subject: [PATCH 14/24] Update README.md --- docs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index 6d55d650f..e046b1873 100644 --- a/docs/README.md +++ b/docs/README.md @@ -40,7 +40,7 @@ For a more detailed introduction to Mermaid and some of it's more basic uses, lo **Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏** -# Diagrams that mermaid can render +# Diagram Types ### [Flowchart](/flowchart?id=flowcharts-basic-syntax) From 8666f4efbff5098bde646f171091414c4a91bbd7 Mon Sep 17 00:00:00 2001 From: Neil Cuzon <58763315+NeilCuzon@users.noreply.github.com> Date: Fri, 16 Apr 2021 23:41:27 -0700 Subject: [PATCH 15/24] Update n00b-gettingStarted.md --- docs/n00b-gettingStarted.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md index 9161f1a82..18e16a545 100644 --- a/docs/n00b-gettingStarted.md +++ b/docs/n00b-gettingStarted.md @@ -3,10 +3,10 @@ Creating diagrams and charts using mermaid code is simple. >The live editor is enough for most general uses of mermaid -## Absolute beginners are recommended to view the Video [Tutorials](./Tutorials.md) on the Live Editor, to gain a better understanding of mermaid. +**Absolute beginners are recommended to view the Video [Tutorials](./Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.** -## For beginners, there are Four ways you can use mermaid: +## Four ways of using mermaid: 1. Using the mermaid [Live Editor](https://mermaid-js.github.io/mermaid-live-editor/). - Learning the [Syntax](./n00b-syntaxReference) would be helpful. 2. Using [mermaid plugins](./integrations.md) with programs you are familiar with. @@ -17,7 +17,7 @@ Creating diagrams and charts using mermaid code is simple. >More in depth information can be found on [Usage](./usage.md). -## 1. Using [The mermaid live editor](https://mermaidjs.github.io/mermaid-live-editor). +## 1. Using [The Live Editor](https://mermaidjs.github.io/mermaid-live-editor). ![Flowchart](./img/Live-Editor-Usage.png) @@ -39,13 +39,13 @@ Downloading the image is recommended. ![Flowchart](./img/Configuration.png) -## 2. Using mermaid plugins: +## 2. Using Mermaid Plugins: Using plug-ins you can generate mermaid diagrams from within popular applications, the same way that you would use the Live Editor. Here's a list of [Mermaid Plugins](./integrations.md). **This is covered in greater detail in the [Usage section](usage.md)** -## 3. Deploying mermaid with Inline JavaScript +## 3. Mermaid with Inline JavaScript This method can be used with any common web server. Apache, IIS, nginx, node express [...], you pick your favourite. @@ -64,9 +64,9 @@ b. The mermaid code for the diagram we want to create. c. The `mermaid.initialize()` call to start the rendering process. -## Three requirements for the mermaidAPI to render a diagram: +## Requirements for mermaidAPI to render a diagram: -### a. A reference to the external CDN in a `