mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-10 02:49:40 +02:00
Fixed tests and added node alignment
This commit is contained in:
@@ -5,7 +5,7 @@ describe('Sankey Diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
sankey
|
||||
a -> 30 -> b
|
||||
a,b,10
|
||||
`,
|
||||
{}
|
||||
);
|
||||
|
@@ -64,6 +64,5 @@ Thermal generation,Losses,787.129
|
||||
Thermal generation,District heating,79.329
|
||||
Tidal,Electricity grid,9.452
|
||||
UK land based bioenergy,Bio-conversion,182.01
|
||||
|
||||
Wave,Electricity grid,19.013
|
||||
Wind,Electricity grid,289.366
|
|
@@ -1,9 +1,12 @@
|
||||
/** mermaid */
|
||||
|
||||
//----------------------------------------------------
|
||||
// We support csv format as defined there
|
||||
// CSV format // https://www.ietf.org/rfc/rfc4180.txt
|
||||
//----------------------------------------------------
|
||||
//---------------------------------------------------------
|
||||
// We support csv format as defined here:
|
||||
// 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
|
||||
|
||||
@@ -23,9 +26,9 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
|
||||
<<EOF>> { return 'EOF' }
|
||||
|
||||
"sankey" { return 'SANKEY' }
|
||||
({CRLF}|{LF})+ { return 'NEWLINE' } // let newline to be multiple lines
|
||||
{COMMA} { return 'COMMA' }
|
||||
{DQUOTE} { return 'DQUOTE' }
|
||||
({CRLF}|{LF}) { return 'NEWLINE' }
|
||||
{TEXTDATA}* { return 'NON_ESCAPED_TEXT' }
|
||||
({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT' }
|
||||
|
||||
@@ -36,11 +39,9 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
|
||||
%% // language grammar
|
||||
|
||||
start
|
||||
: SANKEY file opt_eof
|
||||
: SANKEY csv opt_eof
|
||||
;
|
||||
|
||||
file: csv opt_newline;
|
||||
|
||||
csv
|
||||
: record csv_tail
|
||||
;
|
||||
@@ -67,7 +68,7 @@ record
|
||||
const value = parseFloat($value.trim());
|
||||
$$ = yy.addLink(source,target,value);
|
||||
} // 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
|
||||
|
@@ -19,11 +19,20 @@ import {
|
||||
let links: Array<SankeyLink> = [];
|
||||
let nodes: Array<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 () {
|
||||
links = [];
|
||||
nodes = [];
|
||||
nodesHash = {};
|
||||
nodeAlign = 'justify';
|
||||
commonClear();
|
||||
};
|
||||
|
||||
@@ -85,6 +94,8 @@ export default {
|
||||
getGraph,
|
||||
addLink,
|
||||
findOrCreateNode,
|
||||
setNodeAlign,
|
||||
getNodeAlign,
|
||||
// TODO: If this is a must this probably should be an interface
|
||||
getAccTitle,
|
||||
setAccTitle,
|
||||
|
@@ -87,6 +87,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb
|
||||
//
|
||||
|
||||
const graph = diagObj.db.getGraph();
|
||||
const nodeAligns = {
|
||||
left: d3SankeyLeft,
|
||||
right: d3SankeyRight,
|
||||
center: d3SankeyCenter,
|
||||
justify: d3SankeyJustify,
|
||||
};
|
||||
const nodeAlign = nodeAligns[diagObj.db.getNodeAlign()];
|
||||
|
||||
const nodeWidth = 10;
|
||||
// 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
|
||||
.nodeWidth(nodeWidth)
|
||||
.nodePadding(10)
|
||||
.nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc.
|
||||
.nodeAlign(nodeAlign) // d3.sankeyLeft, etc.
|
||||
.extent([
|
||||
[0, 0],
|
||||
[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
|
||||
// Namely calculate nodes and links positions
|
||||
// Our `graph` object will be mutated by this
|
||||
|
Reference in New Issue
Block a user