1 | import { Category } from '../../attr';
|
2 | import Component from '../../base/component';
|
3 | import CoordController from '../../controller/coord';
|
4 | import Coord from '../../coord';
|
5 | import { hierarchy, treemap, treemapBinary } from '../../deps/d3-hierarchy/src';
|
6 | import { jsx } from '../../jsx';
|
7 | import { Ref } from '../../types';
|
8 |
|
9 | export default (View) => {
|
10 | return class Treemap extends Component {
|
11 | coordController: CoordController;
|
12 | coord: Coord;
|
13 | color: Category;
|
14 | triggerRef: Ref[];
|
15 |
|
16 | constructor(props, context, updater?) {
|
17 | super(props, context, updater);
|
18 | const { coord, color, data } = props;
|
19 | const { width, height, theme } = context;
|
20 | this.coordController = new CoordController();
|
21 | const { coordController } = this;
|
22 | this.coord = coordController.create(coord, { width, height });
|
23 | this.color = new Category({
|
24 | range: theme.colors,
|
25 | ...color,
|
26 | data,
|
27 | });
|
28 | }
|
29 | treemapLayout() {
|
30 | const { props, coord, color: colorAttr } = this;
|
31 | const { data, value } = props;
|
32 |
|
33 | const root = hierarchy({ children: data })
|
34 | .sum(function(d) {
|
35 | return d[value];
|
36 | })
|
37 | .sort((a, b) => b[value] - a[value]);
|
38 |
|
39 | const treemapLayout = treemap()
|
40 |
|
41 | .tile(treemapBinary)
|
42 |
|
43 |
|
44 | .round(false);
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 | const nodes = treemapLayout(root);
|
53 | return nodes.children.map((item) => {
|
54 | const { data, x0, y0, x1, y1 } = item;
|
55 | const color = colorAttr.mapping(data[colorAttr.field]);
|
56 | const rect = coord.convertRect({
|
57 | x: [x0, x1],
|
58 | y: [y0, y1],
|
59 | });
|
60 | return {
|
61 | key: data.key,
|
62 | origin: data,
|
63 | color,
|
64 | ...rect,
|
65 | };
|
66 | });
|
67 | }
|
68 |
|
69 | render() {
|
70 | const nodes = this.treemapLayout();
|
71 | const { props, coord } = this;
|
72 | return <View nodes={nodes} {...props} coord={coord} />;
|
73 | }
|
74 | };
|
75 | };
|