diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index 33d3ac9e1..7c1690952 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -330,6 +330,48 @@ describe('Gantt diagram', () => { ); }); + it('should render a gantt diagram with tick is 2 milliseconds', () => { + imgSnapshotTest( + ` + gantt + title A Gantt Diagram + dateFormat SSS + axisFormat %Lms + tickInterval 2millisecond + excludes weekends + + section Section + A task : a1, 000, 6ms + Another task : after a1, 6ms + section Another + Task in sec : a2, 006, 3ms + another task : 3ms + `, + {} + ); + }); + + it('should render a gantt diagram with tick is 2 seconds', () => { + imgSnapshotTest( + ` + gantt + title A Gantt Diagram + dateFormat ss + axisFormat %Ss + tickInterval 2second + excludes weekends + + section Section + A task : a1, 00, 6s + Another task : after a1, 6s + section Another + Task in sec : 06, 3s + another task : 3s + `, + {} + ); + }); + it('should render a gantt diagram with tick is 15 minutes', () => { imgSnapshotTest( ` diff --git a/docs/config/Tutorials.md b/docs/config/Tutorials.md index 9ae177954..f3bad9ade 100644 --- a/docs/config/Tutorials.md +++ b/docs/config/Tutorials.md @@ -62,10 +62,10 @@ from IPython.display import Image, display import matplotlib.pyplot as plt def mm(graph): - graphbytes = graph.encode("ascii") - base64_bytes = base64.b64encode(graphbytes) - base64_string = base64_bytes.decode("ascii") - display(Image(url="https://mermaid.ink/img/" + base64_string)) + graphbytes = graph.encode("utf8") + base64_bytes = base64.b64encode(graphbytes) + base64_string = base64_bytes.decode("ascii") + display(Image(url="https://mermaid.ink/img/" + base64_string)) mm(""" graph LR; diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index d19f71a97..8d16141a0 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -860,8 +860,8 @@ flowchart LR C-->D click A callback "Tooltip for a callback" click B "https://www.github.com" "This is a tooltip for a link" - click A call callback() "Tooltip for a callback" - click B href "https://www.github.com" "This is a tooltip for a link" + click C call callback() "Tooltip for a callback" + click D href "https://www.github.com" "This is a tooltip for a link" ``` ```mermaid @@ -871,8 +871,8 @@ flowchart LR C-->D click A callback "Tooltip for a callback" click B "https://www.github.com" "This is a tooltip for a link" - click A call callback() "Tooltip for a callback" - click B href "https://www.github.com" "This is a tooltip for a link" + click C call callback() "Tooltip for a callback" + click D href "https://www.github.com" "This is a tooltip for a link" ``` > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2. diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 8ad438fb1..33c2740e5 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -241,7 +241,7 @@ The following formatting strings are supported: More info in: -### Axis ticks +### Axis ticks (v10.3.0+) The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`. @@ -252,7 +252,7 @@ tickInterval 1day The pattern is: ```javascript -/^([1-9][0-9]*)(minute|hour|day|week|month)$/; +/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/; ``` More info in: @@ -271,7 +271,7 @@ gantt weekday monday ``` -Support: v10.3.0+ +> **Warning** > `millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION ## Output in compact mode diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md index 6b408441a..43d36f089 100644 --- a/docs/syntax/sankey.md +++ b/docs/syntax/sankey.md @@ -8,9 +8,8 @@ > A sankey diagram is a visualization used to depict a flow from one set of values to another. -::: warning -This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future. -::: +> **Warning** +> This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future. The things being connected are called nodes and the connections are called links. @@ -19,6 +18,11 @@ The things being connected are called nodes and the connections are called links This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors. ```mermaid-example +--- +config: + sankey: + showValues: false +--- sankey-beta Agricultural 'waste',Bio-conversion,124.729 @@ -92,6 +96,11 @@ Wind,Electricity grid,289.366 ``` ```mermaid +--- +config: + sankey: + showValues: false +--- sankey-beta Agricultural 'waste',Bio-conversion,124.729 diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 2b68373f8..bed6d8b9e 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -1033,7 +1033,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig { * Pattern is: * * ```javascript - * /^([1-9][0-9]*)(minute|hour|day|week|month)$/ + * /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/ * ``` * */ diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 522f59e2c..935ecc928 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -10,6 +10,8 @@ import { axisBottom, axisTop, timeFormat, + timeMillisecond, + timeSecond, timeMinute, timeHour, timeDay, @@ -573,7 +575,7 @@ export const draw = function (text, id, version, diagObj) { .tickSize(-h + theTopPad + conf.gridLineStartPadding) .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d')); - const reTickInterval = /^([1-9]\d*)(minute|hour|day|week|month)$/; + const reTickInterval = /^([1-9]\d*)(millisecond|second|minute|hour|day|week|month)$/; const resultTickInterval = reTickInterval.exec( diagObj.db.getTickInterval() || conf.tickInterval ); @@ -584,6 +586,12 @@ export const draw = function (text, id, version, diagObj) { const weekday = diagObj.db.getWeekday() || conf.weekday; switch (interval) { + case 'millisecond': + bottomXAxis.ticks(timeMillisecond.every(every)); + break; + case 'second': + bottomXAxis.ticks(timeSecond.every(every)); + break; case 'minute': bottomXAxis.ticks(timeMinute.every(every)); break; @@ -625,6 +633,12 @@ export const draw = function (text, id, version, diagObj) { const weekday = diagObj.db.getWeekday() || conf.weekday; switch (interval) { + case 'millisecond': + topXAxis.ticks(timeMillisecond.every(every)); + break; + case 'second': + topXAxis.ticks(timeSecond.every(every)); + break; case 'minute': topXAxis.ticks(timeMinute.every(every)); break; diff --git a/packages/mermaid/src/docs/config/Tutorials.md b/packages/mermaid/src/docs/config/Tutorials.md index af7dbe672..ed0143f05 100644 --- a/packages/mermaid/src/docs/config/Tutorials.md +++ b/packages/mermaid/src/docs/config/Tutorials.md @@ -56,10 +56,10 @@ from IPython.display import Image, display import matplotlib.pyplot as plt def mm(graph): - graphbytes = graph.encode("ascii") - base64_bytes = base64.b64encode(graphbytes) - base64_string = base64_bytes.decode("ascii") - display(Image(url="https://mermaid.ink/img/" + base64_string)) + graphbytes = graph.encode("utf8") + base64_bytes = base64.b64encode(graphbytes) + base64_string = base64_bytes.decode("ascii") + display(Image(url="https://mermaid.ink/img/" + base64_string)) mm(""" graph LR; diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index a49e974ab..7946d5725 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -554,13 +554,13 @@ flowchart LR C-->D click A callback "Tooltip for a callback" click B "https://www.github.com" "This is a tooltip for a link" - click A call callback() "Tooltip for a callback" - click B href "https://www.github.com" "This is a tooltip for a link" + click C call callback() "Tooltip for a callback" + click D href "https://www.github.com" "This is a tooltip for a link" ``` > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2. -?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/). +?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/Ogglas/2o73vdez/7). Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported): diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index 6ddd011f6..a0cebc560 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -173,7 +173,7 @@ The following formatting strings are supported: More info in: [https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format](https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format) -### Axis ticks +### Axis ticks (v10.3.0+) The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`. @@ -184,7 +184,7 @@ tickInterval 1day The pattern is: ```javascript -/^([1-9][0-9]*)(minute|hour|day|week|month)$/; +/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/; ``` More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/d3/d3-time#interval_every) @@ -197,7 +197,9 @@ gantt weekday monday ``` -Support: v10.3.0+ +```warning +`millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION +``` ## Output in compact mode diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md index f5160ea86..c942944d7 100644 --- a/packages/mermaid/src/docs/syntax/sankey.md +++ b/packages/mermaid/src/docs/syntax/sankey.md @@ -2,9 +2,9 @@ > A sankey diagram is a visualization used to depict a flow from one set of values to another. -::: warning +```warning This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future. -::: +``` The things being connected are called nodes and the connections are called links. @@ -13,6 +13,11 @@ The things being connected are called nodes and the connections are called links This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors. ```mermaid-example +--- +config: + sankey: + showValues: false +--- sankey-beta Agricultural 'waste',Bio-conversion,124.729 diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index c7c1872dd..81592d146 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1510,10 +1510,10 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) Pattern is: ```javascript - /^([1-9][0-9]*)(minute|hour|day|week|month)$/ + /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/ ``` type: string - pattern: ^([1-9][0-9]*)(minute|hour|day|week|month)$ + pattern: ^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$ topAxis: description: | When this flag is set, date labels will be added to the top of the chart