Merge branch 'develop' into vaceletm-add-tuleap-integration

.github/dependabot.yml

@@ -0,0 +1,13 @@
+version: 2
+
+updates:
+- package-ecosystem: npm
+  directory: /
+  target-branch: develop
+  schedule:
+    interval: daily
+- package-ecosystem: github-actions
+  directory: /
+  target-branch: develop
+  schedule:
+    interval: daily

.github/pr-labeler.yml

@@ -1,3 +1,4 @@
 'Type: Bug / Error': 'bug/*'
 'Type: Enhancement': 'feature/*'
 'Type: Other': 'other/*'
+'Type: Dependabot': 'dependabot/*'

cypress/integration/rendering/gantt.spec.js

@@ -258,4 +258,40 @@ describe('Gantt diagram', () => {
         expect(svg).to.not.have.attr('style');
       });
   });
+    it('should render a gantt diagram with data labels at the top when topAxis is true', () => {
+    renderGraph(
+      `
+    gantt
+      dateFormat  YYYY-MM-DD
+      axisFormat  %d/%m
+      title Adding GANTT diagram to mermaid
+      excludes weekdays 2014-01-10
+
+      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
+
+      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
+      `,
+      { gantt: { topAxis: true } }
+    );
+  });
 });

docs/Configuration.md

@@ -0,0 +1,19 @@
+# Configuration
+
+Configuration is the second half of Mermaid for one or for many diagrams.
+
+This section will briefly introduce the different methods of configuring of the behaviors and apperances of Mermaid Diagrams. 
+The Following are the most commonly used methods, and are all tied to the [Deployment](./n00b-gettingStarted.md) methods. 
+
+1. Configuration Section in the [Live Editor](./Live-Editor.md). 
+
+
+2. The [Initialize call](), for when Mermaid is called via an API, or through a <script> tag. 
+
+
+3. [Directives](./directives.md), these are perhaps the most accessible of all, as they can be used by the 
+    
+    a. [Themes](./theming.md) are set up using `%%{init}%%` Directives and happen to be the fastest way of changing 
+    
+ 
+If you are interested in altering and customizing your Mermaid Diagrams, this list of [Configurations](./Setup.md) would be helpful. 

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)
 

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:
 

docs/directives.md

@@ -79,4 +79,6 @@ Init directives and any other non-multiline directives should be backwards compa
 
 Multiline directives, however, will pose an issue and will render an error. This is unavoidable.
 
+# example 
+
 

docs/integrations.md

@@ -10,6 +10,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
+- [Joplin](https://joplinapp.org) (**Native support**)
 - [GitHub](https://github.com)
   - [Github action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
   - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)

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,18 +17,16 @@ 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)
 
 In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
 
-The Live Editor opens on a [Flowchart](./flowchart.md), one of the many charts that mermaid can render. 
-
 ![Flowchart](./img/DiagramDefinition.png)
 
 **Saving a Diagram:**
-Downloading the image is recommended. 
+You may choose any of the methods below, to save it 
 
 ![Flowchart](./img/Live-Editor-Choices.png)
 
@@ -39,13 +37,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 +62,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 `<script src>` tag, or a reference to mermaid.js as a separate file.:
+**a. A reference to the external CDN in a `<script src>` tag, or a reference to mermaid.js as a separate file.:**
 
 ```html
 <body>
@@ -74,7 +72,7 @@ c. The `mermaid.initialize()` call to start the rendering process.
 </body>
 ```
 
-### b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:
+**b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:**
 
 ```html
 <body>
@@ -89,7 +87,7 @@ c. The `mermaid.initialize()` call to start the rendering process.
 ```
 **Notes**: every mermaid chart/graph/diagram definition, has to have separate `<div>` tags.
 
-### c. The `mermaid.initialize()` call.
+**c. The `mermaid.initialize()` call.**
 
 `mermaid.initialize()` calls take all the definitions contained in `<div class="mermaid">` tags it can find in the html body and render. Example:
 ```html
@@ -107,7 +105,7 @@ Mermaid rendering is initalized with `mermaid.initialize()`.You can place `merma
 | --------- | --------------- | ------ | ---------------------------------------------------- |
 |startOnLoad| Toggle for Rendering upon loading | Boolean | true, false                       |
 
-### Here is a full working example of the mermaidAPI being called through the CDN:
+**Here is a full working example of the mermaidAPI being called through the CDN:**
 
 ```html
 <html>
@@ -161,7 +159,7 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
 
 
 ---
-## 4. Adding mermaid as a dependency.
+## 4. Adding Mermaid as a dependency.
 
 1. install node v10 or 12, which would have npm
 

docs/n00b-overview.md

@@ -1,6 +1,6 @@
 # Overview for Beginners
 
-## Explaining with a Diagram
+**Explaining with a Diagram**
 
 A picture is worth a thousand words, a good diagram is certainly worth more. 
 
@@ -20,7 +20,7 @@ This is a relatively straightforward solution to a major hurdle in software team
 
 # Definition of Terms/ Dictionary
 
-**Mermaid definitions**
+**Mermaid text definitions can be saved for later reuse and editing.**
 
 >These are the Mermaid diagram deffinitions inside `<div>` tags, with the `class=mermaid`.
 

src/defaultConfig.js

@@ -611,6 +611,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
   },
 

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,

src/diagrams/gantt/ganttRenderer.js

@@ -6,6 +6,7 @@ import {
   scaleLinear,
   interpolateHcl,
   axisBottom,
+  axisTop,
   timeFormat
 } from 'd3';
 import { parser } from './parser/gantt';
@@ -346,7 +347,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'));
 
@@ -354,13 +355,31 @@ 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')
       .attr('stroke', 'none')
       .attr('font-size', 10)
       .attr('dy', '1em');
+
+    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 + ', ' + theTopPad + ')')
+        .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) {

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

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;
 

src/mermaidAPI.js

@@ -708,6 +708,7 @@ export default mermaidAPI;
  *       fontFamily:'"Open-Sans", "sans-serif"',
  *       numberSectionStyles:4,
  *       axisFormat:'%Y-%m-%d',
+ *       topAxis:false,
  *     }
  *   };
  *   mermaid.initialize(config);

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 {

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()