@progress/kendo-charts 2.3.0-dev.202402161236 → 2.3.0-dev.202403071434

package/dist/es/sankey/calculation.js

@@ -3,24 +3,40 @@ import { deepExtend } from '../common';
 var max = function (array, mapFn) { return Math.max.apply(null, array.map(mapFn)); };
 var min = function (array, mapFn) { return Math.min.apply(null, array.map(mapFn)); };
 var sum = function (array, mapFn) { return array.map(mapFn).reduce(function (acc, curr) { return (acc + curr); }, 0); };
-var sortAsc = function (a, b) { return a.y0 - b.y0; };
+var sortAsc = function (a, b) { return (a.y0 === b.y0 ? a.index - b.index : a.y0 + a.y1 - b.y0 - b.y1); };
 var sortSource = function (a, b) { return sortAsc(a.source, b.source); };
 var sortTarget = function (a, b) { return sortAsc(a.target, b.target); };
 var value = function (node) { return node.value; };
 
 function sortLinks(nodes) {
     nodes.forEach(function (node) {
-        var sourceLinks = node.sourceLinks;
-        var targetLinks = node.targetLinks;
-        sourceLinks.sort(sortTarget);
-        targetLinks.sort(sortSource);
+        node.targetLinks.forEach(function (link) {
+            link.source.sourceLinks.sort(sortTarget);
+        });
+        node.sourceLinks.forEach(function (link) {
+            link.target.targetLinks.sort(sortSource);
+        });
     });
 }
 
