feat(calendar): proper spacing between Calendar years

plouc · May 11, 2016 · 96f9cf2 · 96f9cf2
1 parent 88d2e81
commit 96f9cf2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/src/components/charts/calendar/CalendarD3.js b/src/components/charts/calendar/CalendarD3.js
@@ -40,7 +40,12 @@ class CalendarD3 extends Component {
         const margin = _.assign({}, Nivo.defaults.margin, props.margin);
         const width  = props.width  - margin.left - margin.right;
         const height = props.height - margin.top  - margin.bottom;
-
+
+        element.select('.debug')
+            .attr('transform', `translate(${margin.left},${margin.top})`)
+            .attr({ width, height })
+        ;
+
 
         element.attr({
             width:  props.width,
@@ -140,6 +145,7 @@ class CalendarD3 extends Component {
     render() {
         return (
             <svg className="nivo_calendar">
+                <rect className="debug" style={{ fill: 'rgba(255,0,0,.15)' }} />
                 <g className="nivo_calendar_wrapper">
                 </g>
             </svg>

diff --git a/src/lib/charts/calendar/CalendarLayout.js b/src/lib/charts/calendar/CalendarLayout.js
@@ -22,12 +22,11 @@ const monthPathGenerator = ({ date, cellSize, yearIndex, yearSpacing, daySpacing
 
     let xO = 0;
     let yO = 0;
-    if (yearIndex > 0) {
-        if (direction === DIRECTION_HORIZONTAL) {
-            yO = yearIndex * (cellSize * 7 + daySpacing * 8 + yearSpacing);
-        } else {
-            xO = yearIndex * (cellSize * 7 + daySpacing * 8 + yearSpacing);
-        }
+    const yearOffset = yearIndex * (7 * (cellSize + daySpacing) + yearSpacing);
+    if (direction === DIRECTION_HORIZONTAL) {
+        yO = yearOffset;
+    } else {
+        xO = yearOffset;
     }
 
     if (direction === DIRECTION_HORIZONTAL) {
@@ -88,23 +87,25 @@ const CalendarLayout = () => {
             // compute cellSize
             let cellSize;
             if (direction === DIRECTION_HORIZONTAL) {
-                const hCellSize = (width - daySpacing * (maxWeeks + 1)) / maxWeeks;
+                const hCellSize = (width - daySpacing * maxWeeks) / maxWeeks;
                 const vCellSize = (height - (years.length - 1) * yearSpacing - years.length * (8 * daySpacing)) / (years.length * 7);
                 cellSize = Math.min(hCellSize, vCellSize);
             } else {
-                cellSize = (height - daySpacing * (maxWeeks + 1)) / maxWeeks;
+                const hCellSize = (width - (years.length - 1) * yearSpacing - years.length * (8 * daySpacing)) / (years.length * 7);
+                const vCellSize = (height - daySpacing * maxWeeks) / maxWeeks;
+                cellSize = Math.min(hCellSize, vCellSize);
             }
 
             // determine day cells positioning function according to layout direction
             let cellPosition;
             if (direction === DIRECTION_HORIZONTAL) {
                 cellPosition = (d, yearIndex) => ({
                     x: d3.time.weekOfYear(d) * (cellSize + daySpacing) + daySpacing / 2,
-                    y: d.getDay() * (cellSize + daySpacing) + daySpacing / 2 + yearIndex * (yearSpacing + 7 * cellSize + 8 * daySpacing),
+                    y: d.getDay() * (cellSize + daySpacing) + daySpacing / 2 + yearIndex * (yearSpacing + 7 * (cellSize + daySpacing)),
                 });
             } else {
                 cellPosition = (d, yearIndex) => ({
-                    x: d.getDay() * (cellSize + daySpacing) + daySpacing / 2 + yearIndex * (yearSpacing + 7 * cellSize + 8 * daySpacing),
+                    x: d.getDay() * (cellSize + daySpacing) + daySpacing / 2 + yearIndex * (yearSpacing + 7 * (cellSize + daySpacing)),
                     y: d3.time.weekOfYear(d) * (cellSize + daySpacing) + daySpacing / 2,
                 });
             }