From 9bc70928f7c472666e2b8e023b50773765ba6fab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Fri, 22 Mar 2019 22:35:45 +0900 Subject: [PATCH] feat(calendar): add ability to define month legends position --- packages/calendar/src/Calendar.js | 35 ++++------- packages/calendar/src/CalendarDay.js | 1 + packages/calendar/src/CalendarMonthLegends.js | 58 +++++++++++++++++++ packages/calendar/src/props.js | 11 ++-- .../components/charts/calendar/Calendar.js | 1 + .../src/components/charts/calendar/props.js | 12 ++++ 6 files changed, 90 insertions(+), 28 deletions(-) create mode 100644 packages/calendar/src/CalendarMonthLegends.js diff --git a/packages/calendar/src/Calendar.js b/packages/calendar/src/Calendar.js index 26d1088b1..bffcbc460 100644 --- 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 ( - - {monthLegend(month.year, month.month, month.date)} - - ) - })} + {years.map(year => { let transform if (direction === DIRECTION_HORIZONTAL) { diff --git a/packages/calendar/src/CalendarDay.js b/packages/calendar/src/CalendarDay.js index b26eeb470..9d91c46ce 100644 --- 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 new file mode 100644 index 000000000..0918c9491 --- /dev/null +++ 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 ( + + {legend(month.year, month.month, month.date)} + + ) + })} + + ) +}) + +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 index 3251cb85e..c79ca81ef 100644 --- 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 index aa158ff10..32deb7b30 100644 --- 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 index e7a96e0cd..1c0a861b2 100644 --- 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.',