Comments (17)
Alright thanks for the resource, I understand way better now.
So you do want to have multiples tasks inside a single row stacking on top of each other, and the row height expanding, without the use of the children rows.
I'll have a look at it in the following days an see what I can do :)
from svelte-gantt.
Thanks a lot! That's what I was trying to achieve. It would be great if the row would be expanded depending on the max amount of overlapping events in the timerange.
from svelte-gantt.
@martinfruehmorgen as a workaround this is what I have done to achieve something similar.
Line 1305 in index.js, I give each task an eventType and then alter its y position in the row depending upon that eventType.
/******************************************** EDWARDS CODE HERE *******************************/
if(ctx[0].eventType === "jobslot"){
ctx[6].y = ctx[6].y - 5
} else if(ctx[0].eventType === "activity"){
ctx[6].y = ctx[6].y +25
}else if(ctx[0].eventType === "timesheet"){
ctx[6].y = ctx[6].y +55
}
Line 1351 in index.js then I change the height of each task to fit inside the row height.
ctx[1]/2.8 would change depending on the amount of rows you would want, ofcourse it could also be calculated as rowheight/task count.
set_style(div1, "height", /*height*/ ctx[1]/2.8 + "px"); //EDWARDS CODE HERE
This is very buggy still, especially when I manipulate the window size or click between day and week.
from svelte-gantt.
Hello,
I implemented a custom algorithm to treat this case in one of my projects, but it's currently not integrated as a feature.
So tell me if it suits your need, and I'll see what I can do to integrate it properly.
Basically, for every tasks, the algorithm check if his "space" is free in the first children row, if not, check the second row, etc
So depending on the order of your tasks you might have different results, here the tasks are sorted DESC by start date.
from svelte-gantt.
Hello,
And thanks!
I meant more, that if there are overlapping events f.e. in ligne1, the first (sorted by start date) should be on top of the 2nd and so on by expanding the row height. As I see Ligne 1 / 2 etc as a bookable resource for the events.
Any idea how to achieve this?
Thanks again,
Martin
from svelte-gantt.
So you mean expanding the parent row height to stack the events on top of each others (when they overlap) and not using the children rows ?
I don't quite undersand your use case, the tasks in the main row are events, but the tasks in the children rows are resources for the events ?
from svelte-gantt.
Hello,
No, I mean like the resource grid in Fullcalendar
https://fullcalendar.io/demos
then
"Resource Timeline"
You can drag several events onto one resource so they overlap.
The columns are resources (can be tree or not) and the corresponding line shows the events with the resource (for example a room or machine).
So to say not a Gantt chart but a resource booking timeline.
Thanks!
Martin
from svelte-gantt.
Hello,
did you achieve any progress for this?
Thanks!
Martin
from svelte-gantt.
Hello,
Have been kinda busy the last two weeks, and will still be the next two I think ..! 😭
I'm still handling blocking issues but don't have much time to add new feature right now.
Aiming for end of July/ start of August to implement this feature and few others awaiting 💪
from svelte-gantt.
I am also interested in this. But its not very easy to implement. Especially with task reflections.
Maybe its an idea to use css grid for each row in the future.
from svelte-gantt.
@V-Py Have you made any progress on this? Any thoughts?
I was thinking of trying to remove the y-position property as it is and display tasks in css grid of the table row module (which would probably need changes). This would also mean that some form of the table module has to be integrated permanentely for the gantt to display properly. Here is a libary that seems to use css grid for inspiration on what I mean: https://github.com/cuire/svelte-grid-extended#static-grid
from svelte-gantt.
@BlueFoxPrime Just so I'm understanding this correctly, you mean each row is now in reality a big css grid?
And so tasks that are related would become rows in this grid, all within 1 related row in the Gantt Chart?
from svelte-gantt.
Currently each task is positioned absolute. My idea is to use a css grid and grid rows for y positions. Which in my view could significantly improve the performance and enable the requested feature. It would require core changes.
{#each rows as row}
<div class="grid-row">
{#each row.tasks as tasks}
<div class="grid-item" use:dndaction>{task.id}</div>
{/each}
</div>
{/each}
from svelte-gantt.
Hi @BlueFoxPrime ,
Have you made any progress with this?
I am still struggling with displaying several events with overlapping dates in the same row.
Thanks,
Martin
from svelte-gantt.
V4.2.0 has a new option. Gantt can be set with the layout: 'pack'
option. When assigned overlapped tasks will display one over another. You can check it out in the demo: https://anovokmet.github.io/svelte-gantt/pack-layout
This feature can definitely be improved, so please give any feedback. For example, the row is not expanded, but the task's height shrinks - it would make sense to allow the layout where tasks stay the same size but the row expands. Also, the layout algorithm isn't the best - if multiple tasks overlap the same task but not each other, there is going to be some empty space.
from svelte-gantt.
v4.4.0 has the layout: "expand"
option that expands the row when tasks overlap.
from svelte-gantt.
Hello @ANovokmet ,
And thank you so much!
Will you update the repository here or is there another way to use the new version v4.4.0?
Thank you,
Martin
from svelte-gantt.
Related Issues (20)
- Expanded only work correctly for the first row HOT 1
- Make an option to print the entire gantt HOT 3
- dateAdapter HOT 1
- Custom styling for the whole gantt chart in svelte with tailwind or custom css? HOT 1
- Cannot read properties of undefined (reading '$$') HOT 2
- Custom task component HOT 1
- Row filtering HOT 2
- External draggable example not working HOT 3
- Can't get the demo to run locally HOT 3
- scaling manually HOT 3
- Fix: querySelector usage in selectTask() throws Uncaught DOMException HOT 1
- Event `gantt.api.timeranges.on.resized` returns previous `from` and `to` values HOT 2
- Collapsing parent rows dynamically results in unexpected child behavior HOT 1
- Block pulling tasks HOT 1
- How could I set the rowHeight for the target single row? HOT 7
- Task Color HOT 1
- Back to full year?
- Cannot synchronize scrolling HOT 1
- Dragging of tasks does not deselect previous selected task HOT 2
- TypeError: Cannot read properties of undefined (reading 'model') when updating rows and tasks HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from svelte-gantt.