Height Adjust With Many Projects

[nathanReitinger]

How would you go about increasing the default height, so that more "Projects" could be shown in an expanding-height fashion rather than being smushed together.

[g1eb]

Hi! To clarify, you are referring to the projects that show up in the floating pop-up window, right?

[nathanReitinger]

Thanks for checking! I'm referring to the projects that show up in the left-most column. If you have a lot of projects there, the project labels start to overlap onto one another. I had tried adjusting label_padding, the item_size, and the gutter since that's what, in part, sets the height in calcDimensions(), but it doesn't seem to do the trick.

I was hoping for an expanded height to be able to display many projects without overlap or to enable scrolling, but I've only been able to figure out how to reduce the number of items displayed so far.

[g1eb]

Ahh I see what you mean, I was going to suggest the same thing you already tried :)

Let me see if I can get an example going to replicate this on my end. I'll have to get back to you

[nathanReitinger]

👍

Altering the height statically helps with drawDayOverview() and looks pretty, but does not also adjust the item item-circle class for the dots, so the dots won't line up with the M-F row marks. Here's a quick way to adjust that height for checking:

this.settings.height = (this.settings.label_padding + 7 * (this.settings.item_size + this.settings.gutter))
to
this.settings.height = (this.settings.label_padding + 17 * (this.settings.item_size + this.settings.gutter))

[g1eb]

Checking it out now, I think the height of the entire component is fixed because the main/default view (year) features the days of the week as rows and is therefore limited in height. This is more of a limitation of SVG because you need to instantiate it with a certain width and height (set on this line here: https://github.com/g1eb/reactjs-calendar-heatmap/blob/master/src/calendar-heatmap.component.js#L92).

Your screenshot is taken in the "daily" overview right? How many projects would you want to display and what would be the expected behavior? Would the entire component "grow" vertically in order to accommodate as many projects as you want to put there?

[nathanReitinger]

Yes, this is the daily overview. I was able to get around the fixed height by only displaying the daily view and making this.settings.height dynamic to the number of projects, but it would be great if the entire component could grow vertically with the number of projects in play. That said, I think the need for workarounds here is likely because this component wasn't intended to be used in the way that I'm using it, but I thought it was really cool and wanted to give it a shot---I'm trying to display types of activity from online engagement instead of projects (e.g., shopping or news), so there are naturally a lot more types of activities you could engage in rather than projects you might be working on.

Thanks for the input on this!