Skip to content

Commit 2bd5ce7

Browse files
micschromicschro
committed
1.0.0
0 parents  commit 2bd5ce7

File tree

84 files changed

+53694
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+53694
-0
lines changed

‎.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
node_modules/
2+
dist/
3+
.idea/workspace.xml
4+
license.json
5+
yfiles-license.json
6+
*.tsbuildinfo
7+
.tsup/
8+
package-lock.json

‎LICENSE‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
This source code can be used as part of a yFiles for HTML application.
2+
https://www.yworks.com/yfileshtml
3+
Copyright (c) 2000-2024 by yWorks GmbH, Vor dem Kreuzberg 28,
4+
72070 Tübingen, Germany. All rights reserved.
5+
6+
Any redistribution of the files in this repository in source code or other form,
7+
with or without modification, is not permitted.
8+
The creation of derivative works is prohibited, unless otherwise explicitly permitted.
9+
10+
Owners of a valid software license for a yFiles for HTML version
11+
are allowed to use these sources as basis for their own yFiles for HTML powered applications.
12+
Use of such programs is governed by the rights and conditions as set out in the
13+
yFiles for HTML license agreement.
14+
15+
THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
16+
WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
17+
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
18+
NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
19+
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
20+
TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
21+
PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
22+
LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
23+
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
24+
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

