Skip to content

Commit 8d82b63

Browse files
anneeberleanneeberle
authored
Merge pull request #11 from yWorks/dev
2.0.0 - yFiles for HTML 3.0
2 parents 5ff19a5 + 55eed8b commit 8d82b63

20 files changed

+405
-473
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
2424
In addition to yFiles, the Organization Chart component requires React to be installed in your project.
2525
If you want to start your project from scratch, we recommend using vite:
2626
```
27-
npm create vite@latest my-orgchart-app -- --template react-ts
27+
npm create vite@6.1.1 my-orgchart-app -- --template react-ts
2828
```
2929

3030
Add the yFiles dependency:
3131
```
32-
npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
32+
npm install <yFiles package path>/lib/yfiles-30.0.0+dev.tgz
3333
```
3434

3535
<details>
@@ -41,7 +41,7 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
4141
"dependencies": {
4242
"react": "^18.2.0",
4343
"react-dom": "^18.2.0",
44-
"yfiles": "./lib-dev/yfiles-26.0.0.tgz"
44+
"@yfiles/yfiles": "./lib/yfiles-30.0.0+dev.tgz"
4545
}
4646
```
4747
</details>

‎docs/components/OrgChart.md‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,22 @@ tags: ["organization"]
55
## OrgChart Component
66

77
### Props
8-
| Property | Description | Type | Default |
9-
|---------------------|-------------------------------------------------------------------------------------------|---------------------------------------------------|------------|
10-
| `data` | The data items visualized by the organization chart. | `T[]` | - |
11-
| `onItemFocus` | A callback that's called when an item is focused. | `(item: T \| null) => void` | - |
12-
| `onItemSelect` | A callback that's called when an item is selected or deselected. | `(selectedItems: T[]) => void` | - |
13-
| `onItemHover` | A callback that's called when the hovered item has changed. | `(item: T \| null, oldItem?: T \| null) => void` | - |
14-
| `searchNeedle` | A string or a complex object to search for. | `TNeedle` | - |
15-
| `onSearch` | An optional callback that returns whether the given item matches the search needle. | `(item: T, needle: TNeedle) => boolean` | - |
16-
| `renderItem` | A function that provides a custom render function for the given data item. | `ComponentType<RenderItemProps<T>> \| undefined` | - |
17-
| `connectionStyles` | A function that provides a style configuration for the given edge. | `(source: T, target: T) => ConnectionStyle \| undefined` | - |
18-
| `className` | Specifies the CSS class used for the `OrgChart` component. | `string` | - |
19-
| `interactive` | Specifies whether the interactive collapse and expand buttons on the orgchart nodes are visible. The default is true. | `boolean` | `true` |
20-
| `style` | Specifies the CSS style used for the `OrgChart` component. | `CSSProperties` | - |
21-
| `itemSize` | Specifies the default item size used when no explicit width and height are provided. | `{ width: number; height: number }` | - |
22-
| `renderTooltip` | An optional function that renders the tooltip. | `ComponentType<RenderTooltipProps<T>>` | - |
23-
| `contextMenuItems` | An optional function specifying the context menu items for a data item. | `(item: T \| null) => ContextMenuItem<T>[]` | - |
24-
| `renderContextMenu` | An optional function that renders the context menu. This function can be used to provide a custom component that renders the context menu. | `ComponentType<RenderContextMenuProps<T>>` | - |
25-
| `popupPosition` | The optional position of the popup. The default is 'north'. | `'east' \| 'north' \| 'north-east' \| 'north-west' \| 'south' \| 'south-east' \| 'south-west' \| 'west'` | `'north'` |
26-
| `renderPopup` | An optional function that renders the popup. This function can be used to provide a custom component that renders the popup. | `ComponentType<RenderPopupProps<T>>` | - |
8+
| Property | Description | Type | Default |
9+
|---------------------|-------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------|---------|
10+
| `data` | The data items visualized by the organization chart. | `T[]` | - |
11+
| `onItemFocus` | A callback that's called when an item is focused. | `(item: T \| null) => void` | - |
12+
| `onItemSelect` | A callback that's called when an item is selected or deselected. | `(selectedItems: T[]) => void` | - |
13+
| `onItemHover` | A callback that's called when the hovered item has changed. | `(item: T \| null, oldItem?: T \| null) => void` | - |
14+
| `searchNeedle` | A string or a complex object to search for. | `TNeedle` | - |
15+
| `onSearch` | An optional callback that returns whether the given item matches the search needle. | `(item: T, needle: TNeedle) => boolean` | - |
16+
| `renderItem` | A function that provides a custom render function for the given data item. | `ComponentType<RenderItemProps<T>> \| undefined` | - |
17+
| `connectionStyles` | A function that provides a style configuration for the given edge. | `(source: T, target: T) => ConnectionStyle \| undefined` | - |
18+
| `className` | Specifies the CSS class used for the `OrgChart` component. | `string` | - |
19+
| `interactive` | Specifies whether the interactive collapse and expand buttons on the orgchart nodes are visible. The default is true. | `boolean` | `true` |
20+
| `style` | Specifies the CSS style used for the `OrgChart` component. | `CSSProperties` | - |
21+
| `itemSize` | Specifies the default item size used when no explicit width and height are provided. | `{ width: number; height: number }` | - |
22+
| `renderTooltip` | An optional function that renders the tooltip. | `ComponentType<RenderTooltipProps<T>>` | - |
23+
| `contextMenuItems` | An optional function specifying the context menu items for a data item. | `(item: T \| null) => ContextMenuItem<T>[]` | - |
24+
| `renderContextMenu` | An optional function that renders the context menu. This function can be used to provide a custom component that renders the context menu. | `ComponentType<RenderContextMenuProps<T>>` | - |
25+
| `popupPosition` | The optional position of the popup. The default is 'north'. | `'right' \| 'top' \| 'top-right' \| 'top-left' \| 'bottom' \| 'bottom-right' \| 'bottom-left' \| 'left'` | `'top'` |
26+
| `renderPopup` | An optional function that renders the popup. This function can be used to provide a custom component that renders the popup. | `ComponentType<RenderPopupProps<T>>` | - |

‎docs/features/Context-Menu.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ To adjust the context menu visualization, add a custom React component using the
2828
return (
2929
<OrgChart
3030
data={data}
31-
renderContextMenu={({item}) => (
31+
renderContextMenu={({item}) => (item &&
3232
<button onClick={() => alert(\`\${item.name} clicked!\`)}>Click here!</button>
3333
)}
3434
></OrgChart>

‎docs/features/Popup.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ To adjust the popup visualization, add a custom React component using the <TypeL
2323
function App () {
2424
return (
2525
<OrgChart data={data}
26-
popupPosition="north-east"
26+
popupPosition="top-right"
2727
renderPopup={MyPopupComponent}
2828
></OrgChart>
2929
)

‎docs/introduction/GettingStarted.mdx‎

Lines changed: 65 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -22,99 +22,96 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
2222

2323
1. **Installation**
2424

25-
In addition to yFiles, the Organization Chart component requires React to be installed in your project.
26-
If you want to start your project from scratch, we recommend using vite:
27-
```
28-
npm create vite@latest my-orgchart-app -- --template react-ts
29-
```
3025

31-
Add the yFiles dependency:
32-
```
33-
npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
34-
```
26+
In addition to yFiles, the Organization Chart component requires React to be installed in your project.
27+
If you want to start your project from scratch, we recommend using vite:
28+
```
29+
npm create [email protected] my-orgchart-app -- --template react-ts
30+
```
3531

36-
<details>
32+
Add the yFiles dependency:
33+
```
34+
npm install <yFiles package path>/lib/yfiles-30.0.0+dev.tgz
35+
```
3736

38-
<summary>Sample <code>package.json</code> dependencies</summary>
39-
The resulting package.json dependencies should resemble the following:
37+
<details>
4038

41-
```json
42-
"dependencies": {
43-
"react": "^18.2.0",
44-
"react-dom": "^18.2.0",
45-
"yfiles": "./lib-dev/yfiles-26.0.0.tgz"
46-
}
47-
```
48-
</details>
39+
<summary>Sample <code>package.json</code> dependencies</summary>
40+
The resulting package.json dependencies should resemble the following:
4941

50-
Now, the component itself can be installed:
51-
```bash
52-
npm install @yworks/react-yfiles-orgchart
53-
```
42+
```json
43+
"dependencies": {
44+
"react": "^18.2.0",
45+
"react-dom": "^18.2.0",
46+
"@yfiles/yfiles": "./lib/yfiles-30.0.0+dev.tgz"
47+
}
48+
```
49+
</details>
5450

55-
2. **License**
51+
Now, the component itself can be installed:
52+
```bash
53+
npm install @yworks/react-yfiles-orgchart
54+
```
5655

57-
Be sure to invoke <TypeLink type="registerLicense" /> before using the Organization Chart React component.
58-
When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package.
59-
For licensed users, the license data is provided separately.
56+
2. **License**
6057

61-
<details>
58+
Be sure to invoke <TypeLink type="registerLicense" /> before using the Organization Chart React component.
59+
When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package.
60+
For licensed users, the license data is provided separately.
6261

63-
<summary>License registration</summary>
62+
<details>
6463

65-
Import or paste your license data and register the license, e.g. in `App.tsx`:
64+
<summary>License registration</summary>
6665

67-
```js
68-
import yFilesLicense from './license.json'
66+
Import or paste your license data and register the license, e.g. in `App.tsx`:
6967

