feat(calendar): add ability to define month legends position

plouc · Mar 22, 2019 · 9bc7092 · 9bc7092
1 parent 5aa0ff5
commit 9bc7092
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 28 deletions.
diff --git a/packages/calendar/src/Calendar.js b/packages/calendar/src/Calendar.js
@@ -12,9 +12,10 @@ import { BoxLegendSvg } from '@nivo/legends'
 import { setDisplayName } from 'recompose'
 import { CalendarPropTypes } from './props'
 import { DIRECTION_HORIZONTAL } from './constants'
+import enhance from './enhance'
 import CalendarDay from './CalendarDay'
 import CalendarMonthPath from './CalendarMonthPath'
-import enhance from './enhance'
+import CalendarMonthLegends from './CalendarMonthLegends'
 
 const Calendar = ({
     colorScale,
@@ -31,6 +32,7 @@ const Calendar = ({
     yearLegendOffset,
 
     monthLegend,
+    monthLegendPosition,
     monthBorderWidth,
     monthBorderColor,
     monthLegendOffset,
@@ -83,29 +85,14 @@ const Calendar = ({
                             borderColor={monthBorderColor}
                         />
                     ))}
-                    {months.map(month => {
-                        let transform
-                        if (direction === DIRECTION_HORIZONTAL) {
-                            transform = `translate(${month.bbox.x + month.bbox.width / 2},${month
-                                .bbox.y - monthLegendOffset})`
-                        } else {
-                            transform = `translate(${month.bbox.x - monthLegendOffset},${month.bbox
-                                .y +
-                                month.bbox.height / 2}) rotate(-90)`
-                        }
-
-                        return (
-                            <text
-                                key={`${month.date.toString()}.legend`}
-                                className="nivo_calendar_month_legend"
-                                transform={transform}
-                                textAnchor="middle"
-                                style={theme.labels.text}
-                            >
-                                {monthLegend(month.year, month.month, month.date)}
-                            </text>
-                        )
-                    })}
+                    <CalendarMonthLegends
+                        months={months}
+                        direction={direction}
+                        legend={monthLegend}
+                        position={monthLegendPosition}
+                        offset={monthLegendOffset}
+                        theme={theme}
+                    />
                     {years.map(year => {
                         let transform
                         if (direction === DIRECTION_HORIZONTAL) {

diff --git a/packages/calendar/src/CalendarDay.js b/packages/calendar/src/CalendarDay.js
@@ -60,6 +60,7 @@ CalendarDay.propTypes = {
     x: PropTypes.number.isRequired,
     y: PropTypes.number.isRequired,
     size: PropTypes.number.isRequired,
+    spacing: PropTypes.number.isRequired,
     color: PropTypes.string.isRequired,
     borderWidth: PropTypes.number.isRequired,
     borderColor: PropTypes.string.isRequired,

diff --git a/packages/calendar/src/CalendarMonthLegends.js b/packages/calendar/src/CalendarMonthLegends.js
@@ -0,0 +1,58 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
+import { DIRECTION_HORIZONTAL, DIRECTION_VERTICAL } from './constants'
+
+const CalendarMonthLegends = memo(({ months, direction, legend, position, offset, theme }) => {
+    return (
+        <>
+            {months.map(month => {
+                let transform
+                if (direction === DIRECTION_HORIZONTAL && position === 'before') {
+                    transform = `translate(${month.bbox.x + month.bbox.width / 2},${month.bbox.y -
+                        offset})`
+                } else if (direction === DIRECTION_HORIZONTAL && position === 'after') {
+                    transform = `translate(${month.bbox.x + month.bbox.width / 2},${month.bbox.y +
+                        month.bbox.height +
+                        offset})`
+                } else if (direction === DIRECTION_VERTICAL && position === 'before') {
+                    transform = `translate(${month.bbox.x - offset},${month.bbox.y +
+                        month.bbox.height / 2}) rotate(-90)`
+                } else {
+                    transform = `translate(${month.bbox.x + month.bbox.width + offset},${month.bbox
+                        .y +
+                        month.bbox.height / 2}) rotate(-90)`
+                }
+
+                return (
+                    <text
+                        key={`${month.date.toString()}.legend`}
+                        transform={transform}
+                        textAnchor="middle"
+                        style={theme.labels.text}
+                    >
+                        {legend(month.year, month.month, month.date)}
+                    </text>
+                )
+            })}
+        </>
+    )
+})
+
+CalendarMonthLegends.propTypes = {
+    months: PropTypes.array.isRequired,
+    direction: PropTypes.oneOf([DIRECTION_HORIZONTAL, DIRECTION_VERTICAL]),
+    legend: PropTypes.func.isRequired,
+    position: PropTypes.oneOf(['before', 'after']).isRequired,
+    offset: PropTypes.number.isRequired,
+    theme: PropTypes.object.isRequired,
+}
+
+export default CalendarMonthLegends
diff --git a/packages/calendar/src/props.js b/packages/calendar/src/props.js
@@ -38,9 +38,10 @@ export const CalendarPropTypes = {
     yearLegendPosition: PropTypes.oneOf(['before', 'after']).isRequired,
     yearLegendOffset: PropTypes.number.isRequired,
 
-    monthLegend: PropTypes.func.isRequired,
     monthBorderWidth: PropTypes.number.isRequired,
     monthBorderColor: PropTypes.string.isRequired,
+    monthLegend: PropTypes.func.isRequired,
+    monthLegendPosition: PropTypes.oneOf(['before', 'after']).isRequired,
     monthLegendOffset: PropTypes.number.isRequired,
 
     daySpacing: PropTypes.number.isRequired,
@@ -69,16 +70,18 @@ export const CalendarDefaultProps = {
     minValue: 0,
     maxValue: 'auto',
 
-    yearLegend: year => year,
     yearSpacing: 30,
+    yearLegend: year => year,
     yearLegendPosition: 'before',
     yearLegendOffset: 10,
 
-    monthLegend: (year, month, date) => monthLabelFormat(date),
     monthBorderWidth: 2,
     monthBorderColor: '#000',
-    monthLegendOffset: 6,
+    monthLegend: (year, month, date) => monthLabelFormat(date),
+    monthLegendPosition: 'before',
+    monthLegendOffset: -6,
 
+    weekdayLegend: d => d,
     daySpacing: 0,
     dayBorderWidth: 1,
     dayBorderColor: '#000',

diff --git a/website/src/components/charts/calendar/Calendar.js b/website/src/components/charts/calendar/Calendar.js
@@ -50,6 +50,7 @@ export default class Calendar extends Component {
 
             monthBorderWidth: 2,
             monthBorderColor: '#ffffff',
+            monthLegendPosition: 'before',
             monthLegendOffset: 10,
 
             daySpacing: 0,

diff --git a/website/src/components/charts/calendar/props.js b/website/src/components/charts/calendar/props.js
@@ -219,6 +219,18 @@ export default [
         type: '{(year: number, month: number, date: Date) => string | number}',
         required: false,
     },
+    {
+        key: 'monthLegendPosition',
+        description: 'defines month legends position.',
+        type: `{'before'|'after'}`,
+        required: false,
+        default: defaults.monthLegendPosition,
+        controlType: 'choices',
+        controlGroup: 'Months',
+        controlOptions: {
+            choices: [{ label: 'before', value: 'before' }, { label: 'after', value: 'after' }],
+        },
+    },
     {
         key: 'monthBorderWidth',
         description: 'width of month borders.',