Skip to content

Commit 5b832df

Browse files
micschromicschro
authored
Merge pull request #6 from yWorks/dev
Dev
2 parents e57bdf1 + c41053c commit 5b832df

File tree

13 files changed

+299
-153
lines changed

13 files changed

+299
-153
lines changed

‎README.md‎

Lines changed: 95 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -9,57 +9,105 @@ This component enables seamless integration for displaying organization charts i
99

1010
## Getting Started
1111

12-
1. **Installation:**
13-
Install the component via npm by running the following command in your project directory:
14-
```bash
15-
npm install @yworks/react-yfiles-orgchart
12+
### Prerequisites
13+
14+
To use the Organization Chart component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required.
15+
You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
16+
See [Licensing](https://docs.yworks.com/react-yfiles-orgchart/introduction/licensing) for more information on this topic.
17+
18+
You can learn how to work with the yFiles npm module in our [Developer’s Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module). A convenient way of getting access to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-dev-suite).
19+
20+
### Project Setup
21+
22+
1. **Installation**
23+
24+
In addition to yFiles, the Organization Chart component requires React to be installed in your project.
25+
If you want to start your project from scratch, we recommend using vite:
26+
```
27+
npm create vite@latest my-orgchart-app -- --template react-ts
1628
```
17-
18-
The organization chart module has certain peer dependencies that must be installed within your project. Since it is a React module, `react` and `react-dom` dependencies are needed.
19-
20-
Additionally, the component relies on the [yFiles](https://www.yworks.com/yfiles-overview) library which is not available on the public npm registry. Instructions on how to work with the yFiles npm module in our [Developer's Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module).
2129

22-
Ensure that the dependencies in the `package.json` file resemble the following:
30+
Add the yFiles dependency:
31+
```
32+
npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
33+
```
34+
35+
<details>
36+
37+
<summary>Sample <code>package.json</code> dependencies</summary>
38+
The resulting package.json dependencies should resemble the following:
39+
2340
```json
24-
{
25-
...
26-
"dependencies": {
27-
"@yworks/react-yfiles-orgchart": "^1.0.0",
28-
"react": "^18.2.0",
29-
"react-dom": "^18.2.0",
30-
"yfiles": "<yFiles package path>/lib/yfiles-26.0.0.tgz",
31-
...
41+
"dependencies": {
42+
"react": "^18.2.0",
43+
"react-dom": "^18.2.0",
44+
"yfiles": "./lib-dev/yfiles-26.0.0.tgz"
3245
}
33-
}
46+
```
47+
</details>
48+
49+
Now, the component itself can be installed:
50+
```bash
51+
npm install @yworks/react-yfiles-orgchart
52+
```
53+
54+
2. **License**
55+
56+
Be sure to invoke the `registerLicense` function before using the Organization Chart React component.
57+
When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package.
58+
For licensed users, the license data is provided separately.
59+
60+
<details>
61+
62+
<summary>License registration</summary>
63+
64+
Import or paste your license data and register the license, e.g. in `App.tsx`:
65+
66+
```js
67+
import yFilesLicense from './license.json'
68+
69+
registerLicense(yFilesLicense)
70+
```
71+
</details>
72+
73+
3. **Stylesheet**
74+
75+
Make sure to import the CSS stylesheet as well:
76+
77+
```js
78+
import '@yworks/react-yfiles-orgchart/dist/index.css'
3479
```
3580

36-
2. **License:**
37-
Before using the component, a valid [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) version is required. You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
38-
Be sure to invoke the `registerLicense` function to furnish the license file before utilizing the organization chart component.
39-
40-
3. **Usage:**
41-
Utilize the component in your application.
42-
Make sure to import the CSS stylesheet 'index.css' as the component requires it for correct functionality.
43-
44-
```tsx
45-
import { CustomOrgChartData, OrgChart, registerLicense } from '@yworks/react-yfiles-orgchart'
46-
import '@yworks/react-yfiles-orgchart/dist/index.css'
47-
import yFilesLicense from './license.json'
81+
4. **Usage**
82+
83+
You are now all set to utilize the Organization Chart component with your data!
84+
See a basic example `App.tsx` below:
85+
86+
```tsx
87+
import {
88+
CustomOrgChartData,
89+
OrgChart,
90+
registerLicense
91+
} from '@yworks/react-yfiles-orgchart'
92+
93+
import '@yworks/react-yfiles-orgchart/dist/index.css'
94+
95+
import yFilesLicense from './license.json'
96+
97+
registerLicense(yFilesLicense)
4898

49-
function App() {
50-
registerLicense(yFilesLicense)
51-
52-
const data = [
53-
{ id: 0, name: 'Eric Joplin', subordinates: [1, 2] },
54-
{ id: 1, name: 'Amy Kain' },
55-
{ id: 2, name: 'David Kerry' }
56-
] satisfies CustomOrgChartData<{name: string}>
57-
58-
return <OrgChart data={data}></OrgChart>
59-
}
60-
61-
export default App
62-
```
99+
const data = [
100+
{ id: 0, name: 'Eric Joplin', subordinates: [1, 2] },
101+
{ id: 1, name: 'Amy Kain' },
102+
{ id: 2, name: 'David Kerry' }
103+
] satisfies CustomOrgChartData<{name: string}>
104+
105+
function App() {
106+
return <OrgChart data={data}></OrgChart>
107+
}
108+
109+
export default App
110+
```
63111

64112
> **Note:** By default, the `OrgChart` component adjusts its size to match the size of its parent element. Therefore, it is necessary to set the dimensions of the containing element or apply styling directly to the `OrgChart` component. This can be achieved by defining a CSS class or applying inline styles.
65113
@@ -120,5 +168,8 @@ For more information, see the `LICENSE` file.
120168

121169
Explore the possibilities of visualizing organizational structures with the yFiles Organization Chart Component. For further information about [yFiles for HTML](https://www.yworks.com/yfiles-overview) and our company, please visit [yWorks.com](https://www.yworks.com).
122170

171+
If you are exploring a different use case and require another React component,
172+
please take a look at the available [React components](https://www.yworks.com/yfiles-react-components) powered by yFiles!
173+
123174
For support or feedback, please reach out to [our support team](https://www.yworks.com/contact) or open an [issue on GitHub](https://github.com/yWorks/react-yfiles-orgchart/issues). Happy diagramming!
124175

‎docs/config.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"mainComponents": ["OrgChart", "OrgChartProvider"]
2+
"mainComponents": ["OrgChart", "OrgChartProvider"],
3+
"componentPropsDocText": "data={data}"
34
}

‎docs/features/Tooltips.mdx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,26 @@ You can also specify custom React components to render the tooltips according to
2828
<Playground
2929
code={`
3030
31-
function MyTooltipComponent({ data: { name } }: RenderTooltipProps<CustomOrgChartItem>) {
32-
return <div style={{ backgroundColor: "tomato", padding: 5, borderRadius: 10, color: "white" }}>{name}</div>
31+
function MyTooltipComponent({
32+
data
33+
}: RenderTooltipProps<CustomOrgChartItem | OrgChartConnection<CustomOrgChartItem>>) {
34+
let text = ''
35+
if ('name' in data) {
36+
// orgchart item tooltip
37+
text = data.name!
38+
} else if ('source' in data) {
39+
// orgchart connection tooltip
40+
text = \`${data.source.name} → ${data.target.name}\`
41+
}
42+
43+
return (
44+
<div style={{ backgroundColor: 'tomato', padding: 5, borderRadius: 10, color: 'white' }}>
45+
{text}
46+
</div>
47+
)
3348
}
3449
50+
3551
function App () {
3652
return (
3753
<OrgChart

‎docs/introduction/GettingStarted.mdx‎

Lines changed: 80 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,54 +9,98 @@ import TypeLink from '../../components/TypeLink.astro'
99

1010
## Prerequisites
1111

12-
For using the component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required. You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL). See [Licensing](licensing) for more information on this topic.
12+
To use the Organization Chart component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required.
13+
You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
14+
See [Licensing](https://docs.yworks.com/react-yfiles-orgchart/introduction/licensing) for more information on this topic.
1315

14-
## Project setup
16+
You can learn how to work with the yFiles npm module in our [Developer’s Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module). A convenient way of getting access to yFiles is to use the [yFiles Dev Suite](https://www.npmjs.com/package/yfiles-dev-suite).
1517

16-
1. **Installation:**
17-
Install the component via npm by running the following command in your project directory:
18-
```bash
19-
npm install @yworks/react-yfiles-orgchart
18+
## Project Setup
19+
20+
1. **Installation**
21+
22+
In addition to yFiles, the Organization Chart component requires React to be installed in your project.
23+
If you want to start your project from scratch, we recommend using vite:
24+
```
25+
npm create vite@latest my-orgchart-app -- --template react-ts
26+
```
27+
28+
Add the yFiles dependency:
29+
```
30+
npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
2031
```
2132

22-
The organization chart module has some peer dependencies that must be installed somewhere in your project. Since it is a React module, `react` and `react-dom` dependencies are needed.
33+
<details>
2334

24-
Additionally, the component relies on the [yFiles](https://www.yworks.com/yfiles-overview) library which is not published to the public npm registry. You can learn how to work with the yFiles npm module in our [Developer's Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module).
35+
<summary>Sample <code>package.json</code> dependencies</summary>
36+
The resulting package.json dependencies should resemble the following:
2537

26-
Ensure that the dependencies in the `package.json` file resemble the following:
2738
```json
28-
{
29-
...
30-
"dependencies": {
31-
"@yworks/react-yfiles-orgchart": "^0.1.0",
32-
"react": "^18.2.0",
33-
"react-dom": "^18.2.0",
34-
"yfiles": "<yFiles package path>/lib/yfiles-26.0.0.tgz",
35-
...
39+
"dependencies": {
40+
"react": "^18.2.0",
41+
"react-dom": "^18.2.0",
42+
"yfiles": "./lib-dev/yfiles-26.0.0.tgz"
3643
}
37-
}
44+
```
45+
</details>
46+
47+
Now, the component itself can be installed:
48+
```bash
49+
npm install @yworks/react-yfiles-orgchart
50+
```
51+
52+
2. **License**
53+
54+
Be sure to invoke <TypeLink type="registerLicense" /> before using the Organization Chart React component.
55+
When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package.
56+
For licensed users, the license data is provided separately.
57+
58+
<details>
59+
60+
<summary>License registration</summary>
61+
62+
Import or paste your license data and register the license, e.g. in `App.tsx`:
63+
64+
```js
65+
import yFilesLicense from './license.json'
66+
67+
registerLicense(yFilesLicense)
68+
```
69+
</details>
70+
71+
3. **Stylesheet**
72+
73+
Make sure to import the CSS stylesheet as well:
74+
75+
```js
76+
import '@yworks/react-yfiles-orgchart/dist/index.css'
3877
```
3978

40-
2. **License:**
41-
Be sure to invoke the <TypeLink type="registerLicense" /> function to activate the license for the application before using the company-ownership component.
79+
4. **Usage**
4280

43-
3. **Usage:**
44-
Utilize the component in your application. Make sure to import the CSS stylesheet.
81+
You are now all set to utilize the Organization Chart component with your data!
82+
See a basic example `App.tsx` below:
4583

4684
```tsx
47-
import {CustomOrgChartData, OrgChart, registerLicense } from '@yworks/react-yfiles-orgchart'
48-
import '@yworks/react-yfiles-orgchart/dist/index.css'
85+
import {
86+
CustomOrgChartData,
87+
OrgChart,
88+
registerLicense
89+
} from '@yworks/react-yfiles-orgchart'
90+
91+
import '@yworks/react-yfiles-orgchart/dist/index.css'
92+
4993
import yFilesLicense from './license.json'
50-
94+
95+
registerLicense(yFilesLicense)
96+
97+
const data = [
98+
{ id: 0, name: 'Eric Joplin', subordinates: [1, 2] },
99+
{ id: 1, name: 'Amy Kain' },
100+
{ id: 2, name: 'David Kerry' }
101+
] satisfies CustomOrgChartData<{name: string}>
102+
51103
function App() {
52-
registerLicense(yFilesLicense)
53-
54-
const data = [
55-
{ id: 0, name: 'Eric Joplin', subordinates: [1, 2] },
56-
{ id: 1, name: 'Amy Kain' },
57-
{ id: 2, name: 'David Kerry' }
58-
] satisfies CustomOrgChartData<{name: string}>
59-
60104
return <OrgChart data={data}></OrgChart>
61105
}
62106

@@ -69,5 +113,8 @@ For using the component, [yFiles for HTML](https://www.yworks.com/products/yfile
69113

70114
Explore the possibilities of visualizing organizational structures with the yFiles Organization Chart Component. For further information about [yFiles for HTML](https://www.yworks.com/yfiles-overview) and our company, please visit [yWorks.com](https://www.yworks.com).
71115

116+
If you are exploring a different use case and require another React component,
117+
please take a look at the available [React components](https://www.yworks.com/yfiles-react-components) powered by yFiles!
118+
72119
For support or feedback, please reach out to [our support team](https://website.yworks.home/contact) or open an issue on GitHub. Happy diagramming!
73120

‎docs/introduction/Welcome.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ Refer to the [Getting Started](gettingstarted) section to learn how to effortles
4040
"email": "[email protected]",
4141
"status": "present",
4242
"icon": "../assets/usericon_male1.svg",
43-
"subordinates": [2, 3, 15]
43+
"subordinates": [2, 3]
4444
},
4545
{
4646
"id": 2,

‎examples/src/examples/Islands/index.tsx‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {
22
ContextMenuItem,
33
CustomOrgChartItem,
44
OrgChart,
5+
OrgChartConnection,
56
RenderItemProps,
67
RenderTooltipProps
78
} from '@yworks/react-yfiles-orgchart'
@@ -14,9 +15,23 @@ export function useColorContext() {
1415
return useContext(ColorContext)
1516
}
1617

17-
function TooltipTemplate({ data: { name } }: RenderTooltipProps<CustomOrgChartItem>) {
18-
const color = useColorContext()
19-
return <div style={{ backgroundColor: color }}>{name}</div>
18+
function MyTooltipComponent({
19+
data
20+
}: RenderTooltipProps<CustomOrgChartItem | OrgChartConnection<CustomOrgChartItem>>) {
21+
let text = ''
22+
if ('name' in data) {
23+
// orgchart item tooltip
24+
text = data.name!
25+
} else if ('source' in data) {
26+
// orgchart connection tooltip
27+
text = `${data.source.name} → ${data.target.name}`
28+
}
29+
30+
return (
31+
<div style={{ backgroundColor: 'tomato', padding: 5, borderRadius: 10, color: 'white' }}>
32+
{text}
33+
</div>
34+
)
2035
}
2136

2237
function RenderMenu(_: {
@@ -70,7 +85,7 @@ export default function Islands() {
7085
<OrgChart
7186
data={largeOrgchartData}
7287
renderItem={RenderItem}
73-
renderTooltip={TooltipTemplate}
88+
renderTooltip={MyTooltipComponent}
7489
renderContextMenu={RenderMenu}
7590
></OrgChart>
7691
</ColorContext.Provider>

0 commit comments

Comments
 (0)