Svg viewbox is to big

Hello,

I think the height is calculated incorrectly here. Because the viewbox is too big, and it interferes with the other components in my app.

getHeight() {
  return (
    this.getWeekWidth() + // 7 * (10 + 1) = 77
    (this.getMonthLabelSize() - this.props.gutterSize) + // (10 + 4) - 1 = 13
    this.getWeekdayLabelSize() // 30
  ); // 77 + 13 + 30 = 120
}

what this results in:

<svg class="react-calendar-heatmap" viewBox="0 0 271 120">...</svg>

I have tested in a codesandbox, and would suggest deleting the getWeekdayLabelSize() so that the svg viewbox is only as large as it needs to be. If we remove the + this.getWeekdayLabelSize(), the viewbox would only be 90 high.

Can I make a pull request for it?

[luwol03]

Bumping this. Very annoying and the only reason I am excluding weekdays from my chart.

@ThisTemba As a workaround you can execute that snippet after your import.

import CalendarHeatmap from "react-calendar-heatmap";

CalendarHeatmap.prototype.getHeight = function () {
  return this.getWeekWidth() + (this.getMonthLabelSize() - this.props.gutterSize);
};

[luwol03]

Ok cool. But this projects seems dead. Hopefully the maintainers fix this.