You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
672 lines
25 KiB
JavaScript
672 lines
25 KiB
JavaScript
/**
|
|
* @license Highcharts JS v6.0.4 (2017-12-15)
|
|
* Sankey diagram module
|
|
*
|
|
* (c) 2010-2017 Torstein Honsi
|
|
*
|
|
* License: www.highcharts.com/license
|
|
*/
|
|
'use strict';
|
|
(function(factory) {
|
|
if (typeof module === 'object' && module.exports) {
|
|
module.exports = factory;
|
|
} else {
|
|
factory(Highcharts);
|
|
}
|
|
}(function(Highcharts) {
|
|
(function(H) {
|
|
/**
|
|
* Sankey diagram module
|
|
*
|
|
* (c) 2010-2017 Torstein Honsi
|
|
*
|
|
* License: www.highcharts.com/license
|
|
*/
|
|
|
|
|
|
var defined = H.defined,
|
|
each = H.each,
|
|
extend = H.extend,
|
|
seriesType = H.seriesType,
|
|
pick = H.pick,
|
|
Point = H.Point;
|
|
|
|
/**
|
|
* A sankey diagram is a type of flow diagram, in which the width of the
|
|
* link between two nodes is shown proportionally to the flow quantity.
|
|
*
|
|
* @extends {plotOptions.column}
|
|
* @product highcharts
|
|
* @sample highcharts/demo/sankey-diagram/
|
|
* Sankey diagram
|
|
* @sample highcharts/plotoptions/sankey-inverted/
|
|
* Inverted sankey diagram
|
|
* @sample highcharts/plotoptions/sankey-outgoing
|
|
* Sankey diagram with outgoing links
|
|
* @since 6.0.0
|
|
* @excluding animationLimit,boostThreshold,borderColor,borderRadius,
|
|
* borderWidth,crisp,cropThreshold,depth,edgeColor,edgeWidth,
|
|
* findNearestPointBy,grouping,groupPadding,groupZPadding,maxPointWidth,
|
|
* negativeColor,pointInterval,pointIntervalUnit,pointPadding,
|
|
* pointPlacement,pointRange,pointStart,pointWidth,shadow,softThreshold,
|
|
* stacking,threshold,zoneAxis,zones
|
|
* @optionparent plotOptions.sankey
|
|
*/
|
|
seriesType('sankey', 'column', {
|
|
colorByPoint: true,
|
|
/**
|
|
* Higher numbers makes the links in a sankey diagram render more curved.
|
|
* A `curveFactor` of 0 makes the lines straight.
|
|
*/
|
|
curveFactor: 0.33,
|
|
/**
|
|
* Options for the data labels appearing on top of the nodes and links. For
|
|
* sankey charts, data labels are visible for the nodes by default, but
|
|
* hidden for links. This is controlled by modifying the `nodeFormat`, and
|
|
* the `format` that applies to links and is an empty string by default.
|
|
*/
|
|
dataLabels: {
|
|
enabled: true,
|
|
backgroundColor: 'none', // enable padding
|
|
crop: false,
|
|
/**
|
|
* The [format string](http://www.highcharts.com/docs/chart-concepts/labels-
|
|
* and-string-formatting) specifying what to show for _nodes_ in the
|
|
* sankey diagram. By default the `nodeFormatter` returns
|
|
* `{point.name}`.
|
|
*
|
|
* @type {String}
|
|
*/
|
|
nodeFormat: undefined,
|
|
|
|
/**
|
|
* Callback to format data labels for _nodes_ in the sankey diagram.
|
|
* The `nodeFormat` option takes precedence over the `nodeFormatter`.
|
|
*
|
|
* @type {Function}
|
|
* @since 6.0.2
|
|
*/
|
|
nodeFormatter: function() {
|
|
return this.point.name;
|
|
},
|
|
/**
|
|
* The [format string](http://www.highcharts.com/docs/chart-concepts/labels-
|
|
* and-string-formatting) specifying what to show for _links_ in the
|
|
* sankey diagram. Defaults to an empty string returned from the
|
|
* `formatter`, in effect disabling the labels.
|
|
*/
|
|
format: undefined,
|
|
/**
|
|
* Callback to format data labels for _links_ in the sankey diagram.
|
|
* The `format` option takes precedence over the `formatter`.
|
|
*
|
|
* @since 6.0.2
|
|
*/
|
|
formatter: function() {
|
|
return '';
|
|
},
|
|
inside: true
|
|
},
|
|
|
|
/**
|
|
* Opacity for the links between nodes in the sankey diagram.
|
|
*/
|
|
linkOpacity: 0.5,
|
|
|
|
/**
|
|
* The pixel width of each node in a sankey diagram, or the height in case
|
|
* the chart is inverted.
|
|
*/
|
|
nodeWidth: 20,
|
|
/**
|
|
* The padding between nodes in a sankey diagram, in pixels.
|
|
*/
|
|
nodePadding: 10,
|
|
showInLegend: false,
|
|
states: {
|
|
hover: {
|
|
/**
|
|
* Opacity for the links between nodes in the sankey diagram in
|
|
* hover mode.
|
|
*/
|
|
linkOpacity: 1
|
|
}
|
|
},
|
|
tooltip: {
|
|
followPointer: true,
|
|
|
|
|
|
headerFormat: '<span style="font-size: 0.85em">{series.name}</span><br/>',
|
|
|
|
pointFormat: '{point.fromNode.name} \u2192 {point.toNode.name}: <b>{point.weight}</b><br/>',
|
|
/**
|
|
* The [format string](http://www.highcharts.com/docs/chart-concepts/labels-
|
|
* and-string-formatting) specifying what to show for _nodes_ in tooltip
|
|
* of a sankey diagram series, as opposed to links.
|
|
*/
|
|
nodeFormat: '{point.name}: <b>{point.sum}</b><br/>'
|
|
/**
|
|
* A callback for defining the format for _nodes_ in the sankey chart's
|
|
* tooltip, as opposed to links.
|
|
*
|
|
* @type {Function}
|
|
* @since 6.0.2
|
|
* @apioption plotOptions.sankey.tooltip.nodeFormatter
|
|
*/
|
|
}
|
|
|
|
}, {
|
|
isCartesian: false,
|
|
forceDL: true,
|
|
/**
|
|
* Create a single node that holds information on incoming and outgoing
|
|
* links.
|
|
*/
|
|
createNode: function(id) {
|
|
|
|
function findById(nodes, id) {
|
|
return H.find(nodes, function(node) {
|
|
return node.id === id;
|
|
});
|
|
}
|
|
|
|
var node = findById(this.nodes, id),
|
|
options;
|
|
|
|
if (!node) {
|
|
options = this.options.nodes && findById(this.options.nodes, id);
|
|
node = (new Point()).init(
|
|
this,
|
|
extend({
|
|
className: 'highcharts-node',
|
|
isNode: true,
|
|
id: id,
|
|
y: 1 // Pass isNull test
|
|
}, options)
|
|
);
|
|
node.linksTo = [];
|
|
node.linksFrom = [];
|
|
node.formatPrefix = 'node';
|
|
node.name = node.name || node.id; // for use in formats
|
|
|
|
/**
|
|
* Return the largest sum of either the incoming or outgoing links.
|
|
*/
|
|
node.getSum = function() {
|
|
var sumTo = 0,
|
|
sumFrom = 0;
|
|
each(node.linksTo, function(link) {
|
|
sumTo += link.weight;
|
|
});
|
|
each(node.linksFrom, function(link) {
|
|
sumFrom += link.weight;
|
|
});
|
|
return Math.max(sumTo, sumFrom);
|
|
};
|
|
/**
|
|
* Get the offset in weight values of a point/link.
|
|
*/
|
|
node.offset = function(point, coll) {
|
|
var offset = 0;
|
|
for (var i = 0; i < node[coll].length; i++) {
|
|
if (node[coll][i] === point) {
|
|
return offset;
|
|
}
|
|
offset += node[coll][i].weight;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Return true if the node has a shape, otherwise all links are
|
|
* outgoing.
|
|
*/
|
|
node.hasShape = function() {
|
|
var outgoing = 0;
|
|
each(node.linksTo, function(link) {
|
|
if (link.outgoing) {
|
|
outgoing++;
|
|
}
|
|
});
|
|
return !node.linksTo.length || outgoing !== node.linksTo.length;
|
|
};
|
|
|
|
this.nodes.push(node);
|
|
}
|
|
return node;
|
|
},
|
|
|
|
/**
|
|
* Create a node column.
|
|
*/
|
|
createNodeColumn: function() {
|
|
var chart = this.chart,
|
|
column = [],
|
|
nodePadding = this.options.nodePadding;
|
|
|
|
column.sum = function() {
|
|
var sum = 0;
|
|
each(this, function(node) {
|
|
sum += node.getSum();
|
|
});
|
|
return sum;
|
|
};
|
|
/**
|
|
* Get the offset in pixels of a node inside the column.
|
|
*/
|
|
column.offset = function(node, factor) {
|
|
var offset = 0;
|
|
for (var i = 0; i < column.length; i++) {
|
|
if (column[i] === node) {
|
|
return offset;
|
|
}
|
|
offset += column[i].getSum() * factor + nodePadding;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Get the column height in pixels.
|
|
*/
|
|
column.top = function(factor) {
|
|
var height = 0;
|
|
for (var i = 0; i < column.length; i++) {
|
|
if (i > 0) {
|
|
height += nodePadding;
|
|
}
|
|
height += column[i].getSum() * factor;
|
|
}
|
|
return (chart.plotSizeY - height) / 2;
|
|
};
|
|
|
|
return column;
|
|
},
|
|
|
|
/**
|
|
* Create node columns by analyzing the nodes and the relations between
|
|
* incoming and outgoing links.
|
|
*/
|
|
createNodeColumns: function() {
|
|
var columns = [];
|
|
each(this.nodes, function(node) {
|
|
var fromColumn = 0,
|
|
i,
|
|
point;
|
|
|
|
// No links to this node, place it left
|
|
if (node.linksTo.length === 0) {
|
|
node.column = 0;
|
|
|
|
// There are incoming links, place it to the right of the
|
|
// highest order column that links to this one.
|
|
} else {
|
|
for (i = 0; i < node.linksTo.length; i++) {
|
|
point = node.linksTo[0];
|
|
if (point.fromNode.column > fromColumn) {
|
|
fromColumn = point.fromNode.column;
|
|
}
|
|
}
|
|
node.column = fromColumn + 1;
|
|
}
|
|
|
|
if (!columns[node.column]) {
|
|
columns[node.column] = this.createNodeColumn();
|
|
}
|
|
|
|
columns[node.column].push(node);
|
|
|
|
}, this);
|
|
return columns;
|
|
},
|
|
|
|
|
|
/**
|
|
* Return the presentational attributes.
|
|
*/
|
|
pointAttribs: function(point, state) {
|
|
|
|
var opacity = this.options.linkOpacity;
|
|
|
|
if (state) {
|
|
opacity = this.options.states[state].linkOpacity || opacity;
|
|
}
|
|
|
|
return {
|
|
fill: point.isNode ?
|
|
point.color : H.color(point.color).setOpacity(opacity).get()
|
|
};
|
|
},
|
|
|
|
|
|
/**
|
|
* Extend generatePoints by adding the nodes, which are Point objects
|
|
* but pushed to the this.nodes array.
|
|
*/
|
|
generatePoints: function() {
|
|
|
|
var nodeLookup = {};
|
|
|
|
H.Series.prototype.generatePoints.call(this);
|
|
|
|
if (!this.nodes) {
|
|
this.nodes = []; // List of Point-like node items
|
|
}
|
|
this.colorCounter = 0;
|
|
|
|
// Reset links from previous run
|
|
each(this.nodes, function(node) {
|
|
node.linksFrom.length = 0;
|
|
node.linksTo.length = 0;
|
|
});
|
|
|
|
// Create the node list and set up links
|
|
each(this.points, function(point) {
|
|
if (defined(point.from)) {
|
|
if (!nodeLookup[point.from]) {
|
|
nodeLookup[point.from] = this.createNode(point.from);
|
|
}
|
|
nodeLookup[point.from].linksFrom.push(point);
|
|
point.fromNode = nodeLookup[point.from];
|
|
|
|
// Point color defaults to the fromNode's color
|
|
|
|
point.color =
|
|
point.options.color || nodeLookup[point.from].color;
|
|
|
|
|
|
}
|
|
if (defined(point.to)) {
|
|
if (!nodeLookup[point.to]) {
|
|
nodeLookup[point.to] = this.createNode(point.to);
|
|
}
|
|
nodeLookup[point.to].linksTo.push(point);
|
|
point.toNode = nodeLookup[point.to];
|
|
}
|
|
|
|
point.name = point.name || point.id; // for use in formats
|
|
|
|
}, this);
|
|
},
|
|
|
|
/**
|
|
* Run pre-translation by generating the nodeColumns.
|
|
*/
|
|
translate: function() {
|
|
if (!this.processedXData) {
|
|
this.processData();
|
|
}
|
|
this.generatePoints();
|
|
|
|
this.nodeColumns = this.createNodeColumns();
|
|
|
|
var chart = this.chart,
|
|
inverted = chart.inverted,
|
|
options = this.options,
|
|
left = 0,
|
|
nodeWidth = options.nodeWidth,
|
|
nodeColumns = this.nodeColumns,
|
|
colDistance = (chart.plotSizeX - nodeWidth) /
|
|
(nodeColumns.length - 1),
|
|
curvy = (
|
|
(inverted ? -colDistance : colDistance) *
|
|
options.curveFactor
|
|
),
|
|
factor = Infinity;
|
|
|
|
// Find out how much space is needed. Base it on the translation
|
|
// factor of the most spaceous column.
|
|
each(this.nodeColumns, function(column) {
|
|
var height = chart.plotSizeY -
|
|
(column.length - 1) * options.nodePadding;
|
|
|
|
factor = Math.min(factor, height / column.sum());
|
|
});
|
|
|
|
each(this.nodeColumns, function(column) {
|
|
each(column, function(node) {
|
|
var sum = node.getSum(),
|
|
height = sum * factor,
|
|
fromNodeTop = (
|
|
column.top(factor) +
|
|
column.offset(node, factor)
|
|
),
|
|
nodeLeft = inverted ?
|
|
chart.plotSizeX - left :
|
|
left;
|
|
|
|
node.sum = sum;
|
|
|
|
// Draw the node
|
|
node.shapeType = 'rect';
|
|
if (!inverted) {
|
|
node.shapeArgs = {
|
|
x: nodeLeft,
|
|
y: fromNodeTop,
|
|
width: nodeWidth,
|
|
height: height
|
|
};
|
|
} else {
|
|
node.shapeArgs = {
|
|
x: nodeLeft - nodeWidth,
|
|
y: chart.plotSizeY - fromNodeTop - height,
|
|
width: nodeWidth,
|
|
height: height
|
|
};
|
|
}
|
|
node.shapeArgs.display = node.hasShape() ? '' : 'none';
|
|
|
|
// Pass test in drawPoints
|
|
node.plotY = 1;
|
|
|
|
// Draw the links from this node
|
|
each(node.linksFrom, function(point) {
|
|
var linkHeight = point.weight * factor,
|
|
fromLinkTop = node.offset(point, 'linksFrom') *
|
|
factor,
|
|
fromY = fromNodeTop + fromLinkTop,
|
|
toNode = point.toNode,
|
|
toColTop = nodeColumns[toNode.column].top(factor),
|
|
toY = (
|
|
toColTop +
|
|
(toNode.offset(point, 'linksTo') * factor) +
|
|
nodeColumns[toNode.column].offset(
|
|
toNode,
|
|
factor
|
|
)
|
|
),
|
|
nodeW = nodeWidth,
|
|
right = toNode.column * colDistance,
|
|
outgoing = point.outgoing;
|
|
|
|
if (inverted) {
|
|
fromY = chart.plotSizeY - fromY;
|
|
toY = chart.plotSizeY - toY;
|
|
right = chart.plotSizeX - right;
|
|
nodeW = -nodeW;
|
|
linkHeight = -linkHeight;
|
|
}
|
|
|
|
point.shapeType = 'path';
|
|
point.shapeArgs = {
|
|
d: [
|
|
'M', nodeLeft + nodeW, fromY,
|
|
'C', nodeLeft + nodeW + curvy, fromY,
|
|
right - curvy, toY,
|
|
right, toY,
|
|
'L',
|
|
right + (outgoing ? nodeW : 0),
|
|
toY + linkHeight / 2,
|
|
'L',
|
|
right,
|
|
toY + linkHeight,
|
|
'C', right - curvy, toY + linkHeight,
|
|
nodeLeft + nodeW + curvy, fromY + linkHeight,
|
|
nodeLeft + nodeW, fromY + linkHeight,
|
|
'z'
|
|
]
|
|
};
|
|
|
|
// Place data labels in the middle
|
|
point.dlBox = {
|
|
x: nodeLeft + (right - nodeLeft + nodeW) / 2,
|
|
y: fromY + (toY - fromY) / 2,
|
|
height: linkHeight,
|
|
width: 0
|
|
};
|
|
// Pass test in drawPoints
|
|
point.y = point.plotY = 1;
|
|
|
|
if (!point.color) {
|
|
point.color = node.color;
|
|
}
|
|
});
|
|
});
|
|
left += colDistance;
|
|
|
|
}, this);
|
|
},
|
|
/**
|
|
* Extend the render function to also render this.nodes together with
|
|
* the points.
|
|
*/
|
|
render: function() {
|
|
var points = this.points;
|
|
this.points = this.points.concat(this.nodes);
|
|
H.seriesTypes.column.prototype.render.call(this);
|
|
this.points = points;
|
|
},
|
|
animate: H.Series.prototype.animate
|
|
}, {
|
|
getClassName: function() {
|
|
return 'highcharts-link ' + Point.prototype.getClassName.call(this);
|
|
},
|
|
isValid: function() {
|
|
return this.isNode || typeof this.weight === 'number';
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* A `sankey` series. If the [type](#series.sankey.type) option is not
|
|
* specified, it is inherited from [chart.type](#chart.type).
|
|
*
|
|
* For options that apply to multiple series, it is recommended to add
|
|
* them to the [plotOptions.series](#plotOptions.series) options structure.
|
|
* To apply to all series of this specific type, apply it to [plotOptions.
|
|
* sankey](#plotOptions.sankey).
|
|
*
|
|
* @type {Object}
|
|
* @extends series,plotOptions.sankey
|
|
* @excluding dataParser,dataURL
|
|
* @product highcharts
|
|
* @apioption series.sankey
|
|
*/
|
|
|
|
|
|
/**
|
|
* A collection of options for the individual nodes. The nodes in a sankey
|
|
* diagram are auto-generated instances of `Highcharts.Point`, but options can
|
|
* be applied here and linked by the `id`.
|
|
*
|
|
* @sample highcharts/css/sankey/ Sankey diagram with node options
|
|
* @type {Array.<Object>}
|
|
* @product highcharts
|
|
* @apioption series.sankey.nodes
|
|
*/
|
|
|
|
/**
|
|
* The id of the auto-generated node, refering to the `from` or `to` setting of
|
|
* the link.
|
|
*
|
|
* @type {String}
|
|
* @product highcharts
|
|
* @apioption series.sankey.nodes.id
|
|
*/
|
|
|
|
/**
|
|
* The color of the auto generated node.
|
|
*
|
|
* @type {Color}
|
|
* @product highcharts
|
|
* @apioption series.sankey.nodes.color
|
|
*/
|
|
|
|
/**
|
|
* The color index of the auto generated node, especially for use in styled
|
|
* mode.
|
|
*
|
|
* @type {Number}
|
|
* @product highcharts
|
|
* @apioption series.sankey.nodes.colorIndex
|
|
*/
|
|
|
|
/**
|
|
* An array of data points for the series. For the `sankey` series type,
|
|
* points can be given in the following way:
|
|
*
|
|
* An array of objects with named values. The objects are point
|
|
* configuration objects as seen below. If the total number of data
|
|
* points exceeds the series' [turboThreshold](#series.area.turboThreshold),
|
|
* this option is not available.
|
|
*
|
|
* ```js
|
|
* data: [{
|
|
* from: 'Category1',
|
|
* to: 'Category2',
|
|
* weight: 2
|
|
* }, {
|
|
* from: 'Category1',
|
|
* to: 'Category3',
|
|
* weight: 5
|
|
* }]
|
|
* ```
|
|
*
|
|
* @type {Array<Object|Array|Number>}
|
|
* @extends series.line.data
|
|
* @excluding drilldown,marker,x,y
|
|
* @sample {highcharts} highcharts/chart/reflow-true/ Numerical values
|
|
* @sample {highcharts} highcharts/series/data-array-of-arrays/ Arrays of numeric x and y
|
|
* @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/ Arrays of datetime x and y
|
|
* @sample {highcharts} highcharts/series/data-array-of-name-value/ Arrays of point.name and y
|
|
* @sample {highcharts} highcharts/series/data-array-of-objects/ Config objects
|
|
* @product highcharts
|
|
* @apioption series.sankey.data
|
|
*/
|
|
|
|
|
|
/**
|
|
* The node that the link runs from.
|
|
*
|
|
* @type {String}
|
|
* @product highcharts
|
|
* @apioption series.sankey.data.from
|
|
*/
|
|
|
|
/**
|
|
* The node that the link runs to.
|
|
*
|
|
* @type {String}
|
|
* @product highcharts
|
|
* @apioption series.sankey.data.to
|
|
*/
|
|
|
|
/**
|
|
* Whether the link goes out of the system.
|
|
*
|
|
* @type {Boolean}
|
|
* @default false
|
|
* @sample highcharts/plotoptions/sankey-outgoing
|
|
* Sankey chart with outgoing links
|
|
* @product highcharts
|
|
* @apioption series.sankey.data.outgoing
|
|
*/
|
|
|
|
/**
|
|
* The weight of the link.
|
|
*
|
|
* @type {Number}
|
|
* @product highcharts
|
|
* @apioption series.sankey.data.weight
|
|
*/
|
|
|
|
}(Highcharts));
|
|
}));
|