Page 1 of 1

[INFO REQ] NPM Trial Version

Posted: Thu Apr 29, 2021 7:41 pm
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?


Re: [INFO REQ] NPM Trial Version

Posted: Fri Apr 30, 2021 5:48 am
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.


Re: [INFO REQ] NPM Trial Version

Posted: Mon May 03, 2021 2:47 pm
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."


Re: [INFO REQ] NPM Trial Version

Posted: Mon May 03, 2021 3:54 pm
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?


Re: [INFO REQ] NPM Trial Version

Posted: Mon May 03, 2021 10:00 pm
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


Re: [INFO REQ] NPM Trial Version

Posted: Tue May 04, 2021 7:32 am
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.


Re: [INFO REQ] NPM Trial Version

Posted: Tue May 04, 2021 4:56 pm
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?


Re: [INFO REQ] NPM Trial Version

Posted: Tue May 04, 2021 5:12 pm
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';

Re: [INFO REQ] NPM Trial Version

Posted: Tue May 04, 2021 5:59 pm
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 872 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>;

Re: [INFO REQ] NPM Trial Version

Posted: Wed May 05, 2021 9:12 am
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.