Skip to content

Commit

Permalink
Add month spacing to @nivo/calendar
Browse files Browse the repository at this point in the history
  • Loading branch information
@fguitton
fguitton committed May 19, 2020
1 parent 9b1ed9c commit 8b24062
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 14 deletions.
55 changes: 43 additions & 12 deletions packages/calendar/src/compute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export const computeDomain = (data, minSpec, maxSpec) => {
* @param {number} direction
* @param {array} yearRange
* @param {number} yearSpacing
* @param {number} monthSpacing
* @param {number} daySpacing
* @param {number} maxWeeks
* @returns {number}
Expand All @@ -47,22 +48,23 @@ const computeCellSize = ({
direction,
yearRange,
yearSpacing,
monthSpacing,
daySpacing,
maxWeeks,
}) => {
let hCellSize
let vCellSize

if (direction === 'horizontal') {
hCellSize = (width - daySpacing * maxWeeks) / maxWeeks
hCellSize = (width - monthSpacing * 12 - daySpacing * maxWeeks) / maxWeeks
vCellSize =
(height - (yearRange.length - 1) * yearSpacing - yearRange.length * (8 * daySpacing)) /
(yearRange.length * 7)
} else {
hCellSize =
(width - (yearRange.length - 1) * yearSpacing - yearRange.length * (8 * daySpacing)) /
(yearRange.length * 7)
vCellSize = (height - daySpacing * maxWeeks) / maxWeeks
vCellSize = (height - monthSpacing * 12 - daySpacing * maxWeeks) / maxWeeks
}

return Math.min(hCellSize, vCellSize)
Expand All @@ -75,6 +77,7 @@ const computeCellSize = ({
* @param {number} cellSize
* @param {number} yearIndex
* @param {number} yearSpacing
* @param {number} monthSpacing
* @param {number} daySpacing
* @param {string} direction
* @param {number} originX
Expand All @@ -86,6 +89,7 @@ const monthPathAndBBox = ({
cellSize,
yearIndex,
yearSpacing,
monthSpacing,
daySpacing,
direction,
originX,
Expand All @@ -100,13 +104,16 @@ const monthPathAndBBox = ({
const firstDay = date.getDay()
const lastDay = t1.getDay()

// offset according to year index
// offset according to year index and month
let xO = originX
let yO = originY
const yearOffset = yearIndex * (7 * (cellSize + daySpacing) + yearSpacing)
const monthOffset = date.getMonth() * monthSpacing
if (direction === 'horizontal') {
yO += yearOffset
xO += monthOffset
} else {
yO += monthOffset
xO += yearOffset
}

Expand Down Expand Up @@ -150,8 +157,18 @@ const monthPathAndBBox = ({
*/
const memoMonthPathAndBBox = memoize(
monthPathAndBBox,
({ date, cellSize, yearIndex, yearSpacing, daySpacing, direction, originX, originY }) => {
return `${date.toString()}.${cellSize}.${yearIndex}.${yearSpacing}.${daySpacing}.${direction}.${originX}.${originY}`
({
date,
cellSize,
yearIndex,
yearSpacing,
monthSpacing,
daySpacing,
direction,
originX,
originY,
}) => {
return `${date.toString()}.${cellSize}.${yearIndex}.${yearSpacing}.${monthSpacing}.${daySpacing}.${direction}.${originX}.${originY}`
}
)

Expand All @@ -160,15 +177,20 @@ const memoMonthPathAndBBox = memoize(
*
* @param {number} cellSize
* @param {number} yearSpacing
* @param {number} monthSpacing
* @param {number} daySpacing
* @returns { function(): { x: number, y: number } }
*/
const cellPositionHorizontal = (cellSize, yearSpacing, daySpacing) => {
const cellPositionHorizontal = (cellSize, yearSpacing, monthSpacing, daySpacing) => {
return (originX, originY, d, yearIndex) => {
const weekOfYear = timeWeek.count(timeYear(d), d)

return {
x: originX + weekOfYear * (cellSize + daySpacing) + daySpacing / 2,
x:
originX +
weekOfYear * (cellSize + daySpacing) +
daySpacing / 2 +
d.getMonth() * monthSpacing,
y:
originY +
d.getDay() * (cellSize + daySpacing) +
Expand All @@ -183,10 +205,11 @@ const cellPositionHorizontal = (cellSize, yearSpacing, daySpacing) => {
*
* @param {number} cellSize
* @param {number} yearSpacing
* @param {number} monthSpacing
* @param {number} daySpacing
* @returns { function(): { x: number, y: number } }
*/
const cellPositionVertical = (cellSize, yearSpacing, daySpacing) => {
const cellPositionVertical = (cellSize, yearSpacing, monthSpacing, daySpacing) => {
return (originX, originY, d, yearIndex) => {
const weekOfYear = timeWeek.count(timeYear(d), d)

Expand All @@ -196,7 +219,11 @@ const cellPositionVertical = (cellSize, yearSpacing, daySpacing) => {
d.getDay() * (cellSize + daySpacing) +
daySpacing / 2 +
yearIndex * (yearSpacing + 7 * (cellSize + daySpacing)),
y: originY + weekOfYear * (cellSize + daySpacing) + daySpacing / 2,
y:
originY +
weekOfYear * (cellSize + daySpacing) +
daySpacing / 2 +
d.getMonth() * monthSpacing,
}
}
}
Expand All @@ -213,6 +240,7 @@ const dayFormat = timeFormat('%Y-%m-%d')
* @param {string|Date} to
* @param {string} direction
* @param {number} yearSpacing
* @param {number} monthSpacing
* @param {number} daySpacing
* @param {string} align
* @returns {object}
Expand All @@ -224,6 +252,7 @@ export const computeLayout = ({
to,
direction,
yearSpacing,
monthSpacing,
daySpacing,
align,
}) => {
Expand All @@ -244,11 +273,12 @@ export const computeLayout = ({
direction,
yearRange,
yearSpacing,
monthSpacing,
daySpacing,
maxWeeks,
})

const monthsSize = cellSize * maxWeeks + daySpacing * maxWeeks
const monthsSize = cellSize * maxWeeks + daySpacing * maxWeeks + monthSpacing * 12
const yearsSize =
(cellSize + daySpacing) * 7 * yearRange.length + yearSpacing * (yearRange.length - 1)

Expand All @@ -272,9 +302,9 @@ export const computeLayout = ({

let cellPosition
if (direction === 'horizontal') {
cellPosition = cellPositionHorizontal(cellSize, yearSpacing, daySpacing)
cellPosition = cellPositionHorizontal(cellSize, yearSpacing, monthSpacing, daySpacing)
} else {
cellPosition = cellPositionVertical(cellSize, yearSpacing, daySpacing)
cellPosition = cellPositionVertical(cellSize, yearSpacing, monthSpacing, daySpacing)
}

let years = []
Expand Down Expand Up @@ -307,6 +337,7 @@ export const computeLayout = ({
direction,
yearIndex: i,
yearSpacing,
monthSpacing,
daySpacing,
cellSize,
}),
Expand Down
15 changes: 13 additions & 2 deletions packages/calendar/src/enhance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,26 @@ const commonEnhancers = [
}
),
withPropsOnChange(
['width', 'height', 'from', 'to', 'direction', 'yearSpacing', 'daySpacing', 'align'],
({ width, height, from, to, direction, yearSpacing, daySpacing, align }) => {
[
'width',
'height',
'from',
'to',
'direction',
'yearSpacing',
'monthSpacing',
'daySpacing',
'align',
],
({ width, height, from, to, direction, yearSpacing, monthSpacing, daySpacing, align }) => {
return computeLayout({
width,
height,
from,
to,
direction,
yearSpacing,
monthSpacing,
daySpacing,
align,
})
Expand Down
2 changes: 2 additions & 0 deletions packages/calendar/src/props.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const commonPropTypes = {
monthBorderWidth: PropTypes.number.isRequired,
monthBorderColor: PropTypes.string.isRequired,
monthLegend: PropTypes.func.isRequired,
monthSpacing: PropTypes.number.isRequired,
monthLegendPosition: PropTypes.oneOf(['before', 'after']).isRequired,
monthLegendOffset: PropTypes.number.isRequired,

Expand Down Expand Up @@ -90,6 +91,7 @@ const commonDefaultProps = {

monthBorderWidth: 2,
monthBorderColor: '#000',
monthSpacing: 0,
monthLegend: (year, month, date) => monthLabelFormat(date),
monthLegendPosition: 'before',
monthLegendOffset: 10,
Expand Down
2 changes: 2 additions & 0 deletions packages/calendar/stories/calendar.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,3 +68,5 @@ stories.add('custom tooltip', () => (
{...commonProps}
/>
))

stories.add('month spacing', () => <Calendar {...commonProps} monthSpacing={25} />)

0 comments on commit 8b24062

Please sign in to comment.