From 605e8d4a922b8c2620b6abe47a8d13154e8a7839 Mon Sep 17 00:00:00 2001 From: Nikolay Rozhkov Date: Tue, 27 Jun 2023 14:11:06 +0300 Subject: [PATCH] Sankey refactoring --- packages/mermaid/src/config.type.ts | 8 +++ packages/mermaid/src/defaultConfig.ts | 5 +- .../mermaid/src/diagrams/sankey/sankeyDB.ts | 27 +++------- .../src/diagrams/sankey/sankeyRenderer.ts | 22 ++++---- run | 52 ++++++++----------- 5 files changed, 50 insertions(+), 64 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 7e0b67eb5..4d40b33c8 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -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 { diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 4ece25010..39dcd0721 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -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 = { sankey: { width: 800, height: 400, - linkColor: 'gradient', + linkColor: SankeyLinkColor.gradient, + nodeAlignment: SankeyNodeAlignment.justify, }, fontSize: 16, }; diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts index 807c07cd1..eda443871 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts @@ -17,22 +17,11 @@ import { let links: SankeyLink[] = []; let nodes: SankeyNode[] = []; let nodesMap: Record = {}; -let nodeAlign = 'justify'; - -const setNodeAlign = (alignment: string): void => { - const nodeAlignments: Set = 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, diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index dd31e775e..a480b4b3e 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -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, 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], diff --git a/run b/run index 6aee10dc2..b5e589e6e 100755 --- a/run +++ b/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 <' -$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 ' +$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 )