Our state of the art Gantt chart


Post by Gantt_user »

I am trying to just get the Bryntum Gantt trial version showing a basic Gantt but I am running into a few issues.

I have pulled the Bryntum gantt trial package using Yarn and it has been included in my project. I see it as a dependency in package.json as "@bryntum/gantt": "npm:@bryntum/gantt-trial"

I am following step 3 on this page https://www.bryntum.com/docs/gantt/#guides/getting_started.md

but I get errors around the types not being correct but I think I figured that out by looking at the types..

However when I try to run my app and view the chart I get the following error in my Chrome debugger window

"Uncaught DOMException: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag."

Would anyone have any idea?


Post by sergey.maltsev »

Hi!

You may check first bundled demos in examples folder.

If you still have a problems please attach application sample code we can run and check.


Post by Gantt_user »

sergey.maltsev wrote: Fri Apr 30, 2021 5:48 am

Hi!

You may check first bundled demos in examples folder.

If you still have a problems please attach application sample code we can run and check.

Would you happen to know the answer to the other part of the post regarding the allow-same-origin error?

"Uncaught DOMException: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag."


Post by mats »

@Gantt_user Can you please start a new thread with this issue and attach your test case so we can run it debug it?


Post by Gantt_user »

mats wrote: Mon May 03, 2021 3:54 pm

@Gantt_user Can you please start a new thread with this issue and attach your test case so we can run it debug it?

Hi Mats,

I didn't do much of anything really. I loaded the product via NPM and included it in one of my pages. I didn't even configure my project model.

new Bryntum.Gantt({
     project : new Bryntum.ProjectModel(),

 startDate : new Date(2017, 0, 1),
 endDate : new Date(2017, 0, 10),
	
 columns : [
      { type : 'name', field : 'name', text : 'Name' },
 ],
	
 appendTo    : document.body
});

is essentially all I did and I got the error I mentioned about the allow-same-origin flag.

I also noticed that it was originating from googletagmanager? Could it be something with Bryntums configuration using that?

I attached the full console error below

Last edited by Gantt_user on Tue May 04, 2021 10:59 pm, edited 1 time in total.

Post by sergey.maltsev »

Hi!

Yes googletagmanager is used in trial version of the Bryntum Gantt.
You can just ignore this warning while it is not relevant to licensed version.

If you use sandboxed iframe you could probably try to add allow-same-origin to it's config.

Something like this.

<iframe sandbox="allow-same-origin" ...

For any further help please attach app code we can use to check this behavior.


Post by Gantt_user »

sergey.maltsev wrote: Tue May 04, 2021 7:32 am

Hi!

Yes googletagmanager is used in trial version of the Bryntum Gantt.
You can just ignore this warning while it is not relevant to licensed version.

If you use sandboxed iframe you could probably try to add allow-same-origin to it's config.

Something like this.

<iframe sandbox="allow-same-origin" ...

For any further help please attach app code we can use to check this behavior.

Hi Sergey,

Thanks for the response..

I am attempting to use the react wrapper with the trial version as well..

I've pulled the following packages using yarn and my package.json looks like this.

"devDependencies": {
    "@bryntum/babel-preset-react-app": "10.0.0",
    "@bryntum/gantt": "npm:@bryntum/gantt-trial",
    "@bryntum/gantt-react": "^4.1.2",
}

I had to include babel preset since I was getting errors but I am not sure if that is something I really need or not due to a bad setup.

From there I included some code to try to render the Gantt chart.

import { BryntumGantt } from '@bryntum/gantt-react';
import { GanttConfig } from "@bryntum/gantt/gantt.umd.js";

