Rendering issue for the calendar / progress part.
renaudham opened this issue · comments
Hi
I have updated to the latest version of Vue and GanttElastic
I have a specific rendering issue
The task list is shown
The calendar/progressBar is visibly empty, but all elements seems rendered but hidden, outside/below of the calendar/Progress zone.
When I select the rendered elements via Console or Vue Console (in browser)
They are located below the chart zone, and not visible
<CalendarRow key='1547593200000h4'> <CalendarRow key='1547593200000h5'> <Grid> <DependencyLines> <Milestone> <ChartText> <ProgressBar>
etc...
then when I look at the detail it seems that some option are not ok, maybe the issue could be there maybe not..
see "(error during evaluation)"
<ProgressBar> props task:Object data $route computed getLinePoints:"M 232.04812454244004 0 L 232.04812454244004 24" getLineStyle:"(error during evaluation)" getProgressWidth:"50%" getSolidStyle:"(error during evaluation)" injected root:gantt-elastic props options:Object locale:Object Before/After:"Expand" Display task list:"Task list" Now:"Now" Task list width:"Task list" X-Scale:"Zoom-X" Y-Scale:"Zoom-Y" code:"en" taskList:Object tasks:Array[10] 0:Object allChildren:Array[0] children:Array[0] collapsed:false dependencyLines:Array[0] dependentOn:Array[0] duration:432000 durationMs:432000000 height:24 id:1 label:"Make some noise" mouseOver:false name:"Make some noise" parent:Object parentId:null parents:Array[1] progress:85 start:"2019-01-04 00:00:00" startDate:Object startTime:1546556400000 style:Object (empty) tooltip:Object type:"milestone" user:"<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>" visible:true width:580.3703113561 x:116.27406227122002 y:6
<Calendar> Inspect DOM Open in editor data $route days:Array[14] hours:Array[84] months:Array[1] 0:Object computed daysStyle:"(error during evaluation)" getDays:Array[14] getHours:Array[84] getMonths:Array[1] 0:Object getWidth:1628.3368704513157 getX:0.25 getY:0.25 hoursStyle:"(error during evaluation)" monthsStyle:"(error during evaluation)" injected root:gantt-elastic props options:Object locale:Object Before/After:"Expand" Display task list:"Task list" Now:"Now" Task list width:"Task list" X-Scale:"Zoom-X" Y-Scale:"Zoom-Y" code:"en"
hoping you have an idea for this..
Thanks
Regards
Hi,
could you provide some screenshots?
In the meantime, try to set width of the container (gantt parent) to 100% and height to some value (might be 100% too) .
Thanks
thanks.
I applied size to both container and gantt component, to see. With colors back so we can visualize.
<div v-if="dataview === 'gantt'" style="width:100%; height: 600px; background: red"> <gantt-elastic :tasks="gantttasks" :options="ganttoptions" style="width:100%; height: 300px;background: blue"></gantt-elastic> </div>
Here is the result
the config and data are as following:
ganttoptions: { title: { label: '', html: false, style: { 'font-size': '20px', 'vertical-align': 'middle', 'font-weight': '400', 'line-height': '35px', 'padding-left': '22px', 'letter-spacing': '1px' } }, taskList: { columns: [ { id: 1, label: 'ID', value: 'id', width: 40 }, { id: 2, label: 'Description', value: 'label', width: 200, expander: true }, { id: 3, label: 'Assigned to', value: 'user', width: 130, html: true }, { id: 3, label: 'Start', value: (task) => task.startDate.format('YYYY-MM-DD'), width: 78 }, { id: 4, label: 'Type', value: 'type', width: 68 }, { id: 5, label: '%', value: 'progress', width: 35, styles: { label: { 'text-align': 'center', 'width': '100%' }, value: { 'text-align': 'center', 'width': '100%' } } } ] }, locale: { code: 'en', 'Now': 'Now', 'X-Scale': 'Zoom-X', 'Y-Scale': 'Zoom-Y', 'Task list width': 'Task list', 'Before/After': 'Expand', 'Display task list': 'Task list' },
gantttasks: [ { id: 1, name: 'Make some noise', label: 'Make some noise', user: '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>', start: this.getDate(-24 * 5), duration: 5 * 24 * 60 * 60, progress: 85, type: 'milestone' }, { id: 2, name: 'Make some noise', label: 'With great power comes great responsibility', user: '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>', start: this.getDate(-24 * 4), duration: 4 * 24 * 60 * 60, progress: 50, type: 'milestone', style: { base: { fill: '#1EBC61', stroke: '#0EAC51' }, /*'tree-row-bar': { fill: '#1EBC61', stroke: '#0EAC51' }, 'tree-row-bar-polygon': { stroke: '#0EAC51' }*/ }, }, { id: 3, name: 'Make some noise', label: 'Courage is being scared to death, but saddling up anyway.', user: '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>', parentId: 2, start: this.getDate(-24 * 3), duration: 2 * 24 * 60 * 60, progress: 100, type: 'task' }, { id: 4, name: 'Make some noise', label: 'Put that toy AWAY!', user: '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>', start: this.getDate(-24 * 2), duration: 2 * 24 * 60 * 60, progress: 50, type: 'task', /* dependentOn: [3]*/ }, { id: 5, name: 'Make some noise', label: 'One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.', user: '<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>', parentId: 4, start: this.getDate(0), duration: 2 * 24 * 60 * 60, progress: 10, type: 'milestone', style: { base: { fill: '#0287D0', stroke: '#0077C0' } }, }, { id: 6, name: 'Make some noise', label: 'Butch Mario and the Luigi Kid', user: '<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>', parentId: 5, start: this.getDate(24), duration: 1 * 24 * 60 * 60, progress: 50, type: 'task', style: { base: { fill: '#8E44AD', stroke: '#7E349D' }, }, }, { id: 7, name: 'Make some noise', label: 'Devon, the old man wanted me, it was his dying request', user: '<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>', parentId: 2, /* dependentOn: [6],*/ start: this.getDate(24 * 2), duration: 4 * 60 * 60, progress: 20, type: 'task' }, { id: 8, name: 'Make some noise', label: 'Hey, Baby! Anybody ever tell you I have beautiful eyes?', user: '<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>', parentId: 7, /* dependentOn: [7],*/ start: this.getDate(24 * 3), duration: 1 * 24 * 60 * 60, progress: 0, type: 'task' }, { id: 9, name: 'Make some noise', label: 'This better be important, woman. You are interrupting my very delicate calculations.', user: '<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>', parentId: 8, /* dependentOn: [ 8, 7 ],*/ start: this.getDate(24 * 4), duration: 4 * 60 * 60, progress: 20, type: 'task', style: { base: { fill: '#8E44AD', stroke: '#7E349D' }, /*'tree-row-bar-polygon': { stroke: '#7E349D' }, 'tree-row-bar': { fill: '#8E44AD', stroke: '#7E349D' }*/ }, }, { id: 10, name: 'Make some noise', label: 'current task', user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>', start: this.getDate(24 * 5), duration: 24 * 60 * 60, progress: 0, type: 'task' } ],
thanks
More infos..
Note that it's purely a CSS issue.
I succedd to force to view the chart calendar by adding some CSS
gantt-elastic__main-view-container
float: left;
width: calc(100% - 610px);
gantt-elastic__task-list-container
float: left;
then the chart appear visible
BUT in this case I cannot scroll it at all... the bottom scroller does nothing..
I see in your code some settings that doesn't exists anymore.
Try settings, columns and task from this example
some options are evolving now so after update when something is not working properly take a look at examples folder vue.edit.html.
By the way, if you want to style some element you should pass css (as key:value pair) to styles option.
Initial style rules looks like this
Every element in gantt-elastic has its own class starting with gantt-elastic-.
Just ignore this prefix and you can modify those class inside settings.
It will be important later when gantt printing and image download feature will be added.
Hi
Sorry, I applied all you new codes and latest version etc
the issue remain, as you can see the screenshot,
the gantt-elastic__task-list-container and gantt-elastic__main-view-container miss a float left
and the gantt-elastic__container miss a width
when I set a width to gantt-gantt-elastic__container
and add 2 float left, to gantt-elastic__task-list-container and gantt-elastic__main-view-container
it appear visually ok except that I cannot scroll left right the chart..
I tried a lot of combinations, like removing the gantt-elastic__svg-container > max-width: calc(100% - 17px);
==> same result, the chart appears with no way to scroll horizontally, but worse as I lose the vertical scrollbar
sorry for my specific case, any idea?
Note: I intend to put this in a future commercial product and therefore if I can sell it, give back a small % of the sales to you, when I would sell a version with gantt...
Still far from concrete currenlty and in tech prototype only..
my email: renaud@b-o-d.fr
thanks
For those who will come with the same problem:
problem was in @renaudham vue app - styles from gantt was not attached to head for some reason.