{"id":17438266,"url":"https://github.com/alisaitteke/seatmap-canvas","last_synced_at":"2025-04-12T23:30:34.747Z","repository":{"id":51188281,"uuid":"151705376","full_name":"alisaitteke/seatmap-canvas","owner":"alisaitteke","description":"Typescript base multi-block supporting open source seat map / selection framework","archived":false,"fork":false,"pushed_at":"2025-01-29T21:19:52.000Z","size":1318,"stargazers_count":105,"open_issues_count":4,"forks_count":33,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-04T04:26:32.238Z","etag":null,"topics":["booking","canvas","d3","seat","seat-picker","seat-selection","seatmap","seatmap-canvas","seatselection","selection","stadium"],"latest_commit_sha":null,"homepage":"https://alisaitteke.github.io/seatmap-canvas","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alisaitteke.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"alisaitteke","patreon":"alisait"}},"created_at":"2018-10-05T10:33:05.000Z","updated_at":"2025-04-03T22:19:32.000Z","dependencies_parsed_at":"2024-01-13T17:04:54.306Z","dependency_job_id":"1d91785d-ca3c-464f-9cc8-df6be5a5dc45","html_url":"https://github.com/alisaitteke/seatmap-canvas","commit_stats":null,"previous_names":["seatmap/canvas"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alisaitteke%2Fseatmap-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alisaitteke%2Fseatmap-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alisaitteke%2Fseatmap-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alisaitteke%2Fseatmap-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alisaitteke","download_url":"https://codeload.github.com/alisaitteke/seatmap-canvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647249,"owners_count":21139081,"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":["booking","canvas","d3","seat","seat-picker","seat-selection","seatmap","seatmap-canvas","seatselection","selection","stadium"],"created_at":"2024-10-17T12:05:18.090Z","updated_at":"2025-04-12T23:30:34.715Z","avatar_url":"https://github.com/alisaitteke.png","language":"TypeScript","funding_links":["https://github.com/sponsors/alisaitteke","https://patreon.com/alisait"],"categories":[],"sub_categories":[],"readme":"# Seatmap Canvas\nSeatmap Canvas is an advanced, open-source library for interactive seat selection in various settings such as stadiums, theaters, and event spaces. Designed with d3.js, this code version is optimized for developers looking for a customizable and efficient solution to handle seat arrangements and user interactions.\n\n[![LIVE DEMO](assets/banner_ui.png)](https://alisaitteke.github.io/seatmap-canvas)\n\n## Features\n* React Integration: Designed specifically for React projects, offering a streamlined development experience.\n* Dynamic Seat Selection: Enables interactive selection, categorization, and location of seats.\n* Customizable Styles: Extensive styling options for seats, blocks, and labels to fit your application's design.\n* Interactive Seat Models: Define properties and behaviors for seats, including salability, notes, and custom data.\n* Block Model Configuration: Organize seats into blocks with customizable titles, colors, and labels.\n* Event Handling: Simplified event listeners for seat interactions, allowing dynamic responses to user actions.\n\n## Screenshot\n[![LIVE DEMO](assets/screenshot_1.png)](https://alisaitteke.github.io/seatmap-canvas)\n\n## Planned\n- [x]  React \u0026 React Native Integration\n- [ ]  Vue \u0026 Nuxt Integration\n- [ ]  Angular Integration\n\n[LIVE DEMO](https://alisaitteke.github.io/seatmap-canvas/)\n\n\n\n## What does it do?\n#### In any organization\n- Seat selection\n- Seat categorizing\n- Locating\n- Turnstile and Gate information\n\n\n\n## Installation\n\n\u003cpre\u003e\nnpm i \u003ca href=\"https://npm.pkg.github.com/alisaitteke/seatmap-canvas\"\u003e@alisaitteke/seatmap-canvas\u003c/a\u003e --save\nOR\nyarn add \u003ca href=\"https://npm.pkg.github.com/alisaitteke/seatmap-canvas\"\u003e@alisaitteke/seatmap-canvas\u003c/a\u003e --save\n\u003c/pre\u003e\n\n\n\n\n#### Example Config\n```json\n{\n    \"resizable\": true,\n    \"seat_style\": {\n        \"radius\": 12,\n        \"color\": \"#6796ff\",\n        \"hover\": \"#5671ff\",\n        \"not_salable\": \"#424747\",\n        \"selected\": \"#56aa45\",\n        \"focus\": \"#435fa4\",\n        \"focus_out\": \"#56aa45\"\n    },\n    \"block_style\": {\n        \"fill\": \"#e2e2e2\",\n        \"stroke\": \"#e2e2e2\"\n    },\n    \"label_style\": {\n        \"color\": \"#000\",\n        \"radius\": 12,\n        \"font-size\": \"12px\",\n        \"bg\": \"#ffffff\"\n    }\n}\n\n```\n\n#### Usage\n```js\nvar seatmap = new SeatmapCanvas(\".seats_container\",config);\n```\n\n#### Seat Model\n```json\n{\n  \"id\": 1,\n  \"title\": \"49\",\n  \"x\": 0,\n  \"y\": 0,\n  \"salable\": true,\n  \"note\": \"note test\",\n  \"color\":\"#ffffff\",\n  \"custom_data\": {\n    \"any\": \"things\"\n  }\n}\n```\n\n#### Block Model\n```json\n{\n  \"blocks\": [\n    {\n      \"id\": 1,\n      \"title\": \"Test Block 1\",\n      \"color\": \"#2c2828\",\n      \"labels\": [\n        {\n          \"title\": \"A\",\n          \"x\": -30,\n          \"y\": 0\n        },\n        {\n          \"title\": \"B\",\n          \"x\": 120,\n          \"y\": 30\n        }\n      ],\n      \"seats\": [\n        {\n          \"id\": 1,\n          \"x\": 0,\n          \"y\": 0,\n          \"salable\": true,\n          \"note\": \"note test\",\n          \"title\": \"49\"\n        },\n        {\n          \"id\": 2,\n          \"x\": 30,\n          \"y\": 0,\n          \"salable\": true,\n          \"note\": \"note test\",\n          \"title\": \"47\"\n        }\n      ]\n    }\n  ]\n}\n\n```\n\n#### Set Block Data\n```js\nseatmap.setData(data);\n```\n\n#### Seat Click Trigger\n```js\nseatmap.addEventListener(\"seat_click\", (seat) =\u003e {\n    console.log(seat);\n    if (seat.selected) {\n        seatmap.seatUnselect(seat);\n    } else {\n        seatmap.seatSelect(seat);\n    }\n});\n```\n\n#### Activated unsalable seat click \n##### click_enable_sold_seats param add to config object \n```javascript\nlet config = {\n    click_enable_sold_seats: true // default false\n}\n```\n\n#### Get selected seat\n```javascript\nseatmap.addEventListener(\"seat_click\", (seat) =\u003e {\n    var selectedSeats = seatmap.getSelectedSeats();\n});\n```\n\n\n#### Complete Example Code\n```javascript\n\nvar config = {\n    \"resizable\": true,\n    \"seat_style\": {\n        \"radius\": 12,\n        \"color\": \"#6796ff\",\n        \"hover\": \"#5671ff\",\n        \"not_salable\": \"#424747\",\n        \"selected\": \"#56aa45\",\n        \"focus\": \"#435fa4\",\n        \"focus_out\": \"#56aa45\"\n    },\n    \"block_style\": {\n        \"fill\": \"#e2e2e2\",\n        \"stroke\": \"#e2e2e2\"\n    },\n    \"label_style\": {\n        \"color\": \"#000\",\n        \"radius\": 12,\n        \"font-size\": \"12px\",\n        \"bg\": \"#ffffff\"\n    }\n}\n\nvar seatmap = new SeatmapCanvas(\".seats_container\",config);\nseatmap.addEventListener(\"seat_click\", (seat) =\u003e {\n    console.log(seat);\n    if (seat.selected) {\n        seatmap.seatUnselect(seat);\n    } else {\n        seatmap.seatSelect(seat);\n    }\n});\nvar data = {\n    \"blocks\": [\n        {\n            \"id\": 1,\n            \"title\": \"Test Block 1\",\n            \"color\": \"#2c2828\",\n            \"labels\": [\n                {\n                    \"title\": \"A\",\n                    \"x\": -30,\n                    \"y\": 0\n                },\n                {\n                    \"title\": \"B\",\n                    \"x\": 120,\n                    \"y\": 30\n                }\n            ],\n            \"seats\": [\n                {\n                    \"id\": 1,\n                    \"x\": 0,\n                    \"y\": 0,\n                    \"salable\": true,\n                    \"note\": \"note test\",\n                    \"title\": \"49\"\n                },\n                {\n                    \"id\": 2,\n                    \"x\": 30,\n                    \"y\": 0,\n                    \"salable\": true,\n                    \"note\": \"note test\",\n                    \"title\": \"47\"\n                }\n            ]\n        }\n    ]\n}\n\n// SET SEATS DATA\nseatmap.setData(data);\n\n```\n\n## Contributors\nAli Sait Teke \u003calisaitt@gmail.com\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falisaitteke%2Fseatmap-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falisaitteke%2Fseatmap-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falisaitteke%2Fseatmap-canvas/lists"}