{"id":13503547,"url":"https://github.com/javdome/timeline-arrows","last_synced_at":"2025-03-29T18:31:21.433Z","repository":{"id":65472989,"uuid":"191589814","full_name":"javdome/timeline-arrows","owner":"javdome","description":"Class to easily draw lines to connect items in the vis Timeline module. See examples here: https://javdome.github.io/timeline-arrows/index.html","archived":false,"fork":false,"pushed_at":"2024-03-24T11:41:12.000Z","size":70,"stargazers_count":39,"open_issues_count":1,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-26T06:54:28.733Z","etag":null,"topics":["timeline-arrows","vis-timeline"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/javdome.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":"2019-06-12T14:43:14.000Z","updated_at":"2024-08-01T01:46:27.054Z","dependencies_parsed_at":"2024-08-01T01:46:24.910Z","dependency_job_id":"1153c64d-4a56-4488-a329-b4210506b5a0","html_url":"https://github.com/javdome/timeline-arrows","commit_stats":{"total_commits":49,"total_committers":3,"mean_commits":"16.333333333333332","dds":0.04081632653061229,"last_synced_commit":"7df6fa775eca61dcbe02be5d35f310f77c743d1c"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javdome%2Ftimeline-arrows","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javdome%2Ftimeline-arrows/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javdome%2Ftimeline-arrows/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javdome%2Ftimeline-arrows/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javdome","download_url":"https://codeload.github.com/javdome/timeline-arrows/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246226980,"owners_count":20743862,"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":["timeline-arrows","vis-timeline"],"created_at":"2024-07-31T23:00:39.379Z","updated_at":"2025-03-29T18:31:21.152Z","avatar_url":"https://github.com/javdome.png","language":"JavaScript","funding_links":[],"categories":["Libraries"],"sub_categories":["vis.js based libraries"],"readme":"# Timeline-arrow\n\nFollowing the issue of vis https://github.com/almende/vis/issues/1699, and thanks to the comments of @frboyer and @JimmyCheng, I have created a class to easily draw lines to connect items in the vis Timeline module.\n\n![CapturaTime](https://user-images.githubusercontent.com/36993404/59111595-9d830600-8941-11e9-8cb8-8d7b72701a71.JPG)\n\n\n## Install \u0026 initialize\n\n1 - Download the package\n\n```bash\nnpm install timeline-arrows\n```\n\n2 - Import the class `Arrow` from `arrow.js` in your project\n\n\n3 - Create your timeline as usual (see [vis-timeline docs](https://visjs.github.io/vis-timeline/docs/timeline/)).\n\nFor instance:\n\n```bash\nconst myTimeline = new vis.Timeline(container, items, groups, options);\n```\n\n\n4 - Create your arrows as an array of objects. These objets must have, at least, the following properties:\n* id\n* id_item_1 (id of one timeline's items)\n* id_item_2 (id of the other timeline's items that you want to connect with)\n\nAnd optionally:\n* title (insert a text and it will show a title if you hover the mouse in the arrow)\n\nFor instance:\n\n```javascript\nvar arrowsSpecs = [\n    { id: 2, id_item_1: 1, id_item_2: 2 },\n    { id: 5, id_item_1: 3, id_item_2: 5, title:'Hello!!!' },\n    { id: 7, id_item_1: 6, id_item_2: 7 },\n    { id: 10, id_item_1: 3, id_item_2: 8, title:'I am a title!!!' }\n];\n```\n\n5 - Create your Arrow instance for your timeline and your arrows.\n\nFor instance:\n\n```javascript\nconst myArrows = new Arrow(myTimeline, arrowsSpecs);\n```\n\nThat's it :)\n\n\n## Options\n\nOptions can be used to customize the arrows. Options are defined as a JSON object. All options are optional.\n\n```javascript\nconst options = {\n    followRelationships: true,\n    color: \"#039E00\",\n    tooltipConfig: (el, title) =\u003e {\n        // tooltip initialization\n    },\n};\n\nconst myArrows = new Arrow(myTimeline, arrowsSpecs, options);\n```\n\n**followRelationships** - defaults to false.\nIf true, arrows can point backwards and will follow the relationships set in the data. If false, arrows will only follow the timeline direction (left to right).\n\n**color** - defaults to \"#9c0000\".\nSets the arrows color.\n\n**strokeWidth** - defaults to 3 (px).\nSets the arrows width in pixels.\n\n**tooltipConfig** - if arrows have a `title` property, the default behavior will add a title attribute that shows on hover. However, you might not want to use the title attribute, but instead your own tooltip configuration.\nThis method takes two arguments, `el` - the arrow - and `title` - the content of the `title` property set in the arrow data.\n\n**hideWhenItemsNotVisible** - defaults to `true`.\nWhen you zoom the timeline and both items go out of the screen. You can set if the arrow is still visible. By default, the arrow hides, but you can change it setting this option to `false`.\n\n## Methods\n\nI have created the following methods:\n\n**getArrow ( *arrow id* )**  Returns the arrow whith this arrow_id.\n\nFor instance:\n\n```javascript\nmyArrow.getArrow(2);\n```\n\n**getIdArrows ()** Returns the list of Id arrows\n\nFor instance:\n\n```javascript\nmyArrow.getIdArrows();\n```\n\n**addArrow ( *arrow object* )**  Inserts a new arrow.\n\nFor instance:\n\n```javascript\nmyArrow.addArrow({ id: 13, id_item_1: 15, id_item_2: 16 });\n```\n\n**removeArrow ( *arrow_Id* )**   Removes the arrows with this arrow_Id.\n\nFor instance:\n\n```javascript\nmyArrow.removeArrow( 10 );\n```\n\n**removeItemArrows ( *item_Id* )**   Removes the arrows connected with Items with this item_Id. Returns an array with the id's of the removed arrows.\n\nFor instance:\n\n```javascript\nmyArrow.removeItemArrows( 23 );\n```\n\n**removeArrowsBetweenItems (*itemId1, itemId2*)**  Removes the arrows between item 1 and item 2.\n\nFor instance:\n\n```javascript\nmyArrow.removeArrowsBetweenItems( 3, 8);\n```\n\n## Examples\n\nYou can see some working examples here:\n\nhttps://javdome.github.io/timeline-arrows/index.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavdome%2Ftimeline-arrows","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavdome%2Ftimeline-arrows","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavdome%2Ftimeline-arrows/lists"}