marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-11 03:19:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4748 from mermaid-js/feature/4674_sankeyValues

Browse Source 
feat(sankey): Show values
This commit is contained in:
Knut Sveidqvist
2023-08-23 07:42:30 +00:00
committed by GitHub
parent 2ab393cd16 ce6992ea9b
commit c3160b2693
5 changed files with 78 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
demos/sankey.html
View File

@@ -3,20 +3,42 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>States Mermaid Quick Test Page</title> <title>Sankey Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head> </head>
<body> <body>
<h1>Sankey diagram demos</h1> <h1>Sankey diagram demos</h1>
<h2>FY20-21 Performance</h2>
<pre class="mermaid">
---
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
</pre>
<h2>Energy flow</h2> <h2>Energy flow</h2>
<pre class="mermaid"> <pre class="mermaid">
---
config:
sankey:
showValues: false
width: 1200
height: 600
linkColor: gradient
nodeAlignment: justify
---
sankey-beta sankey-beta
Agricultural 'waste',Bio-conversion,124.729 Agricultural 'waste',Bio-conversion,124.729
@@ -95,13 +117,7 @@
theme: 'default', theme: 'default',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
sankey: { startOnLoad: true,
title: 'Hey, this is Sankey-Beta',
width: 1200,
height: 600,
linkColor: 'gradient',
nodeAlignment: 'justify',
},
}); });
</script> </script>
</body> </body>

15
packages/mermaid/src/config.type.ts
View File

@@ -1298,6 +1298,21 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig {
*/ */
nodeAlignment?: 'left' | 'right' | 'center' | 'justify'; nodeAlignment?: 'left' | 'right' | 'center' | 'justify';
useMaxWidth?: boolean; 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 * This interface was referenced by `MermaidConfig`'s JSON-Schema

2
packages/mermaid/src/diagrams/sankey/sankeyDB.ts
View File

@@ -31,7 +31,7 @@ class SankeyLink {
/** /**
* @param source - Node where the link starts * @param source - Node where the link starts
* @param target - Node where the link ends * @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 => { const addLink = (source: SankeyNode, target: SankeyNode, value: number): void => {
links.push(new SankeyLink(source, target, value)); links.push(new SankeyLink(source, target, value));

26
packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
View File

@@ -18,7 +18,7 @@ import {
} from 'd3-sankey'; } from 'd3-sankey';
import { configureSvgSize } from '../../setupGraphViewbox.js'; import { configureSvgSize } from '../../setupGraphViewbox.js';
import { Uid } from '../../rendering-util/uid.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 // Map config options to alignment functions
const alignmentsMap: Record< 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 // Establish svg dimensions and get width and height
// //
const width = conf?.width || defaultSankeyConfig.width!; const width = conf?.width ?? defaultSankeyConfig.width!;
const height = conf?.height || defaultSankeyConfig.width!; const height = conf?.height ?? defaultSankeyConfig.width!;
const useMaxWidth = conf?.useMaxWidth || defaultSankeyConfig.useMaxWidth!; const useMaxWidth = conf?.useMaxWidth ?? defaultSankeyConfig.useMaxWidth!;
const nodeAlignment = conf?.nodeAlignment || defaultSankeyConfig.nodeAlignment!; 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? // FIX: using max width prevents height from being set, is it intended?
// to add height directly one can use `svg.attr('height', height)` // 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() const sankey = d3Sankey()
.nodeId((d: any) => d.id) // we use 'id' property to identify node .nodeId((d: any) => d.id) // we use 'id' property to identify node
.nodeWidth(nodeWidth) .nodeWidth(nodeWidth)
.nodePadding(10) .nodePadding(10 + (showValues ? 15 : 0))
.nodeAlign(nodeAlign) .nodeAlign(nodeAlign)
.extent([ .extent([
[0, 0], [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('width', (d: any) => d.x1 - d.x0)
.attr('fill', (d: any) => colorScheme(d.id)); .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 // Create labels for nodes
svg svg
.append('g') .append('g')
@@ -141,9 +151,9 @@ export const draw = function (text: string, id: string, _version: string, diagOb
.join('text') .join('text')
.attr('x', (d: any) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)) .attr('x', (d: any) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6))
.attr('y', (d: any) => (d.y1 + d.y0) / 2) .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')) .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. // Creates the paths that represent the links.
const link = svg const link = svg

14
packages/mermaid/src/schemas/config.schema.yaml
View File

@@ -1859,6 +1859,20 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
default: justify default: justify
useMaxWidth: useMaxWidth:
default: false 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: FontCalculator:
title: Font Calculator title: Font Calculator