Skip to content

Commit 15c2740

Browse files
anneeberleanneeberle
authored
Merge pull request #4 from yWorks/dev
2.0.0 - yFiles for HTML 3.0
2 parents c1791e7 + c23e537 commit 15c2740

21 files changed

+352
-196
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,12 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
3030
In addition to yFiles, the Process Mining component requires React to be installed in your project.
3131
If you want to start your project from scratch, we recommend using vite:
3232
```
33-
npm create vite@latest my-process-mining-app -- --template react-ts
33+
npm create vite@6.1.1 my-process-mining-app -- --template react-ts
3434
```
3535

3636
Add the yFiles dependency:
3737
```
38-
npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
38+
npm install <yFiles package path>/lib/yfiles-30.0.0+dev.tgz
3939
```
4040

4141
<details>
@@ -47,7 +47,7 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
4747
"dependencies": {
4848
"react": "^18.2.0",
4949
"react-dom": "^18.2.0",
50-
"yfiles": "./lib-dev/yfiles-26.0.0.tgz"
50+
"@yfiles/yfiles": "./lib/yfiles-30.0.0+dev.tgz"
5151
}
5252
```
5353
</details>

‎docs/features/Context-Menu.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ To adjust the context menu visualization, add a custom React component using the
2020
<ProcessMining
2121
eventLog={data}
2222
timestamp={5}
23-
renderContextMenu={({item}) => 'label' in item && item.label && (
23+
renderContextMenu={({item}) => item && 'label' in item && item.label && (
2424
<button onClick={() => alert(\`\${item.label} clicked!\`)}>Click here!</button>
2525
)}
2626
></ProcessMining>

‎docs/features/Popup.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function App () {
4040
<ProcessMining
4141
eventLog={data}
4242
timestamp={5}
43-
popupPosition="north"
43+
popupPosition="top"
4444
renderPopup={CustomPopupComponent}
4545
></ProcessMining>
4646
)

‎docs/features/Transition-Events.mdx‎

Lines changed: 58 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -21,30 +21,54 @@ By default, the <TypeLink type="ProcessMining" /> component provides bluish tran
2121

2222
<Playground
2323
code={`
24-
function App () {
25-
const [ showTransitionEvents, setShowTransitionEvents ] = useState(true)
26-
const [ timestamp, setTimestamp ] = useState(5)
27-
const maxCaseId = 100
24+
function App() {
25+
const [showTransitionEvents, setShowTransitionEvents] = useState(true);
26+
const [timestamp, setTimestamp] = useState(5);
27+
const [clickedEventIds, setClickedEventIds] = useState([])
28+
const maxCaseId = 100;
2829
2930
return (
3031
<ProcessMining
3132
eventLog={data}
3233
timestamp={timestamp}
3334
showTransitionEvents={showTransitionEvents}
34-
transitionEvent={(previousEvent, _) => ({ size: 15, hue: (previousEvent.caseId / maxCaseId) * 360 })}
35-
showHeatmap={false}>
36-
<div className="options">
37-
<div>
38-
<span>Timestamp</span>
39-
<input type="range" min={0} max={30} onInput={e => { setTimestamp(parseFloat((e.target as HTMLInputElement).value)) }} value={timestamp}/ >
40-
</div>
41-
<div>
42-
<input type="checkbox" onChange={(event) => setShowTransitionEvents(event.target.checked)} checked={showTransitionEvents}/ >
43-
<span>Hide Transition Events</span>
44-
</div>
35+
transitionEventStyling={(previousEvent, _) => ({
36+
size: 15,
37+
hue: (parseInt(previousEvent.caseId as string) / maxCaseId) * 360,
38+
})}
39+
onTransitionEventsClick={(caseIds) => setClickedEventIds(caseIds)}
40+
showHeatmap={false}
41+
>
42+
<div className="options">
43+
<div>
44+
<span>Timestamp</span>
45+
<input
46+
type="range"
47+
min={0}
48+
max={30}
49+
onInput={(e) => {
50+
setTimestamp(parseFloat((e.target as HTMLInputElement).value));
51+
}}
52+
value={timestamp}
53+
/>
4554
</div>
46-
</ProcessMining>
47-
)
55+
<div>
56+
<input
57+
type="checkbox"
58+
onChange={(event) => setShowTransitionEvents(event.target.checked)}
59+
checked={showTransitionEvents}
60+
/>
61+
<span>Hide Transition Events</span>
62+
</div>
63+
</div>
64+
{clickedEventIds.length > 0 && <div className="ids-display">
65+
<div>
66+
<span>Transition Events: </span>
67+
<span>{clickedEventIds.join(", ")}</span>
68+
</div>
69+
</div>}
70+
</ProcessMining>
71+
);
4872
}
4973
`}
5074
data={`[
@@ -2041,15 +2065,23 @@ function App () {
20412065
]`}
20422066
css={`
20432067
.options {
2044-
position: absolute;
2045-
top: 10px;
2046-
left: 10px;
2047-
display: flex;
2048-
gap: 1em;
2049-
flex-direction: column;
2050-
background-color: #393939;
2051-
padding: 10px;
2052-
border-radius: 10px;
2068+
position: absolute;
2069+
top: 10px;
2070+
left: 10px;
2071+
display: flex;
2072+
gap: 1em;
2073+
flex-direction: column;
2074+
background-color: #393939;
2075+
padding: 10px;
2076+
border-radius: 10px;
2077+
}
2078+
.ids-display {
2079+
position: absolute;
2080+
bottom: 10px;
2081+
right: 10px;
2082+
background-color: #393939;
2083+
padding: 10px;
2084+
border-radius: 10px;
20532085
}
20542086
`}
20552087
/>

‎docs/introduction/GettingStarted.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
2626
In addition to yFiles, the Process Mining component requires React to be installed in your project.
2727
If you want to start your project from scratch, we recommend using vite:
2828
```
29-
npm create vite@latest my-process-mining-app -- --template react-ts
29+
npm create vite@6.1.1 my-process-mining-app -- --template react-ts
3030
```
3131

3232
Add the yFiles dependency:
3333
```
34-
npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
34+
npm install <yFiles package path>/lib/yfiles-30.0.0+dev.tgz
3535
```
3636

3737
<details>
@@ -43,7 +43,7 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
4343
"dependencies": {
4444
"react": "^18.2.0",
4545
"react-dom": "^18.2.0",
46-
"yfiles": "./lib-dev/yfiles-26.0.0.tgz"
46+
"@yfiles/yfiles": "./lib/yfiles-30.0.0+dev.tgz"
4747
}
4848
```
4949
</details>

‎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-process-mining-examples",
33
"private": true,
4-
"version": "0.1.0",
4+
"version": "1.0.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",

‎examples/src/examples/TransitionEvents/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const maxTime = 30
1414
function TransitionEvents() {
1515
const [timestamp, setTimestamp] = useState(5)
1616
const [showTransitionEvents, setShowTransitionEvents] = useState(true)
17+
const [clickedEventIds, setClickedEventIds] = useState('')
1718

1819
const { startAnimation, stopAnimation } = useProcessMiningContext()
1920

@@ -36,6 +37,9 @@ function TransitionEvents() {
3637
}
3738
}
3839
}}
40+
onTransitionEventsClick={clickedEventIds => {
41+
setClickedEventIds(JSON.stringify(clickedEventIds))
42+
}}
3943
>
4044
<div
4145
style={{
@@ -71,6 +75,8 @@ function TransitionEvents() {
7175
setShowTransitionEvents((e.target as HTMLInputElement).checked)
7276
}}
7377
/>
78+
<label>Transition Event IDs</label>
79+
<textarea readOnly value={clickedEventIds} />
7480
</div>
7581
</ProcessMining>
7682
)

‎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-process-mining",
3-
"version": "1.0.2",
3+
"version": "2.0.0",
44
"author": {
55
"name": "yFiles for HTML team @ yWorks GmbH",
66
"email": "[email protected]"
@@ -50,7 +50,7 @@
5050
"peerDependencies": {
5151
"react": "^18.2.0",
5252
"react-dom": "^18.2.0",
53-
"yfiles": "^26.0.0"
53+
"@yfiles/yfiles": ">=30"
5454
},
5555
"devDependencies": {
5656
"@types/react": "^18.2.15",
@@ -60,7 +60,7 @@
6060
"typescript": "^5.3.2"
6161
},
6262
"dependencies": {
63-
"@yworks/react-yfiles-core": "^2.0.0"
63+
"@yworks/react-yfiles-core": "^3.0.0"
6464
},
6565
"files": [
6666
"LICENSE",

0 commit comments

Comments
 (0)