Premium support for our pure JavaScript UI components


Post by shashank.yadav »

Hi Team,

We are using type percentdone, and our dataset holding percent information on property "percentComplete". After using below set of code, Percent information not reflecting on Gantt chart bar.

gantt.config.ts

 columns                 : [
{ type : 'percentdone', field: 'percentComplete', text: '% Complete', showCircle : true, width : 100, editor: false },
.
.
.
]

Dataset

                   {
                      "id": "a5d3d135-36d3-4868-9873-9a731578b0cd",
                      "parentId": "c1ff177a-f129-4c18-bf12-3167bb391480",
                      "name": "ABC321",
                      "description": null,
                      "startDate": "2023-11-25T06:37:13.644784000Z",
                      "endDate": "2023-12-22T06:37:13.644784000Z",
                      "subType": null,
                      "type": "Engagement Work Package",
                      "percentComplete": 15,                    
"baselines": [ { "startDate": "2023-11-30T23:00:00", "endDate": "2023-12-03T23:00:00", "name": "Current Baseline" } ] },

Issue
Please notice record ABC311 its percentage is 15% on grid and on chart bar we can not see blue overlay on green bar for same record.

percentComplete.png
percentComplete.png (65.87 KiB) Viewed 189 times

But
If we are using field "percentDone" on our dataset and if we dont provide field: 'percentComplete', on gantt.config.ts then it work fine.

gantt.config.ts

 columns                 : [
{ type : 'percentdone', text: '% Complete', showCircle : true, width : 100, editor: false },
.
.
.
]

Dataset

                   {
                      "id": "a5d3d135-36d3-4868-9873-9a731578b0cd",
                      "parentId": "c1ff177a-f129-4c18-bf12-3167bb391480",
                      "name": "ABC321",
                      "description": null,
                      "startDate": "2023-11-25T06:37:13.644784000Z",
                      "endDate": "2023-12-22T06:37:13.644784000Z",
                      "subType": null,
                      "type": "Engagement Work Package",
                      "percentDone": 15,                    
"baselines": [ { "startDate": "2023-11-30T23:00:00", "endDate": "2023-12-03T23:00:00", "name": "Current Baseline" } ] },

Please notice record ABC311 its percentage is 15% on grid and on chart bar we can see blue overlay on green bar for same record.

percentDone.png
percentDone.png (75.5 KiB) Viewed 189 times

Expected result:
We want to use the percentComplete property and it should reflect the percent information on chart bar.

Thanks,
Shashank Yadav
Hatch Digital


Post by tasnim »

Hi,

Sure, Here are the steps you can follow to achieve this.

First, you'd need to define this custom field to taskStore

project : {
	taskStore : {
		fields : [{ name : 'percentComplete', type : 'number' }]
	}
}

And then you'd need to change the valueField of percentBar

    features : {
        percentBar : {
            valueField : 'percentComplete'
        }
    }

And then it'll reflect on the task bar too.

Best of luck :),
Tasnim


Post by shashank.yadav »

Hi Tasim,

Thanks for understanding and proactively responding on query.
unfortunately, the solution didn't work out for us. I have attached sample project, could you please assist us.

Thanks,
Shashank Yadav
Hatch Digital

Attachments
advanced_percentdone.zip
(318.61 KiB) Downloaded 7 times

Post by ghulam.ghous »

Hi Shashank Yadav,

Please use dataSource property on taskModel to get the percentDone. Because there are lot of underlying operations that need percentDone, for example one of them is the percent done of the parent of a task which is automatically calculated based on the percent done of the child tasks. As you can see in your screenshots the percentDone of parents is 0 which shouldn't be and incorrect.

See here:
https://bryntum.com/products/gantt/docs/api/Core/data/field/DataField#config-dataSource
https://bryntum.com/products/gantt/docs/api/Core/data/Model#nested-fields see the code snippet of player and team

Code Snippet:

    static get fields() {
        return [
            { name : 'deadline', type : 'date' },
            { name : 'percentDone', dataSource: 'percentComplete' }
        ];
    }
    
// column: { type: 'percentdone', field: 'percentDone', width: 70 },
Screenshot 2024-02-14 at 2.19.58 PM.png
Screenshot 2024-02-14 at 2.19.58 PM.png (289.75 KiB) Viewed 161 times

Regards,
Ghous


Post by shashank.yadav »

Thanks Ghous, this has worked.
But we have identified a use-case, where let's say if we have percentComplete value as null, then the chart bar looks like it is 100%.

In same sample project, you can try changing value for parent most node ABCPROJECT and observe, please.

{
                        "id": "04d60a3d-d54a-467d-846a-7bd975f8383f",
                        "parentId": null,
                        "name": "ABCPROJECT",
                        "description": null,
                        "startDate": null,
                        "endDate": null,
                        "type": "Engagement Definition",
                        "subType": null,
                        "percentComplete": null
                    },

Thanks,
Shashank Yadav
Hatch Digital


Post by ghulam.ghous »

Hi Shashank,

I tried setting it to null but as I mentioned above the percentDone of parent is calculated from the child, setting null of the parent shouldn't have any affect on it. I set the percentComplete of the top most parent to null but it does not change anything, parent had 15% percent done in the column as well as on task bar. See the clip here: https://drive.google.com/drive/folders/1wwvUFTTyinbCVhzaYiQOZz9gJxpOHr1H?usp=sharing

Regards,
Ghous


Post by shashank.yadav »

Please try again with null value, after setting below property, please.

project : {       
autoCalculatePercentDoneForParentTasks : false, . . .

Post by ghulam.ghous »

Hi,

Now the percentage of the parent task is zero as expected for the null value. Here's the screenshot and attached project, can you please see what different config you are using.

advanced_percentdone.zip
(342.53 KiB) Downloaded 6 times
Screenshot 2024-02-14 at 8.02.54 PM.png
Screenshot 2024-02-14 at 8.02.54 PM.png (503 KiB) Viewed 119 times

Regards,
Ghous


Post by shashank.yadav »

Yes, you already have reproduced the issue.
You can see for null value its automatically converted to 0%, which is correct, but the bar is in dark blue color, likewise 100%. Isn't for 0-to-99% it should stay like light blue color.


Post by ghulam.ghous »

Hi Shashank,

Thanks for reporting back, created a ticket to fix the issue here https://github.com/bryntum/support/issues/8549.

Regards,
Ghous


Post Reply