Sankey refactoring
This commit is contained in:
parent
b0825ebb35
commit
605e8d4a92
|
@ -418,10 +418,18 @@ export enum SankeyLinkColor {
|
|||
gradient = 'gradient',
|
||||
}
|
||||
|
||||
export enum SankeyNodeAlignment {
|
||||
left = 'left',
|
||||
right = 'right',
|
||||
center = 'center',
|
||||
justify = 'justify',
|
||||
}
|
||||
|
||||
export interface SankeyDiagramConfig extends BaseDiagramConfig {
|
||||
width?: number;
|
||||
height?: number;
|
||||
linkColor?: SankeyLinkColor | string;
|
||||
nodeAlignment?: SankeyNodeAlignment;
|
||||
}
|
||||
|
||||
export interface FontConfig {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import theme from './themes/index.js';
|
||||
import { MermaidConfig } from './config.type.js';
|
||||
import { MermaidConfig, SankeyLinkColor, SankeyNodeAlignment } from './config.type.js';
|
||||
/**
|
||||
* **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
|
||||
* here](8.6.0_docs.md)].**
|
||||
|
@ -2273,7 +2273,8 @@ const config: Partial<MermaidConfig> = {
|
|||
sankey: {
|
||||
width: 800,
|
||||
height: 400,
|
||||
linkColor: 'gradient',
|
||||
linkColor: SankeyLinkColor.gradient,
|
||||
nodeAlignment: SankeyNodeAlignment.justify,
|
||||
},
|
||||
fontSize: 16,
|
||||
};
|
||||
|
|
|
@ -17,22 +17,11 @@ import {
|
|||
let links: SankeyLink[] = [];
|
||||
let nodes: SankeyNode[] = [];
|
||||
let nodesMap: Record<string, SankeyNode> = {};
|
||||
let nodeAlign = 'justify';
|
||||
|
||||
const setNodeAlign = (alignment: string): void => {
|
||||
const nodeAlignments: Set<string> = new Set(['left', 'right', 'center', 'justify']);
|
||||
if (nodeAlignments.has(alignment)) {
|
||||
nodeAlign = alignment;
|
||||
}
|
||||
};
|
||||
|
||||
const getNodeAlign = (): string => nodeAlign;
|
||||
|
||||
const clear = (): void => {
|
||||
links = [];
|
||||
nodes = [];
|
||||
nodesMap = {};
|
||||
nodeAlign = 'justify';
|
||||
commonClear();
|
||||
};
|
||||
|
||||
|
@ -58,15 +47,13 @@ class SankeyNode {
|
|||
*/
|
||||
const findOrCreateNode = (ID: string): SankeyNode => {
|
||||
ID = common.sanitizeText(ID, configApi.getConfig());
|
||||
let node: SankeyNode;
|
||||
if (nodesMap[ID] === undefined) {
|
||||
node = new SankeyNode(ID);
|
||||
nodesMap[ID] = node;
|
||||
nodes.push(node);
|
||||
} else {
|
||||
node = nodesMap[ID];
|
||||
if (nodesMap[ID]) {
|
||||
return nodesMap[ID];
|
||||
}
|
||||
return node;
|
||||
|
||||
nodesMap[ID] = new SankeyNode(ID);
|
||||
nodes.push(nodesMap[ID]);
|
||||
return nodesMap[ID];
|
||||
};
|
||||
|
||||
const getNodes = () => nodes;
|
||||
|
@ -89,8 +76,6 @@ export default {
|
|||
getGraph,
|
||||
addLink,
|
||||
findOrCreateNode,
|
||||
setNodeAlign,
|
||||
getNodeAlign,
|
||||
getAccTitle,
|
||||
setAccTitle,
|
||||
getAccDescription,
|
||||
|
|
|
@ -1,12 +1,9 @@
|
|||
// @ts-nocheck TODO: fix file
|
||||
import { Diagram } from '../../Diagram.js';
|
||||
import * as configApi from '../../config.js';
|
||||
|
||||
import {
|
||||
select as d3select,
|
||||
// @ts-ignore TODO: make proper import
|
||||
scaleOrdinal as d3scaleOrdinal,
|
||||
// @ts-ignore TODO: make proper import
|
||||
schemeTableau10 as d3schemeTableau10,
|
||||
} from 'd3';
|
||||
|
||||
|
@ -20,7 +17,7 @@ import {
|
|||
} from 'd3-sankey';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
import { Uid } from './sankeyUtils.js';
|
||||
import { SankeyLinkColor } from '../../config.type.js';
|
||||
import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
|
||||
|
||||
/**
|
||||
* Draws Sankey diagram.
|
||||
|
@ -69,13 +66,14 @@ 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 alignmentsMap: Record<SankeyNodeAlignment, (node: SankeyNode<{}, {}>, n: number) => number> = new Map([
|
||||
[SankeyNodeAlignment.left, d3SankeyLeft],
|
||||
[SankeyNodeAlignment.right, d3SankeyRight],
|
||||
[SankeyNodeAlignment.center, d3SankeyCenter],
|
||||
[SankeyNodeAlignment.justify, d3SankeyJustify],
|
||||
]);
|
||||
const nodeAlignment = alignmentsMap[conf?.nodeAlignment];
|
||||
|
||||
// Construct and configure a Sankey generator
|
||||
// That will be a function that calculates nodes and links dimensions
|
||||
|
@ -85,7 +83,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
|
|||
.nodeId((d: any) => d.id) // we use 'id' property to identify node
|
||||
.nodeWidth(nodeWidth)
|
||||
.nodePadding(10)
|
||||
.nodeAlign(nodeAlign)
|
||||
.nodeAlign(nodeAlignment)
|
||||
.extent([
|
||||
[0, 0],
|
||||
[width, height],
|
||||
|
|
52
run
52
run
|
@ -11,24 +11,8 @@ sh)
|
|||
$RUN mermaid sh -c "npx $args"
|
||||
;;
|
||||
|
||||
i | install)
|
||||
$RUN mermaid sh -c "npx pnpm install $args"
|
||||
;;
|
||||
|
||||
add)
|
||||
$RUN mermaid sh -c "npx pnpm -w add $args"
|
||||
;;
|
||||
|
||||
test | vitest | e2e )
|
||||
$RUN mermaid sh -c "npx pnpm $command $args"
|
||||
;;
|
||||
|
||||
prettier)
|
||||
$RUN mermaid sh -c "npx pnpm prettier --write $args"
|
||||
;;
|
||||
|
||||
lint)
|
||||
$RUN mermaid sh -c "npx pnpm -w run lint:fix $args"
|
||||
pnpm)
|
||||
$RUN mermaid sh -c "npx $command $args"
|
||||
;;
|
||||
|
||||
dev)
|
||||
|
@ -42,22 +26,32 @@ $RUN --service-ports mermaid sh -c "npx pnpm --filter mermaid run docs:dev"
|
|||
help)
|
||||
usage=$(
|
||||
cat <<EOF
|
||||
Run commonly used commands within docker containers
|
||||
Run commands within docker containers.
|
||||
|
||||
\033[1m$name install\033[0m # Equvalent of pnpm install
|
||||
\033[1m$name dev\033[0m # Run dev server with examples, open http://localhost:9000
|
||||
\033[1m$name docs:dev\033[0m # For docs contributions, open http://localhost:3333
|
||||
Development quick start guide:
|
||||
|
||||
$name add # Add package, 'run add d3-sankey'
|
||||
$name prettier # Prettify a file 'run prettier <path-to-file>'
|
||||
$name lint # Equvalent of pnpm -w run lint:fix
|
||||
$name test # Run unit tests
|
||||
$name vitest # Run watcher for unit tests
|
||||
$name e2e # Run integration tests
|
||||
\033[1m$name pnpm install\033[0m # Install packages
|
||||
\033[1m$name dev\033[0m # Run dev server with examples, open http://localhost:9000
|
||||
\033[1m$name docs:dev\033[0m # For docs contributions, open http://localhost:3333
|
||||
|
||||
$name sh # Open sh inside docker container for development
|
||||
Commands:
|
||||
|
||||
$name pnpm # Run any 'pnpm' command
|
||||
$name dev # Run dev server with examples, open http://localhost:9000
|
||||
$name docs:dev # For docs contributions, open http://localhost:3333
|
||||
|
||||
$name sh # Open 'sh' inside docker container for development
|
||||
|
||||
$name help # Show this help
|
||||
|
||||
Examples of frequiently used commands:
|
||||
|
||||
$name pnpm add # Add package, 'run add d3-sankey'
|
||||
$name pnpm prettier # Prettify a file 'run prettier <path-to-file>'
|
||||
$name pnpm test # Run unit tests
|
||||
$name pnpm vitest # Run watcher for unit tests
|
||||
$name pnpm e2e # Run integration tests
|
||||
$name pnpm -w run lint:fix
|
||||
EOF
|
||||
)
|
||||
|
||||
|
|
Loading…
Reference in New Issue