{"id":17761057,"url":"https://github.com/yworks/react-yfiles-process-mining","last_synced_at":"2025-03-15T10:31:05.208Z","repository":{"id":239732592,"uuid":"800396465","full_name":"yWorks/react-yfiles-process-mining","owner":"yWorks","description":"yFiles React Process Mining Component - A powerful and versatile React component based on the yFiles library, allows you to seamlessly incorporate dynamic and interactive process mining visualizations into your applications","archived":false,"fork":false,"pushed_at":"2025-02-18T10:35:19.000Z","size":1496,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-02-27T00:06:25.759Z","etag":null,"topics":["component-library","diagramming","event-logs","heatmap","process-mining","react","temporal-data"],"latest_commit_sha":null,"homepage":"https://docs.yworks.com/react-yfiles-process-mining/introduction/welcome","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yWorks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-14T08:54:45.000Z","updated_at":"2024-12-30T09:58:51.000Z","dependencies_parsed_at":"2024-05-14T10:31:29.286Z","dependency_job_id":"e2532703-d9d4-4347-b3db-7e35484bd773","html_url":"https://github.com/yWorks/react-yfiles-process-mining","commit_stats":null,"previous_names":["yworks/react-yfiles-process-mining"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yWorks%2Freact-yfiles-process-mining","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yWorks%2Freact-yfiles-process-mining/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yWorks%2Freact-yfiles-process-mining/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yWorks%2Freact-yfiles-process-mining/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yWorks","download_url":"https://codeload.github.com/yWorks/react-yfiles-process-mining/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243718829,"owners_count":20336590,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","diagramming","event-logs","heatmap","process-mining","react","temporal-data"],"created_at":"2024-10-26T19:18:56.807Z","updated_at":"2025-03-15T10:31:05.200Z","avatar_url":"https://github.com/yWorks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# yFiles React Process Mining Component\n\n[![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)\n\n![Welcome playground](https://raw.githubusercontent.com/yWorks/react-yfiles-process-mining/main/assets/react-process-mining-hero.png)\n\nProcess mining is a technique that involves extracting insights from event logs to understand and improve business\nprocesses. By analyzing event data, process mining techniques reveal the actual flow of processes, identify bottlenecks,\ndeviations, and opportunities for improvement.\n\nThe *yFiles React Process Mining Component* uses the [yFiles](https://www.yworks.com/yfiles-overview) library in order \nto extract interactive process mining diagrams from event-logs and load them into your React applications. This enhances \nthe user experience and facilitates an intuitive exploration of complex processes.\n\n## Getting Started\n\n### Prerequisites\n\nTo use the Process Mining component, [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) is required.\nYou can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).\nSee [Licensing](https://docs.yworks.com/react-yfiles-process-mining/introduction/licensing) for more information on this topic.\n\nYou 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).\n\n\n### Project Setup\n\n1. **Installation**\n\n   In addition to yFiles, the Process Mining component requires React to be installed in your project.\n   If you want to start your project from scratch, we recommend using vite:\n   ```\n   npm create vite@6.1.1 my-process-mining-app -- --template react-ts\n   ```\n\n   Add the yFiles dependency:\n   ```\n   npm install \u003cyFiles package path\u003e/lib/yfiles-30.0.0+dev.tgz\n   ```\n\n   \u003cdetails\u003e\n\n   \u003csummary\u003eSample \u003ccode\u003epackage.json\u003c/code\u003e dependencies\u003c/summary\u003e\n   The resulting package.json dependencies should resemble the following:\n\n   ```json\n      \"dependencies\": {\n        \"react\": \"^18.2.0\",\n        \"react-dom\": \"^18.2.0\",\n        \"@yfiles/yfiles\": \"./lib/yfiles-30.0.0+dev.tgz\"\n     }\n   ```\n   \u003c/details\u003e\n\n   Now, the component itself can be installed:\n   ```bash\n   npm install @yworks/react-yfiles-process-mining\n   ```\n\n2. **License**\n\n   Be sure to invoke the `registerLicense` function before using the Process Mining React component.\n   When evaluating yFiles, the license JSON file is found in the `lib/` folder of the yFiles for HTML evaluation package.\n   For licensed users, the license data is provided separately.\n\n   \u003cdetails\u003e\n\n   \u003csummary\u003eLicense registration\u003c/summary\u003e\n\n   Import or paste your license data and register the license, e.g. in `App.tsx`:\n\n   ```js\n   import yFilesLicense from './license.json'\n\n   registerLicense(yFilesLicense)\n   ```\n   \u003c/details\u003e\n\n3. **Stylesheet**\n\n   Make sure to import the CSS stylesheet as well:\n\n   ```js\n   import '@yworks/react-yfiles-process-mining/dist/index.css'\n   ```\n\n4. **Usage**\n\n   You are now all set to utilize the Process Mining component with your data!\n   See a basic example `App.tsx` below:\n\n   ```tsx\n   import {\n     ProcessMining,\n     registerLicense\n   } from '@yworks/react-yfiles-process-mining'\n\n   import '@yworks/react-yfiles-process-mining/dist/index.css'\n\n   import yFilesLicense from './license.json'\n\n   registerLicense(yFilesLicense)\n\n   const eventLog = [\n     { caseId: 0, activity: 'Start', timestamp: 8.383561495922297, duration: 0.0006804154279300233 },\n     { caseId: 0, activity: 'Step A', timestamp: 8.928697652413142, duration: 0.10316578562597925 },\n     { caseId: 0, activity: 'Step B', timestamp: 9.576999594529966, duration: 0.041202953341980784 },\n     { caseId: 0, activity: 'End', timestamp: 10.163338704362792, duration: 0.2746326125522593 }\n   ]\n\n   function App() {\n     return \u003cProcessMining eventLog={eventLog}\u003e\u003c/ProcessMining\u003e\n   }\n\n   export default App\n   ```\n\n   \u003e **Note:** By default, the Process Mining component adjusts its size to match the size of its \n   \u003e parent element. Therefore, it is necessary to set the dimensions of the containing element or apply styling \n   \u003e directly to the Process Mining component. This can be achieved by defining a CSS class or \n   \u003e applying inline styles.\n\n## Live Playground\n\n[![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)\n\nTry the yFiles React Process Mining component directly in your browser with our [playground](https://docs.yworks.com/react-yfiles-process-mining/introduction/welcome).\n\n\n## Licensing\n\nAll owners of a valid software license for [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html)\nare allowed to use these sources as the basis for their own [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html)\npowered applications.\n\nUse of such programs is governed by the rights and conditions as set out in the\n[yFiles for HTML license agreement](https://www.yworks.com/products/yfiles-for-html/sla).\n\nYou can evaluate yFiles for 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).\n\nFor more information, see the `LICENSE` file.\n\n\n## Learn More\n\nExplore the possibilities of visualizing process mining diagrams with the yFiles Process Mining Component. For further \ninformation about [yFiles for HTML](https://www.yworks.com/yfiles-overview) and our company, please visit [yWorks.com](https://www.yworks.com).\n\nIf you are exploring a different use case and require another React component,\nplease take a look at the available [React components](https://www.yworks.com/yfiles-react-components) powered by yFiles!\n\nFor support or feedback, please reach out to [our support team](https://www.yworks.com/products/yfiles/support) or open an issue on GitHub. Happy diagramming!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyworks%2Freact-yfiles-process-mining","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyworks%2Freact-yfiles-process-mining","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyworks%2Freact-yfiles-process-mining/lists"}