Svg viewbox is to big

[luwol03]

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?

[ThisTemba]

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

[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);
};

[ThisTemba]

This solution worked! Thanks for that.
This might not be the right place to ask, but do you, by any chance, know how to get the labels to also not be right up against the boxes? It looks weird without any padding/margin.

[luwol03]

This solution worked! Thanks for that.
This might not be the right place to ask, but do you, by any chance, know how to get the labels to also not be right up against the boxes? It looks weird without any padding/margin.

I havent run into that issue, because I use the german lables with only two characters and a point. But that should work. You can also play around with the WEEKDAYLABEL_LEFT variable. Its the distance between the viewbox on the left edge and the weekday lables.

const WEEKDAYLABEL_LEFT = 5;

CalendarHeatmap.prototype.getTransformForWeekdayLabels = function () {
  if (this.props.horizontal) {
    return `translate(${WEEKDAYLABEL_LEFT}, ${this.getMonthLabelSize()})`;
  }
  return null;
}

[luwol03]

@ThisTemba Has that worked?

[ThisTemba]

It did actually. Currently using this fix in production.

[luwol03]

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