Hello can do the planned start - planned end and actual start - actual end on the same task with two progress blocks

[Alvin8888]

How to divide the same task into two progress blocks without affecting the data

[neuronetio]

You can always use a item template and manually add things to the task (If you do not know how to do it - I can write a plugin for this for a fee - send me an email about it if you are interested).

Questions:
What if the planned start is after the actual start or vice versa?
The same goes for the planned end.

[neuronetio]

If you want to have a planned start and actual start and planned end and actual end plus two progressbars on one task it will be a complete mess - if you want to do it on one DOM element.
I think that the best thing to do is to make one task a planned to be some sort of virtual which will be half transparent and cannot be manipulated and the other task a actual task which is a regular task which you can move etc.
So at the end you will have two DOM elements but only one will be the actual one - other will be virtual.
For this it is best to write a plugin (I can do it for a fee to make it faster - email me [email protected]).

EDIT:
If you want to do it yourself, it would probably be easiest to add a new property to items, e.g. "virtual" or "planned", and edit the item template so that when the task is virtual it would set the opacity to 0.5.
In addition, add exceptions in the configuration of the ItemMovement and ItemResizing plugins so that these virtual tasks cannot be modified, but this will be a little difficult for an inexperienced person.
Check ItemResizing example 1 at the bottom of the page. Instead of frozen you will have "virtual" or "planned" property.

[neuronetio]

However, personally, it seems to me that when there are a lot of tasks on the chart and, in addition, there will be planned tasks and actual tasks, it will only become a mess and unreadable.
Slips in time will happen often and for one project after time can create very large discrepancies, which will make a mess. But this is just my opinion.

[neuronetio]

I've seen a similar solution before but it only involved an earlier end time.
You can get this extended time by editing the template and adding something behind the task.
But I also think that this doesn't add anything and only causes confusion.

[Alvin8888]

How to calculate the value of left and width from start and end respectively

[neuronetio]

To retrieve the x position in pixels on the current chart use gstc.api.time.getViewOffsetPxFromDates e.g.

gstc.api.time.getViewOffsetPxFromDates( gstc.api.time.date('2020-02-10') ).

Replace date with the task time e.g.

gstc.api.time.getViewOffsetPxFromDates( gstc.api.time.date(item.time.end) )

There is also api.time.getGlobalOffsetPxFromDates which represents pixel offset from the beginning of the time (not the current view as above).

[neuronetio]

Realtime position

gstc.component.vidoInstance.onDestroy( state.subscribe('$data.chart.time', time => {
   console.log(`actual position`, gstc.api.time.getViewOffsetPxFromDates( gstc.api.time.date('2020-02-10') ));
}));

Helpful only if you will want to use other than item template.

[neuronetio]

If you want to know if an item is currently displayed on the chart get the value detached, which will be set to false (if true it means that the task is not currently displayed).

const itemsData = gstc.state.get('$data.chart.items');
const isItem1Visible = !itemsData['gstcid-1'].detached;

Helpful only if you will want to use other than item templates.