Skip to content

Commit 214d1f6

Browse files
AlexanderLanderosAlexanderLanderos
committed
created new files for the updated component map and new dependencies
1 parent f148347 commit 214d1f6

File tree

6 files changed

+400
-32
lines changed

6 files changed

+400
-32
lines changed

‎package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,11 +106,17 @@
106106
"webpack-cli": "^3.3.12"
107107
},
108108
"dependencies": {
109+
"@visx/gradient": "^1.0.0",
110+
"@visx/group": "^1.0.0",
111+
"@visx/hierarchy": "^1.0.0",
112+
"@visx/responsive": "^1.0.0",
113+
"@visx/shape": "^1.0.0",
109114
"acorn": "^7.3.1",
110115
"acorn-jsx": "^5.2.0",
111116
"bower": "^1.8.8",
112117
"cookie": "^0.4.1",
113118
"d3": "^5.16.0",
119+
"d3-shape": "^2.0.0",
114120
"d3-zoom": "^1.8.3",
115121
"flatted": "^3.0.4",
116122
"immer": "^3.3.0",

‎src/app/components/Example.tsx

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
import React, { useState } from 'react';
2+
import { Group } from '@visx/group';
3+
import { hierarchy, Tree } from '@visx/hierarchy';
4+
import { LinearGradient } from '@visx/gradient';
5+
import { pointRadial } from 'd3-shape';
6+
import useForceUpdate from './useForceUpdate';
7+
import LinkControls from './LinkControls';
8+
import getLinkComponent from './getLinkComponent';
9+
import { chartDefaultProps } from 'react-google-charts/dist/default-props';
10+
11+
interface TreeNode {
12+
name: string;
13+
isExpanded?: boolean;
14+
children?: TreeNode[];
15+
}
16+
17+
const data: TreeNode = {
18+
name: 'T',
19+
children: [
20+
{
21+
name: 'A',
22+
children: [
23+
{ name: 'A1' },
24+
{ name: 'A2' },
25+
{ name: 'A3' },
26+
{
27+
name: 'C',
28+
children: [
29+
{
30+
name: 'C1',
31+
},
32+
{
33+
name: 'D',
34+
children: [
35+
{
36+
name: 'D1',
37+
},
38+
{
39+
name: 'D2',
40+
},
41+
{
42+
name: 'D3',
43+
},
44+
],
45+
},
46+
],
47+
},
48+
],
49+
},
50+
{ name: 'Z' },
51+
{
52+
name: 'B',
53+
children: [{ name: 'B1' }, { name: 'B2' }, { name: 'B3' }],
54+
},
55+
],
56+
};
57+
58+
const defaultMargin = { top: 30, left: 30, right: 30, bottom: 70 };
59+
60+
export type LinkTypesProps = {
61+
width: number;
62+
height: number;
63+
margin?: { top: number; right: number; bottom: number; left: number };
64+
};
65+
66+
export default function Example({
67+
width: totalWidth,
68+
height: totalHeight,
69+
margin = defaultMargin,
70+
}: LinkTypesProps) {
71+
const [layout, setLayout] = useState<string>('cartesian');
72+
const [orientation, setOrientation] = useState<string>('horizontal');
73+
const [linkType, setLinkType] = useState<string>('diagonal');
74+
const [stepPercent, setStepPercent] = useState<number>(0.5);
75+
const forceUpdate = useForceUpdate();
76+
77+
const innerWidth = totalWidth - margin.left - margin.right;
78+
const innerHeight = totalHeight - margin.top - margin.bottom;
79+
80+
let origin: { x: number; y: number };
81+
let sizeWidth: number;
82+
let sizeHeight: number;
83+
84+
if (layout === 'polar') {
85+
origin = {
86+
x: innerWidth / 2,
87+
y: innerHeight / 2,
88+
};
89+
sizeWidth = 2 * Math.PI;
90+
sizeHeight = Math.min(innerWidth, innerHeight) / 2;
91+
} else {
92+
origin = { x: 0, y: 0 };
93+
if (orientation === 'vertical') {
94+
sizeWidth = innerWidth;
95+
sizeHeight = innerHeight;
96+
} else {
97+
sizeWidth = innerHeight;
98+
sizeHeight = innerWidth;
99+
}
100+
}
101+
102+
const LinkComponent = getLinkComponent({ layout, linkType, orientation });
103+
104+
return totalWidth < 10 ? null : (
105+
<div>
106+
<LinkControls
107+
layout={layout}
108+
orientation={orientation}
109+
linkType={linkType}
110+
stepPercent={stepPercent}
111+
setLayout={setLayout}
112+
setOrientation={setOrientation}
113+
setLinkType={setLinkType}
114+
setStepPercent={setStepPercent}
115+
/>
116+
<svg width={totalWidth} height={totalHeight}>
117+
<LinearGradient id='links-gradient' from='#fd9b93' to='#fe6e9e' />
118+
<rect width={totalWidth} height={totalHeight} rx={14} fill='#242529' />
119+
<Group top={margin.top} left={margin.left}>
120+
<Tree
121+
root={hierarchy(data, (d) => (d.isExpanded ? null : d.children))}
122+
size={[sizeWidth, sizeHeight]}
123+
separation={(a, b) => (a.parent === b.parent ? 1 : 0.5) / a.depth}
124+
>
125+
{(tree) => (
126+
<Group top={origin.y} left={origin.x}>
127+
{tree.links().map((link, i) => (
128+
<LinkComponent
129+
key={i}
130+
data={link}
131+
percent={stepPercent}
132+
stroke='rgb(254,110,158,0.6)'
133+
strokeWidth='1'
134+
fill='none'
135+
/>
136+
))}
137+
138+
{tree.descendants().map((node, key) => {
139+
const width = 40;
140+
const height = 20;
141+
142+
let top: number;
143+
let left: number;
144+
if (layout === 'polar') {
145+
const [radialX, radialY] = pointRadial(node.x, node.y);
146+
top = radialY;
147+
left = radialX;
148+
} else if (orientation === 'vertical') {
149+
top = node.y;
150+
left = node.x;
151+
} else {
152+
top = node.x;
153+
left = node.y;
154+
}
155+
156+
return (
157+
<Group top={top} left={left} key={key}>
158+
{node.depth === 0 && (
159+
<circle
160+
r={12}
161+
fill="url('#links-gradient')"
162+
onClick={() => {
163+
node.data.isExpanded = !node.data.isExpanded;
164+
console.log(node);
165+
forceUpdate();
166+
}}
167+
/>
168+
)}
169+
{node.depth !== 0 && (
170+
<rect
171+
height={height}
172+
width={width}
173+
y={-height / 2}
174+
x={-width / 2}
175+
fill='#272b4d'
176+
stroke={node.data.children ? '#03c0dc' : '#26deb0'}
177+
strokeWidth={1}
178+
strokeDasharray={node.data.children ? '0' : '2,2'}
179+
strokeOpacity={node.data.children ? 1 : 0.6}
180+
rx={node.data.children ? 0 : 10}
181+
onClick={() => {
182+
node.data.isExpanded = !node.data.isExpanded;
183+
console.log(node);
184+
forceUpdate();
185+
}}
186+
/>
187+
)}
188+
<text
189+
dy='.33em'
190+
fontSize={9}
191+
fontFamily='Arial'
192+
textAnchor='middle'
193+
style={{ pointerEvents: 'none' }}
194+
fill={
195+
node.depth === 0
196+
? '#71248e'
197+
: node.children
198+
? 'white'
199+
: '#26deb0'
200+
}
201+
>
202+
{node.data.name}
203+
</text>
204+
</Group>
205+
);
206+
})}
207+
</Group>
208+
)}
209+
</Tree>
210+
</Group>
211+
</svg>
212+
</div>
213+
);
214+
}

‎src/app/components/LinkControls.tsx

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react';
2+
3+
const controlStyles = { fontSize: 10 };
4+
5+
type Props = {
6+
layout: string;
7+
orientation: string;
8+
linkType: string;
9+
stepPercent: number;
10+
setLayout: (layout: string) => void;
11+
setOrientation: (orientation: string) => void;
12+
setLinkType: (linkType: string) => void;
13+
setStepPercent: (percent: number) => void;
14+
};
15+
16+
export default function LinkControls({
17+
layout,
18+
orientation,
19+
linkType,
20+
stepPercent,
21+
setLayout,
22+
setOrientation,
23+
setLinkType,
24+
setStepPercent,
25+
}: Props) {
26+
return (
27+
<div style={controlStyles}>
28+
<label>Layout:</label>&nbsp;
29+
<select
30+
onClick={(e) => e.stopPropagation()}
31+
onChange={(e) => setLayout(e.target.value)}
32+
value={layout}
33+
>
34+
<option value='cartesian'>Cartesian</option>
35+
<option value='polar'>Polar</option>
36+
</select>
37+
&nbsp;&nbsp;
38+
<label>Orientation:</label>&nbsp;
39+
<select
40+
onClick={(e) => e.stopPropagation()}
41+
onChange={(e) => setOrientation(e.target.value)}
42+
value={orientation}
43+
disabled={layout === 'polar'}
44+
>
45+
<option value='vertical'>Vertical</option>
46+
<option value='horizontal'>Horizontal</option>
47+
</select>
48+
&nbsp;&nbsp;
49+
<label>Link:</label>&nbsp;
50+
<select
51+
onClick={(e) => e.stopPropagation()}
52+
onChange={(e) => setLinkType(e.target.value)}
53+
value={linkType}
54+
>
55+
<option value='diagonal'>Diagonal</option>
56+
<option value='step'>Step</option>
57+
<option value='curve'>Curve</option>
58+
<option value='line'>Line</option>
59+
</select>
60+
{linkType === 'step' && layout !== 'polar' && (
61+
<>
62+
&nbsp;&nbsp;
63+
<label>Step:</label>&nbsp;
64+
<input
65+
onClick={(e) => e.stopPropagation()}
66+
type='range'
67+
min={0}
68+
max={1}
69+
step={0.1}
70+
onChange={(e) => setStepPercent(Number(e.target.value))}
71+
value={stepPercent}
72+
disabled={linkType !== 'step' || layout === 'polar'}
73+
/>
74+
</>
75+
)}
76+
</div>
77+
);
78+
}

0 commit comments

Comments
 (0)