Later dates are truncated on heatmaps with fixed widths

[rcchao]

I'm encountering an issue where on fixed-width heatmaps, later dates (closer to the last date the heatmap renders) are truncated if the full starting date and end date range exceeds the component's width prop. This causes a loss of visibility for the most recent data.

Expected Behavior:
Ideally, when using a fixed width (and thus a fixed number of displayable columns/weeks), the heatmap would prioritize displaying the most recent dates, truncating earlier dates if necessary to fit the available space.

Current Behaviour:
The component appears to calculate the number of columns (gridNum in SVG.tsx) based on the provided width, and the Day component's rendering loop for columns only iterates up to this calculated gridNum. This means that if the provided width is not large enough to display all days between the initStartDate and endDate, the heatmap cuts off the most recent columns.

Proposed Solution (Conceptual):
Consider implementing a mechanism where if a width prop is provided, the component first determines the maximum number of weeks that can be displayed within that width. Then, starting from the endDate (which is often fixed to the current day), it could calculate the earliest startDate that would fit the maximum displayable weeks. This calculated startDate would then be used for rendering, ensuring the endDate is always visible and the displayed range fills the width. An additional, optional parameter could be passed into the component such as truncateFromStart = true to toggle this behaviour.

This approach would provide a more user-friendly experience for fixed-width heatmaps, as recent data is generally of highest interest. Thank you for considering this!

[jaywcjlove]

This panel is typically designed for a fixed width. If adaptive width is needed, users should calculate how much content to display themselves. Alternatively, you can follow GitHub's approach by adding a horizontal scrollbar to accommodate more data. @rcchao