GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' into next

Browse Source 
* develop:
  Update flowchart.md (#4798)
  Update flowchart.md (#4792)
  chore: Update docs
  Added missing integration tests and release version in docs.
  chore: Fix warning formatting
  docs: Disable showValues in sankey example
  Added support for millisecond and second to gantt tickInterval
  Use utf8 encoding in Jupyter example
This commit is contained in:
Sidharth Vinod 2023-09-06 23:16:03 +05:30
commit 4342759da7
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
12 changed files with 102 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
cypress/integration/rendering/gantt.spec.js
View File

@ -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(
`

8
docs/config/Tutorials.md
View File

@ -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;

8
docs/syntax/flowchart.md
View File

@ -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.

6
docs/syntax/gantt.md
View File

@ -241,7 +241,7 @@ The following formatting strings are supported:
More info in: <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`.
@ -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: <https://github.com/d3/d3-time#interval_every>
@ -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

15
docs/syntax/sankey.md
View File

@ -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

2
packages/mermaid/src/config.type.ts
View File

@ -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)$/
* ```
*
*/

16
packages/mermaid/src/diagrams/gantt/ganttRenderer.js
View File

@ -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;

8
packages/mermaid/src/docs/config/Tutorials.md
View File

@ -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;

6
packages/mermaid/src/docs/syntax/flowchart.md
View File

@ -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):

8
packages/mermaid/src/docs/syntax/gantt.md
View File

@ -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

9
packages/mermaid/src/docs/syntax/sankey.md
View File

@ -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

4
packages/mermaid/src/schemas/config.schema.yaml
View File

@ -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