diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js index 5b9bcf870..3ed242724 100644 --- a/cypress/integration/rendering/sankey.spec.js +++ b/cypress/integration/rendering/sankey.spec.js @@ -5,7 +5,7 @@ describe('Sankey Diagram', () => { imgSnapshotTest( ` sankey - a -> 30 -> b + a,b,10 `, {} ); diff --git a/demos/sankey.html b/demos/sankey.html index 4fc0993bf..3afc83371 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -18,7 +18,7 @@
sankey - + Agricultural 'waste',Bio-conversion,124.729 Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 diff --git a/packages/mermaid/src/diagrams/sankey/parser/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv index ebddaca0c..36fd45d2a 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/energy.csv +++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv @@ -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 +Wind,Electricity grid,289.366 \ No newline at end of file diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison index 7f5d76554..649d2dbd8 100644 --- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison +++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison @@ -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] <> { 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 diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index d44f3e6e8..f3faf9c7a 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -19,11 +19,20 @@ import { let links: Array = []; let nodes: Array = []; let nodesHash: Record = {}; +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, diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 63abb2a6c..4956b6cf2 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -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