Overflow the calendar instead of scaling down on narrow screens

Fixes #35

Author: grubersjoe

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-activity-calendar",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": " A React component to display activity data in calendar",
   "author": "Jonathan Gruber <gruberjonathan@gmail.com>",
   "license": "MIT",

src/component/ActivityCalendar.stories.tsx

@@ -51,7 +51,7 @@ const meta: Meta<Props> = {
       control: { type: 'range', min: 0, max: 20 },
     },
     blockSize: {
-      control: { type: 'range', min: 4, max: 100, step: 2 },
+      control: { type: 'range', min: 4, max: 30, step: 1 },
     },
     colorScheme: {
       control: false,
@@ -258,6 +258,27 @@ export const WithLittleData: Story = {
   },
 };
 
+export const WithScreenOverflow: Story = {
+  args: {
+    data: generateData(),
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: '<ActivityCalendar data={data} />',
+      },
+    },
+  },
+  render: args => (
+    <Container>
+      <h1>With screen overflow</h1>
+      <div style={{ width: 480, border: 'dashed 1px #929292' }}>
+        <ActivityCalendar {...args} />
+      </div>
+    </Container>
+  ),
+};
+
 export const WithTooltips: Story = {
   args: {
     data: generateData(),

src/component/ActivityCalendar.tsx

@@ -21,7 +21,7 @@ import {
   SVGRectEventHandler,
   ThemeInput,
 } from '../types';
-import { generateEmptyData, getClassName, getMonthLabels, groupByWeeks } from '../utils';
+import { generateEmptyData, getClassName, getMonthLabels, groupByWeeks } from '../utils/calendar';
 import { createTheme } from '../utils/theme';
 import styles from './styles.module.css';
 
@@ -158,7 +158,7 @@ const ActivityCalendar: FunctionComponent<Props> = ({
   loading = false,
   renderBlock = undefined,
   showWeekdayLabels = false,
-  style = {},
+  style: styleProp = {},
   theme: themeProp = undefined,
   totalCount: totalCountProp = undefined,
   weekStart = 0, // Sunday
@@ -258,10 +258,7 @@ const ActivityCalendar: FunctionComponent<Props> = ({
         : data.reduce((sum, activity) => sum + activity.count, 0);
 
     return (
-      <footer
-        className={getClassName('footer', styles.footer)}
-        style={{ marginTop: 2 * blockMargin, fontSize }}
-      >
+      <footer className={getClassName('footer', styles.footer)}>
         {/* Placeholder */}
         {loading && <div>&nbsp;</div>}
 
@@ -299,19 +296,15 @@ const ActivityCalendar: FunctionComponent<Props> = ({
   }
 
   function renderLabels() {
-    const style = {
-      fontSize,
-    };
-
     if (!showWeekdayLabels && hideMonthLabels) {
       return null;
     }
 
     return (
       <>
         {showWeekdayLabels && (
-          <g className={getClassName('legend-weekday')} style={style}>
-            {weeks[0].map((day, index) => {
+          <g className={getClassName('legend-weekday')}>
+            {weeks[0].map((_, index) => {
               if (index % 2 === 0) {
                 return null;
               }
@@ -332,7 +325,7 @@ const ActivityCalendar: FunctionComponent<Props> = ({
           </g>
         )}
         {!hideMonthLabels && (
-          <g className={getClassName('legend-month')} style={style}>
+          <g className={getClassName('legend-month')}>
             {getMonthLabels(weeks, labels.months).map(({ text, x }, index, labels) => {
               // Skip the first month label if there's not enough space to the next one
               if (index === 0 && labels[1] && labels[1].x - x <= MIN_DISTANCE_MONTH_LABELS) {
@@ -353,7 +346,8 @@ const ActivityCalendar: FunctionComponent<Props> = ({
 
   const { width, height } = getDimensions();
 
-  const calendarStyles = {
+  const containerStyles = {
+    fontSize,
     [`--${NAMESPACE}-level-0`]: colorScale[0],
     [`--${NAMESPACE}-level-1`]: colorScale[1],
     [`--${NAMESPACE}-level-2`]: colorScale[2],
@@ -370,16 +364,21 @@ const ActivityCalendar: FunctionComponent<Props> = ({
   };
 
   return (
-    <article className={`${NAMESPACE} ${styles.container}`} style={{ ...style, ...calendarStyles }}>
-      <svg
-        width={width}
-        height={height}
-        viewBox={`0 0 ${width} ${height}`}
-        className={getClassName('calendar', styles.calendar)}
-      >
-        {!loading && renderLabels()}
-        {renderCalendar()}
-      </svg>
+    <article
+      className={`${NAMESPACE} ${styles.container}`}
+      style={{ ...styleProp, ...containerStyles }}
+    >
+      <div className={getClassName('scroll-container', styles.scrollContainer)}>
+        <svg
+          width={width}
+          height={height}
+          viewBox={`0 0 ${width} ${height}`}
+          className={getClassName('calendar', styles.calendar)}
+        >
+          {!loading && renderLabels()}
+          {renderCalendar()}
+        </svg>
+      </div>
       {renderFooter()}
     </article>
   );

src/component/styles.module.css

@@ -1,3 +1,9 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .container rect {
   stroke: rgba(0, 0, 0, 0.08);
   stroke-width: 1px;
@@ -10,11 +16,15 @@
   }
 }
 
+.scrollContainer {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
 .calendar {
   display: block;
-  max-width: 100%;
-  height: auto;
-  overflow: visible;
+  width: max-content;
 }
 
 .calendar text {

src/component/styles.module.css.d.ts

@@ -3,3 +3,4 @@ export const container: string;
 export const footer: string;
 export const legendColors: string;
 export const loadingAnimation: string;
+export const scrollContainer: string;