treemap.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  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.Treemap = void 0;
  15. const util_1 = require("@antv/util");
  16. const d3_hierarchy_1 = require("d3-hierarchy");
  17. const helper_1 = require("../utils/helper");
  18. const size_1 = require("../utils/size");
  19. const mark_1 = require("../utils/mark");
  20. const utils_1 = require("./utils");
  21. function getTileMethod(tile, ratio) {
  22. const tiles = {
  23. treemapBinary: d3_hierarchy_1.treemapBinary,
  24. treemapDice: d3_hierarchy_1.treemapDice,
  25. treemapSlice: d3_hierarchy_1.treemapSlice,
  26. treemapSliceDice: d3_hierarchy_1.treemapSliceDice,
  27. treemapSquarify: d3_hierarchy_1.treemapSquarify,
  28. treemapResquarify: d3_hierarchy_1.treemapResquarify,
  29. };
  30. const tileMethod = tile === 'treemapSquarify' ? tiles[tile].ratio(ratio) : tiles[tile];
  31. if (!tileMethod) {
  32. throw new TypeError('Invalid tile method!');
  33. }
  34. return tileMethod;
  35. }
  36. function dataTransform(data, layout, encode) {
  37. const { value } = encode;
  38. const tileMethod = getTileMethod(layout.tile, layout.ratio);
  39. const root = (0, utils_1.generateHierarchyRoot)(data, layout.path);
  40. // Calculate the value and sort.
  41. value
  42. ? root
  43. .sum((d) => layout.ignoreParentValue && d.children ? 0 : (0, utils_1.field)(value)(d))
  44. .sort(layout.sort)
  45. : root.count();
  46. (0, d3_hierarchy_1.treemap)()
  47. .tile(tileMethod)
  48. // @ts-ignore
  49. .size(layout.size)
  50. .round(layout.round)
  51. .paddingInner(layout.paddingInner)
  52. .paddingOuter(layout.paddingOuter)
  53. .paddingTop(layout.paddingTop)
  54. .paddingRight(layout.paddingRight)
  55. .paddingBottom(layout.paddingBottom)
  56. .paddingLeft(layout.paddingLeft)(root);
  57. return root
  58. .descendants()
  59. .map((d) => Object.assign(d, {
  60. x: [d.x0, d.x1],
  61. y: [d.y0, d.y1],
  62. }))
  63. .filter(typeof layout.layer === 'function'
  64. ? layout.layer
  65. : (d) => d.height === layout.layer);
  66. }
  67. const Treemap = (options) => {
  68. return (viewOptions) => {
  69. const { width, height } = (0, size_1.getBBoxSize)(viewOptions);
  70. const { data, encode = {}, scale, style = {}, layout = {}, labels = [], tooltip = {} } = options, resOptions = __rest(options, ["data", "encode", "scale", "style", "layout", "labels", "tooltip"]);
  71. // Defaults
  72. const DEFAULT_LAYOUT_OPTIONS = {
  73. tile: 'treemapSquarify',
  74. ratio: 0.5 * (1 + Math.sqrt(5)),
  75. size: [width, height],
  76. round: false,
  77. ignoreParentValue: true,
  78. padding: 0,
  79. paddingInner: 0,
  80. paddingOuter: 0,
  81. paddingTop: 0,
  82. paddingRight: 0,
  83. paddingBottom: 0,
  84. paddingLeft: 0,
  85. sort: (a, b) => b.value - a.value,
  86. layer: 0,
  87. };
  88. const DEFAULT_OPTIONS = {
  89. type: 'rect',
  90. axis: false,
  91. encode: {
  92. x: 'x',
  93. y: 'y',
  94. color: (d) => d.data.parent.name,
  95. },
  96. scale: {
  97. x: { domain: [0, width], range: [0, 1] },
  98. y: { domain: [0, height], range: [0, 1] },
  99. },
  100. style: {
  101. stroke: '#fff',
  102. },
  103. };
  104. const DEFAULT_LABEL_OPTIONS = {
  105. fontSize: 10,
  106. text: (d) => d.data.name,
  107. position: 'inside',
  108. fill: '#000',
  109. textOverflow: 'clip',
  110. wordWrap: true,
  111. maxLines: 1,
  112. wordWrapWidth: (d) => d.x1 - d.x0,
  113. };
  114. const DEFAULT_TOOLTIP_OPTIONS = {
  115. title: (d) => d.data.name,
  116. items: [{ field: 'value' }],
  117. };
  118. // Data
  119. const transformedData = dataTransform(data, (0, util_1.deepMix)({}, DEFAULT_LAYOUT_OPTIONS, layout), encode);
  120. // Label
  121. const labelStyle = (0, helper_1.subObject)(style, 'label');
  122. return [
  123. (0, util_1.deepMix)({}, DEFAULT_OPTIONS, Object.assign(Object.assign({ data: transformedData, encode,
  124. scale,
  125. style, labels: [
  126. Object.assign(Object.assign({}, DEFAULT_LABEL_OPTIONS), labelStyle),
  127. ...labels,
  128. ] }, resOptions), { tooltip: (0, mark_1.maybeTooltip)(tooltip, DEFAULT_TOOLTIP_OPTIONS), axis: false })),
  129. ];
  130. };
  131. };
  132. exports.Treemap = Treemap;
  133. exports.Treemap.props = {};
  134. //# sourceMappingURL=treemap.js.map