feat(calendar): fix Calendar month path position

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

Hide file tree

Showing 3 changed files with 49 additions and 34 deletions.
diff --git a/src/components/charts/calendar/CalendarCanvas.js b/src/components/charts/calendar/CalendarCanvas.js
@@ -60,15 +60,8 @@ class CalendarCanvas extends Component {
             .attr('y', 0)
             .attr('size',  d => d.size)
             .attr('fillStyle', d => color(`${d.date.getFullYear()}.${d.date.getMonth()}`))
-
-            /*
-            .style({
-                opacity:        0,
-                fill:           ),
-                stroke:         dayBorderColor,
-                'stroke-width': dayBorderWidth,
-            })
-            */
+            .attr('strokeStyle', dayBorderColor)
+            .attr('lineWidth', dayBorderWidth)
         ;
 
         dayNodes
@@ -80,15 +73,8 @@ class CalendarCanvas extends Component {
             .attr('y', d => d.y)
             .attr('size',  d => d.size)
             .attr('fillStyle', d => color(`${d.date.getFullYear()}.${d.date.getMonth()}`))
-
-            /*
-            .style({
-                opacity:        1,
-                fill:           d => color(`${d.date.getFullYear()}.${d.date.getMonth()}`),
-                stroke:         dayBorderColor,
-                'stroke-width': dayBorderWidth,
-            })
-            */
+            .attr('strokeStyle', dayBorderColor)
+            .attr('lineWidth', dayBorderWidth)
         ;
     }
 
@@ -108,9 +94,12 @@ class CalendarCanvas extends Component {
             const node = d3.select(this);
 
             ctx.beginPath();
-            ctx.fillStyle = node.attr('fillStyle');
+            ctx.fillStyle   = node.attr('fillStyle');
+            ctx.strokeStyle = node.attr('strokeStyle');
+            ctx.lineWidth   = node.attr('lineWidth');
             ctx.rect(node.attr('x'), node.attr('y'), node.attr('size'), node.attr('size'));
             ctx.fill();
+            ctx.stroke();
             ctx.closePath();
 
         });

diff --git a/src/components/charts/calendar/CalendarD3.js b/src/components/charts/calendar/CalendarD3.js
@@ -56,6 +56,10 @@ class CalendarD3 extends Component {
             daySpacing
         });
 
+
+        // —————————————————————————————————————————————————————————————————————————————————————————————————————————————
+        // Days
+        // —————————————————————————————————————————————————————————————————————————————————————————————————————————————
         const dayNodes = wrapper.selectAll('.nivo_calendar_day').data(days, d => d.date);
 
         dayNodes
@@ -90,13 +94,16 @@ class CalendarD3 extends Component {
             })
         ;
 
-        return;
+
+        // —————————————————————————————————————————————————————————————————————————————————————————————————————————————
+        // Months
+        // —————————————————————————————————————————————————————————————————————————————————————————————————————————————
         const monthNodes = wrapper.selectAll('.nivo_calendar_month').data(months, d => d.date);
 
         monthNodes.enter().append('path')
             .attr('class', 'nivo_calendar_month')
             .style({
-                fill:   'none',
+                fill:           'none',
                 stroke:         monthBorderColor,
                 'stroke-width': monthBorderWidth,
             })
@@ -133,7 +140,8 @@ class CalendarD3 extends Component {
     render() {
         return (
             <svg className="nivo_calendar">
-                <g className="nivo_calendar_wrapper" />
+                <g className="nivo_calendar_wrapper">
+                </g>
             </svg>
         );
     }

diff --git a/src/lib/charts/calendar/CalendarLayout.js b/src/lib/charts/calendar/CalendarLayout.js
@@ -13,29 +13,39 @@ import _                        from 'lodash';
 import { DIRECTION_HORIZONTAL } from '../../../constants/directions';
 
 
-const monthPathGenerator = (date, cellSize, daySpacing, direction) => {
+const monthPathGenerator = ({ date, cellSize, yearIndex, yearSpacing, daySpacing, direction }) => {
     const t1 = new Date(date.getFullYear(), date.getMonth() + 1, 0); // first day of next month
     const d0 = date.getDay();            // first day of month
     const w0 = d3.time.weekOfYear(date); // first week of month
     const d1 = t1.getDay();              // last day of month
     const w1 = d3.time.weekOfYear(t1);   // last week of month
 
+    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);
+        }
+    }
+
     if (direction === DIRECTION_HORIZONTAL) {
         return [
-            `M${(w0 + 1) * (cellSize + daySpacing)},${d0 * (cellSize + daySpacing)}`,
-            `H${w0 * (cellSize + daySpacing)}V${7 * (cellSize + daySpacing)}`,
-            `H${w1 * (cellSize + daySpacing)}V${(d1 + 1) * (cellSize + daySpacing)}`,
-            `H${(w1 + 1) * (cellSize + daySpacing)}V0`,
-            `H${(w0 + 1) * (cellSize + daySpacing)}Z`
+            `M${xO + (w0 + 1) * (cellSize + daySpacing)},${yO + d0 * (cellSize + daySpacing)}`,
+            `H${xO + w0 * (cellSize + daySpacing)}V${yO + 7 * (cellSize + daySpacing)}`,
+            `H${xO + w1 * (cellSize + daySpacing)}V${yO + (d1 + 1) * (cellSize + daySpacing)}`,
+            `H${xO + (w1 + 1) * (cellSize + daySpacing)}V${yO}`,
+            `H${xO + (w0 + 1) * (cellSize + daySpacing)}Z`
         ].join('');
     }
 
     return [
-        `M${d0 * (cellSize + daySpacing)},${(w0 + 1) * (cellSize + daySpacing)}`,
-        `H0V${(w1 + 1) * (cellSize + daySpacing)}`,
-        `H${(d1 + 1) * (cellSize + daySpacing)}V${w1 * (cellSize + daySpacing)}`,
-        `H${7 * (cellSize + daySpacing)}V${w0 * (cellSize + daySpacing)}`,
-        `H${d0 * (cellSize + daySpacing)}Z`
+        `M${xO + d0 * (cellSize + daySpacing)},${yO + (w0 + 1) * (cellSize + daySpacing)}`,
+        `H${xO}V${yO + (w1 + 1) * (cellSize + daySpacing)}`,
+        `H${xO + (d1 + 1) * (cellSize + daySpacing)}V${yO + w1 * (cellSize + daySpacing)}`,
+        `H${xO + 7 * (cellSize + daySpacing)}V${yO + w0 * (cellSize + daySpacing)}`,
+        `H${xO + d0 * (cellSize + daySpacing)}Z`
     ].join('');
 };
 
@@ -85,6 +95,7 @@ const CalendarLayout = () => {
                 cellSize = (height - daySpacing * (maxWeeks + 1)) / maxWeeks;
             }
 
+            // determine day cells positioning function according to layout direction
             let cellPosition;
             if (direction === DIRECTION_HORIZONTAL) {
                 cellPosition = (d, yearIndex) => ({
@@ -118,7 +129,14 @@ const CalendarLayout = () => {
                     .map(monthDate => {
                         return {
                             date: monthDate,
-                            path: monthPathGenerator(monthDate, cellSize, daySpacing, direction),
+                            path: monthPathGenerator({
+                                date: monthDate,
+                                direction,
+                                yearIndex: i,
+                                yearSpacing,
+                                daySpacing,
+                                cellSize
+                            }),
                         };
                     })
                 );