Skip to content

Commit

Permalink
feat(calendar): add ability to define month legends position
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte authored and Raphaël Benitte committed Mar 22, 2019
1 parent 5aa0ff5 commit 9bc7092
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 28 deletions.
35 changes: 11 additions & 24 deletions packages/calendar/src/Calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -31,6 +32,7 @@ const Calendar = ({
yearLegendOffset,

monthLegend,
monthLegendPosition,
monthBorderWidth,
monthBorderColor,
monthLegendOffset,
Expand Down Expand Up @@ -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) {
Expand Down
1 change: 1 addition & 0 deletions packages/calendar/src/CalendarDay.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
58 changes: 58 additions & 0 deletions packages/calendar/src/CalendarMonthLegends.js
Original file line number Diff line number Diff line change
@@ -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
11 changes: 7 additions & 4 deletions packages/calendar/src/props.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions website/src/components/charts/calendar/Calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export default class Calendar extends Component {

monthBorderWidth: 2,
monthBorderColor: '#ffffff',
monthLegendPosition: 'before',
monthLegendOffset: 10,

daySpacing: 0,
Expand Down
12 changes: 12 additions & 0 deletions website/src/components/charts/calendar/props.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Expand Down

0 comments on commit 9bc7092

Please sign in to comment.