sankey.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. "use strict";
  2. var __rest = (this && this.__rest) || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
  5. t[p] = s[p];
  6. if (s != null && typeof Object.getOwnPropertySymbols === "function")
  7. for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  8. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
  9. t[p[i]] = s[p[i]];
  10. }
  11. return t;
  12. };
  13. Object.defineProperty(exports, "__esModule", { value: true });
  14. exports.Sankey = void 0;
  15. const util_1 = require("@antv/util");
  16. const sankey_1 = require("../data/sankey");
  17. const helper_1 = require("../utils/helper");
  18. const mark_1 = require("../utils/mark");
  19. const utils_1 = require("./utils");
  20. /**
  21. * @todo Add interaction
  22. * @todo Add source-link color mode
  23. */
  24. const Sankey = (options) => {
  25. const DEFAULT_LAYOUT_OPTIONS = {
  26. nodeId: (d) => d.key,
  27. nodeWidth: 0.02,
  28. nodePadding: 0.02,
  29. };
  30. const DEFAULT_NODE_OPTIONS = {
  31. type: 'polygon',
  32. axis: false,
  33. legend: false,
  34. encode: {
  35. shape: 'polygon',
  36. x: 'x',
  37. y: 'y',
  38. },
  39. scale: {
  40. x: { type: 'identity' },
  41. y: { type: 'identity' },
  42. },
  43. style: {
  44. stroke: '#000',
  45. },
  46. };
  47. const DEFAULT_LINK_OPTIONS = {
  48. type: 'polygon',
  49. axis: false,
  50. legend: false,
  51. encode: {
  52. shape: 'ribbon',
  53. x: 'x',
  54. y: 'y',
  55. },
  56. style: {
  57. fillOpacity: 0.5,
  58. stroke: undefined,
  59. },
  60. };
  61. const DEFAULT_LABEL_OPTIONS = {
  62. textAlign: (d) => (d.x[0] < 0.5 ? 'start' : 'end'),
  63. position: (d) => (d.x[0] < 0.5 ? 'right' : 'left'),
  64. fontSize: 10,
  65. };
  66. return () => {
  67. const { data, encode = {}, scale, style = {}, layout = {}, nodeLabels = [], linkLabels = [], animate = {}, tooltip = {}, } = options;
  68. // Initialize data, generating nodes by link if is not specified.
  69. const { links, nodes } = (0, utils_1.initializeData)(data, encode);
  70. // Extract encode for node and link.
  71. const nodeEncode = (0, helper_1.subObject)(encode, 'node');
  72. const linkEncode = (0, helper_1.subObject)(encode, 'link');
  73. const { key: nodeKey = (d) => d.key, color = nodeKey } = nodeEncode;
  74. // Transform data, using nodeKey as nodeId.
  75. const { links: linkData, nodes: nodeData } = (0, sankey_1.Sankey)(Object.assign(Object.assign(Object.assign({}, DEFAULT_LAYOUT_OPTIONS), { nodeId: (0, utils_1.field)(nodeKey) }), layout))({ links, nodes });
  76. // Extract label style and apply defaults.
  77. const _a = (0, helper_1.subObject)(style, 'label'), { text = nodeKey, spacing = 5 } = _a, labelStyle = __rest(_a, ["text", "spacing"]);
  78. const key1 = (0, utils_1.field)(nodeKey);
  79. const nodeTooltip = (0, mark_1.subTooltip)(tooltip, 'node', {
  80. title: key1,
  81. items: [{ field: 'value' }],
  82. }, true);
  83. const linkTooltip = (0, mark_1.subTooltip)(tooltip, 'link', {
  84. title: '',
  85. items: [
  86. (d) => ({ name: 'source', value: key1(d.source) }),
  87. (d) => ({ name: 'target', value: key1(d.target) }),
  88. ],
  89. });
  90. return [
  91. (0, util_1.deepMix)({}, DEFAULT_NODE_OPTIONS, {
  92. data: nodeData,
  93. encode: Object.assign(Object.assign({}, nodeEncode), { color }),
  94. scale,
  95. style: (0, helper_1.subObject)(style, 'node'),
  96. labels: [
  97. Object.assign(Object.assign(Object.assign({}, DEFAULT_LABEL_OPTIONS), { text, dx: (d) => (d.x[0] < 0.5 ? spacing : -spacing) }), labelStyle),
  98. ...nodeLabels,
  99. ],
  100. tooltip: nodeTooltip,
  101. animate: (0, mark_1.maybeAnimation)(animate, 'node'),
  102. axis: false,
  103. }),
  104. (0, util_1.deepMix)({}, DEFAULT_LINK_OPTIONS, {
  105. data: linkData,
  106. encode: linkEncode,
  107. labels: linkLabels,
  108. style: Object.assign({ fill: linkEncode.color ? undefined : '#aaa', strokeWidth: 0 }, (0, helper_1.subObject)(style, 'link')),
  109. tooltip: linkTooltip,
  110. animate: (0, mark_1.maybeAnimation)(animate, 'link'),
  111. }),
  112. ];
  113. };
  114. };
  115. exports.Sankey = Sankey;
  116. exports.Sankey.props = {};
  117. //# sourceMappingURL=sankey.js.map