Nivo: Support calendars less than a year long

[kristiehowboutdat]

I'd like to show a range of dates, ex. 3 months, without showing the entire calendar year. I see that you can use the from and to to specify the year that you want, but I'd like to only show the dates starting and ending on the from and to dates.

Perhaps a prop to opt in / out of this behavior?

Happy to help with a PR if you agree. THANK YOU for all of your hard work, this is an amazing library!

Related: https://github.com/plouc/nivo/issues/203

[plouc]

Hi @kristiehowboutdat,

Thank you.
You're right, it could be a useful feature, but maybe the granularity should be month at least, because month shape is available for styling.
Otherwise it could be a different component, displaying weeks for examples.

[kristiehowboutdat]

Having granularity of months would be awesome and should solve most use cases smaller than a year that involve a calendar specifically.

Proposal: Use a prop granularity that is either "month" or "year" with a default of "year" for existing compatibility. This is slightly more flexible than a boolean prop showMonths or something because it allows for future iteration on the string values without changing the API. I would be happy to change the name of the prop, not feeling creative at the moment.

// Show the entire calendar year of 2018
// default granularity="year"
<Calendar from="01-01-2018" to="03-31-2018" ... />

// Show the entire calendar year of 2018
<Calendar from="01-01-2018" to="03-31-2018" granularity="year" ... />

// Show only the (entire) months of Jan, Feb, March
<Calendar from="01-01-2018" to="03-31-2018" granularity="month" />

// Show only the (entire) months of Jan, Feb, March, April
<Calendar from="01-01-2018" to="04-01-2018" granularity="month" />

Is that the correct understanding? Where in the last example we would show the entire month of April, not just the first week of April?

[plouc]

This could be a nice approach, and in fact keeping the same component might be useful to implement some kind of zooming on a specific month.

[sivaraj-dev]

+1 any update @kristiehowboutdat proposal. Good feature

[plouc]

Please refrain from adding simple comments with +1, you can use the reactions for this :)

It would be nice to have it, but it's not on my current Roadmap, if someone wants to contribute, do not hesitate though ;)

[sibelius]

where should someone start modifying the code to make this possible?

[diegosps]

@sibelius take a look at this PR https://github.com/plouc/nivo/pull/613

You should have an idea what to modify.

I'm planning to this now since I need to show only the past 3 months in the same row independently of the year.

However, I recently submit a PR https://github.com/plouc/nivo/pull/1040 that changes the Calendar code base heavily and I plan to implement this on top of that and I'm not sure if that will be merged.

[sibelius]

would this work for hours and weeks instead of days and months?

[diegosps]

Hi, guys. I finished implementing this on my fork.

The proposed solution by @kristiehowboutdat:
<Calendar from="02-01-2018" to="05-01-2018" granularity="month" monthBorderColor="purple" monthBorderWidth={4} />

would give us this:

I went a step further and added the following:

granularity: PropTypes.oneOf(['year', 'month']).isRequired,
breakpoint: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
weekDirection: PropTypes.oneOf(['auto', 'horizontal', 'vertical']).isRequired,

This way we can achieve a _n_ (_n_ from 1 until breakpoint) months/years per direction and choose the week layout to render.
For example:
<Calendar from="01-01-2020" to="12-31-2020" direction="horizontal" granularity="month" weekDirection="horizontal" monthSpacing={20} yearSpacing={30} breakpoint={3} monthBorderWidth={0}/>

Produces:

As you can notice, this results in some year properties having a weird name because they now refer to blocks.

Also, I can't submit a PR yet because the code base is the one from #1040.

So, feel free to revise both codes and do comments and changes to improve it (lacks website and api documentation, for example)
Cya

[lavanya57]

I'd like to show a range of dates, ex. 3 months, without showing the entire calendar year. I applied the above way you are saying but doesn't work. It shows the total year calendar I wasted a lot of time on it

[diegosps]

I'd like to show a range of dates, ex. 3 months, without showing the entire calendar year. I applied the above way you are saying but doesn't work. It shows the total year calendar I wasted a lot of time on it

Did you use this branch: https://github.com/diegosps/nivo/tree/calendar-granularity ?

[lavanya57]

yah I used @nivo/calendar package but it doesn't support granularity

  <Calendar
                data={data1}
                from="01-02-2020"
                to="03-31-2020"
                width={1200}
                height={700}
                granularity="month"
                emptyColor="#eeeeee"
                colors={['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560']}
                margin={{ top: 70, right: 100, bottom: 50, left: 100 }}
                yearSpacing={40}
                monthBorderColor="#ffffff"
                monthBorderWidth={6}
                dayBorderWidth={2}
                dayBorderColor="#ffffff"
                legends={[
                  {
                    anchor: 'bottom-right',
                    direction: 'row',
                    translateY: 36,
                    itemCount: 4,
                    itemWidth: 42,
                    itemHeight: 36,
                    itemsSpacing: 14,
                    itemDirection: 'right-to-left'
                  }
                ]}
              /> 

[Deliaz]

Hey @diegosps,
Thank you for implementation, it looks promising!
Any updates on PR? It looks like #1040 was resolved

[diegosps]

Any updates on PR? It looks like #1040 was resolved

Sorry for that. Will try my best to do it this week.
However, there are some concerns:

1 - There is an increase in library size. I don't know if there is any kind of politics here regarding that.

2 - There are some weird naming now. I can keep year properties that has different meaning or I can change it to block and introduce breaking changes. I'm not sure what to do, and I didn't receive any info about that from the manteiners.

3 - The manteiners seems busy and it may take a while for the PR to be reviewed.

@wyze should I push the PR as it is. Or should I do any changes regarding number 2?

@Deliaz in the meantime, if you are in a hurry, the code is available at the branch I mentioned before.

[Deliaz]

@diegosps
Thank you for the quick response!

I think you can make simple & safe PR, the maintainers team will review it, and will notify about required changes.
You also can try to ping the team in the Discord channel

[wyze]

@diegosps Submit the PR as is and we can continue discussion there as I think I am missing context for your second bullet.

As far as bundle size, it is not a concern currently as it isn't tracked.

[diegosps]

About the second bullet:

yearSpacing={40}
Currently, it means the space between each year.

In my code: granularity="month" yearSpacing={30} breakpoint={3}
this means the space between each row of 3 months.

I will try to dismember it in Calendar and EnhancedCalendar.
This way, the former won't have any breaking change and people can benefit from tree shaking if they are not using new functionalities from EnhancedCalendar with it's new naming properties.

This might take some time though.

[Hewlbern]

Yeah this makes the component unusable on mobile essentially

[icyJoseph]

Any updates on this one @diegosps? Perhaps we could help out?

[diegosps]

Since, @wyze is now able to create releases, I felt motivated to refactor my code and made the PR above.

I strongly suggest you guys to review it.

Bye!!

[egoreburial]

so is there some plans to release this feature? This is really necessary stuff!

[erdinc]

any updates on this?