feat(calendar): add ability to customize empty day color

plouc · May 12, 2016 · 644cc8e · 644cc8e
1 parent d2394b8
commit 644cc8e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/src/components/charts/calendar/Calendar.js b/src/components/charts/calendar/Calendar.js
@@ -27,6 +27,7 @@ class Calendar extends Component {
             data,
             direction,
             colorScale,
+            emptyColor,
             yearSpacing, yearLegendOffset,
             daySpacing, dayBorderWidth, dayBorderColor,
             monthBorderWidth, monthBorderColor, monthLegendOffset,
@@ -43,6 +44,7 @@ class Calendar extends Component {
             data,
             direction,
             colorScale,
+            emptyColor,
             yearSpacing,
             daySpacing
         });

diff --git a/src/components/charts/calendar/CalendarD3.js b/src/components/charts/calendar/CalendarD3.js
@@ -28,7 +28,7 @@ class CalendarD3 extends Component {
             from, to,
             data,
             direction,
-            colorScale,
+            colorScale, emptyColor,
             yearSpacing, yearLegendOffset,
             daySpacing, dayBorderWidth, dayBorderColor,
             monthBorderWidth, monthBorderColor, monthLegendOffset,
@@ -60,6 +60,7 @@ class CalendarD3 extends Component {
             data,
             direction,
             colorScale,
+            emptyColor,
             yearSpacing,
             daySpacing
         });

diff --git a/src/components/charts/calendar/CalendarProps.js b/src/components/charts/calendar/CalendarProps.js
@@ -37,6 +37,7 @@ export const calendarPropTypes = {
     })).isRequired,
     direction:            oneOf([DIRECTION_HORIZONTAL, DIRECTION_VERTICAL]),
     colorScale:           scale.isRequired,
+    emptyColor:           string.isRequired,
     // years
     yearSpacing:          number.isRequired,
     yearLegendOffset:     number.isRequired,
@@ -66,6 +67,7 @@ export const calendarPropTypes = {
 export const calendarDefaultProps = {
     margin:               Nivo.defaults.margin,
     direction:            DIRECTION_HORIZONTAL,
+    emptyColor:           '#fff',
     // years
     yearSpacing:          30,
     yearLegendOffset:     10,

diff --git a/src/lib/charts/calendar/CalendarLayout.js b/src/lib/charts/calendar/CalendarLayout.js
@@ -159,6 +159,7 @@ const CalendarLayout = () => {
          * @param {array}       data
          * @param {string}      direction
          * @param {object}      colorScale
+         * @param {string}      emptyColor
          * @param {number}      yearSpacing
          * @param {number}      daySpacing
          * @returns {object}
@@ -169,6 +170,7 @@ const CalendarLayout = () => {
             data,
             direction,
             colorScale,
+            emptyColor,
             yearSpacing,
             daySpacing
         }) {
@@ -242,7 +244,7 @@ const CalendarLayout = () => {
             const color = scalePropToD3Scale(colorScale);
 
             days.forEach(day => {
-                day.color = '#fff';
+                day.color = emptyColor;
                 data.forEach(dataDay => {
                     if (dataDay.day === day.day) {
                         day.color = color(dataDay.value);