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

Fix linters

Browse Source
This commit is contained in:
Nikolay Rozhkov
2023-06-19 01:02:45 +03:00
parent 19f858b73b
commit 9dbb9872bc
2 changed files with 64 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
demos/sankey.html
View File

@@ -1,21 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"> <html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8" /> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="utf-8" />
<title>States Mermaid Quick Test Page</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> <title>States Mermaid Quick Test Page</title>
<style> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
div.mermaid { <style>
/* font-family: 'trebuchet ms', verdana, arial; */ div.mermaid {
font-family: 'Courier New', Courier, monospace !important; /* font-family: 'trebuchet ms', verdana, arial; */
} font-family: 'Courier New', Courier, monospace !important;
</style> }
</head> </style>
<body> </head>
<h1>Sankey diagram demos</h1>
<h2>Simple flow</h2> <body>
<pre class="mermaid"> <h1>Sankey diagram demos</h1>
<h2>Simple flow</h2>
<pre class="mermaid">
sankey sankey
a->28->b->10->c a->28->b->10->c
a->11->b a->11->b
@@ -24,16 +26,17 @@
d->10->c d->10->c
k->25->e k->25->e
</pre> </pre>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ mermaid.initialize({
theme: 'default', theme: 'default',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
flowchart: { curve: 'basis' }, flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' }, gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 }, sequence: { actorMargin: 50 },
}); });
</script> </script>
</body> </body>
</html>
</html>

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

@@ -42,7 +42,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
} }
// Launch parsing // Launch parsing
diagObj.parser.parse(text); diagObj.parser.parse(text);
debugger; // debugger;
log.debug('Parsed sankey diagram'); log.debug('Parsed sankey diagram');
// Figure out what is happening there // Figure out what is happening there
@@ -86,20 +86,20 @@ export const draw = function (text: string, id: string, _version: string, diagOb
// ] // ]
// }; // };
// //
let graph = { const graph = {
nodes: [], nodes: [],
links: [] links: []
} }
diagObj.db.getNodes().forEach(node => { diagObj.db.getNodes().forEach(node => {
graph.nodes.push({id: node.ID}); graph.nodes.push({ id: node.ID });
}); });
diagObj.db.getLinks().forEach(link => { diagObj.db.getLinks().forEach(link => {
graph.links.push({source: link.source.ID, target: link.target.ID, value: link.value}); graph.links.push({ source: link.source.ID, target: link.target.ID, value: link.value });
}); });
debugger; // debugger;
// const graph = { // const graph = {
// nodes: [ // nodes: [
// { id: 'Alice' }, // { id: 'Alice' },
@@ -125,10 +125,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb
.nodePadding(10) .nodePadding(10)
.nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc. .nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc.
.size([width, height]); .size([width, height]);
// .extent([[5, 20], [width - 5, height - 20]]); alias for size // .extent([[5, 20], [width - 5, height - 20]]); alias for size
// paddings // paddings
//["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"] //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"]
// .nodeWidth(15) // .nodeWidth(15)
// .nodePadding(10) // .nodePadding(10)
// .extent([[1, 5], [width - 1, height - 5]]); // .extent([[1, 5], [width - 1, height - 5]]);
@@ -148,45 +148,45 @@ export const draw = function (text: string, id: string, _version: string, diagOb
// Creates the groups for nodes // Creates the groups for nodes
svg svg
.append('g') .append('g')
.attr('class', 'nodes') .attr('class', 'nodes')
.attr('stroke', '#000') .attr('stroke', '#000')
.selectAll('.node') .selectAll('.node')
.data(graph.nodes) .data(graph.nodes)
.join('g') .join('g')
.attr('class', 'node') .attr('class', 'node')
.attr("transform", function (d) { return "translate(" + d.x0 + "," + d.y0 + ")"; }) .attr("transform", function (d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
.attr('x', (d) => d.x0) .attr('x', (d) => d.x0)
.attr('y', (d) => d.y0) .attr('y', (d) => d.y0)
.append('rect') .append('rect')
.attr('height', (d) => {console.log(d); return (d.y1 - d.y0);}) .attr('height', (d) => { console.log(d); return (d.y1 - d.y0); })
.attr('width', (d) => d.x1 - d.x0) .attr('width', (d) => d.x1 - d.x0)
.attr('fill', (d) => color(d.id)); .attr('fill', (d) => color(d.id));
// Create text for nodes // Create text for nodes
svg svg
.append("g") .append("g")
.attr('class', 'node-labels') .attr('class', 'node-labels')
.attr("font-family", "sans-serif") .attr("font-family", "sans-serif")
.attr("font-size", 14) .attr("font-size", 14)
.selectAll('text') .selectAll('text')
.data(graph.nodes) .data(graph.nodes)
.join('text') .join('text')
.attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
.attr("y", d => (d.y1 + d.y0) / 2) .attr("y", d => (d.y1 + d.y0) / 2)
.attr("dy", "0.35em") .attr("dy", "0.35em")
.attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
.text(d => d.id) .text(d => d.id)
// Creates the paths that represent the links. // Creates the paths that represent the links.
const link_g = svg.append("g") const link_g = svg.append("g")
.attr('class', 'links') .attr('class', 'links')
.attr("fill", "none") .attr("fill", "none")
.attr("stroke-opacity", 0.5) .attr("stroke-opacity", 0.5)
.selectAll(".link") .selectAll(".link")
.data(graph.links) .data(graph.links)
.join("g") .join("g")
.attr('class', 'link') .attr('class', 'link')
.style("mix-blend-mode", "multiply"); .style("mix-blend-mode", "multiply");
link_g.append("path") link_g.append("path")
.attr("d", d3SankeyLinkHorizontal()) .attr("d", d3SankeyLinkHorizontal())