treemap.js 4.6 KB

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