70-
registerLicense(yFilesLicense)
71-
```
72-
</details>
68+
```js
69+
import yFilesLicense from './license.json'
7370

74-
3. **Stylesheet**
71+
registerLicense(yFilesLicense)
72+
```
73+
</details>
7574

76-
Make sure to import the CSS stylesheet as well:
75+
3. **Stylesheet**
7776

78-
```js
79-
import '@yworks/react-yfiles-orgchart/dist/index.css'
80-
```
77+
Make sure to import the CSS stylesheet as well:
8178

82-
4. **Usage**
79+
```js
80+
import '@yworks/react-yfiles-orgchart/dist/index.css'
81+
```
8382

84-
You are now all set to utilize the Organization Chart component with your data!
85-
See a basic example `App.tsx` below:
83+
4. **Usage**
8684

87-
```tsx
88-
import {
89-
CustomOrgChartData,
90-
OrgChart,
91-
registerLicense
92-
} from '@yworks/react-yfiles-orgchart'
85+
You are now all set to utilize the Organization Chart component with your data!
86+
See a basic example `App.tsx` below:
9387

94-
import '@yworks/react-yfiles-orgchart/dist/index.css'
88+
```tsx
89+
import {
90+
CustomOrgChartData,
91+
OrgChart,
92+
registerLicense
93+
} from '@yworks/react-yfiles-orgchart'
9594

96-
import yFilesLicense from './license.json'
95+
import '@yworks/react-yfiles-orgchart/dist/index.css'
9796

98-
registerLicense(yFilesLicense)
97+
import yFilesLicense from './license.json'
9998

100-
const data = [
101-
{id: 0, name: 'Eric Joplin', subordinates: [1, 2]},
102-
{id: 1, name: 'Amy Kain'},
103-
{id: 2, name: 'David Kerry'}
104-
] satisfies CustomOrgChartData
105-
<
106-
{name: string}>
99+
registerLicense(yFilesLicense)
107100

108-
function App() {
109-
return <OrgChart data={data}></OrgChart>
110-
}
101+
const data = [
102+
{ id: 0, name: 'Eric Joplin', subordinates: [1, 2] },
103+
{ id: 1, name: 'Amy Kain' },
104+
{ id: 2, name: 'David Kerry' }
105+
] satisfies CustomOrgChartData<{name: string}>
111106

112-
export default App
113-
```
107+
function App() {
108+
return <OrgChart data={data}></OrgChart>
109+
}
114110

