{"id":26881841,"url":"https://github.com/process-analytics/bpmn-visualization-tutorial-getting-started","last_synced_at":"2025-05-08T01:15:06.411Z","repository":{"id":61172021,"uuid":"539846204","full_name":"process-analytics/bpmn-visualization-tutorial-getting-started","owner":"process-analytics","description":"A JavaScript getting-started tutorial for the bpmn-visualization library","archived":false,"fork":false,"pushed_at":"2025-01-14T13:37:28.000Z","size":55,"stargazers_count":6,"open_issues_count":2,"forks_count":1,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2025-05-08T01:15:02.286Z","etag":null,"topics":["analytics","bpmn","getting-started","javascript","low-quality","monitoring","process","tutorial","visualization"],"latest_commit_sha":null,"homepage":"https://process-analytics.github.io/bpmn-visualization-tutorial-getting-started/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/process-analytics.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":"2022-09-22T07:09:06.000Z","updated_at":"2025-01-14T13:37:31.000Z","dependencies_parsed_at":"2025-03-31T15:59:47.819Z","dependency_job_id":"29976b58-3105-435a-9afb-e58407e50589","html_url":"https://github.com/process-analytics/bpmn-visualization-tutorial-getting-started","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/process-analytics%2Fbpmn-visualization-tutorial-getting-started","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/process-analytics%2Fbpmn-visualization-tutorial-getting-started/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/process-analytics%2Fbpmn-visualization-tutorial-getting-started/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/process-analytics%2Fbpmn-visualization-tutorial-getting-started/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/process-analytics","download_url":"https://codeload.github.com/process-analytics/bpmn-visualization-tutorial-getting-started/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252978784,"owners_count":21834917,"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":["analytics","bpmn","getting-started","javascript","low-quality","monitoring","process","tutorial","visualization"],"created_at":"2025-03-31T15:58:45.313Z","updated_at":"2025-05-08T01:15:06.390Z","avatar_url":"https://github.com/process-analytics.png","language":"CSS","readme":"# bpmn-visualization 'getting started' tutorial\r\n\r\nThis is a template bootstrap. You can clone it and use it to follow the [getting started tutorial](https://medium.com/@process-analytics/getting-started-with-bpmn-visualization-a54fbafae2df).\r\n\r\nThe tutorial uses the [bpmn-visualization](https://github.com/process-analytics/bpmn-visualization-js) library to visualize runtime monitoring data ⏲️.\r\n\r\nThe whole solution is available in the [solution](https://github.com/process-analytics/bpmn-visualization-tutorial-getting-started/tree/solution) branch.\r\n\r\nThe code of this tutorial is released under the [Apache 2.0](LICENSE) license.\r\n\r\n## The deployed solution\r\n\r\nTo see the deployed solution: https://process-analytics.github.io/bpmn-visualization-tutorial-getting-started/\r\n\r\n\r\n## How to Run\r\n\r\n**NOTE**: this tutorial was tested with Node 16 and npm 8.16.0\r\n\r\nRun\r\n```bash\r\nnpm install\r\nnpm start\r\n```\r\n\r\nOpen the URL mentioned in the console\r\n\r\nSave your code systematically to see the changes in your browser.\r\n\r\n## Tutorial Content\r\nThe tutorial explains how to visualize the following information using *bpmn-visualization*:\r\n- Running instances and their number ⚙️\r\n- State of instances: whether they predefined KPIs ⏱️ are violated:\r\n    - Two KPIs are considered: completion and waiting time of activities.\r\n    - Two levels of violation are defined: risky 🟠 and critical 🔴.\r\n\r\n## Visualization\r\n\r\n### Running instances and their number ⚙️\r\n- **animated activity stroke**: to indicate that there are running instances of the corresponding activity\r\n\r\n\r\n- **Overlays on activities**: to indicate the number of instances\r\n\r\n### State and KPI violation ⏱️\r\n**Colors meaning**:\r\n- 🟢 Green: no violation\r\n- 🟠 Orange: violation with a risky level\r\n- 🔴 Red: Violation with a critical level\r\n\r\n#### Activities:\r\n- **Overlay filling color**: \r\n    - 🟢 Green: number of instances running on time according to a predefined completion time KPI\r\n    - 🟠 Orange: number of instances running late (with a risky level) according to a predefined completion time KPI\r\n    - 🔴 Red: number of instances running late (with critical level) according to a predefined completion time KPI\r\n\r\n- **Speed of the animated stroke:**  The following is applied in order:\r\n    - slow: if there exist instances running late with a critical level.\r\n    - medium: if there exist instances running late with a risky level\r\n    - fast: in case all instances are running on time\r\n\r\n- **Shadow:** The following is applied in order:\r\n    - 🔴 Red: if there exist instances running late with a critical level.\r\n    - 🟠 Orange: if there exist instances running late with a risky level\r\n    - 🟢 Green: in case all instances are running on time\r\n\r\n#### Edges:\r\n- **Animation**: indicates that there are instances waiting for the next activity to be executed\r\n\r\n- **Overlay**: indicates the number of instances waiting for the next activity to be executed\r\n\r\n- **Overlay filling color**: The following is applied in order:\r\n    - 🔴 Red: if there exist instances waiting late with a critical level\r\n    - 🟠 Orange: if there exist instances waiting late with a risky level\r\n\r\n## Styling BPMN Elements\r\n\r\nFor more details on how to style BPMN elements, check out the article: [All you need to know about styling BPMN elements](https://medium.com/@process-analytics/bpmn-visualization-all-you-need-to-know-about-styling-bpmn-elements-24289154c16c).\r\n\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprocess-analytics%2Fbpmn-visualization-tutorial-getting-started","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprocess-analytics%2Fbpmn-visualization-tutorial-getting-started","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprocess-analytics%2Fbpmn-visualization-tutorial-getting-started/lists"}