search

jsGanttImproved / jsgantt-improved

Javascript Gantt: fully featured gantt chart component built entirely with JS and CSS. No images or external libs required.
https://jsganttimproved.github.io/jsgantt-improved
Other
481 stars 249 forks source link

How to stretch the calendar so it uses 100% of the containing div #283

Open MrNorth35 opened 4 years ago

MrNorth35 commented 4 years ago

We have a problem/suggestion with the gantt-component that we haven't found a solution to.

Basically the issue is that the gantt-calendar is fixed to a certain width in pixels. We would prefer it to have a width of say 100% instead. We try to accomplish this by setting the

with class "gcharttableh" and "gcharttable" to width:100%. Then it looks the way we want. The problem is that the rendered containers are not scaled along with the calendar canvas.

Is there a method like "setWidth()" that allow us to scale the gantt diagram so it uses 100% of the container width for drawing the calendar? Or how can this be resolved? Of course we could try rescaling everything manually with jquery but that is a very tedious task.

The main reason for asking about this is that when we use month/quarter everything shrinks to only use a fraction of the available window space. We want it to use the full width no matter what we select.

nidu commented 4 years ago

If i understand correctly you're talking about dynamic width for chart columns. I think it's a bit tricky since you can have more columns in the chart that fits into your view.

I ended up with this method that generates column width for each view type. Not perfect of course, but good enough. And i recreate entire component quite often to keep it in sync. Assumption is that table width is fixed and equal to 480px. And you have to know min and max dates upfront.

private calculateTimelineColWidths(minTime: number, maxTime: number) {
  const width = this.chartContainerWidthPx - 480;

  const spec = [
    { format: "hour", attr: "vHourColWidth", minWidth: 18, minColCount: 12 },
    { format: "day", attr: "vDayColWidth", minWidth: 18, minColCount: 7 },
    { format: "week", attr: "vWeekColWidth", minWidth: 36 },
    { format: "month", attr: "vMonthColWidth", minWidth: 36 },
    { format: "quarter", attr: "vQuarterColWidth", minWidth: 36, minColCount: 2 }
  ];

  const result = {};
  const today = new Date();
  const m1 = moment(minTime || today);
  const m2 = moment(maxTime || today);
  for (const { format, attr, minWidth, minColCount } of spec) {
    let colCount = Math.ceil(m2.startOf(format as any).diff(m1.startOf(format as any), format as any, true)) + 2;
    colCount = Math.max(colCount, minColCount || 1);
    const colWidth = Math.max(Math.floor(width / colCount), minWidth);
    result[attr] = colWidth;
  }
  return result;
}
MrNorth35 commented 4 years ago

Hello Nikolay and thank you for a prompt response!

To better explain the issue we are having, please have a look at the two attached pictures.

Our customer doesn't like that the calendar doesn't use the full container view. it is perfectly fine to add scrollbar if the calendar span is so long it overflows the width of parent container, the main issue is if the calendar span is so short it doesn't fill, like in the above example. It looks even worse if I press quarter or month.

I will have a look at the code you submitted and see if it solves our issue.

Best regards Henrik

