feat(calendar): add legends offset properties to CalendarD3 component

plouc · May 11, 2016 · cd94e38 · cd94e38
1 parent 49a7130
commit cd94e38
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/src/components/charts/calendar/CalendarD3.js b/src/components/charts/calendar/CalendarD3.js
@@ -29,9 +29,9 @@ class CalendarD3 extends Component {
         const {
             from, to,
             direction,
-            yearSpacing,
+            yearSpacing, yearLegendOffset,
             daySpacing, dayBorderWidth, dayBorderColor,
-            monthBorderWidth, monthBorderColor,
+            monthBorderWidth, monthBorderColor, monthLegendOffset,
             transitionDuration, transitionEasing, transitionStaggering
         } = props;
 
@@ -144,10 +144,10 @@ class CalendarD3 extends Component {
             .attr('text-anchor', 'middle')
             .attr('transform', d => {
                 if (direction === DIRECTION_HORIZONTAL) {
-                    return `translate(${d.bbox.x + d.bbox.width / 2},${d.bbox.y - 8 - 10})`;
+                    return `translate(${d.bbox.x + d.bbox.width / 2},${d.bbox.y - monthLegendOffset})`;
                 }
 
-                return `translate(${d.bbox.x - 8 - 10},${d.bbox.y + d.bbox.height / 2}) rotate(-90)`;
+                return `translate(${d.bbox.x - monthLegendOffset},${d.bbox.y + d.bbox.height / 2}) rotate(-90)`;
             })
             .style('opacity', 0)
         ;
@@ -159,10 +159,10 @@ class CalendarD3 extends Component {
             .delay(d => (d.date.getMonth() + 1) * 30 * transitionStaggering)
             .attr('transform', d => {
                 if (direction === DIRECTION_HORIZONTAL) {
-                    return `translate(${d.bbox.x + d.bbox.width / 2},${d.bbox.y - 8})`;
+                    return `translate(${d.bbox.x + d.bbox.width / 2},${d.bbox.y - monthLegendOffset})`;
                 }
 
-                return `translate(${d.bbox.x - 8},${d.bbox.y + d.bbox.height / 2}) rotate(-90)`;
+                return `translate(${d.bbox.x - monthLegendOffset},${d.bbox.y + d.bbox.height / 2}) rotate(-90)`;
             })
             .style('opacity', 1)
         ;
@@ -185,11 +185,11 @@ class CalendarD3 extends Component {
                 let y = 0;
 
                 if (direction === DIRECTION_HORIZONTAL) {
-                    x = -8;
+                    x = -yearLegendOffset;
                     y = (7 * (cellSize + daySpacing) + yearSpacing) * i + 3.5 * (cellSize + daySpacing);
                 } else {
                     x = (7 * (cellSize + daySpacing) + yearSpacing) * i + 3.5 * (cellSize + daySpacing);
-                    y = -8;
+                    y = -yearLegendOffset;
                 }
 
                 return `translate(${x},${y}) rotate(${yearLabelRotation})`;
@@ -205,11 +205,11 @@ class CalendarD3 extends Component {
                 let y = 0;
 
                 if (direction === DIRECTION_HORIZONTAL) {
-                    x = -8;
+                    x = -yearLegendOffset;
                     y = (7 * (cellSize + daySpacing) + yearSpacing) * i + 3.5 * (cellSize + daySpacing);
                 } else {
                     x = (7 * (cellSize + daySpacing) + yearSpacing) * i + 3.5 * (cellSize + daySpacing);
-                    y = -8;
+                    y = -yearLegendOffset;
                 }
 
                 return `translate(${x},${y}) rotate(${yearLabelRotation})`;

diff --git a/src/components/charts/calendar/CalendarProps.js b/src/components/charts/calendar/CalendarProps.js
@@ -31,15 +31,18 @@ export const calendarPropTypes = {
     margin,
     from:                 oneOfType([string, instanceOf(Date)]).isRequired,
     to:                   oneOfType([string, instanceOf(Date)]).isRequired,
-    yearSpacing:          number.isRequired,
     direction:            oneOf([DIRECTION_HORIZONTAL, DIRECTION_VERTICAL]),
+    // years
+    yearSpacing:          number.isRequired,
+    yearLegendOffset:     number.isRequired,
     // days
     daySpacing:           number.isRequired,
     dayBorderWidth:       number.isRequired,
     dayBorderColor:       string.isRequired,
     // months
     monthBorderWidth:     number.isRequired,
     monthBorderColor:     string.isRequired,
+    monthLegendOffset:    number.isRequired,
     // transitions
     motionStiffness:      number.isRequired, // react-motion
     motionDamping:        number.isRequired, // react-motion
@@ -57,14 +60,17 @@ export const calendarPropTypes = {
 export const calendarDefaultProps = {
     margin:               Nivo.defaults.margin,
     direction:            DIRECTION_HORIZONTAL,
+    // years
     yearSpacing:          20,
+    yearLegendOffset:     10,
     // days
     daySpacing:           0,
     dayBorderWidth:       1,
     dayBorderColor:       '#000',
     // months
     monthBorderWidth:     2,
     monthBorderColor:     '#000',
+    monthLegendOffset:    6,
     // transitions
     motionStiffness:      Nivo.defaults.motionStiffness,    // react-motion
     motionDamping:        Nivo.defaults.motionDamping,      // react-motion