From 4d84f1cd71eba0b1aa0e544e05c47e45c9355939 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 19 Aug 2023 11:19:18 +0530 Subject: [PATCH 1/9] feat(sankey): Show values (#4674) --- demos/sankey.html | 32 +++++++++++++++---- packages/mermaid/src/config.type.ts | 15 +++++++++ .../mermaid/src/diagrams/sankey/sankeyDB.ts | 2 +- .../src/diagrams/sankey/sankeyRenderer.ts | 26 ++++++++++----- .../mermaid/src/schemas/config.schema.yaml | 14 ++++++++ 5 files changed, 74 insertions(+), 15 deletions(-) diff --git a/demos/sankey.html b/demos/sankey.html index 0c9679c65..4c3eeac5e 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -5,16 +5,13 @@ States Mermaid Quick Test Page -

Sankey diagram demos

+

FY20-21 Performance

+
+

Energy flow

       sankey-beta
@@ -101,8 +98,31 @@
           height: 600,
           linkColor: 'gradient',
           nodeAlignment: 'justify',
+          showValues: false,
+        },
+        startOnLoad: false,
+      });
+      // Render the Energy flow diagram
+      await mermaid.run();
+
+      mermaid.initialize({
+        sankey: {
+          prefix: '$',
+          suffix: 'B',
         },
       });
