Merge pull request #6800 from adamreeve/sankey-align

Expose the node alignment property for Sankey plots

Author: archmoj

draftlogs/6800_add.md

@@ -0,0 +1 @@
+ - Add `align` option to Sankey nodes to control horizontal alignment [[#6800](https://github.com/plotly/plotly.js/pull/6800)]

src/traces/sankey/attributes.js

@@ -164,6 +164,12 @@ var attrs = module.exports = overrideAll({
             description: 'Variables `sourceLinks` and `targetLinks` are arrays of link objects.',
             keys: ['value', 'label']
         }),
+        align: {
+            valType: 'enumerated',
+            values: ['justify', 'left', 'right', 'center'],
+            dflt: 'justify',
+            description: 'Sets the alignment method used to position the nodes along the horizontal axis.'
+        },
         description: 'The nodes of the Sankey plot.'
     },
 

src/traces/sankey/defaults.js

@@ -34,6 +34,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerceNode('hoverinfo', traceIn.hoverinfo);
     handleHoverLabelDefaults(nodeIn, nodeOut, coerceNode, hoverlabelDefault);
     coerceNode('hovertemplate');
+    coerceNode('align');
 
     var colors = layout.colorway;
 

src/traces/sankey/render.js

@@ -35,6 +35,12 @@ function sankeyModel(layout, d, traceIndex) {
     var horizontal = trace.orientation === 'h';
     var nodePad = trace.node.pad;
     var nodeThickness = trace.node.thickness;
+    var nodeAlign = {
+        justify: d3Sankey.sankeyJustify,
+        left: d3Sankey.sankeyLeft,
+        right: d3Sankey.sankeyRight,
+        center: d3Sankey.sankeyCenter
+    }[trace.node.align];
 
     var width = layout.width * (domain.x[1] - domain.x[0]);
     var height = layout.height * (domain.y[1] - domain.y[0]);
@@ -61,6 +67,7 @@ function sankeyModel(layout, d, traceIndex) {
       .nodeId(function(d) {
           return d.pointNumber;
       })
+      .nodeAlign(nodeAlign)
       .nodes(nodes)
       .links(links);
 

test/image/baselines/sankey_align_center.png

@@ -0,0 +1,26 @@
+{
+    "data": [
+        {
+            "type": "sankey",
+            "node": {
+                "label": ["0", "1", "2", "3", "4", "5"],
+                "align": "center"
+            },
+            "link": {
+                "source": [
+                    0, 1, 4, 2, 1
+                ],
+                "target": [
+                    1, 4, 5, 4, 3
+                ],
+                "value": [
+                    4, 2, 3, 1, 2
+                ]
+            }
+        }],
+    "layout": {
+        "title": {"text": "Sankey with center aligned nodes"},
+        "width": 800,
+        "height": 800
+    }
+}

test/image/baselines/sankey_align_justify.png

@@ -0,0 +1,26 @@
+{
+    "data": [
+        {
+            "type": "sankey",
+            "node": {
+                "label": ["0", "1", "2", "3", "4", "5"],
+                "align": "justify"
+            },
+            "link": {
+                "source": [
+                    0, 1, 4, 2, 1
+                ],
+                "target": [
+                    1, 4, 5, 4, 3
+                ],
+                "value": [
+                    4, 2, 3, 1, 2
+                ]
+            }
+        }],
+    "layout": {
+        "title": {"text": "Sankey with justified node alignment"},
+        "width": 800,
+        "height": 800
+    }
+}

test/image/baselines/sankey_align_left.png

@@ -0,0 +1,26 @@
+{
+    "data": [
+        {
+            "type": "sankey",
+            "node": {
+                "label": ["0", "1", "2", "3", "4", "5"],
+                "align": "left"
+            },
+            "link": {
+                "source": [
+                    0, 1, 4, 2, 1
+                ],
+                "target": [
+                    1, 4, 5, 4, 3
+                ],
+                "value": [
+                    4, 2, 3, 1, 2
+                ]
+            }
+        }],
+    "layout": {
+        "title": {"text": "Sankey with left aligned nodes"},
+        "width": 800,
+        "height": 800
+    }
+}

test/image/baselines/sankey_align_right.png

@@ -0,0 +1,26 @@
+{
+    "data": [
+        {
+            "type": "sankey",
+            "node": {
+                "label": ["0", "1", "2", "3", "4", "5"],
+                "align": "right"
+            },
+            "link": {
+                "source": [
+                    0, 1, 4, 2, 1
+                ],
+                "target": [
+                    1, 4, 5, 4, 3
+                ],
+                "value": [
+                    4, 2, 3, 1, 2
+                ]
+            }
+        }],
+    "layout": {
+        "title": {"text": "Sankey with right aligned nodes"},
+        "width": 800,
+        "height": 800
+    }
+}

test/image/baselines/zz-sankey_circular_align_right.png

@@ -0,0 +1,27 @@
+{
+    "data": [
+        {
+            "type": "sankey",
+            "node": {
+                "pad": 5,
+                "align": "right",
+                "label": ["0", "1", "2", "3", "4", "5", "6"]
+            },
+            "link": {
+                "source": [
+                    0, 0, 1, 2, 5, 4, 3
+                ],
+                "target": [
+                    5, 3, 4, 3, 0, 2, 2
+                ],
+                "value": [
+                    1, 2, 1, 1, 1, 1, 1
+                ]
+            }
+        }],
+    "layout": {
+        "title": {"text": "Sankey with circular data, aligned right"},
+        "width": 800,
+        "height": 800
+    }
+}

test/image/mocks/sankey_align_center.json

@@ -44358,6 +44358,18 @@
      "valType": "string"
     },
     "node": {
+     "align": {
+      "description": "Sets the alignment method used to position the nodes along the horizontal axis.",
+      "dflt": "justify",
+      "editType": "calc",
+      "valType": "enumerated",
+      "values": [
+       "justify",
+       "left",
+       "right",
+       "center"
+      ]
+     },
      "color": {
       "arrayOk": true,
       "description": "Sets the `node` color. It can be a single value, or an array for specifying color for each `node`. If `node.color` is omitted, then the default `Plotly` color palette will be cycled through to have a variety of colors. These defaults are not fully opaque, to allow some visibility of what is beneath the node.",