‎README.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# yFiles React Process Mining Component
2+
3+
[![NPM version](https://img.shields.io/npm/v/@yworks/react-yfiles-process-mining?style=flat)](https://www.npmjs.org/package/@yworks/react-yfiles-process-mining)
4+
5+
![Welcome playground](https://raw.githubusercontent.com/yWorks/react-yfiles-process-mining/main/assets/react-process-mining-hero.png)
6+
7+
Process mining is a technique that involves extracting insights from event logs to understand and improve business
8+
processes. By analyzing event data, process mining techniques reveal the actual flow of processes, identify bottlenecks,
9+
deviations, and opportunities for improvement.
10+
11+
The *yFiles React Process Mining Component* uses the [yFiles](https://www.yworks.com/yfiles-overview) library in order
12+
to extract interactive process mining diagrams from event-logs and load them into your React applications. This enhances
13+
the user experience and facilitates an intuitive exploration of complex processes.
14+
15+
## Getting Started
16+
17+
### Prerequisites
18+
19+
To use the Process Mining component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required.
20+
You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
21+
See [Licensing](https://docs.yworks.com/react-yfiles-process-mining/introduction/licensing) for more information on this topic.
22+
23+
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).
24+
25+
26+
### Project Setup
27+
28+
1. **Installation**
29+
30+
In addition to yFiles, the Process Mining component requires React to be installed in your project.
31+
If you want to start your project from scratch, we recommend using vite:
32+
```
33+
npm create vite@latest my-process-mining-app -- --template react-ts
34+
```
35+
36+
Add the yFiles dependency:
37+
```
38+
npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
39+
```
40+
41+
<details>
42+
43+
<summary>Sample <code>package.json</code> dependencies</summary>
44+
The resulting package.json dependencies should resemble the following:
45+
46+
```json
47+
"dependencies": {
48+
"react": "^18.2.0",
49+
"react-dom": "^18.2.0",
50+
"yfiles": "./lib-dev/yfiles-26.0.0.tgz"
51+
}
52+
```
53+
</details>
54+
55+
Now, the component itself can be installed:
56+
```bash
57+
npm install @yworks/react-yfiles-process-mining
58+
```
59+
60+
2. **License**
61+
62+
Be sure to invoke the `registerLicense` function before using the Process Mining React component.
63+
When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package.
64+
For licensed users, the license data is provided separately.
65+
66+
<details>
67+
68+
<summary>License registration</summary>
69+
70+
Import or paste your license data and register the license, e.g. in `App.tsx`:
71+
72+
```js
73+
import yFilesLicense from './license.json'
74+
75+
registerLicense(yFilesLicense)
76+
```
77+
</details>
78+
79+
3. **Stylesheet**
80+
81+
Make sure to import the CSS stylesheet as well:
82+
83+
```js
84+
import '@yworks/react-yfiles-process-mining/dist/index.css'
85+
```
86+
87+
4. **Usage**
88+
89+
You are now all set to utilize the Process Mining component with your data!
90+
See a basic example `App.tsx` below:
91+
92+
```tsx
93+
import {
94+
ProcessMining,
95+
registerLicense
96+
} from '@yworks/react-yfiles-process-mining'
97+
98+
import '@yworks/react-yfiles-process-mining/dist/index.css'
99+
100+
import yFilesLicense from './license.json'
101+
102+
registerLicense(yFilesLicense)
103+
104+
const eventLog = [
105+
{ caseId: 0, activity: 'Start', timestamp: 8.383561495922297, duration: 0.0006804154279300233 },
106+
{ caseId: 0, activity: 'Step A', timestamp: 8.928697652413142, duration: 0.10316578562597925 },
107+
{ caseId: 0, activity: 'Step B', timestamp: 9.576999594529966, duration: 0.041202953341980784 },
108+
{ caseId: 0, activity: 'End', timestamp: 10.163338704362792, duration: 0.2746326125522593 }
109+
]
110+
111+
function App() {
112+
return <ProcessMining eventLog={eventLog}></ProcessMining>
113+
}
114+
115+
export default App
116+
```
117+
118+
> **Note:** By default, the Process Mining component adjusts its size to match the size of its
119+
> parent element. Therefore, it is necessary to set the dimensions of the containing element or apply styling
120+
> directly to the Process Mining component. This can be achieved by defining a CSS class or
121+
> applying inline styles.
122+
123+
## Live Playground
124+
125+
[![Live Playground](https://raw.githubusercontent.com/yWorks/react-yfiles-process-mining/main/assets/welcome-playground.png)](https://docs.yworks.com/react-yfiles-process-mining/introduction/welcome)
126+
127+
Try the yFiles React Process Mining component directly in your browser with our [playground](https://docs.yworks.com/react-yfiles-process-mining/introduction/welcome).
128+
129+
130+
## Licensing
131+
132+
All owners of a valid software license for [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html)
133+
are allowed to use these sources as the basis for their own [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html)
134+
powered applications.
135+
136+
Use of such programs is governed by the rights and conditions as set out in the
137+
[yFiles for HTML license agreement](https://www.yworks.com/products/yfiles-for-html/sla).
138+
139+
You can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).
140+
141+
For more information, see the `LICENSE` file.
142+
143+
144+
## Learn More
145+
146+
Explore the possibilities of visualizing process mining diagrams with the yFiles Process Mining Component. For further
147+
information about [yFiles for HTML](https://www.yworks.com/yfiles-overview) and our company, please visit [yWorks.com](https://www.yworks.com).
148+
149+
If you are exploring a different use case and require another React component,
150+
please take a look at the available [React components](https://www.yworks.com/yfiles-react-components) powered by yFiles!
151+
152+
For support or feedback, please reach out to [our support team](https://website.yworks.home/contact) or open an issue on GitHub. Happy diagramming!
153+

‎api-extractor.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
3+
"mainEntryPointFilePath": "./dist/index.d.ts",
4+
"bundledPackages": [
5+
"@yworks/react-yfiles-core"
6+
],
7+
"apiReport": {
8+
"enabled": false
9+
},
10+
"docModel": {
11+
"enabled": false
12+
},
13+
"dtsRollup": {
14+
"enabled": true,
15+
"untrimmedFilePath": "./dist/index.d.ts"
16+
},
17+
"tsdocMetadata": {
18+
"enabled": false
19+
},
20+
"messages": {
21+
"compilerMessageReporting": {
22+
"default": {
23+
"logLevel": "warning"
24+
}
25+
},
26+
"extractorMessageReporting": {
27+
"default": {
28+
"logLevel": "warning"
29+
},
30+
"ae-missing-release-tag": {
31+
"logLevel": "none",
32+
"addToApiReportFile": false
33+
}
34+
}
35+
}
36+
}

‎assets/react-process-mining-hero.png‎

42.1 KB
Loading

‎assets/welcome-playground.png‎

762 KB
Loading

‎docs/config.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"mainComponents": ["ProcessMining", "ProcessMiningProvider"],
3+
"componentPropsDocText": "eventLog={data}"
4+
}

‎docs/config.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export const SITE = {
2+
title: 'yFiles React Process Mining Component',
3+
description: '',
4+
defaultLanguage: 'en_US',
5+
twitter: '@yworks',
6+
github: 'yWorks/react-yfiles-process-mining',
7+
linkedin: 'yworks-gmbh',
8+
name: 'react-yfiles-process-mining'
9+
}
10+
11+
export const OPEN_GRAPH = {
12+
image: {
13+
src: '',
14+
alt: ''
15+
},
16+
twitter: ''
17+
}
18+
19+
// TODO twitter card

0 commit comments

Comments
 (0)