115-
> **Note:** By default, the <TypeLink
116-
type="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
117-
<TypeLink type="OrgChart" /> component. This can be achieved by defining a CSS class or applying inline styles.
111+
export default App
112+
```
113+
114+
> **Note:** By default, the <TypeLink type="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 <TypeLink type="OrgChart" /> component. This can be achieved by defining a CSS class or applying inline styles.
118115
119116
## Learn More
120117

‎examples/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@yworks/react-yfiles-orgchart-examples",
33
"private": true,
4-
"version": "0.1.0",
4+
"version": "1.0.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",

‎examples/src/App/Header.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@ export default function Header() {
1616
return (
1717
<>
1818
<header>
19-
<select title="examples" value={currentPath} onChange={event => setCurrentPath(event.target.value)}>
19+
<select
20+
title="examples"
21+
value={currentPath}
22+
onChange={event => setCurrentPath(event.target.value)}
23+
>
2024
{routes.map(route => (
2125
<option value={route.path} key={route.path}>
2226
{route.title}
@@ -26,7 +30,9 @@ export default function Header() {
2630
{routes
2731
.filter(route => route.path === currentPath)
2832
.map(route => (
29-
<div className="description">{route.description}</div>
33+
<div className="description" key={route.path}>
34+
{route.description}
35+
</div>
3036
))}
3137
</header>
3238
<Outlet />

‎examples/src/examples/Popup/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default function EditablePopup() {
6666
<OrgChart
6767
data={orgChartData}
6868
renderTooltip={RenderOrgChartTooltip}
69-
popupPosition="north"
69+
popupPosition="top"
7070
renderPopup={OrgChartRenderPopup}
7171
></OrgChart>
7272
)

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@yworks/react-yfiles-orgchart",
3-
"version": "1.2.1",
3+
"version": "2.0.0",
44
"author": {
55
"name": "yFiles for HTML team @ yWorks GmbH",
66
"email": "[email protected]"
@@ -34,7 +34,7 @@
3434
"peerDependencies": {
3535
"react": "^18.2.0",
3636
"react-dom": "^18.2.0",
37-
"yfiles": "^26.0.0"
37+
"@yfiles/yfiles": ">=30"
3838
},
3939
"devDependencies": {
4040
"@types/react": "^18.2.15",
@@ -44,7 +44,7 @@
4444
"typescript": "^5.3.2"
4545
},
4646
"dependencies": {
47-
"@yworks/react-yfiles-core": "^2.0.0"
47+
"@yworks/react-yfiles-core": "^3.0.0"
4848
},
4949
"files": [
5050
"LICENSE",

0 commit comments

Comments
 (0)