Skip to content

Commit cf9388b

Browse files
kurklekurkle
committed
Fix layout bug of missing some nodes
1 parent 722d539 commit cf9388b

File tree

3 files changed

+116
-9
lines changed

3 files changed

+116
-9
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "chartjs-chart-sankey",
3-
"version": "0.1.1-alpha",
3+
"version": "0.1.2-alpha",
44
"description": "Chart.js module for creating sankey diagrams",
55
"main": "dist/chartjs-chart-sankey.js",
66
"module": "dist/chartjs-chart-sankey.esm.js",

‎samples/contries.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Sankey diagram</title>
6+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.js"></script>
7+
<script src="utils.js"></script>
8+
<link rel="stylesheet" type="text/css" href="style.css">
9+
</link>
10+
</head>
11+
12+
<body>
13+
<div class="canvas-holder">
14+
<canvas id="chart-area"></canvas>
15+
</div>
16+
17+
<script>
18+
/* global Utils, Chart */
19+
const colors2 = ['#fff5eb', '#fee6ce', '#fdd0a2', '#fdae6b', '#fd8d3c', '#f16913', '#d94801', '#a63603', '#7f2704'];
20+
const assigned = {};
21+
22+
function getColor(name) {
23+
return assigned[name] || (assigned[name] = colors2[Object.keys(assigned).length % colors2.length]);
24+
}
25+
26+
Utils.load(() => {
27+
Chart.defaults.fontSize = 9;
28+
const ctx = document.getElementById('chart-area').getContext('2d');
29+
window.chart = new Chart(ctx, {
30+
type: 'sankey',
31+
data: {
32+
datasets: [{
33+
data: [
34+
{from: 'Brazil', to: 'Portugal', flow: 5},
35+
{from: 'Brazil', to: 'France', flow: 1},
36+
{from: 'Brazil', to: 'Spain', flow: 1},
37+
{from: 'Brazil', to: 'England', flow: 1},
38+
{from: 'Canada', to: 'Portugal', flow: 1},
39+
{from: 'Canada', to: 'France', flow: 5},
40+
{from: 'Canada', to: 'England', flow: 1},
41+
{from: 'Mexico', to: 'Portugal', flow: 1},
42+
{from: 'Mexico', to: 'France', flow: 1},
43+
{from: 'Mexico', to: 'Spain', flow: 5},
44+
{from: 'Mexico', to: 'England', flow: 1},
45+
{from: 'USA', to: 'Portugal', flow: 1},
46+
{from: 'USA', to: 'France', flow: 1},
47+
{from: 'USA', to: 'Spain', flow: 1},
48+
{from: 'USA', to: 'England', flow: 5},
49+
{from: 'Portugal', to: 'Angola', flow: 2},
50+
{from: 'Portugal', to: 'Senegal', flow: 1},
51+
{from: 'Portugal', to: 'Morocco', flow: 1},
52+
{from: 'Portugal', to: 'South Africa', flow: 3},
53+
{from: 'France', to: 'Angola', flow: 1},
54+
{from: 'France', to: 'Senegal', flow: 3},
55+
{from: 'France', to: 'Mali', flow: 3},
56+
{from: 'France', to: 'Morocco', flow: 3},
57+
{from: 'France', to: 'South Africa', flow: 1},
58+
{from: 'Spain', to: 'Senegal', flow: 1},
59+
{from: 'Spain', to: 'Morocco', flow: 3},
60+
{from: 'Spain', to: 'South Africa', flow: 1},
61+
{from: 'England', to: 'Angola', flow: 1},
62+
{from: 'England', to: 'Senegal', flow: 1},
63+
{from: 'England', to: 'Morocco', flow: 2},
64+
{from: 'England', to: 'South Africa', flow: 7},
65+
{from: 'South Africa', to: 'China', flow: 5},
66+
{from: 'South Africa', to: 'India', flow: 1},
67+
{from: 'South Africa', to: 'Japan', flow: 3},
68+
{from: 'Angola', to: 'China', flow: 5},
69+
{from: 'Angola', to: 'India', flow: 1},
70+
{from: 'Angola', to: 'Japan', flow: 3},
71+
{from: 'Senegal', to: 'China', flow: 5},
72+
{from: 'Senegal', to: 'India', flow: 1},
73+
{from: 'Senegal', to: 'Japan', flow: 3},
74+
{from: 'Mali', to: 'China', flow: 5},
75+
{from: 'Mali', to: 'India', flow: 1},
76+
{from: 'Mali', to: 'Japan', flow: 3},
77+
{from: 'Morocco', to: 'China', flow: 5},
78+
{from: 'Morocco', to: 'India', flow: 1},
79+
{from: 'Morocco', to: 'Japan', flow: 3}
80+
],
81+
colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
82+
colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to)
83+
}],
84+
}
85+
});
86+
87+
});
88+
</script>
89+
</body>
90+
91+
</html>

‎src/layout.js

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -63,23 +63,39 @@ function processRest(nodeArray, maxX) {
6363
let rightY = rightNodes.reduce((acc, cur) => Math.max(acc, (cur.y + cur.out) || 0), 0);
6464

6565
if (leftY >= rightY) {
66-
leftNodes.filter(node => !('y' in node)).forEach(n => {
67-
n.y = leftY;
66+
leftNodes.forEach(n => {
67+
if (!('y' in n)) {
68+
n.y = leftY;
69+
} else {
70+
leftY = n.y;
71+
}
6872
leftY = Math.max(leftY + n.out, processTo(n, leftY));
6973
});
7074

71-
rightNodes.filter(node => !('y' in node)).forEach(n => {
72-
n.y = rightY;
75+
rightNodes.forEach(n => {
76+
if (!('y' in n)) {
77+
n.y = rightY;
78+
} else {
79+
rightY = n.y;
80+
}
7381
rightY = Math.max(rightY + n.in, processTo(n, rightY));
7482
});
7583
} else {
76-
rightNodes.filter(node => !('y' in node)).forEach(n => {
77-
n.y = rightY;
84+
rightNodes.forEach(n => {
85+
if (!('y' in n)) {
86+
n.y = rightY;
87+
} else {
88+
rightY = n.y;
89+
}
7890
rightY = Math.max(rightY + n.in, processTo(n, rightY));
7991
});
8092

81-
leftNodes.filter(node => !('y' in node)).forEach(n => {
82-
n.y = leftY;
93+
leftNodes.forEach(n => {
94+
if (!('y' in n)) {
95+
n.y = leftY;
96+
} else {
97+
leftY = n.y;
98+
}
8399
leftY = Math.max(leftY + n.out, processTo(n, leftY));
84100
});
85101
}

0 commit comments

Comments
 (0)