Från: Nikolay Durygin notifications@github.com Skickat: den 29 januari 2020 08:07 Till: jsGanttImproved/jsgantt-improved jsgantt-improved@noreply.github.com Kopia: Henrik Nordgren Henrik.Nordgren@hiq.se; Author author@noreply.github.com Ämne: Re: [jsGanttImproved/jsgantt-improved] How to stretch the calendar so it uses 100% of the containing div (#283)

If i understand correctly you're talking about dynamic width for chart columns. I think it's a bit tricky since you can have more columns in the chart that fits into your view.

I ended up with this method that generates column width for each view type. Not perfect of course, but good enough. And i recreate entire component quite often to keep it in sync. Assumption is that table width is fixed and equal to 480px. And you have to know min and max dates upfront.

private calculateTimelineColWidths(minTime: number, maxTime: number) { const width = this.chartContainerWidthPx - 480;

const spec = [ { format: "hour", attr: "vHourColWidth", minWidth: 18, minColCount: 12 }, { format: "day", attr: "vDayColWidth", minWidth: 18, minColCount: 7 }, { format: "week", attr: "vWeekColWidth", minWidth: 36 }, { format: "month", attr: "vMonthColWidth", minWidth: 36 }, { format: "quarter", attr: "vQuarterColWidth", minWidth: 36, minColCount: 2 } ];

const result = {}; const today = new Date(); const m1 = moment(minTime || today); const m2 = moment(maxTime || today); for (const { format, attr, minWidth, minColCount } of spec) { let colCount = Math.ceil(m2.startOf(format as any).diff(m1.startOf(format as any), format as any, true)) + 2; colCount = Math.max(colCount, minColCount || 1); const colWidth = Math.max(Math.floor(width / colCount), minWidth); result[attr] = colWidth; } return result; }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/jsGanttImproved/jsgantt-improved/issues/283?email_source=notifications&email_token=AC5IJ6CT2CX5JXK6A57BB4TRAETMZA5CNFSM4KM7VAL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKGFTZA#issuecomment-579623396, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AC5IJ6DRIHFMX33T4VYSIVDRAETMZANCNFSM4KM7VALQ.

nidu commented 4 years ago

@MrNorth35 can't see any images, probably they weren't attached

MrNorth35 commented 4 years ago

Hello Nikolay!

Strange. The images were attached to the mail. I will try to insert them directly instead:

[cid:4a679007-6ea4-4685-a053-ff4ec93cb8f5] How it looks now with our default configuration. There is plenty of space left in the container (which is a div with class bootstrap col-sm-12)

[cid:a2849678-5c49-4861-a81c-c976a1c26cfd] How we would prefer it to look.

I cheated by adding this css

.gcharttableh { width:100%!important } .gcharttable { width: 100% !important }

The bars still has to be recalculated/scaled in terms of width and left values

Best regards Henrik

Från: Nikolay Durygin notifications@github.com Skickat: den 29 januari 2020 09:17 Till: jsGanttImproved/jsgantt-improved jsgantt-improved@noreply.github.com Kopia: Henrik Nordgren Henrik.Nordgren@hiq.se; Mention mention@noreply.github.com Ämne: Re: [jsGanttImproved/jsgantt-improved] How to stretch the calendar so it uses 100% of the containing div (#283)

@MrNorth35https://github.com/MrNorth35 can't see any images, probably they weren't attached

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/jsGanttImproved/jsgantt-improved/issues/283?email_source=notifications&email_token=AC5IJ6G3NWFX5HT23SIDDMDRAE3THA5CNFSM4KM7VAL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKGKY4I#issuecomment-579644529, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AC5IJ6E6O6OUK3YOBUNMU63RAE3THANCNFSM4KM7VALQ.

nidu commented 4 years ago

Can't see images again for some reason. Only lines like this [cid:a2849678-5c49-4861-a81c-c976a1c26cfd]. And it doesn't look like any requests are failing in dev console.

MrNorth35 commented 4 years ago

That is really wierd.

I have now added the images to an online service:

https://ibb.co/N7ZtN9r

https://ibb.co/9mxKpvm

Hopefully that will work

best regards Henrik

Från: Nikolay Durygin notifications@github.com Skickat: den 29 januari 2020 10:50 Till: jsGanttImproved/jsgantt-improved jsgantt-improved@noreply.github.com Kopia: Henrik Nordgren Henrik.Nordgren@hiq.se; Mention mention@noreply.github.com Ämne: Re: [jsGanttImproved/jsgantt-improved] How to stretch the calendar so it uses 100% of the containing div (#283)

Can't see images again for some reason. Only lines like this [cid:a2849678-5c49-4861-a81c-c976a1c26cfd]. And it doesn't look like any requests are failing in dev console.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/jsGanttImproved/jsgantt-improved/issues/283?email_source=notifications&email_token=AC5IJ6EZGLR7WS6QBNT7N5DRAFGNDA5CNFSM4KM7VAL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKGSY2Q#issuecomment-579677290, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AC5IJ6AQTBO44SLVY4D47W3RAFGNDANCNFSM4KM7VALQ.

nidu commented 4 years ago

That's pretty much the same that i needed and snippet above is how i solved it. However i don't see i'm setting width to 100% for gcharttable. Setting 100% for container is enough, but maybe i'm using outdated version.

Overall i agree it could be useful to be able to set column width automatically with some minimal width.

mariohmol commented 4 years ago

any ideas of how we could implement this feature?

nidu commented 4 years ago

Here's one way to do it - https://github.com/nidu/jsgantt-improved/commit/36911b9ffb4397d423844dfd23eb1e8b232d45b2

The idea is:

  1. Add option vStretchColumns. If true - we make columns wider than current vColWidth if there's available space
  2. To find out available space we
    • Create left panel early (actual HTML) to find out how many space do we have for the chart
    • Calcualte vNumCols early
    • Find out if columns can be wider. If yes - set vColWidth to this new width

All of this must happen before creating chart tables. In the commit i also added option to the demo, so you can see how it looks like when switching between month and qurter on demo page e.g. Due to element .rhscrpad it still doesn't take entire width, but i guess there's some purpose behind this element.

mariohmol commented 4 years ago

Hi @nidu thanks for this..

could you please share a PR with us? did u test and seems to be working good?

thanks!

nidu commented 4 years ago

@mariohmol not sure now since I haven't touched the component since then, but i remember that it wasn't precise enough. Partially due to this .rhscrpad element. Moreover I'm not sure how it fits into current version of the library

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.