mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-25 18:30:10 +02:00
Improvements for sankey diagram after review
This commit is contained in:
@@ -53,7 +53,7 @@ record
|
||||
const source = yy.findOrCreateNode($source.trim());
|
||||
const target = yy.findOrCreateNode($target.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
|
||||
;
|
||||
|
||||
|
@@ -12,26 +12,26 @@ import {
|
||||
|
||||
// Variables where graph data is stored
|
||||
// Sankey diagram represented by nodes and links between those nodes
|
||||
// We have to track nodes uniqueness (by ID), thats why we need hash also
|
||||
// We have to track nodes uniqueness (by ID), thats why we need a mapping also
|
||||
//
|
||||
let links: Array<SankeyLink> = [];
|
||||
let nodes: Array<SankeyNode> = [];
|
||||
let nodesHash: Record<string, SankeyNode> = {};
|
||||
let nodesMap: Record<string, SankeyNode> = {};
|
||||
let nodeAlign = 'justify';
|
||||
|
||||
const setNodeAlign = function (alignment: string): void {
|
||||
const nodeAlignments: string[] = ['left', 'right', 'center', 'justify'];
|
||||
if (nodeAlignments.includes(alignment)) {
|
||||
const setNodeAlign = (alignment: string): void => {
|
||||
const nodeAlignments: Set<string>= new Set(['left', 'right', 'center', 'justify']);
|
||||
if (nodeAlignments.has(alignment)) {
|
||||
nodeAlign = alignment;
|
||||
}
|
||||
};
|
||||
|
||||
const getNodeAlign = () => nodeAlign;
|
||||
const getNodeAlign = (): string => nodeAlign;
|
||||
|
||||
const clear = function () {
|
||||
const clear = (): void => {
|
||||
links = [];
|
||||
nodes = [];
|
||||
nodesHash = {};
|
||||
nodesMap = {};
|
||||
nodeAlign = 'justify';
|
||||
commonClear();
|
||||
};
|
||||
@@ -45,30 +45,26 @@ class SankeyLink {
|
||||
* @param target - Node where the link ends
|
||||
* @param value - number, float or integer, describes the amount to be passed
|
||||
*/
|
||||
const addLink = function (source: SankeyNode, target: SankeyNode, value: number): SankeyLink {
|
||||
const link: SankeyLink = new SankeyLink(source, target, value);
|
||||
|
||||
links.push(link);
|
||||
|
||||
return link;
|
||||
const addLink = (source: SankeyNode, target: SankeyNode, value: number): void => {
|
||||
links.push(new SankeyLink(source, target, value));
|
||||
};
|
||||
|
||||
class SankeyNode {
|
||||
constructor(public ID: string, public label: string = ID) {}
|
||||
constructor(public ID: string) {}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param ID - The id of the node
|
||||
*/
|
||||
const findOrCreateNode = function (ID: string): SankeyNode {
|
||||
const findOrCreateNode = (ID: string): SankeyNode => {
|
||||
ID = common.sanitizeText(ID, configApi.getConfig());
|
||||
let node: SankeyNode;
|
||||
if (nodesHash[ID] === undefined) {
|
||||
if (nodesMap[ID] === undefined) {
|
||||
node = new SankeyNode(ID);
|
||||
nodesHash[ID] = node;
|
||||
nodesMap[ID] = node;
|
||||
nodes.push(node);
|
||||
} else {
|
||||
node = nodesHash[ID];
|
||||
node = nodesMap[ID];
|
||||
}
|
||||
return node;
|
||||
};
|
||||
@@ -77,7 +73,7 @@ const getNodes = () => nodes;
|
||||
const getLinks = () => links;
|
||||
|
||||
const getGraph = () => ({
|
||||
nodes: nodes.map((node) => ({ id: node.ID, label: node.label })),
|
||||
nodes: nodes.map((node) => ({ id: node.ID })),
|
||||
links: links.map((link) => ({
|
||||
source: link.source.ID,
|
||||
target: link.target.ID,
|
||||
@@ -86,7 +82,7 @@ const getGraph = () => ({
|
||||
});
|
||||
|
||||
export default {
|
||||
nodesHash,
|
||||
nodesMap,
|
||||
getConfig: () => configApi.getConfig().sankey,
|
||||
getNodes,
|
||||
getLinks,
|
||||
|
@@ -57,20 +57,12 @@ export const draw = function (text: string, id: string, _version: string, diagOb
|
||||
// svg.attr('height', height); // that's why we need this line
|
||||
|
||||
// Prepare data for construction based on diagObj.db
|
||||
// This must be a mutable object with 2 properties:
|
||||
// `nodes` and `links`
|
||||
// This must be a mutable object with `nodes` and `links` properties:
|
||||
//
|
||||
// let graph = {
|
||||
// "nodes": [
|
||||
// { "id": "Alice" },
|
||||
// { "id": "Bob" },
|
||||
// { "id": "Carol" }
|
||||
// ],
|
||||
// "links": [
|
||||
// { "source": "Alice", "target": "Bob", "value": 23 },
|
||||
// { "source": "Bob", "target": "Carol", "value": 43 }
|
||||
// ]
|
||||
// };
|
||||
// {
|
||||
// "nodes": [ { "id": "Alice" }, { "id": "Bob" }, { "id": "Carol" } ],
|
||||
// "links": [ { "source": "Alice", "target": "Bob", "value": 23 }, { "source": "Bob", "target": "Carol", "value": 43 } ]
|
||||
// }
|
||||
//
|
||||
const graph = diagObj.db.getGraph();
|
||||
const nodeAligns = {
|
||||
@@ -136,7 +128,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
|
||||
.attr('y', (d: any) => (d.y1 + d.y0) / 2)
|
||||
.attr('dy', '0.35em')
|
||||
.attr('text-anchor', (d: any) => (d.x0 < width / 2 ? 'start' : 'end'))
|
||||
.text((d: any) => d.label);
|
||||
.text((d: any) => d.id);
|
||||
|
||||
// Creates the paths that represent the links.
|
||||
const link = svg
|
||||
|
@@ -1,4 +1,4 @@
|
||||
const prepareTextForParsing = (text: string): string => {
|
||||
export const prepareTextForParsing = (text: string): string => {
|
||||
const textToParse = text
|
||||
.replaceAll(/^[^\S\n\r]+|[^\S\n\r]+$/g, '') // remove all trailing spaces for each row
|
||||
.replaceAll(/([\n\r])+/g, '\n') // remove empty lines duplicated
|
||||
@@ -7,7 +7,7 @@ const prepareTextForParsing = (text: string): string => {
|
||||
return textToParse;
|
||||
};
|
||||
|
||||
class Uid {
|
||||
export class Uid {
|
||||
private static count = 0;
|
||||
id: string;
|
||||
href: string;
|
||||
@@ -25,5 +25,3 @@ class Uid {
|
||||
return 'url(' + this.href + ')';
|
||||
}
|
||||
}
|
||||
|
||||
export { Uid, prepareTextForParsing };
|
||||
|
Reference in New Issue
Block a user