-
Notifications
You must be signed in to change notification settings - Fork 29
/
App.tsx
111 lines (103 loc) · 3.66 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import "./App.css";
import ContainerDimensions from "react-container-dimensions";
import { scaleSequential } from "d3-scale";
import * as chromatic from "d3-scale-chromatic";
import { hot } from "react-hot-loader";
import * as React from "react";
// import { data } from "../data/data";
import { data as generatedData } from "../data/generateData";
import TreeMap, { ColorModel } from "../components/TreeMap";
import { NumberOfChildrenPlacement } from "../components/Node";
interface TreeMapInPutData {
name: string;
value?: number;
children?: Array<TreeMapInPutData>;
className?: string;
}
class App extends React.Component<unknown, { data: TreeMapInPutData }> {
private treeMapRef: React.RefObject<TreeMap<TreeMapInPutData>>;
constructor(props) {
super(props);
this.state = {
data: generatedData,
};
this.treeMapRef = React.createRef();
}
// componentDidMount() {
// console.log(
// "componentDidMount: ",
// this.treeMapRef && this.treeMapRef.current
// );
// }
public render() {
return (
<React.Fragment>
<ContainerDimensions>
{({ width }) => {
return (
<TreeMap<TreeMapInPutData>
ref={this.treeMapRef}
id="myTreeMap"
width={width}
height={400}
data={this.state.data}
className="AppTreeMap"
nodeClassName="AppTreeMap__node"
valueFn={(value: number) => {
return `${value.toString().charAt(0)} min`;
}}
// levelsToDisplay={2}
// tooltipOffsetY={25}
// tooltipClassName="MyCustomTooltip"
// tooltipPlacement="top"
// disableTooltip={true}
// valueUnit={"MB"}
// svgClassName="AppTreeMap__svg"
// paddingInner={2}
// onZoom={(level, id, items) => console.log({ level, id, items })}
// onTreeMapDidMount={(treeMap: TreeMap<TreeMapInPutData>) =>
// console.log(treeMap.getZoomLevel())
// }
nodeStyle={{
fontSize: 12,
paddingTop: 2,
paddingLeft: 5,
paddingRight: 5,
}}
numberOfChildrenPlacement={NumberOfChildrenPlacement.TopRight}
customD3ColorScale={scaleSequential(
chromatic.interpolateSpectral
)}
colorModel={ColorModel.OneEachChildren}
// svgStyle={{fontFamily: "'Courier New', Courier, monospace"}}
// nodeStyle={{fill: "black", stroke: "white"}}
// disableBreadcrumb={true}
// hideNumberOfChildren={true}
// hideValue={true}
darkNodeBorderColor="silver"
darkNodeTextColor="white"
lightNodeBorderColor="brown"
lightNodeTextColor="brown"
// splitRegExp={/(?=[A-Z][^A-Z])/g}
/>
);
}}
</ContainerDimensions>
<div>
<a onClick={() => this.treeMapRef.current.resetZoom()}>Zoom Reset</a>
</div>
<div>
<a onClick={() => this.treeMapRef.current.zoomOut()}>Zoom out</a>
</div>
<div>
<a
onClick={() => console.log(this.treeMapRef.current.getZoomLevel())}
>
Zoom level
</a>
</div>
</React.Fragment>
);
}
}
export default hot(module)(App);