feat(calendar): add ability to customize year/month legend

plouc · Jun 4, 2018 · a43c708 · a43c708
1 parent 98106ab
commit a43c708
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 24 deletions.
diff --git a/packages/nivo-calendar/index.d.ts b/packages/nivo-calendar/index.d.ts
@@ -39,12 +39,12 @@ declare module '@nivo/calendar' {
         margin: Box
 
         // years
-        yearLabel: (year: number) => string | number
+        yearLegend: (year: number) => string | number
         yearSpacing: number
         yearLegendOffset: number
 
         // months
-        monthLabel: (year: number, month: number) => string | number
+        monthLegend: (year: number, month: number, date: Date) => string | number
         monthBorderWidth: number
         monthBorderColor: string
         monthLegendOffset: number

diff --git a/packages/nivo-calendar/src/Calendar.js b/packages/nivo-calendar/src/Calendar.js
@@ -7,7 +7,6 @@
  * file that was distributed with this source code.
  */
 import React from 'react'
-import { timeFormat } from 'd3-time-format'
 import { BoxLegendSvg } from '@nivo/legends'
 import computeCalendar from './computeCalendar'
 import { CalendarPropTypes } from './props'
@@ -17,8 +16,6 @@ import CalendarMonthPath from './CalendarMonthPath'
 import { Container, SvgWrapper } from '@nivo/core'
 import enhance from './enhance'
 
-const monthLegendFormat = timeFormat('%b')
-
 const Calendar = ({
     data,
     from,
@@ -34,16 +31,24 @@ const Calendar = ({
     outerHeight,
 
     direction,
-    emptyColor,
+
+    // years
+    yearLegend,
     yearSpacing,
     yearLegendOffset,
-    daySpacing,
-    dayBorderWidth,
-    dayBorderColor,
+
+    // months
+    monthLegend,
     monthBorderWidth,
     monthBorderColor,
     monthLegendOffset,
 
+    // days
+    daySpacing,
+    dayBorderWidth,
+    dayBorderColor,
+    emptyColor,
+
     theme,
 
     // interactivity
@@ -113,7 +118,7 @@ const Calendar = ({
                                 transform={transform}
                                 textAnchor="middle"
                             >
-                                {monthLegendFormat(month.date)}
+                                {monthLegend(month.year, month.month, month.date)}
                             </text>
                         )
                     })}
@@ -134,7 +139,7 @@ const Calendar = ({
                                 transform={transform}
                                 textAnchor="middle"
                             >
-                                {year.year}
+                                {yearLegend(year.year)}
                             </text>
                         )
                     })}

diff --git a/packages/nivo-calendar/src/computeCalendar.js b/packages/nivo-calendar/src/computeCalendar.js
@@ -252,19 +252,19 @@ const CalendarLayout = ({
             )
         )
 
-        const yearMonths = timeMonths(yearStart, yearEnd).map(monthDate =>
-            assign(
-                { date: monthDate },
-                memoMonthPathAndBBox({
-                    date: monthDate,
-                    direction,
-                    yearIndex: i,
-                    yearSpacing,
-                    daySpacing,
-                    cellSize,
-                })
-            )
-        )
+        const yearMonths = timeMonths(yearStart, yearEnd).map(monthDate => ({
+            date: monthDate,
+            year: monthDate.getFullYear(),
+            month: monthDate.getMonth(),
+            ...memoMonthPathAndBBox({
+                date: monthDate,
+                direction,
+                yearIndex: i,
+                yearSpacing,
+                daySpacing,
+                cellSize,
+            }),
+        }))
 
         months = months.concat(yearMonths)
 

diff --git a/packages/nivo-calendar/src/props.js b/packages/nivo-calendar/src/props.js
@@ -7,10 +7,13 @@
  * file that was distributed with this source code.
  */
 import PropTypes from 'prop-types'
+import { timeFormat } from 'd3-time-format'
 import { noop } from '@nivo/core'
 import { LegendPropShape } from '@nivo/legends'
 import { DIRECTION_HORIZONTAL, DIRECTION_VERTICAL } from './constants'
 
+const monthLabelFormat = timeFormat('%b')
+
 /**
  * Calendar components propTypes.
  *
@@ -35,10 +38,12 @@ export const CalendarPropTypes = {
     emptyColor: PropTypes.string.isRequired,
 
     // years
+    yearLegend: PropTypes.func.isRequired,
     yearSpacing: PropTypes.number.isRequired,
     yearLegendOffset: PropTypes.number.isRequired,
 
     // months
+    monthLegend: PropTypes.func.isRequired,
     monthBorderWidth: PropTypes.number.isRequired,
     monthBorderColor: PropTypes.string.isRequired,
     monthLegendOffset: PropTypes.number.isRequired,
@@ -74,10 +79,12 @@ export const CalendarDefaultProps = {
     emptyColor: '#fff',
 
     // years
+    yearLegend: year => year,
     yearSpacing: 30,
     yearLegendOffset: 10,
 
     // months
+    monthLegend: (year, month, date) => monthLabelFormat(date),
     monthBorderWidth: 2,
     monthBorderColor: '#000',
     monthLegendOffset: 6,

diff --git a/website/src/components/charts/calendar/props.js b/website/src/components/charts/calendar/props.js
@@ -144,6 +144,12 @@ export default [
         controlGroup: 'Base',
     },
     // Years
+    {
+        key: 'yearLegend',
+        description: `can be used to customize years label, returns 'YYYY' by default.`,
+        type: '{(year: number) => string | number}',
+        required: false,
+    },
     {
         key: 'yearSpacing',
         description: 'define spacing between each year row/column depending on the direction.',
@@ -174,6 +180,12 @@ export default [
         },
     },
     // Months
+    {
+        key: 'monthLegend',
+        description: `can be used to customize months label, returns abbreviated month name (english) by default. This can be used to use a different language`,
+        type: '{(year: number, month: number, date: Date) => string | number}',
+        required: false,
+    },
     {
         key: 'monthBorderWidth',
         description: 'width of month borders.',