const ganttConfig: Partial<GanttConfig> = {
		project: {
			"success" : true,
		
		"project" : {
			"calendar"     : 10,
			"startDate"    : "2019-01-14",
			"hoursPerDay"  : 24,
			"daysPerWeek"  : 5,
			"daysPerMonth" : 20
		},
	
		"calendars" : {
			"rows" : [
				{
					"id"        : 10,
					"name"      : "General",
					"intervals" : [
						{
							"recurrentStartDate" : "on Sat at 0:00",
							"recurrentEndDate"   : "on Mon at 0:00",
							"isWorking"          : false
						}
					]
				}
			]
		},
	
		"tasks" : {
			"rows" : [
				{
					"id"          : 11,
					"name"        : "Investigate",
					"percentDone" : 50,
					"startDate"   : "2021-02-08",
					"endDate"     : "2021-02-13",
					"duration"    : 5
				},
				{
					"id"          : 12,
					"name"        : "Assign resources",
					"percentDone" : 50,
					"startDate"   : "2021-02-08",
					"endDate"     : "2021-02-20",
					"duration"    : 10
				},
				{
					"id"          : 17,
					"name"        : "Report to management",
					"percentDone" : 0,
					"startDate"   : "2021-02-20",
					"endDate"     : "2021-02-20",
					"duration"    : 0
				}
			]
		},
	
		"dependencies" : {
			"rows" : [
				{
					"id"      : 1,
					"from"    : 11,
					"to"      : 17,
					"type"    : 2,
					"lag"     : 0,
					"lagUnit" : "d"
				}
			]
		},
	
		"resources" : {
			"rows" : [
				{
					"id"   : 1,
					"name" : "Mats"
				},
				{
					"id" : 2,
					"name" : "Nickolay"
				}
			]
		},
	
		"assignments" : {
			"rows" : [
				{
					"id"       : 1,
					"event"    : 11,
					"resource" : 1,
					"units"    : 80
				}
			]
		}
	},
		
	columns: [{ type: 'name', field: 'name', width: 250 }],
	viewPreset: 'weekAndDayLetter',
	barMargin: 10
};

return <BryntumGantt {...ganttConfig}></BryntumGantt>;

However I don't see the Gantt at all. This is what I see...

Would you have any idea what I could be doing wrong?

Last edited by Gantt_user on Tue May 04, 2021 10:58 pm, edited 2 times in total.

Post by saki »

You are missing CSS file. It can be loaded in App.js or index.html. Our examples load the css file in index.html to allow theme switching.

index.html:

	<link
	  rel="stylesheet"
	  href="%PUBLIC_URL%/themes/gantt.stockholm.css"
	  id="bryntum-theme"
	/>

If you don't need/want theme switching, you can load it this way:
App.js:

import '../node_modules/@bryntum/gantt/gantt.stockholm.css';

Post by Gantt_user »

saki wrote: Tue May 04, 2021 5:12 pm

You are missing CSS file. It can be loaded in App.js or index.html. Our examples load the css file in index.html to allow theme switching.

index.html:

	<link
	  rel="stylesheet"
	  href="%PUBLIC_URL%/themes/gantt.stockholm.css"
	  id="bryntum-theme"
	/>

If you don't need/want theme switching, you can load it this way:
App.js:

import '../node_modules/@bryntum/gantt/gantt.stockholm.css';

So I think that was it. I must have missed it initially..

I get the headers displaying but its cut off. Any idea why?

headers.png
headers.png (3.85 KiB) Viewed 870 times

This is the setup

const ganttConfig: Partial<GanttConfig> = {
		project: {
			startDate  : '2017-01-01',

		eventsData : [
			{ id : 1, name : 'Proof-read docs', startDate : '2017-01-02', endDate : '2017-01-09' },
			{ id : 2, name : 'Release docs', startDate : '2017-01-09', endDate : '2017-01-10' }
		],
	
		dependenciesData : [
			{ fromEvent : 1, toEvent : 2 }
		]	
	},
		
	columns: [{ type: 'name', field: 'name', width: 250 }],
	viewPreset: 'weekAndDayLetter',
	barMargin: 10
};
return <BryntumGantt {...ganttConfig}></BryntumGantt>;
Last edited by Gantt_user on Wed May 05, 2021 2:13 pm, edited 1 time in total.

Post by saki »

It looks like the Gantt container does not have a sufficient height. We recommend using flexbox to size containers. If you already use one, then you can try to set flex:1 on the Gantt, or use a css rule to give it a sufficient height.

Do not change any of the in-gantt css rules.


Post Reply