mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-13 04:19:44 +02:00
Fixed tests and added node alignment
This commit is contained in:
@@ -5,7 +5,7 @@ describe('Sankey Diagram', () => {
|
|||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`
|
`
|
||||||
sankey
|
sankey
|
||||||
a -> 30 -> b
|
a,b,10
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
|
@@ -64,6 +64,5 @@ Thermal generation,Losses,787.129
|
|||||||
Thermal generation,District heating,79.329
|
Thermal generation,District heating,79.329
|
||||||
Tidal,Electricity grid,9.452
|
Tidal,Electricity grid,9.452
|
||||||
UK land based bioenergy,Bio-conversion,182.01
|
UK land based bioenergy,Bio-conversion,182.01
|
||||||
|
|
||||||
Wave,Electricity grid,19.013
|
Wave,Electricity grid,19.013
|
||||||
Wind,Electricity grid,289.366
|
Wind,Electricity grid,289.366
|
|
@@ -1,9 +1,12 @@
|
|||||||
/** mermaid */
|
/** mermaid */
|
||||||
|
|
||||||
//----------------------------------------------------
|
//---------------------------------------------------------
|
||||||
// We support csv format as defined there
|
// We support csv format as defined here:
|
||||||
// CSV format // https://www.ietf.org/rfc/rfc4180.txt
|
// https://www.ietf.org/rfc/rfc4180.txt
|
||||||
//----------------------------------------------------
|
// There are some minor changes for compliance with jison
|
||||||
|
// We also parse only 3 columns: source,target,value
|
||||||
|
// And allow blank lines for visual purposes
|
||||||
|
//---------------------------------------------------------
|
||||||
|
|
||||||
%lex
|
%lex
|
||||||
|
|
||||||
@@ -23,9 +26,9 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
|
|||||||
<<EOF>> { return 'EOF' }
|
<<EOF>> { return 'EOF' }
|
||||||
|
|
||||||
"sankey" { return 'SANKEY' }
|
"sankey" { return 'SANKEY' }
|
||||||
|
({CRLF}|{LF})+ { return 'NEWLINE' } // let newline to be multiple lines
|
||||||
{COMMA} { return 'COMMA' }
|
{COMMA} { return 'COMMA' }
|
||||||
{DQUOTE} { return 'DQUOTE' }
|
{DQUOTE} { return 'DQUOTE' }
|
||||||
({CRLF}|{LF}) { return 'NEWLINE' }
|
|
||||||
{TEXTDATA}* { return 'NON_ESCAPED_TEXT' }
|
{TEXTDATA}* { return 'NON_ESCAPED_TEXT' }
|
||||||
({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT' }
|
({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT' }
|
||||||
|
|
||||||
@@ -36,11 +39,9 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
|
|||||||
%% // language grammar
|
%% // language grammar
|
||||||
|
|
||||||
start
|
start
|
||||||
: SANKEY file opt_eof
|
: SANKEY csv opt_eof
|
||||||
;
|
;
|
||||||
|
|
||||||
file: csv opt_newline;
|
|
||||||
|
|
||||||
csv
|
csv
|
||||||
: record csv_tail
|
: record csv_tail
|
||||||
;
|
;
|
||||||
@@ -67,7 +68,7 @@ record
|
|||||||
const value = parseFloat($value.trim());
|
const value = parseFloat($value.trim());
|
||||||
$$ = yy.addLink(source,target,value);
|
$$ = yy.addLink(source,target,value);
|
||||||
} // parse only 3 fields, this is not part of CSV standard
|
} // parse only 3 fields, this is not part of CSV standard
|
||||||
| // allow empty record to handle empty lines, this is not part of CSV standard either
|
| {} // allow empty record to handle empty lines, this is not part of CSV standard either
|
||||||
;
|
;
|
||||||
|
|
||||||
field
|
field
|
||||||
|
@@ -19,11 +19,20 @@ import {
|
|||||||
let links: Array<SankeyLink> = [];
|
let links: Array<SankeyLink> = [];
|
||||||
let nodes: Array<SankeyNode> = [];
|
let nodes: Array<SankeyNode> = [];
|
||||||
let nodesHash: Record<string, SankeyNode> = {};
|
let nodesHash: Record<string, SankeyNode> = {};
|
||||||
|
let nodeAlign: string = 'justify';
|
||||||
|
|
||||||
|
const setNodeAlign = function (alignment: string): void {
|
||||||
|
const nodeAlignments: string[] = ['left', 'right', 'center', 'justify'];
|
||||||
|
if (nodeAlignments.includes(alignment)) nodeAlign = alignment;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNodeAlign = () => nodeAlign;
|
||||||
|
|
||||||
const clear = function () {
|
const clear = function () {
|
||||||
links = [];
|
links = [];
|
||||||
nodes = [];
|
nodes = [];
|
||||||
nodesHash = {};
|
nodesHash = {};
|
||||||
|
nodeAlign = 'justify';
|
||||||
commonClear();
|
commonClear();
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -85,6 +94,8 @@ export default {
|
|||||||
getGraph,
|
getGraph,
|
||||||
addLink,
|
addLink,
|
||||||
findOrCreateNode,
|
findOrCreateNode,
|
||||||
|
setNodeAlign,
|
||||||
|
getNodeAlign,
|
||||||
// TODO: If this is a must this probably should be an interface
|
// TODO: If this is a must this probably should be an interface
|
||||||
getAccTitle,
|
getAccTitle,
|
||||||
setAccTitle,
|
setAccTitle,
|
||||||
|
@@ -87,6 +87,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb
|
|||||||
//
|
//
|
||||||
|
|
||||||
const graph = diagObj.db.getGraph();
|
const graph = diagObj.db.getGraph();
|
||||||
|
const nodeAligns = {
|
||||||
|
left: d3SankeyLeft,
|
||||||
|
right: d3SankeyRight,
|
||||||
|
center: d3SankeyCenter,
|
||||||
|
justify: d3SankeyJustify,
|
||||||
|
};
|
||||||
|
const nodeAlign = nodeAligns[diagObj.db.getNodeAlign()];
|
||||||
|
|
||||||
const nodeWidth = 10;
|
const nodeWidth = 10;
|
||||||
// Construct and configure a Sankey generator
|
// Construct and configure a Sankey generator
|
||||||
@@ -96,19 +103,12 @@ export const draw = function (text: string, id: string, _version: string, diagOb
|
|||||||
.nodeId((d) => d.id) // we use 'id' property to identify node
|
.nodeId((d) => d.id) // we use 'id' property to identify node
|
||||||
.nodeWidth(nodeWidth)
|
.nodeWidth(nodeWidth)
|
||||||
.nodePadding(10)
|
.nodePadding(10)
|
||||||
.nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc.
|
.nodeAlign(nodeAlign) // d3.sankeyLeft, etc.
|
||||||
.extent([
|
.extent([
|
||||||
[0, 0],
|
[0, 0],
|
||||||
[width - nodeWidth, height],
|
[width - nodeWidth, height],
|
||||||
]);
|
]);
|
||||||
|
|
||||||
//["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"]
|
|
||||||
// .nodeWidth(15)
|
|
||||||
// .nodePadding(10)
|
|
||||||
// .extent([[1, 5], [width - 1, height - 5]]);
|
|
||||||
// .nodeId(d => d['id'])
|
|
||||||
//
|
|
||||||
|
|
||||||
// Compute the Sankey layout
|
// Compute the Sankey layout
|
||||||
// Namely calculate nodes and links positions
|
// Namely calculate nodes and links positions
|
||||||
// Our `graph` object will be mutated by this
|
// Our `graph` object will be mutated by this
|
||||||
|
Reference in New Issue
Block a user