+var calcLayer = function (node, maxDepth) {
+    if (node.align === 'left') {
+        return node.depth;
+    }
+
+    if (node.align === 'right') {
+        return maxDepth - node.height;
+    }
+
+    return node.sourceLinks.length ? node.depth : maxDepth;
+};
+
 var Sankey = function Sankey(options) {
-    var offset = options.nodesOptions.offset || {};
+    var ref = options.nodesOptions;
+    var offset = ref.offset; if ( offset === void 0 ) offset = {};
+    var align = ref.align;
     this.data = {
-        nodes: options.nodes.map(function (node) { return deepExtend({}, { offset: offset }, node); }),
+        nodes: options.nodes.map(function (node) { return deepExtend({}, { offset: offset, align: align }, node); }),
         links: options.links.map(function (link) { return deepExtend({}, link); })
     };
 
@@ -30,6 +46,10 @@ var Sankey = function Sankey(options) {
     this.offsetY = options.offsetY || 0;
     this.nodeWidth = options.nodesOptions.width;
     this.nodePadding = options.nodesOptions.padding;
+    this.reverse = options.reverse;
+    this.targetColumnIndex = options.targetColumnIndex;
+    this.loops = options.loops;
+    this.autoLayout = options.autoLayout;
 };
 
 Sankey.prototype.calculate = function calculate () {
@@ -39,19 +59,21 @@ Sankey.prototype.calculate = function calculate () {
     this.connectLinksToNodes(nodes, links);
     this.calculateNodeValues(nodes);
     this.calculateNodeDepths(nodes);
+    this.calculateNodeHeights(nodes);
 
     var columns = this.calculateNodeColumns(nodes);
     this.calculateNodeBreadths(columns);
     this.applyNodesOffset(nodes);
     this.calculateLinkBreadths(nodes);
 
-    return this.data;
+    return Object.assign({}, this.data, {columns: columns});
 };
 
 Sankey.prototype.connectLinksToNodes = function connectLinksToNodes (nodes, links) {
     var nodesMap = new Map();
 
-    nodes.forEach(function (node) {
+    nodes.forEach(function (node, i) {
+        node.index = i;
         node.sourceLinks = [];
         node.targetLinks = [];
         node.id = node.id !== undefined ? node.id : node.label.text;
@@ -95,6 +117,24 @@ Sankey.prototype.calculateNodeDepths = function calculateNodeDepths (nodes) {
     }
 };
 
+Sankey.prototype.calculateNodeHeights = function calculateNodeHeights (nodes) {
+    var current = new Set(nodes);
+    var next = new Set;
+    var x = 0;
+    var eachNode = function (node) {
+        node.height = x;
+        node.targetLinks.forEach(function (link) {
+            next.add(link.source);
+        });
+    };
+    while (current.size) {
+        current.forEach(eachNode);
+        x++;
+        current = next;
+        next = new Set;
+    }
+};
+
 Sankey.prototype.calculateNodeColumns = function calculateNodeColumns (nodes) {
         var this$1 = this;
 
@@ -103,11 +143,12 @@ Sankey.prototype.calculateNodeColumns = function calculateNodeColumns (nodes) {
     var columns = new Array(maxDepth + 1);
     for (var i = 0; i < nodes.length; i++) {
         var node = nodes[i];
-        var depth = Math.max(0, Math.min(maxDepth, node.sourceLinks.length ? node.depth : maxDepth));
-        node.x0 = this$1.offsetX + depth * columnWidth;
+        var layer = Math.max(0, Math.min(maxDepth, calcLayer(node, maxDepth)));
+        node.x0 = this$1.offsetX + layer * columnWidth;
         node.x1 = node.x0 + this$1.nodeWidth;
-        columns[depth] = columns[depth] || [];
-        columns[depth].push(node);
+        node.layer = layer;
+        columns[layer] = columns[layer] || [];
+        columns[layer].push(node);
     }
 
     return columns;
@@ -118,31 +159,39 @@ Sankey.prototype.calculateNodeBreadths = function calculateNodeBreadths (columns
 
     var kSize = min(columns, function (c) { return (this$1.height - this$1.offsetY - (c.length - 1) * this$1.nodePadding) / sum(c, value); });
 
-    for (var c = 0; c < columns.length; c++) {
-        var nodes = columns[c];
+    columns.forEach(function (nodes) {
         var y = this$1.offsetY;
-        for (var i = 0; i < nodes.length; i++) {
-            var node = nodes[i];
+        nodes.forEach(function (node) {
             node.y0 = y;
             node.y1 = y + node.value * kSize;
             y = node.y1 + this$1.nodePadding;
-            for (var l = 0; l < node.sourceLinks.length; l++) {
-                var link = node.sourceLinks[l];
+            node.sourceLinks.forEach(function (link) {
                 link.width = link.value * kSize;
-            }
-        }
-
+            });
+        });
         y = (this$1.height - y + this$1.nodePadding) / (nodes.length + 1);
-        for (var i$1 = 0; i$1 < nodes.length; ++i$1) {
-            var node$1 = nodes[i$1];
-            node$1.y0 += y * (i$1 + 1);
-            node$1.y1 += y * (i$1 + 1);
+        nodes.forEach(function (node, i) {
+            node.y0 += y * (i + 1);
+            node.y1 += y * (i + 1);
+        });
+    });
+
+    if (this.autoLayout !== false) {
+        var loops = this.loops !== undefined ? this.loops : columns.length - 1;
+        var targetColumnIndex = this.targetColumnIndex || 1;
+
+        for (var i = 0; i < loops; i++) {
+            if (!this$1.reverse) {
+                this$1.uncurlLinksToLeft(columns, targetColumnIndex);
+                this$1.uncurlLinksToRight(columns, targetColumnIndex);
+            } else {
+                this$1.uncurlLinksToRight(columns, targetColumnIndex);
+                this$1.uncurlLinksToLeft(columns, targetColumnIndex);
+            }
         }
     }
 
-    for (var c$1 = 0; c$1 < columns.length; c$1++) {
-        sortLinks(columns[c$1]);
-    }
+    columns.forEach(sortLinks);
 };
 
 Sankey.prototype.applyNodesOffset = function applyNodesOffset (nodes) {
@@ -163,14 +212,188 @@ Sankey.prototype.calculateLinkBreadths = function calculateLinkBreadths (nodes)
         var y = node.y0;
         var y1 = y;
         sourceLinks.forEach(function (link) {
+            link.x0 = link.source.x1;
             link.y0 = y + link.width / 2;
             y += link.width;
         });
         targetLinks.forEach(function (link) {
+            link.x1 = link.target.x0;
             link.y1 = y1 + link.width / 2;
             y1 += link.width;
         });
     });
 };
 
+Sankey.prototype.uncurlLinksToRight = function uncurlLinksToRight (columns, targetColumnIndex) {
+        var this$1 = this;
+
+    var n = columns.length;
+    for (var i = targetColumnIndex; i < n; i++) {
+        var column = columns[i];
+        column.forEach(function (target) {
+            var y = 0;
+            var sum = 0;
+            target.targetLinks.forEach(function (link) {
+                var kValue = link.value * (target.layer - link.source.layer);
+                y += this$1.targetTopPos(link.source, target) * kValue;
+                sum += kValue;
+            });
+
+            var dy = y === 0 ? 0 : (y / sum - target.y0);
+            target.y0 += dy;
+            target.y1 += dy;
+            sortLinks([target]);
+        });
+        column.sort(sortAsc);
+        this$1.arrangeNodesVertically(column);
+    }
+};
+
+Sankey.prototype.uncurlLinksToLeft = function uncurlLinksToLeft (columns, targetColumnIndex) {
+        var this$1 = this;
+
+    var l = columns.length;
+    var startIndex = l - 1 - targetColumnIndex;
+    for (var i = startIndex; i >= 0; i--) {
+        var column = columns[i];
+        var loop = function ( j ) {
+            var source = column[j];
+            var y = 0;
+            var sum = 0;
+            source.sourceLinks.forEach(function (link) {
+                var kValue = link.value * (link.target.layer - source.layer);
+                y += this$1.sourceTopPos(source, link.target) * kValue;
+                sum += kValue;
+            });
+            var dy = y === 0 ? 0 : (y / sum - source.y0);
+            source.y0 += dy;
+            source.y1 += dy;
+            sortLinks([source]);
+        };
+
+            for (var j = 0; j < column.length; j++) loop( j );
+
+        column.sort(sortAsc);
+        this$1.arrangeNodesVertically(column);
+    }
+};
+
+Sankey.prototype.arrangeNodesVertically = function arrangeNodesVertically (nodes) {
+    var startIndex = 0;
+    var endIndex = nodes.length - 1;
+
+    this.arrangeUp(nodes, this.height, endIndex);
+    this.arrangeDown(nodes, this.offsetY, startIndex);
+};
+
+Sankey.prototype.arrangeDown = function arrangeDown (nodes, yPos, index) {
+        var this$1 = this;
+
+    var currentY = yPos;
+
+    for (var i = index; i < nodes.length; i++) {
+        var node = nodes[i];
+        var dy = Math.max(0, currentY - node.y0);
+        node.y0 += dy;
+        node.y1 += dy;
+        currentY = node.y1 + this$1.nodePadding;
+    }
+};
+
+Sankey.prototype.arrangeUp = function arrangeUp (nodes, yPos, index) {
+        var this$1 = this;
+
+    var currentY = yPos;
+    for (var i = index; i >= 0; --i) {
+        var node = nodes[i];
+        var dy = Math.max(0, node.y1 - currentY);
+        node.y0 -= dy;
+        node.y1 -= dy;
+        currentY = node.y0 - this$1.nodePadding;
+    }
+};
+
+Sankey.prototype.sourceTopPos = function sourceTopPos (source, target) {
+        var this$1 = this;
+
+    var y = target.y0 - ((target.targetLinks.length - 1) * this.nodePadding) / 2;
+    for (var i = 0; i < target.targetLinks.length; i++) {
+        var link = target.targetLinks[i];
+        if (link.source === source) {
+            break;
+        }
+        y += link.width + this$1.nodePadding;
+    }
+    for (var i$1 = 0; i$1 < source.sourceLinks.length; i$1++) {
+        var link$1 = source.sourceLinks[i$1];
+        if (link$1.target === target) {
+            break;
+        }
+        y -= link$1.width;
+    }
+    return y;
+};
+
+Sankey.prototype.targetTopPos = function targetTopPos (source, target) {
+        var this$1 = this;
+
+    var y = source.y0 - ((source.sourceLinks.length - 1) * this.nodePadding) / 2;
+    for (var i = 0; i < source.sourceLinks.length; i++) {
+        var link = source.sourceLinks[i];
+        if (link.target === target) {
+            break;
+        }
+        y += link.width + this$1.nodePadding;
+    }
+    for (var i$1 = 0; i$1 < target.targetLinks.length; i$1++) {
+        var link$1 = target.targetLinks[i$1];
+        if (link$1.source === source) {
+            break;
+        }
+        y -= link$1.width;
+    }
+    return y;
+};
+
 export var calculateSankey = function (options) { return new Sankey(options).calculate(); };
+
+export var crossesValue = function (links) {
+    var value = 0;
+    var linksLength = links.length;
+
+    for (var i = 0; i < linksLength; i++) {
+        var link = links[i];
+
+        for (var lNext = i + 1; lNext < linksLength; lNext++) {
+            var nextLink = links[lNext];
+
+            if (intersect(link, nextLink)) {
+                value += Math.min(link.value, nextLink.value);
+            }
+        }
+    }
+
+    return value;
+};
+
+function rotationDirection(p1x, p1y, p2x, p2y, p3x, p3y) {
+    var expression1 = (p3y - p1y) * (p2x - p1x);
+    var expression2 = (p2y - p1y) * (p3x - p1x);
+
+    if (expression1 > expression2) {
+        return 1;
+    } else if (expression1 === expression2) {
+        return 0;
+    }
+
+    return -1;
+}
+
+function intersect(link1, link2) {
+    var f1 = rotationDirection(link1.x0, link1.y0, link1.x1, link1.y1, link2.x1, link2.y1);
+    var f2 = rotationDirection(link1.x0, link1.y0, link1.x1, link1.y1, link2.x0, link2.y0);
+    var f3 = rotationDirection(link1.x0, link1.y0, link2.x0, link2.y0, link2.x1, link2.y1);
+    var f4 = rotationDirection(link1.x1, link1.y1, link2.x0, link2.y0, link2.x1, link2.y1);
+
+    return f1 !== f2 && f3 !== f4;
+}

package/dist/es/sankey/link.js

@@ -14,14 +14,14 @@ export var Link = (function (SankeyElement) {
 
     Link.prototype.getElement = function getElement () {
         var link = this.options.link;
-        var source = link.source;
-        var target = link.target;
+        var x0 = link.x0;
+        var x1 = link.x1;
         var y0 = link.y0;
         var y1 = link.y1;
-        var xC = (source.x0 + target.x1) / 2;
+        var xC = (x0 + x1) / 2;
 
         return new drawing.Path(this.visualOptions())
-            .moveTo(source.x1, y0).curveTo([xC, y0], [xC, y1], [target.x0, y1]);
+            .moveTo(x0, y0).curveTo([xC, y0], [xC, y1], [x1, y1]);
     };
 
     Link.prototype.visualOptions = function visualOptions () {

package/dist/es/sankey/sankey.js

@@ -1,6 +1,6 @@
-import { drawing } from '@progress/kendo-drawing';
+import { geometry, drawing } from '@progress/kendo-drawing';
 import { deepExtend, addClass, setDefaultOptions } from '../common';
-import { calculateSankey } from './calculation';
+import { calculateSankey, crossesValue } from './calculation';
 import { Node, resolveNodeOptions } from './node';
 import { Link, resolveLinkOptions } from './link';
 import { Label, resolveLabelOptions } from './label';
@@ -10,6 +10,7 @@ import Box from '../core/box';
 import rectToBox from '../core/utils/rect-to-box';
 import { Observable } from '../common/observable';
 import { Legend } from './legend';
+import { defined } from '../drawing-utils';
 
 var LINK = 'link';
 var NODE = 'node';
@@ -67,6 +68,7 @@ export var Sankey = (function (Observable) {
                 }
                 this$1.size = { width: width, height: height };
                 this$1.surface.setSize(this$1.size);
+                this$1.resize = true;
                 this$1._redraw();
             });
         });
@@ -257,17 +259,17 @@ export var Sankey = (function (Observable) {
         return legendVisual.chartElement.box;
     };
 
-    Sankey.prototype.calculateSankey = function calculateSankey$1 (options) {
-        var ref = this.options;
-        var title = ref.title;
-        var legend = ref.legend;
-        var data = ref.data;
-        var ref$1 = this.options;
-        var nodes = ref$1.nodes;
-        var labels = ref$1.labels;
-        var nodesColors = ref$1.nodesColors;
-
-        var sankeyBox = new Box(0, 0, options.width, options.height);
+    Sankey.prototype.calculateSankey = function calculateSankey$1 (calcOptions, sankeyOptions) {
+        var title = sankeyOptions.title;
+        var legend = sankeyOptions.legend;
+        var data = sankeyOptions.data;
+        var nodes = sankeyOptions.nodes;
+        var labels = sankeyOptions.labels;
+        var nodesColors = sankeyOptions.nodesColors;
+        var disableAutoLayout = sankeyOptions.disableAutoLayout;
+        var autoLayout = !disableAutoLayout;
+
+        var sankeyBox = new Box(0, 0, calcOptions.width, calcOptions.height);
         var titleBox = this.titleBox(title, sankeyBox);
 
         var legendArea = sankeyBox.clone();
@@ -276,34 +278,35 @@ export var Sankey = (function (Observable) {
             var titleHeight = titleBox.height();
             if (title.position === TOP) {
                 sankeyBox.unpad({ top: titleHeight });
-                legendArea = new Box(0, titleHeight, options.width, options.height);
+                legendArea = new Box(0, titleHeight, calcOptions.width, calcOptions.height);
             } else {
                 sankeyBox.shrink(0, titleHeight);
-                legendArea = new Box(0, 0, options.width, options.height - titleHeight);
+                legendArea = new Box(0, 0, calcOptions.width, calcOptions.height - titleHeight);
             }
         }
 
         var legendBox = this.legendBox(legend, data.nodes, legendArea);
+        var legendPosition = (legend && legend.position) || Legend.prototype.options.position;
 
         if (legendBox) {
-            if (legend.position === LEFT) {
+            if (legendPosition === LEFT) {
                 sankeyBox.unpad({ left: legendBox.width() });
             }
 
-            if (legend.position === RIGHT) {
+            if (legendPosition === RIGHT) {
                 sankeyBox.shrink(legendBox.width(), 0);
             }
 
-            if (legend.position === TOP) {
+            if (legendPosition === TOP) {
                 sankeyBox.unpad({ top: legendBox.height() });
             }
 
-            if (legend.position === BOTTOM) {
+            if (legendPosition === BOTTOM) {
                 sankeyBox.shrink(0, legendBox.height());
             }
         }
 
-        var calculatedNodes = calculateSankey(Object.assign({}, options, {offsetX: sankeyBox.x1, offsetY: sankeyBox.y1, width: sankeyBox.x2, height: sankeyBox.y2})).nodes;
+        var calculatedNodes = calculateSankey(Object.assign({}, calcOptions, {offsetX: 0, offsetY: 0, width: sankeyBox.width(), height: sankeyBox.height()})).nodes;
         var box = new Box();
 
         calculatedNodes.forEach(function (nodeEl, i) {
@@ -311,47 +314,102 @@ export var Sankey = (function (Observable) {
             var nodeInstance = new Node(nodeOps);
             box.wrap(rectToBox(nodeInstance.exportVisual().rawBBox()));
 
-            var labelInstance = new Label(deepExtend({ node: nodeEl, totalWidth: options.width }, labels));
+            var labelInstance = new Label(resolveLabelOptions(nodeEl, labels, sankeyBox.width()));
             var labelVisual = labelInstance.exportVisual();
             if (labelVisual) {
                 box.wrap(rectToBox(labelVisual.rawBBox()));
             }
         });
 
-        var offsetX = (box.x1 < 0 ? -box.x1 : 0) + sankeyBox.x1;
-        var offsetY = (box.y1 < 0 ? -box.y1 : 0) + sankeyBox.y1;
+        var offsetX = sankeyBox.x1;
+        var offsetY = sankeyBox.y1;
 
-        var width = box.width() > sankeyBox.x2 ? offsetX + sankeyBox.x2 - (box.width() - sankeyBox.x2) : sankeyBox.x2;
-        var height = box.height() > sankeyBox.y2 ? offsetY + sankeyBox.y2 - (box.height() - sankeyBox.y2) : sankeyBox.y2;
+        var width = sankeyBox.width() + offsetX;
+        var height = sankeyBox.height() + offsetY;
+
+        width -= box.x2 > sankeyBox.width() ? box.x2 - sankeyBox.width() : 0;
+        height -= box.y2 > sankeyBox.height() ? box.y2 - sankeyBox.height() : 0;
+
+        offsetX += box.x1 < 0 ? -box.x1 : 0;
+        offsetY += box.y1 < 0 ? -box.y1 : 0;
+
+        if (autoLayout === false) {
+            return {
+                sankey: calculateSankey(Object.assign({}, calcOptions, {offsetX: offsetX, offsetY: offsetY, width: width, height: height, autoLayout: false})),
+                legendBox: legendBox,
+                titleBox: titleBox
+            };
+        }
+
+        if (this.resize && autoLayout && this.permutation) {
+            this.resize = false;
+            return {
+                sankey: calculateSankey(Object.assign({}, calcOptions, {offsetX: offsetX, offsetY: offsetY, width: width, height: height}, this.permutation)),
+                legendBox: legendBox,
+                titleBox: titleBox
+            };
+        }
+
+        var startColumn = 1;
+        var loops = 2;
+        var columnsLength = calculateSankey(Object.assign({}, calcOptions, {offsetX: offsetX, offsetY: offsetY, width: width, height: height, autoLayout: false})).columns.length;
+        var results = [];
+
+        var permutation = function (targetColumnIndex, reverse) {
+            var currPerm = calculateSankey(Object.assign({}, calcOptions, {offsetX: offsetX, offsetY: offsetY, width: width, height: height, loops: loops, targetColumnIndex: targetColumnIndex, reverse: reverse}));
+            var crosses = crossesValue(currPerm.links);
+            results.push({
+                crosses: crosses,
+                reverse: reverse,
+                targetColumnIndex: targetColumnIndex
+            });
+            return crosses === 0;
+        };
+
+        for (var index = startColumn; index <= columnsLength - 1; index++) {
+            if (permutation(index, false) || permutation(index, true)) {
+                break;
+            }
+        }
+
+        var minCrosses = Math.min.apply(null, results.map(function (r) { return r.crosses; }));
+        var bestResult = results.find(function (r) { return r.crosses === minCrosses; });
+        this.permutation = { targetColumnIndex: bestResult.targetColumnIndex, reverse: bestResult.reverse };
+        var result = calculateSankey(Object.assign({}, calcOptions, {offsetX: offsetX, offsetY: offsetY, width: width, height: height}, this.permutation));
 
         return {
-            sankey: calculateSankey(Object.assign({}, options, {offsetX: offsetX, offsetY: offsetY, width: width, height: height})),
+            sankey: result,
             legendBox: legendBox,
             titleBox: titleBox
         };
     };
 
-    Sankey.prototype._render = function _render () {
-        var ref = this.options;
-        var data = ref.data;
-        var labelOptions = ref.labels;
-        var nodesOptions = ref.nodes;
-        var linkOptions = ref.links;
-        var nodesColors = ref.nodesColors;
-        var title = ref.title;
-        var legend = ref.legend;
-        var ref$1 = this.size;
-        var width = ref$1.width;
-        var height = ref$1.height;
+    Sankey.prototype._render = function _render (options, context) {
+        var sankeyOptions = options || this.options;
+        var sankeyContext = context || this;
+
+        var data = sankeyOptions.data;
+        var labelOptions = sankeyOptions.labels;
+        var nodesOptions = sankeyOptions.nodes;
+        var linkOptions = sankeyOptions.links;
+        var nodesColors = sankeyOptions.nodesColors;
+        var title = sankeyOptions.title;
+        var legend = sankeyOptions.legend;
+        var ref = sankeyContext.size;
+        var width = ref.width;
+        var height = ref.height;
+
         var calcOptions = Object.assign({}, data, {width: width, height: height, nodesOptions: nodesOptions, title: title, legend: legend});
-        var ref$2 = this.calculateSankey(calcOptions);
-        var sankey = ref$2.sankey;
-        var titleBox = ref$2.titleBox;
-        var legendBox = ref$2.legendBox;
+        var ref$1 = this.calculateSankey(calcOptions, sankeyOptions);
+        var sankey = ref$1.sankey;
+        var titleBox = ref$1.titleBox;
+        var legendBox = ref$1.legendBox;
         var nodes = sankey.nodes;
         var links = sankey.links;
 
-        var visual = new drawing.Group();
+        var visual = new drawing.Group({
+            clip: drawing.Path.fromRect(new geometry.Rect([0, 0], [width, height]))
+        });
 
         if (titleBox) {
             var titleElement = new Title(Object.assign({}, title, {drawingRect: titleBox}));
@@ -366,6 +424,7 @@ export var Sankey = (function (Observable) {
         }
 
         var visualNodes = new Map();
+        sankeyContext.nodesVisuals = visualNodes;
 
         nodes.forEach(function (node, i) {
             var nodeOps = resolveNodeOptions(node, nodesOptions, nodesColors, i);
@@ -388,6 +447,7 @@ export var Sankey = (function (Observable) {
         var sortedLinks = links.slice().sort(function (a, b) { return b.value - a.value; });
 
         var linksVisuals = [];
+        sankeyContext.linksVisuals = linksVisuals;
 
         sortedLinks.forEach(function (link) {
             var source = link.source;
@@ -412,11 +472,9 @@ export var Sankey = (function (Observable) {
             visual.append(linkVisual);
         });
 
-        this.linksVisuals = linksVisuals;
-        this.nodesVisuals = visualNodes;
-
+        var diagramWidth = nodes.reduce(function (acc, node) { return Math.max(acc, node.x1); }, 0);
         nodes.forEach(function (node) {
-            var textOps = resolveLabelOptions(node, labelOptions, width);
+            var textOps = resolveLabelOptions(node, labelOptions, diagramWidth);
             var labelInstance = new Label(textOps);
             var labelVisual = labelInstance.exportVisual();
 
@@ -428,8 +486,18 @@ export var Sankey = (function (Observable) {
         return visual;
     };
 
-    Sankey.prototype.exportVisual = function exportVisual () {
-        return this._render();
+    Sankey.prototype.exportVisual = function exportVisual (exportOptions) {
+        var options = (exportOptions && exportOptions.options) ?
+            deepExtend({}, this.options, exportOptions.options) : this.options;
+
+        var context = {
+            size: {
+                width: defined(exportOptions && exportOptions.width) ? exportOptions.width : this.size.width,
+                height: defined(exportOptions && exportOptions.height) ? exportOptions.height : this.size.height
+            }
+        };
+
+        return this._render(options, context);
     };
 
     Sankey.prototype._setOptions = function _setOptions (options) {
@@ -440,6 +508,9 @@ export var Sankey = (function (Observable) {
 }(Observable));
 
 setDefaultOptions(Sankey, {
+    title: {
+        position: TOP, // 'top', 'bottom'
+    },
     labels: {
         visible: true,
         margin: {
@@ -458,6 +529,7 @@ setDefaultOptions(Sankey, {
         width: 24,
         padding: 16,
         opacity: 1,
+        align: 'stretch', // 'left', 'right', 'stretch'
         offset: { left: 0, top: 0 }
     },
     links: {

package/dist/es/sankey/title.js

@@ -37,7 +37,6 @@ export var Title = (function (SankeyElement) {
 }(SankeyElement));
 
 setDefaultOptions(Title, {
-    position: TOP, // 'top', 'bottom'
     align: CENTER, // 'left', 'right', 'center'
     opacity: 1,
     border: {