+
+      const { svg } = await mermaid.render(
+        'ff',
+        `
+sankey-beta
+Revenue,Expenses,10
+Revenue,Profit,10
+Expenses,Manufacturing,5
+Expenses,Tax,3
+Expenses,Research,2`
+      );
+      document.getElementById('financials').innerHTML = svg;
     
   
 
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index c378660ca..a4bf6cca8 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -1298,6 +1298,21 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig {
    */
   nodeAlignment?: 'left' | 'right' | 'center' | 'justify';
   useMaxWidth?: boolean;
+  /**
+   * Toggle to display or hide values along with title.
+   *
+   */
+  showValues?: boolean;
+  /**
+   * The prefix to use for values
+   *
+   */
+  prefix?: string;
+  /**
+   * The suffix to use for values
+   *
+   */
+  suffix?: string;
 }
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 1921e1b85..f6db1886d 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -31,7 +31,7 @@ class SankeyLink {
 /**
  * @param source - Node where the link starts
  * @param target - Node where the link ends
- * @param value - number, float or integer, describes the amount to be passed
+ * @param value - Describes the amount to be passed
  */
 const addLink = (source: SankeyNode, target: SankeyNode, value: number): void => {
   links.push(new SankeyLink(source, target, value));
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index a9ee698e9..c40226b4c 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -18,7 +18,7 @@ import {
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
-import type { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
+import type { SankeyNodeAlignment } from '../../config.type.js';
 
 // Map config options to alignment functions
 const alignmentsMap: Record<
@@ -62,10 +62,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb
 
   // Establish svg dimensions and get width and height
   //
-  const width = conf?.width || defaultSankeyConfig.width!;
-  const height = conf?.height || defaultSankeyConfig.width!;
-  const useMaxWidth = conf?.useMaxWidth || defaultSankeyConfig.useMaxWidth!;
-  const nodeAlignment = conf?.nodeAlignment || defaultSankeyConfig.nodeAlignment!;
+  const width = conf?.width ?? defaultSankeyConfig.width!;
+  const height = conf?.height ?? defaultSankeyConfig.width!;
+  const useMaxWidth = conf?.useMaxWidth ?? defaultSankeyConfig.useMaxWidth!;
+  const nodeAlignment = conf?.nodeAlignment ?? defaultSankeyConfig.nodeAlignment!;
+  const prefix = conf?.prefix ?? defaultSankeyConfig.prefix!;
+  const suffix = conf?.suffix ?? defaultSankeyConfig.suffix!;
+  const showValues = conf?.showValues ?? defaultSankeyConfig.showValues!;
 
   // FIX: using max width prevents height from being set, is it intended?
   // to add height directly one can use `svg.attr('height', height)`
@@ -94,7 +97,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   const sankey = d3Sankey()
     .nodeId((d: any) => d.id) // we use 'id' property to identify node
     .nodeWidth(nodeWidth)
-    .nodePadding(10)
+    .nodePadding(10 + (showValues ? 15 : 0))
     .nodeAlign(nodeAlign)
     .extent([
       [0, 0],
@@ -130,6 +133,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('width', (d: any) => d.x1 - d.x0)
     .attr('fill', (d: any) => colorScheme(d.id));
 
+  const getText = ({ id, value }: { id: string; value: number }) => {
+    if (!showValues) {
+      return id;
+    }
+    return `${id}\n${prefix}${Math.round(value * 100) / 100}${suffix}`;
+  };
+
   // Create labels for nodes
   svg
     .append('g')
@@ -141,9 +151,9 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .join('text')
     .attr('x', (d: any) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6))
     .attr('y', (d: any) => (d.y1 + d.y0) / 2)
-    .attr('dy', '0.35em')
+    .attr('dy', `${showValues ? '0' : '0.35'}em`)
     .attr('text-anchor', (d: any) => (d.x0 < width / 2 ? 'start' : 'end'))
-    .text((d: any) => d.id);
+    .text(getText);
 
   // Creates the paths that represent the links.
   const link = svg
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 6e5f48d95..9e7b3e6f3 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -1859,6 +1859,20 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
         default: justify
       useMaxWidth:
         default: false
+      showValues:
+        description: |
+          Toggle to display or hide values along with title.
+        default: true
+      prefix:
+        description: |
+          The prefix to use for values
+        type: string
+        default: ''
+      suffix:
+        description: |
+          The suffix to use for values
+        type: string
+        default: ''
 
   FontCalculator:
     title: Font Calculator

From ce6992ea9b70b43e511e0be0ff246e82a532500a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 22 Aug 2023 14:06:46 +0530
Subject: [PATCH 2/9] docs: Fix sankey demo

---
 demos/sankey.html | 60 ++++++++++++++++++++++-------------------------
 1 file changed, 28 insertions(+), 32 deletions(-)

diff --git a/demos/sankey.html b/demos/sankey.html
index 4c3eeac5e..5a76f476a 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -3,17 +3,42 @@
   
     
     
-    States Mermaid Quick Test Page
+    Sankey Mermaid Quick Test Page
     
   
 
   
     
Sankey diagram demos

     
FY20-21 Performance

-    

+    
+      ---
+      config:
+        sankey:
+          showValues: true
+          prefix: $
+          suffix: B
+          width: 800
+          nodeAlignment: left
+      ---
+      sankey-beta
+        Revenue,Expenses,10
+        Revenue,Profit,10
+        Expenses,Manufacturing,5
+        Expenses,Tax,3
+        Expenses,Research,2
+    

 
     
Energy flow

     
+      ---
+      config:
+        sankey:
+          showValues: false
+          width: 1200
+          height: 600
+          linkColor: gradient
+          nodeAlignment: justify
+      ---
       sankey-beta
 
       Agricultural 'waste',Bio-conversion,124.729
@@ -92,37 +117,8 @@
         theme: 'default',
         logLevel: 3,
         securityLevel: 'loose',
-        sankey: {
-          title: 'Hey, this is Sankey-Beta',
-          width: 1200,
-          height: 600,
-          linkColor: 'gradient',
-          nodeAlignment: 'justify',
-          showValues: false,
-        },
-        startOnLoad: false,
+        startOnLoad: true,
       });
-      // Render the Energy flow diagram
-      await mermaid.run();
-
-      mermaid.initialize({
-        sankey: {
-          prefix: '$',
-          suffix: 'B',
-        },
-      });
-
-      const { svg } = await mermaid.render(
-        'ff',
-        `
-sankey-beta
-Revenue,Expenses,10
-Revenue,Profit,10
-Expenses,Manufacturing,5
-Expenses,Tax,3
-Expenses,Research,2`
-      );
-      document.getElementById('financials').innerHTML = svg;
     
   
 

From 54de763a663520ba975f8ff2c30cbde1316c53cc Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 25 Aug 2023 00:12:14 +0530
Subject: [PATCH 3/9] chore: Add live editor build script for previews

---
 scripts/editor.sh | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100755 scripts/editor.sh

diff --git a/scripts/editor.sh b/scripts/editor.sh
new file mode 100755
index 000000000..1fd9a56f2
--- /dev/null
+++ b/scripts/editor.sh
@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+
+# We have to use npm instead of yarn because it causes trouble in netlify
+
+# Link local mermaid to npm
+pushd packages/mermaid || exit
+npm link
+popd || exit
+
+# Clone the Mermaid Live Editor repository
+git clone https://github.com/mermaid-js/mermaid-live-editor.git
+
+# Change to the repository directory
+cd mermaid-live-editor || exit
+
+# Link local mermaid to live editor
+npm link mermaid
+
+# Install dependencies
+npm install
+
+# Build the site
+npm run build

From 32d178339044273a498d0b30d22db342b70314a0 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 25 Aug 2023 08:22:24 +0530
Subject: [PATCH 4/9] chore: Update editor script

Co-authored-by: Alois Klink 
---
 scripts/{editor.sh => editor.bash} | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)
 rename scripts/{editor.sh => editor.bash} (84%)

diff --git a/scripts/editor.sh b/scripts/editor.bash
similarity index 84%
rename from scripts/editor.sh
rename to scripts/editor.bash
index 1fd9a56f2..836353b13 100755
--- a/scripts/editor.sh
+++ b/scripts/editor.bash
@@ -1,17 +1,18 @@
 #!/usr/bin/env bash
 
+set -euxo pipefail
 # We have to use npm instead of yarn because it causes trouble in netlify
 
 # Link local mermaid to npm
-pushd packages/mermaid || exit
+pushd packages/mermaid
 npm link
-popd || exit
+popd
 
 # Clone the Mermaid Live Editor repository
 git clone https://github.com/mermaid-js/mermaid-live-editor.git
 
 # Change to the repository directory
-cd mermaid-live-editor || exit
+cd mermaid-live-editor
 
 # Link local mermaid to live editor
 npm link mermaid

From c3939d3fb328eb020e6cff033a7f1428a80dca75 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 25 Aug 2023 08:26:34 +0530
Subject: [PATCH 5/9] chore: Add netlify.toml

---
 netlify.toml | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 netlify.toml

diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 000000000..2853f4c82
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,18 @@
+# Settings in the [build] context are global and are applied to
+# all contexts unless otherwise overridden by more specific contexts.
+[build]
+  # Directory where the build system installs dependencies
+  # and runs your build. Store your package.json, .nvmrc, etc here.
+  # If not set, defaults to the root directory.
+  base = ""
+
+  # Directory that contains the deploy-ready HTML files and
+  # assets generated by the build. This is an absolute path relative 
+  # to the base directory, which is the root by default (/).
+  # This sample publishes the directory located at the absolute 
+  # path "root/project/build-output"
+
+  publish = "mermaid-live-editor/docs"
+
+  # Default build command.
+  command = "./scripts/editor.bash"

From 5f8f79fc3e7f1c259f443381df09bf687fa83302 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 25 Aug 2023 09:15:21 +0530
Subject: [PATCH 6/9] fix: live editor exists error

---
 scripts/editor.bash | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/scripts/editor.bash b/scripts/editor.bash
index 836353b13..ee7792672 100755
--- a/scripts/editor.bash
+++ b/scripts/editor.bash
@@ -8,11 +8,14 @@ pushd packages/mermaid
 npm link
 popd
 
-# Clone the Mermaid Live Editor repository
-git clone https://github.com/mermaid-js/mermaid-live-editor.git
-
-# Change to the repository directory
-cd mermaid-live-editor
+# Clone or update the Mermaid Live Editor repository
+if [ ! -d "mermaid-live-editor" ]; then
+  git clone --single-branch https://github.com/mermaid-js/mermaid-live-editor.git
+  cd mermaid-live-editor
+else
+  cd mermaid-live-editor
+  git pull
+fi
 
 # Link local mermaid to live editor
 npm link mermaid

From a3a6eb9bf53717848d6c8455a0f0172ca7d78047 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 25 Aug 2023 09:37:22 +0530
Subject: [PATCH 7/9] chore: Force install npm to avoid cache.

---
 scripts/editor.bash | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/scripts/editor.bash b/scripts/editor.bash
index ee7792672..954426175 100755
--- a/scripts/editor.bash
+++ b/scripts/editor.bash
@@ -21,7 +21,8 @@ fi
 npm link mermaid
 
 # Install dependencies
-npm install
+npm install --force
+
+# Force Build the site
+npm run build -- --force
 
-# Build the site
-npm run build

From 6563a6ea26566a0e73ef33a56c34f78488fa869c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 25 Aug 2023 09:43:53 +0530
Subject: [PATCH 8/9] chore: Build after clone

---
 scripts/editor.bash | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/editor.bash b/scripts/editor.bash
index 954426175..31d79aca5 100755
--- a/scripts/editor.bash
+++ b/scripts/editor.bash
@@ -2,6 +2,7 @@
 
 set -euxo pipefail
 # We have to use npm instead of yarn because it causes trouble in netlify
+pnpm build
 
 # Link local mermaid to npm
 pushd packages/mermaid

From 9dccf4d9c9c6c8591c99d0ca203584b0eeb05f36 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 25 Aug 2023 10:04:53 +0530
Subject: [PATCH 9/9] chore: Update editor.bash to build latest version

---
 scripts/editor.bash | 26 +++++++++-----------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/scripts/editor.bash b/scripts/editor.bash
index 31d79aca5..3ae51ed33 100755
--- a/scripts/editor.bash
+++ b/scripts/editor.bash
@@ -1,28 +1,20 @@
 #!/usr/bin/env bash
 
 set -euxo pipefail
-# We have to use npm instead of yarn because it causes trouble in netlify
 pnpm build
 
-# Link local mermaid to npm
-pushd packages/mermaid
-npm link
-popd
+# Clone the Mermaid Live Editor repository
+rm -rf mermaid-live-editor
+git clone --single-branch https://github.com/mermaid-js/mermaid-live-editor.git
 
-# Clone or update the Mermaid Live Editor repository
-if [ ! -d "mermaid-live-editor" ]; then
-  git clone --single-branch https://github.com/mermaid-js/mermaid-live-editor.git
-  cd mermaid-live-editor
-else
-  cd mermaid-live-editor
-  git pull
-fi
+cd mermaid-live-editor
+
+# We have to use npm instead of yarn because it causes trouble in netlify
+# Install dependencies
+npm install
 
 # Link local mermaid to live editor
-npm link mermaid
-
-# Install dependencies
-npm install --force
+npm link ../packages/mermaid     
 
 # Force Build the site
 npm run build -- --force