neuronetio / gantt-schedule-timeline-calendar Goto Github PK

Describe the bug
When the DOM before the timeline is edited, the position of the rectangle in the selection plugin in bad.

To Reproduce
Steps to reproduce the behavior:

1. Go to your page : https://neuronet.io/gantt-schedule-timeline-calendar/main.html
2. Edit the DOM in the console

$("h1").remove();
$("body>div:first-child").remove();

3. Test to select
4. The selection rectangle is shifted related to the mouse cursor

Hello, your component is absolutely awesome, I'm implementing it in a personal project, because it perfectly solves my need. Thank you very much! But however I can't fix a bug I'm experiencing and it's a shame because I've almost finished all my work but I really can't fix the fact of displaying a line item if its start date and end date exceed the dates currently visible... I find it logical to be able to see the item crossing the entire width as long as our scope of displayed dates covers its duration, what do you think? Do you have any advice for me? Thank you again very much.

I'd like to use escaped text like 'text' on row.

I use isHtml option like the below. but It's not working.

Describe the bug
Expanded event column in last parent doesn't work well.

To Reproduce
Steps to reproduce the behavior:

1. Create 2 parents with some childs and expanded in parents to true

1.Label with expander
2. parent1
2.1 child1
3. parent2
3.1. child2
3.2. child3

