@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.
Home Page: https://melfore.github.io/konva-timeline/
License: MIT License
Wrong foreground is generated when task color is black or white.
For all other use cases works fine.
Display task label allowing toggle display via boolean flag at Timeline level.
Add ellipsis if text goes longer than task size.
Move calculations in Timeline context to remove logic from the Timeline component
Do not perform initial rounding by defect
Works only with drag in min and res in hours.
Add min safe columnWidth and min safe rowHeight.
Add also defaults.
util.js:239 Uncaught Error: Invalid unit value NaN
at asNumber (util.js:239:1)
at normalizeObject (util.js:249:1)
at Duration.fromObject (duration.js:263:1)
at Duration.fromDurationLike (duration.js:286:1)
at DateTime.plus (datetime.js:1440:1)
at Group.<anonymous> (index.tsx:171:1)
at Group._fire (Node.js:1188:1)
at Group._fireAndBubble (Node.js:1139:1)
at Group.fire (Node.js:824:1)
at DragAndDrop.js:92:1
Currently a Task can be placed outside timeline max time.
When put outside time, tooltip remains visible.
See for reference:
storybookjs/test-runner#301
It happened two times in run: https://github.com/melfore/konva-timeline/actions/runs/6120371656
Suggested solution is to workaround changing tcp param as follows: npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook
Code refactoring of components and methods, before doing optimization and performance related issues
Take following example:
Timestamp in milliseconds: 1693523580000
Date and time (GMT): Thursday, 31 August 2023 23:13:00
Date and time (your time zone): Friday, 1 September 2023 01:13:00 GMT+02:00
In this case, with range duration = 1d and resolution = 1h, the result on timeline shows ticks for each 13th minute.
It should instead reset to closest resolution (1h) to ensure correct ticks format.
Display a time range of 24hrs, creating one column for each hour.
Column width could be set from the outside, but have a lower bounded value, below which is not possible to go.
Export most used data types and avoid imports from /dist/...
Standard tooltip is disappearing from screen when scrolling
Allow resize of Grid rows via prop like for columnWidth
Handle layout theme via prop or via browser APIs and internally apply corresponding color schema.
Relates to #12
Prepare all steps required to CI release:
Fix the known bugs happening on component space resize:
In addition to what done in #1, the column magnitude will not be by default 1hr but its value can vary.
Provide a set of predefined choices (1 / 2 / 4 / 6 / 12 / 24).
If the time range goes back in the past, let the possibility for the KonvaTimeline to auto-set the current time (default enabled).
Module not found: Error: Can't resolve 'luxon'
Cannot import task data, it uses dist folder
Try fixing some UX issues with drag & drop.
The most important found:
Add explicit command for npm install bringing also the peer dependencies
Add possibility for final user to pass in a custom tooltip component to display on task over.
The set-output command is deprecated and will be disabled soon.
Please upgrade to using Environment Files.
For more information see:
https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/
Add resolutions in terms of minutes:
Prepare two datasets:
When dragResolution is not set, use 1 min by default.
The calculation of dragResolution is done inside TimelineContext component.
Align git-cz and commintlint to @melfore/mosaic
Improve date time visualization displaying two units at the same time:
This requires the definition of a schema mapping between different units (hour/day, day/week, week/month, month/year)
Move the hour tick above the cell border or in a better place to improve UX.
Concurrently requires a set of \ separated commands to exec.
Commands where just added in series using | operator from GH actions.
https://storybook.js.org/docs/react/writing-tests/test-runner#run-against-non-deployed-storybooks
npm WARN exec The following package was not found and will be installed: [email protected]
node:assert:125
throw new AssertionError(obj);
^
AssertionError [ERR_ASSERTION]: [concurrently] no commands provided
at concurrently (/home/runner/.npm/_npx/e559c3a2028ff25f/node_modules/concurrently/dist/src/concurrently.js:36:22)
at exports.default (/home/runner/.npm/_npx/e559c3a2028ff25f/node_modules/concurrently/dist/src/index.js:34:44)
at Object.<anonymous> (/home/runner/.npm/_npx/e559c3a2028ff25f/node_modules/concurrently/dist/bin/concurrently.js:207:21)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47 {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: 0,
expected: 0,
operator: 'notStrictEqual'
}
With dark bg, there is no changes in label, rows and cols color
Add flag to show / hide the resources via props
Currently changing row height has an impact also on label positioning.
Fix it to make it responsive (offset and size).
Implement task resize adding handlers on the lx / rx boundaries of the rect.
[3:09:15 PM] [semantic-release] › ℹ Running semantic-release version 21.0.9
[3:09:15 PM] [semantic-release] › ✘ An error occurred while running semantic-release: Error: Cannot find module '@semantic-release/changelog'
Require stack:
- /home/runner/work/konva-timeline/konva-timeline/noop.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
at resolveFileName (/home/runner/work/konva-timeline/konva-timeline/node_modules/resolve-from/index.js:29:39)
at resolveFrom (/home/runner/work/konva-timeline/konva-timeline/node_modules/resolve-from/index.js:43:9)
at module.exports (/home/runner/work/konva-timeline/konva-timeline/node_modules/resolve-from/index.js:46:47)
at loadPlugin (file:///home/runner/work/konva-timeline/konva-timeline/node_modules/semantic-release/lib/plugins/utils.js:59:54)
at file:///home/runner/work/konva-timeline/konva-timeline/node_modules/semantic-release/lib/plugins/index.js:1[8](https://github.com/melfore/konva-timeline/actions/runs/5940672165/job/16109772606#step:8:9):43
at async file:///home/runner/work/konva-timeline/konva-timeline/node_modules/semantic-release/lib/plugins/index.js:15:2[9](https://github.com/melfore/konva-timeline/actions/runs/5940672165/job/16109772606#step:8:10)
at async file:///home/runner/work/konva-timeline/konva-timeline/node_modules/semantic-release/lib/plugins/index.js:15:29
at async file:///home/runner/work/konva-timeline/konva-timeline/node_modules/semantic-release/lib/plugins/index.js:15:29
at async default (file:///home/runner/work/konva-timeline/konva-timeline/node_modules/semantic-release/lib/plugins/index.js:14:7) {
code: 'MODULE_NOT_FOUND',
requireStack: [ '/home/runner/work/konva-timeline/konva-timeline/noop.js' ]
}
Error: Cannot find module '@semantic-release/changelog'
Require stack:
- /home/runner/work/konva-timeline/konva-timeline/noop.js
at Module._resolveFilename (node:internal/modules/cjs/loader:[10](https://github.com/melfore/konva-timeline/actions/runs/5940672165/job/16109772606#step:8:11)77:15)
at resolveFileName (/home/runner/work/konva-timeline/konva-timeline/node_modules/resolve-from/index.js:29:39)
at resolveFrom (/home/runner/work/konva-timeline/konva-timeline/node_modules/resolve-from/index.js:43:9)
at module.exports (/home/runner/work/konva-timeline/konva-timeline/node_modules/resolve-from/index.js:46:47)
at loadPlugin (file:///home/runner/work/konva-timeline/konva-timeline/node_modules/semantic-release/lib/plugins/utils.js:59:54)
at file:///home/runner/work/konva-timeline/konva-timeline/node_modules/semantic-release/lib/plugins/index.js:18:43
at async file:///home/runner/work/konva-timeline/konva-timeline/node_modules/semantic-release/lib/plugins/index.js:15:29
at async file:///home/runner/work/konva-timeline/konva-timeline/node_modules/semantic-release/lib/plugins/index.js:15:29
at async file:///home/runner/work/konva-timeline/konva-timeline/node_modules/semantic-release/lib/plugins/index.js:15:29
at async default (file:///home/runner/work/konva-timeline/konva-timeline/node_modules/semantic-release/lib/plugins/index.js:[14](https://github.com/melfore/konva-timeline/actions/runs/5940672165/job/16109772606#step:8:15):7) {
code: 'MODULE_NOT_FOUND',
requireStack: [ '/home/runner/work/konva-timeline/konva-timeline/noop.js' ]
}
Check browserlist extension and see if and how to improve it (removal of Android 4.4).
Could not find a declaration file for module '@melfore/konva-timeline'. 'c:/Users/grudz/projects/peanut/node_modules/@melfore/konva-timeline/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/melfore__konva-timeline if it exists or add a new declaration (.d.ts) file containing declare module '@melfore/konva-timeline';
Create styles for components in order to handle Theme variants (dark vs light).
Like for Task related components, split Grid components in sub parts and create stories
Test the scenario of rendering big Canvas using https://konvajs.org/docs/sandbox/Canvas_Scrolling.html example from official documentation.
Add test suites using jest + testing-library
Implement snap to grid when dragging by adding a prop for drag and drop resolution.
It should be possibly different from standard resolution.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.