anovokmet / svelte-gantt Goto Github PK
View Code? Open in Web Editor NEW:calendar: Interactive JavaScript Gantt chart/resource booking component
Home Page: https://anovokmet.github.io/svelte-gantt/
License: MIT License
:calendar: Interactive JavaScript Gantt chart/resource booking component
Home Page: https://anovokmet.github.io/svelte-gantt/
License: MIT License
I want to be able to scroll from left to right for example from 00:00 from today to 00:00 of tomorrow without displaying all hours all at once. I am aware I can set the currentEnd
...but that will mean all hours from 00:00 to next day 00:00 are displayed in one go. Instead scrolling would be good. How could I do that please?
Love this gantt chart, it's awesome, thanks for all your work and under the MIT license.
My issue is I need it in React. I see a few options:
Curious to hear your thoughts on this.
Currently svelte components are in svelte with js syntax.
Its not too hard porting components to typescript.
See https://github.com/sveltejs/template/blob/master/scripts/setupTypeScript.js
It includes replacing script tags with <script lang="ts">
, installing new dependencies and updating rollup.config.js.
Maybe it will be nice to have an optional prop, for when a task is dragged, move the overlapped task forward or backward.
In my project I have integrated the dependency module of gantt chart. But what I observe stroke
and strokeWidth
property is not working as mentioned in document. Is this a open issue or something I am missing.
Do you please share any demo having dependency module integrated with mentioned properties.
I have created the dependency array in below way.
const objDependacy = {
id: new Date().valueOf(),
fromId: '#componentFromId#'
toId: '#componentToId#',
stroke: 'black',
strokeWidth: 15,
arrowSize: 1,
};
this.dependancies.push(objDependacy);`
Gantt exposes updateTask
that upserts a single task.
A function that updates multiple tasks would be useful, and a function that updates a row.
Also functions to get a row, get a task by id, get tasks by row id.
Originally posted by @mstsargin in #7 (comment)
If the 'from' property is not set to the whole time, the starting position of the task bar is drawn incorrectly and will move forward.
The following figure is the official example. Draw the correct screenshot. The 'from' property value is '8:00'.
But if i change the 'from' property's value to '8:30', the starting position of the task bar is drawn incorrectly and will move forward.
The screenshot is as follows:
Hello,
It would be nice to be able to override and/or deactivate the onDateSelected function launched with the on:click event in the ColumnHeaderRow component. My specific need being to change the headers units and/or the columnUnit after clicking on the ColumnHeader. Or at least deactivate the possibility to click on the headers so it won't mess with my layout (ie different units depending of the timescale used)
ColumnHeaderRow.svelte (rows 52 - 57)
{#each _headers as _header} <div class="column-header-cell" class:sticky={header.sticky} style="width:{_header.width}px" on:click="{() => dispatch('dateSelected', { from: _header.from, to: _header.to, unit: _header.unit })}"> <div class="column-header-cell-label">{_header.label || 'N/A'}</div> </div> {/each}
Gantt.svelte (rows 393 - 396)
function onDateSelected(event) { $_from = event.detail.from; $_to = event.detail.to; }
I can maybe try it and do a pull request if you don't have time to treat this. Since I need it for my projects, I'll implement it anyway locally otherwise.
Thank you for your time and you response
Cool library thanks!
Is the dependencies module currently wired up? I followed the code as best I could but couldn't see how to get it going.
Hello
I'm working on Angular@12 and [email protected]
I face one issue when drag and drop new task,
when week view selected and drop new task at last week day then new task not plot exact drop time (position) instead plot few hours early.
also plot working fine starting week days, when you drop new task incremental day then it plot few hours ago and increase plot hours.
please check below example
https://stackblitz.com/edit/angular-ivy-sm719e
Thanks in advance
@ANovokmet When using SvelteGanttExternal
to implement the functionality to drag a new task to the Gantt chart, it does not round/respect the default magnetOffset
which is 15. For example, even on https://anovokmet.github.io/svelte-gantt/, if you use the drag to Gantt functionality, and try dragging it leaving the mouse somewhere in the middle of lines e.g. at 08:06am, this will work. And then the console log also proves this as well. So it is not respecting the default magnetOffset
. However, afterwards, when moving the newly added task, it does respect it.
EDIT: Found another bug when dragging a new task to the Gantt:
When dragging a new task to the Gantt chart, by default, the colour whilst dragging is blue. However, when dropping the task i.e. letting go off the mouse, the task maybe a different colour like orange. Would be good if the task bar had the same colour whilst being dragging as it would when it is dropped.
Right now I have some styles for these two classes, but when I hover off of the gantt or when I click on an already selected row, I would assume that both the hover style and the selected style would be toggled off, but they both remain on. (can provide video if needed)
Is it possible to implement these?
$ npm run dev
> [email protected] dev
> svelte-kit dev
Pre-bundling dependencies:
svelte/store
svelte
svelte-gantt
svelte/animate
svelte/easing
(...and 3 more)
(this will be run only when your dependencies or config have changed)
> node_modules/svelte-gantt/index.js:1:17: error: No matching export in "node_modules/moment/src/moment.js" for import "duration"
1 │ import moment, { duration } from 'moment';
╵ ~~~~~~~~
> Build failed with 1 error:
node_modules/svelte-gantt/index.js:1:17: error: No matching export in "node_modules/moment/src/moment.js" for import "duration"
Error: Build failed with 1 error:
node_modules/svelte-gantt/index.js:1:17: error: No matching export in "node_modules/moment/src/moment.js" for import "duration"
at failureErrorWithLog (/home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:1493:15)
at /home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:1151:28
at runOnEndCallbacks (/home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:941:63)
at buildResponseToResult (/home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:1149:7)
at /home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:1258:14
at /home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:629:9
at handleIncomingPacket (/home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:726:9)
at Socket.readFromStdout (/home/skyf0l/repos/RoomIt/frontend/node_modules/esbuild/lib/main.js:596:7)
at Socket.emit (events.js:400:28)
at Socket.emit (domain.js:475:12)
With my package.json:
{
"name": "RoomIt",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev",
"build": "svelte-kit build",
"preview": "svelte-kit preview",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
},
"devDependencies": {
"@sveltejs/kit": "next",
"prettier": "^2.4.1",
"prettier-plugin-svelte": "^2.4.0",
"svelte": "^3.34.0"
},
"type": "module",
"dependencies": {
"@fontsource/fira-mono": "^4.5.0",
"@lukeed/uuid": "^2.0.0",
"cookie": "^0.4.1",
"svelte-gantt": "^3.0.4-beta"
}
}
Nice work on the chart!
But I dont seem to be able to add classes to the timeRanges
It works for the tasks
timeRanges: [
{
id: 1,
from: Date.parse("2022-05-16T12:25"),
to: Date.parse("2022-05-16T12:50"),
classes: "green",
label: "test",
},
{
id: 2,
from: Date.parse("2022-05-16T14:25"),
to: Date.parse("2022-05-16T14:50"),
classes: ["currentTime"],
label: "test2",
},
]
version "4.0.3-beta"
if (this.chart) this.chart.api.tasks.select((task) => console.log());
I am trying to register a select event and do some logic there but getting this issue.
Hey
Thank you for the generous open-source, i am getting the following error while i try to add task from API using updateTasks method.
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'height') which leads to getHeight(model) { return this.row(model.resourceId).height - 2 * this.rowPadding; }
yes i have mapped children array id to resourceId, thank you
As #20 suggested, it would be good if columns could be styled with css. Much better for performance would be to still use background-image
but allow columns to be styled using gantt options.
Maybe something like
columnStrokeWidth: 1,
columnStrokeColor: '#ccc',
I’m working on a small project of mine where I’m looking to use a time line calendar, I'm trying to use svelte-gantt in my angular project, I didn’t find any example for implement this in angular.
I tried using this example but I got this error :
"TS2749: 'SvelteGantt' refers to a value, but is being used as a type here. Did you mean 'typeof SvelteGantt'?"
here is my component.ts
`
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import * as moment from 'moment';
import { SvelteGantt } from 'svelte-gantt';
@component({
selector: 'app-root',
template: '<div #ganttElement style="height: 100%; width: 100%;">'
})
export class AppComponent implements AfterViewInit {
/* here where the error shows */
gantt: SvelteGantt; // TS2749: 'SvelteGantt' refers to a value, but is being used as a type here. Did you mean 'typeof SvelteGantt'?
@ViewChild('ganttElement', {static: false}) ganttElement: ElementRef;
ngAfterViewInit() {
this.gantt = new SvelteGantt({
// target a DOM element
target: this.ganttElement.nativeElement,
// svelte-gantt options
props: {
tasks: [],
rows: [],
from: moment().startOf('week'),
to: moment().endOf('week')
}
});
}
}
`
Hello,
I can't show the weekly view in a compressed form, but the gantt looked like that in old versions. In the new version, when I click on the bar above the dates, it switches to that view. How can I get that fixed view to come?
Hi! 👋
Firstly, thanks for your work on this project! 🙂
In my opinion the types I'm using seem to be working.
I'm not sure about the id. Afaik it can be a string too.
label is defined in the README but missing in the interface.
height works fine without providing it. So I will assume it's optional.
Aliyss
Here is the diff that solved my problem:
diff --git a/node_modules/svelte-gantt/types/core/row.d.ts b/node_modules/svelte-gantt/types/core/row.d.ts
index a2469e2..5e65ca3 100644
--- a/node_modules/svelte-gantt/types/core/row.d.ts
+++ b/node_modules/svelte-gantt/types/core/row.d.ts
@@ -1,9 +1,10 @@
export interface RowModel {
- id: number;
+ id: number | string;
+ label: string;
classes?: string | string[];
contentHtml?: string;
enableDragging?: boolean;
- height: number;
+ height?: number;
/** Child rows in expandable tree */
children?: RowModel[];
/** Content of row header, html string */
I've been trying to use a string
(uuid) instead of a number
to identify my tasks and rows. This somehow seems to be broken though:
When using my test data as shown below then the component will load and display everything as expected.
As soon as I try to access a task event via API (i.e. gantt.api.tasks.on.select
) though, the callback is run but only receives an empty object instead of the task. When changing the ids to some numbers then everything works properly again.
I tried to look into your code but I am not familiar enough with javascript to figure out what the issue might be.
import { time } from '../utils';
export const data = {
rows: [{
id: "bda66280-7a1b-4c63-baaa-fcd59fda7628",
label: "Petunia Mulliner"
}],
tasks: [{
id: "d4a5e677-ac25-4266-879d-2694e861df07",
resourceId: "bda66280-7a1b-4c63-baaa-fcd59fda7628",
label: "LPCVD",
"from": time("9:00"),
"to": time("11:00"),
classes: "orange"
}],
dependencies: []
}
Hello,
I would be glad to help on this project and on some of the issues since I'm having some of them too and using your gantt in my projects.
But I'm having a hard time making the dev mode work correctly since your big update.
Looks like the documentation is not accurate anymore and I don't know how to setup it the right way.
If you or anyone could give the proper way to setup the dev mode it would be awesome so I could do proper PR and help maintain this cool project :)
Thanks
It would be nice if they had some color by default. Noticed this in a new project.
Hello,
I am reading machine and task data from database. I have 25 machine, 40 task records in my database. I am getting this error after 27th task. I don't get an error when I change my query to get first 26 tasks. What could cause the problem?
I write console.log command in index.js function validate_each_keys. Get error when double undefined records.
Hello, first of all thank you for your amazing gantt.
I have found some bugs related with your tools/build.js, but I can't create a pull request..
Greetings, Fábio
When trying to use with sapper I'm getting the following error.
\node_modules\svelte-gantt\index.js:1
import moment, { duration } from 'moment';
^^^^^^
SyntaxError: Cannot use import statement outside a module
Is it possible to disable all events for tasks? I mean make some kind of read-only mode
Thank you
Hey, really nice library. It is hard to find Gantt charts with permissive licenses.
Any thoughts on publishing an NPM package? I think it'd really help adoption.
Maybe I'm not able to find it, but can someone give me the source code for this.'
https://anovokmet.github.io/svelte-gantt/#/tree
Trying to get this to run in SvelteKit hasn't been fun -_-
Hello,
is there any way I can generate time ranges resize event and get time range object with resize time, also time range label box click event and get time range object
I've try but no success
Please help me out
Thanks in advance
This project is awesome. I love it so much.
I have some problem when I using this.
window.onresize, use gantt.$set({rowHeight: 50}), unchanged
How can we show start time and stop time in task gantt?
Originally posted by @mstsargin in #6 (comment)
Currently, svelte-gantt has a dependency on momentjs. We would like for that to be extendable with other date libraries.
Whenever a task is clicked on or dragged/moved, the following CSS class always stays: .sg-task.selected.svelte-19txnoa
. It would be good if and when the user clicks out somewhere else on the page (not necessarily on another task - anywhere on the page really), for the selected class to be removed from the task. I think this may require some event listener (but not exactly sure).
Whenn i follow the way to import ES6 style in my App.svelte file:
import { SvelteGantt, SvelteGanttTable } from 'svelte-gantt';
It works, but most of the styles for the tasks are missing.
Shouldn't they be also included when I'm having tasks in the Gannt or do I really have to include them directly from node_modules my self?
Hey,
Let me begin with a big thank you for generously open-sourcing your hard work around Gantt charts. There are few free options available out there so really appreciate the efforts and the intention.
I tried running the demo/docs project but found the following console errors. There seems to be an issue around Svelte Routing.
I'm planning to consume, enhance, and contribute back to this project. Could you please let me know the steps / provide me with a document to set up the project for local development? I followed this but it seems it is not up to date https://github.com/ANovokmet/svelte-gantt#development-build.
Thanks in advance.
Manaday
I want to show when mouse hover a information modal form on a gantt chart item. How i can do it?
Hi
I am currently trying to create a first draft of a Gantt chart using this library. So far so good, but as soon as I want to include GanttOptions as well, the error message mentioned in the title comes up.
The message is triggered on the line: let { toggle, optionsStream } = getContext('options'); in GanttOptions.svelte. However, I have already checked everything several times and I can't find any error.
Does anyone know what the problem could be?
Thanks a lot
Mike
Hello,
I'm currently trying to learn about initiate the svelte-gantt.
and I try to create a copy from the example that you have in /demo/src/route/tree.svelte and just do exactly the same configuration for the options, especially for tasks.
It is set as "orange" on classes for example of the first three task example.
But I'm still got the default task background-color for that which is blue
Anything else that need to be configured to get the "orange" task background-color just like the example?
thank you for your time.
Hello,
Is there a way to have overlapping events in a row below each other and not visually overlapping?
Any hint how to achieve that, is appreciated!
edit: I see, it was discussed already
#19 (comment)
Any news regarding this?
Thanks
Martin
Hey guys, wouldnt it be nice to have extend table features (e.g. group by column/filter/sorting/...)?
I found this example for grouping, to show the feature (it would be awesome to have reflections on the parent of each dynamic group):
https://svelte.dev/repl/8e810d253d4e4d86a41a6ff02729c6b6?version=3.48.0
'Header Less Table' (used in the REPL) seems to be discontinued for 'Tanstack Table'.
Looking at this, layout of rows doesnt seem so different from rowStore used in 'Svelte Gantt' (https://tanstack.com/table/v8/docs/api/core/row). Maybe they are willing to include missing row properties like Y-Positions and AllParents.
Any thoughts?
Right now svelte-gantt is used in onMount
only for client-side rendering, is it possible for it to render server side as well and not rely on document
?
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.