2. When you expand and collapse the expander in label, all works well (!important).
   The same with the first parent. But on the second (and last parent) when collapse, children nodes doesnt disapear. The rows with items appears and disappears fine but the list column row is static (doesn't dissapear)

Expected behavior
When click on the expander of the last parent, childrens will collapse.

Screenshots

Desktop:

• Windows 10
• Last Chrome
• vue-gantt-schedule-timeline-calendar ^1.0.18

Additional context
Child and parents are well formed because the label expander works well. Only fails the expander on the last parent.

Describe the bug
When you use the method selected() of the selection plugin, the data you receive into is not marked as selected.

In the documentation you said that event callback fired when selection process is finished (final event) and something is selected (or not).

But I think this callback should occurs after that the items are marked as selected, this is the real final event.

I have no value for items before initialization when using the component, which makes Selection not working properly

error meesage:
Selection.plugin.ts:296 Uncaught TypeError: all is not iterable
at getSelecting (Selection.plugin.ts:296)
at select (Selection.plugin.ts:337)
at SelectionAction.mouseMove (Selection.plugin.ts:473)
at executeFrame (helpers.ts:15)
getSelecting @ Selection.plugin.ts:296
select @ Selection.plugin.ts:337
SelectionAction.mouseMove @ Selection.plugin.ts:473
executeFrame @ helpers.ts:15
requestAnimationFrame (async)
wrapperFn @ helpers.ts:17

Selection.plugin.ts:413 Uncaught TypeError: elements[(type + "s")] is not iterable
at endSelect (Selection.plugin.ts:413)
at HTMLDocument.SelectionAction.mouseUp (Selection.plugin.ts:482)

Is your feature request related to a problem? Please describe.
While in timeline/schedule mode I need to display multiple items for a given row on the same date.

Describe the solution you'd like
I like to see the rows height expand and items that over lap go below the "main" line of the row. Take this example photo. Job 1 overlaps with Job 2 on the 12th and Job 2 overlaps Job 3 on the 14th. What I would want is to see the row increase in height and Job 2 be displayed below the "main" axis of the row which Job 1 and Job 3 would sit on.

Describe alternatives you've considered
I have considered using collapsible/expansible sub rows but that doesn't represent the data I am trying to show. In my schedule I am scheduling jobs to people and normally a job will span a few days but it is possible for the person to have multiple jobs on the same day. I just need a good way to display this.

Additional context

If there is already a way to do this please let me know. If anybody else has a good idea for this scenario please let me know I am all ears.

Hi,
First of all thank you for this component, I've been using it for a while and it's great!

I'm trying to force the chart layout to display the columns as days.
I've 2 tasks that start at the beginning of the day and ends at midnight and I want to chart to display it as a one day timeline.

I've been try to set the config to be like:
const config = { height: 600, list: { rows: buildRows(tasks), columns, expander: { padding: 31 }, toggle: { display: true }, }, chart: { items: buildItems(tasks), time: { from: 0, to: 0, zoom: 21, period: 'day', dates: {}, maxWidth: {} }, }, classNames: {}, actions: {} };

but the gantt is still displayed as hourly layout.
Is there any way to force the gantt to be displayed as daily layout?

Thanks

Hi!

The previous version had a button to recenter position for today.
Is it posible to do so in this version of timeline calendar ?

Hello,

is it possible to have one item on several rows? For example one item for several people (resource/row single staff).
chart: { items: { '1': { id: '1', rowId: '1', label: 'Item 1', time: { start: new Date().getTime(), end: new Date().getTime() + 24 * 60 * 60 * 1000 } }, '2': { id: '2', rowId: '2', label: 'Item 2', time: { start: new Date().getTime() + 4 * 24 * 60 * 60 * 1000, end: new Date().getTime() + 5 * 24 * 60 * 60 * 1000 } }, '3': { id: '3', rowId: '2', label: 'Item 3', time: { start: new Date().getTime() + 6 * 24 * 60 * 60 * 1000, end: new Date().getTime() + 7 * 24 * 60 * 60 * 1000 } }, '4': { id: '4', rowId: '3', label: 'Item 4', time: { start: new Date().getTime() + 10 * 24 * 60 * 60 * 1000, end: new Date().getTime() + 12 * 24 * 60 * 60 * 1000 } }, '5': { id: '5', rowId: [4, 5], label: 'Item 5 multiple', time: { start: new Date().getTime() + 12 * 24 * 60 * 60 * 1000, end: new Date().getTime() + 14 * 24 * 60 * 60 * 1000 } } } }

Thanks!
Martin

Describe the bug
The final row will still display the row header (created via the columns list) if the row is collapsed or deleted.

To Reproduce
Steps to reproduce the behavior:

1. Create a chart with a row and one sub-row.
2. Collapse the parent row or click the header of the column to collapse all or programmatically delete the sub row.
3. The row is gone but the row header remains.

Expected behavior
The row header is also deleted.

Screenshots
Here is my initial state on load (data is displayed correctly.

When I click to collapse Row 2 the sub row is gone but the row header "Row 2 Sub-Row" is still dispalyed.

If I instead delete Row 2 Sub-Row you can see Row 2 has been updated to show it is no longer expandable (which is correct) but the sub row header is still present.

Desktop:

• OS: Windows 10
• Browser: Chrome
• Version: Chromium: 80.0.3987.87

Additional context
This will only happen to the very last row displayed if it is a sub row. Subrows that are not the very last row will collapse/delete as expected (i.e Row 1 in the above photos collapses/deletes as expected).

Thank you very much. Does it currently have all the features of the previous version（https://github.com/neuronetio/gantt-elastic）? Would you consider supporting the following features:

1. Support importing mpp or xml files of microsoft project.
2. Create subtasks, associate subtasks, merge subtasks?
3. WBS structure
4. Associate personnel, materials and other resources.
   Thanks.

I'm sorry because this issue is a duplicate of a previous issue that I can't reopen even though it's not totally resolved...

#43

I'm copying my last message:

Hello Neuronetio, it seems that the fix you made works great in one display direction but not in another.

In the example I posted on the screenshot, I change the date range displayed by the component from week to week.
If the component currently displays the beginning of an item, on the next display when the beginning of the item is no longer visible, the label no longer appears, and conversely when I scroll backwards through the dates, if an item is not yet displayed by the component, when you meet its end date, the label will be displayed perfectly.

Maybe there is a display condition to change?

Anyway thank you very much for all your work !

I've noticed that inside ListColumnRow, after clearing out items and rows, then changing the column widths. The onPropsChange is called, and state.subscribeAll is called on rows that don't exist anymore.

shouldDetach gets set to true, but I'm not sure what its doing.

I added some console.log and console.count inside ListColumnRow to visualize.
then hit clearAll, and resized a column a bit, then hit clearAll again. The rows that dont exist anymore are getting logged.

Describe the bug
The last row is cutted. You can see in your example. (https://neuronet.io/gantt-schedule-timeline-calendar/scheduler.html).
Go down at end of page, the last event is cut horizontally.

Screenshots

Desktop (please complete the following information):

• OS: Mac OSX (Mojave)
• Browser: chrome / firefox

Describe the bug
Row with "parentId: null" cause a bug : The row does not display.

Expected behavior
Like when you don't set the parentId property.

On your old version I opened an issue asking if this was possible and you mentioned it would be included in this new version. I was curious if it's been added into this version yet?

Here's the issue I opened previously: neuronetio/gantt-elastic#89

Hi there!

I was wondering if you are available for hire for custom work. We've build a productivity app, ClickUp (https://clickup.com/) that has over one million users and we'd love to work with you on some custom work for this incredible library you've built.

Let me know if you are available to do so - please email me [email protected] (name is Zeb).

Thanks so much!

In fact, in the booking activity, it is possible for a booking to coincide with the same day of a room

For example, the following picture:

With room1, duplicate event1 and event2.

Firstly I like your module very much, it's really customizable and extensible.

My issue is the following: Scrolling the calendar over the grid with the mouse wheel often moves the timeline unexpectedly or even makes the entire grid disapear

For example on Linux (Ubuntu 18.04), Firefox 72 with the main example:

• Place the cursor over the chart timeline grid
• Scroll the mouse wheel
• The items don't move and the columns/grid disapear
• Dragging the right hand side scroll bar makes the grid reappear and scroll normaly
• Scrolling over the left columns scrolls quicker but normaly too

Also on touch devices I can't scroll horizontally.

Is there a known issue or a workaround for that ?

Describe the bug
I want to update selected blocks by code.

I tried by using your "deep state observer" but it doesn't work.
I think the state is updated but not the class with the "--selected" suffix (and then the css) because it is out of the "mouse down" flow.

To Reproduce

an example :

selection.push("2:2020-02-18","2:2020-02-19","2:2020-02-20","2:2020-02-21","2:2020-02-22","2:2020-02-23","2:2020-02-24","2:2020-02-25");

state.update("config.plugin.selection.selected.chart-timeline-grid-row-blocks", selection);

我将项目克隆下来之后，尝试配置的时候，发现选择间隔最小是一天。但是我想要选择间隔是小时级别的。可以通过配置配置出来这种效果吗？或者修改其中的选择方法。只是源代码我看了一天，不是太懂。

Hi, I'm newly try this and I would like to ask if it is possible to add hover and tooltip in items? Thanks!

Something that would display other data like this:

Hey,

after the last bug fix I was finally able to install it.
But it would really help to see how you're using the module in your example. The scheduler.html from here: https://neuronet.io/gantt-schedule-timeline-calendar/scheduler.html
The code snippet from the main page of your project isn't so helpful for me.

Thanks so far

Hello,
I was wondering if you could tell me if it is possible to specify Task dependencies that render an arrow from one task to another? for example if Task 2 is dependent on Task 1 I could specify that in the items object which would then render an arrow drawn from Task 1 to Task 2.

Refre to the attached screenshot.

Thank you kindly.

i already copied the same code from the documentation and implement it on my angular project but it seems like it does not trigger the function that is declare on actions.

I've read the documentation and implement it on angular project but i might done something wrong?

note: I've read the documentation and it is on actions.

Looking at the scheduler example I'm trying to understand how snap callbacks are working but I can't really.
I'm trying to resize items and I'd like to add a CSS class to the item being resized, then remove it once the drag is released.
At first I though snap start/end events would allow me that, but it doesn't seem to be the case.

How would you suggest to apply this class to the item element while resizing ?

Describe the bug
Using hierarchy, if i expand, then i collaspe a row : the child row only half disapears = the calendar disapears for the row but not the first columns (id and label)

To Reproduce
Steps to reproduce the behavior:

1. Activate Hierarchy with a parent on a row
2. Expand the parent
3. Collapse the same row
4. The child only half disapear

Expected behavior
The row must entire disapears

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 80

Additional context
I use the example provided in a react application

the config 👍

const config = {
            height: 300,
            list: {
                rows: {
                    '1': {
                      id: '1',
                      label: 'Row 1'
                    },
                    '2': {
                      id: '2',
                      parentId: '1',
                      label: 'Row 2',
                      expanded: false
                    }
                    ,
                    '3': {
                      id: '3',
                      parentId: '2',
                      label: 'Row 3',
                      expanded: false
                    },
                    '4': {
                      id: '4',
                      parentId: '3',
                      label: 'Row 4',
                      expanded: false
                    }
                  },
              columns: {
                data: {
                  id: {
                    id: "id",
                    data: "id",
                    width: 50,
                    header: {
                      content: "ID"
                    }
                  },
                  label: {
                    id: "label",
                    data: "label",
                    width: 200,
                    header: {
                      content: "Label"
                    },
                    expander: true
                  },
                }
              }
            },
            chart: {
              items: {
                "1": {
                  id: "1",
                  rowId: "1",
                  label: "Item 1",
                  time: {
                    start: new Date().getTime(),
                    end: new Date().getTime() + 24 * 60 * 60 * 1000
                  }
                },
                "2": {
                  id: "2",
                  rowId: "2",
                  label: "Item 2",
                  time: {
                    start: new Date().getTime() + 4 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 5 * 24 * 60 * 60 * 1000
                  }
                },
                "3": {
                  id: "3",
                  rowId: "2",
                  label: "Item 3",
                  time: {
                    start: new Date().getTime() + 6 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 7 * 24 * 60 * 60 * 1000
                  }
                },
                "4": {
                  id: "4",
                  rowId: "3",
                  label: "Item 4",
                  time: {
                    start: new Date().getTime() + 10 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 12 * 24 * 60 * 60 * 1000
                  }
                },
                "5": {
                  id: "5",
                  rowId: "4",
                  label: "Item 5",
                  time: {
                    start: new Date().getTime() + 12 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 14 * 24 * 60 * 60 * 1000
                  }
                }
              }
            }
          };

Is your feature request related to a problem? Please describe.
Today, to select a block or an item, you need to move your mouse to do a selection rectange.
All items in the rectangle are selected.

Describe the solution you'd like
I think it could be usefull to select only one element juste by clicking on it, without a selection rectangle.

I'm a back-end developer and I'm not very familiar with the front-end develop. I think it will be easy to use it if the gantt-schedule-timeline-calendar have the features below.Thank you.

• Tooltips - If the cursor on the item then display the item detail tooltip

• Current time line - dynamic display of a current timeline

• Week - Show what week it is on calendar

• Constraint - Some grids are marked as constraint locations，the item can not be move to there

Hi,
My problem is when scrolling to the maximum right in the demos of github, also when i used in my angular project.
Windows 10, Chrome.
Android 6.0, Chrome.

I like your library very much.

Again, thank you for maintaining this great tool.
I need to put some grayed color on all saturdays and sundays.

For now I'm using a chart-timeline-grid-row-block action like this one:

function setGridBlockCallback(element, data) {
    const endTime = data.api.time.date(data.time.rightGlobal);
    const date = endTime.format('YYYY-MM-DD');
    const weekDay = endTime.format('d');
    const weekend = weekDay === '6' || weekDay === '0';
    element.classList.toggle('weekend', weekend);
}

function setGridBlock(element, data) {
    setGridBlockCallback(element, data);
    return {
        update(element, data) {
            setGridBlockCallback(element, data);
        }
    };
}

But since it gets called for every little scroll, it needs to refresh the entire grid (that is about 600 grid blocks) very often and a little heavy for the CPU.
Do you think there would be better way to do that ?

I'm a beginner with gantt-schedule-timeline-calendar.

I want to save result of item resizing in DB, but I can't understand how, becouse when I resize item it generates a lot of snapStart and snapEnd results. Is it possible to have last position and save it to DB ?

Thanks

Hi, thanks for an amazing looking library.
I was wondering if you could make a guide on how to use this in react + small documentation on how to add plugins?
I would like to add a hover functionality and would love documentation to get started.

Describe the bug
When there are few lines on the plugin, when scrolling vertically, the display of the plugin glitch a lot. And the user can't scroll in the page because the plugin captures the scroll.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar
2. Scroll down on the schedule
3. See multiple glitch

Expected behavior

• Scroll the page (if the page containing the plugin is of course big enough to scroll).
• If all the lines of the plugin can be displayed without scrolling inside the plugin. The plugin should not capture the scroll event, to allow normal scrolling on the page.
• Nothing should happen if the page is like in the Vue.js example (https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar)

Screenshots
(I scroll)

Desktop (please complete the following information):

• OS: Mac OS,
• Browser: Chrome
• Version: Latest

Additional context
Thanks you a lot for all your work !

It would be great to have a small example and migration guide for users of gantt-elastic to this new one.

1、delete rows[999]

2、state.update('config.list.rows',rows)

Api.js:255 Uncaught TypeError: Cannot read property 'height' of undefined
at Object.getRowsHeight (Api.js:255)
at Object.prepareExpanded [as fn] (Main.ts:147)
at DeepState.notifyListeners (index.ts:516)
at DeepState.notifySubscribedListeners (index.ts:593)
at DeepState.update (index.ts:908)
at Object.generateTree [as fn] (Main.ts:120)
at DeepState.notifyListeners (index.ts:516)
at DeepState.notifySubscribedListeners (index.ts:593)
at DeepState.update (index.ts:908)
at :1:7

Uncaught TypeError: Cannot read property 'length' of undefined

Reproducible with this, deleting several random rows or items.

https://github.com/scottarver/gantt-schedule-timeline-calendar/blob/deleteError/dist/examples/main.html

Is there a way to embed DOM button like an item? Or if not, can I trigger onClick event on items? not outside? Thank youu

Something that would like this

When I set wait parameter 2000 in ItemMovement and oprate the gantt item on step below:
1.Click the mouse down and then up in 2000ms on any item.
2.Move the pointer to another grid on gantt
Problem:
The item will follow the pointer and the item will be moved to there if I click the mouse down.
Solution:
Add the wating flag below

Is it the right way?

I cleared the rows before updating them and added the rows again, but I got an error.(Because I need to switch between multiple data sources)
1、state.update("config.list.rows",{})
2、state.update("config.list.rows",rows)

error mesaage:
Uncaught TypeError: Cannot read property 'length' of undefined at vido.reuseComponents (vido.ts:157) at ChartTimelineItemsRow.ts:90 at DeepState.subscribe (index.ts:406) at updateRow (ChartTimelineItemsRow.ts:89) at onPropsChange (ChartTimelineItemsRow.ts:109) at InternalComponentMethods.change (InternalComponentMethods.ts:61) at PublicComponentMethods.change (PublicComponentMethods.ts:54) at vido.reuseComponents (vido.ts:191) at Object.createRowComponents [as fn] (ChartTimelineItems.ts:50) at DeepState.notifyListeners (index.ts:516)

Is your feature request related to a problem? Please describe.
I made a paging system for your plugin that displays week by week, or month by month, without scrolling horizontally.
I need that when an item exceeds the width of what is displayed on the screen, the text is still visible at the beginning of the div of the item. (Sorry for my english)

Describe the solution you'd like
Retrieve the currently displayed date range, to display the label text of the item from the first visible day of your plugin.

Additional context
Thanks you for all your work !

Hey,
I would really like to install your module but when I use:

npm i gantt-schedule-timeline-calendar

I always get

8 error cb() never called!
9 error This is an error with npm itself. Please report this error at:
10 error https://npm.community

my debug.log looks like this:

0 info it worked if it ends with ok
1 verbose cli [ 'O:\Test\npm_local\node.exe',
1 verbose cli 'O:\Test\npm_local\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'i',
1 verbose cli 'gantt-schedule-timeline-calendar' ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session 3eb9a3c77b9d2149
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 timing npm Completed in 19375ms
8 error cb() never called!
9 error This is an error with npm itself. Please report this error at:
10 error https://npm.community

Describe the bug
I dont think that these parameters have an effect in the selection plugin :

grid {boolean} - can we select grid cells?
items {boolean} - can we select items?
rows {boolean} - can we select rows?
horizontal {boolean} - can we select horizontally? (or just vertically if selected)
vertical {boolean} - can we select vertically? (or just horizontally if selected)

Hi, I want to know, since this project comes from https://github.com/neuronetio/gantt-elastic, and that one has a MIT license,
Is it possible that this new project could have that MIT license instead of GPL?
I ask this because I would like to use this project in commercial applications without having to distribute the code.

Also, Will the previous project (gantt-elastic) have more updates?

Thank you.

When the time slot is very small the width of the chart-timeline-items-row-item is too long....
The error seems to come from function ChartTimelineItemsRowItem. In this cases the computed itemWidthPx is lower than 0 (negative). Provisionaly I've assigned a minimim of 1px and It seems its working:

itemWidthPx -= state.get('config.chart.spacing') || 0; if (itemWidthPx <= 0) itemWidthPx = 1;

Hi,
How can i get the number of the days displayed in the calendar when zoom changed?
1、state.update('config.chart.time.zoom', 15);
2、what should i do?

Thanks!

Hey,

I just tried integrating your awesome calendar into my app. But npm is failing to fetch the packages from your git? (I removed my directories for safety reasons and replaced it with ~)

`~>npm i gantt-schedule-timeline-calendar
npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -4058
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t ssh://[email protected]/neuronetio/lit-html.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! ~\npm-cache_logs\2019-11-30T15_16_51_304Z-debug.log
`

hey man, is there a way to add a click event on an item?

Describe the bug
When I change the period or zoom level, the date columns no longer take up the full width of the app.
When I don't change these options everything is fine. I need the week view however.

To Reproduce
no settings in config.chart.time:

zoom: 22

period: week

Expected behavior
I expect the columns to fill the container when using week view.

Desktop (please complete the following information):

• OS: MacOS
• Browser: chrome, safari
• using the vue library