{"id":20895002,"url":"https://github.com/melfore/konva-timeline","last_synced_at":"2025-04-07T07:03:45.967Z","repository":{"id":189941298,"uuid":"652550658","full_name":"melfore/konva-timeline","owner":"melfore","description":"@melfore/konva-timeline is a free, open source, TypeScript ReactJS library that uses konva and react-konva to render a scheduler / gantt / calendar component using canvas.","archived":false,"fork":false,"pushed_at":"2025-02-12T15:28:05.000Z","size":18776,"stargazers_count":51,"open_issues_count":1,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-31T06:01:06.455Z","etag":null,"topics":["calendar","canvas","dnd","free","gantt","konva","konva-react","open-source","opensource","reactjs","scheduler","timeline","tracker","typescript"],"latest_commit_sha":null,"homepage":"https://melfore.github.io/konva-timeline/","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/melfore.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2023-06-12T09:52:27.000Z","updated_at":"2025-03-14T12:51:00.000Z","dependencies_parsed_at":"2023-08-22T15:30:14.707Z","dependency_job_id":"f7efc795-0cbe-47e4-bc69-88258980d1c8","html_url":"https://github.com/melfore/konva-timeline","commit_stats":null,"previous_names":["melfore/konva-timeline"],"tags_count":95,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melfore%2Fkonva-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melfore%2Fkonva-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melfore%2Fkonva-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melfore%2Fkonva-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/melfore","download_url":"https://codeload.github.com/melfore/konva-timeline/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247608150,"owners_count":20965952,"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":["calendar","canvas","dnd","free","gantt","konva","konva-react","open-source","opensource","reactjs","scheduler","timeline","tracker","typescript"],"created_at":"2024-11-18T10:24:23.373Z","updated_at":"2025-04-07T07:03:45.934Z","avatar_url":"https://github.com/melfore.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @melfore/konva-timeline\n\n[![Konva Timeline - Release](https://github.com/melfore/konva-timeline/actions/workflows/release.yml/badge.svg?branch=main)](https://github.com/melfore/konva-timeline/actions/workflows/release.yml) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n`@melfore/konva-timeline` is a TypeScript ReactJS library that uses `konva` and `react-konva` to render a timeline component using canvas.\n\n\u003ca href=\"https://github.com/melfore/konva-timeline/blob/master/CHANGELOG.md\" target=\"_blank\"\u003e**Changelog**\u003c/a\u003e | \u003c!--a href=\"https://github.com/melfore/mosaic/blob/master/CONTRIBUTING.md\" target=\"_blank\"\u003e**Contributing**\u003c/a\u003e | \u003ca href=\"https://github.com/melfore/mosaic/blob/master/MIGRATION.md\" target=\"_blank\"\u003e**Migration**\u003c/a\u003e | --\u003e \u003ca href=\"https://melfore.github.io/konva-timeline\" target=\"_blank\"\u003e**Storybook**\u003c/a\u003e\n\n![sample](./assets/sample.gif)\n\n## Features\n\nThis library is meant to represent data on a time range. It has been developed in a way to be the most generic it could. It can be used to display _gantt charts_, _schedulers_ and _planners_.\n\nThe library follows the concept of organizing data (tasks) belonging to specific groups (resources) over a predefined time window.\n\n### Interaction\n\nThere can be from none to many tasks per each resource and tasks can be moved across resources. Tasks can also be resized and hovered.\n\nFor each user interaction with tasks there is a dedicated hook function exposed by the component's props. This enables various use cases like displaying the details of a task inside a modal or calling an API each time the task is moved.\n\n### Gantt\n\nIn order to create and display connection between tasks is neccesary setting dedicated props:\n\n- relatedTasks is a string array prop of TaskData that contains Ids of related Tasks.\n- enableLines is a global prop for the visualization of the connections.\n\nIn this case OnTasksChange return also array of all tasks id that are inpacted by changed end of a the task at hand, and value of time in milliseconds of this variation.\n\n⚠️ By relatedTasks is mean these tasks that their start can depends of the end of the task in question.\n\n![gantt](./assets/gantt.png)\n\n### Custom display\n\nSize of columns and rows can be adjusted using dedicated props:\n\n![column width](./assets/column-width.png)\n\n![row height](./assets/row-height.png)\n\nResolution of the timeline can be changed as well, choosing the right one for your scenario.\n\nBelow a comparison of the same data set using 5 mins resolution:\n\n![5mins resolution](./assets/resolution-5mins.png)\n\nNow with 2 hours resolution:\n\n![2hrs resolution](./assets/resolution-2hrs.png)\n\n### Tasks\n\nIn many of the above mentioned use cases it's important to track the progress of tasks. That's why we offer a built-in visualization for percentage of completion:\n\n![completed percentage](./assets/completed-percentage.png)\n\nTasks can also have their label displayed:\n\n![label display](./assets/label-display.png)\n\n### Handling timezones and DST\n\nThe library uses `luxon` to handle dates and date-times. This allows localization (see next paragraph) and handling of timezones and DST.\n\nThe default timezone configuration is `system` (meaning the system's local zone). This can be overridden using the dedicated prop.\n\nAlong with timezones, the library handles DST changes (if any).\nIn the example below the switch of DST for spring 2020, happening between March 28th and March 29th.\n\n![timezones dst](./assets/timezones-dst.png)\n\n### Localization\n\nDate formats and static texts can be localized:\n\n![localized](./assets/localized.png)\n\n### Area Select\n\nSelect area to get its timeRange and resourceId:\n\n![area selected](./assets/selected-area.png)\n\n### Personalized ToolTip\n\nIt's possible to personalize the toolTip passing createToolTip callback that return jsx element\n\n![personalized toolTip](./assets/personalized-tooltip.png)\n\n### Personalized Resource and Clickable Resource\n\nIt's possible to personalize the resource passing `customResources` callback that return jsx element.\n\nCustomResources expose a prop `ResourceData` that contain data of a single resource and also its dimension,\nit allow a easy acces to the width and heigh in order to fit a custom Resource.\n\nIf `onResourceClick` is set, it allow an click event on resource\n\n![personalized toolTip](./assets/customRes.png)\n\n### Summary\n\nDisplay a new column by setting Summary data prop, id of a single summary's value must be the same as the resource's id in order to display that value in the right place.\nIf id does not exist, 🚫 will be dispaly instead of the value.\n\nIn order to diplay the data its also necessary set `showSummary` prop.\n\nDefault summary header is \"Summary\", its possible to change it passing a new header by `summaryHeader` prop\n\n![personalized toolTip](./assets/summary.png)\n\n## Getting started\n\nTo install the library run:\n\n```\nnpm i @melfore/konva-timeline\n```\n\nThis library has the following required peerDependencies:\n\n```\n\"konva\": \"\u003e= 9.2.0 \u003c 10\",\n\"luxon\": \"\u003e= 3.3.0 \u003c 4\",\n\"react\": \"\u003e= 18.2.0 \u003c 19\",\n\"react-dom\": \"\u003e= 18.2.0 \u003c 19\",\n\"react-konva\": \"\u003e= 18.2.9 \u003c 19\",\n\"react-konva-utils\": \"\u003e= 1.0.5 \u003c 2\"\n```\n\n### ⚠️ Installing with npm \u003c 7\n\nIf installing with versions of npm \u003c 7, you have to manually install them.\n\n```\nnpm i konva luxon react react-dom react-konva\n```\n\nBeware to check the versions installed, they must match peerDependencies ranges.\n\n### Usage\n\nImport the `KonvaTimeline` component from `@melfore/konva-timeline` library:\n\n```\nimport { KonvaTimeline } from \"@melfore/konva-timeline\";\n```\n\nProvide the minimum set of required props.\n\n```\n  \u003cKonvaTimeline\n    range={{\n      end: 1577919600000,\n      start: 1577833200000\n    }}\n    resources={[\n      {\n        color: '#f00bda',\n        id: '1',\n        label: 'Resource #1'\n      },\n      {\n        color: '#b66f77',\n        id: '2',\n        label: 'Resource #2'\n      },\n      {\n        color: '#273e3e',\n        id: '3',\n        label: 'Resource #3'\n      }\n    ]}\n  /\u003e\n```\n\nThis will print an empty timeline with three resources:\n\n![usage empty](./assets/usage-empty.png)\n\nAdd an array of tasks:\n\n```\n  \u003cKonvaTimeline\n    range={{\n      end: 1577919600000,\n      start: 1577833200000\n    }}\n    resources={[\n      {\n        color: '#74ff93',\n        id: '1',\n        label: 'Resource #1'\n      },\n      {\n        color: '#7de7dd',\n        id: '2',\n        label: 'Resource #2'\n      },\n      {\n        color: '#a6bbec',\n        id: '3',\n        label: 'Resource #3'\n      }\n    ]}\n+   tasks={[\n+     {\n+       id: '4',\n+       label: 'Task #4',\n+       resourceId: '2',\n+       time: {\n+         end: 1577833740000,\n+         start: 1577833200000\n+       }\n+     },\n+     {\n+       id: '2',\n+       label: 'Task #2',\n+       resourceId: '1',\n+       time: {\n+         end: 1577848200000,\n+         start: 1577833200000\n+       }\n+     },\n+     {\n+       id: '1',\n+       label: 'Task #1',\n+       resourceId: '3',\n+       time: {\n+         end: 1577849520000,\n+         start: 1577833200000\n+       }\n+     },\n+     {\n+       id: '3',\n+       label: 'Task #3',\n+       resourceId: '1',\n+       time: {\n+         end: 1577885040100,\n+         start: 1577871660100\n+       }\n+     },\n+     {\n+       id: '5',\n+       label: 'Task #5',\n+       resourceId: '2',\n+       time: {\n+         end: 1577865540100,\n+         start: 1577842440100\n+       }\n+     }\n+   ]}\n  /\u003e\n```\n\nThe `resourceId` property of each task assigns the task to the respective resource.\n\n![usage final](./assets/usage-final.png)\n\n## Documentation and examples\n\nBrowse \u003ca href=\"https://melfore.github.io/konva-timeline\"\u003eofficial StoryBook\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelfore%2Fkonva-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelfore%2Fkonva-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelfore%2Fkonva-timeline/lists"}