Calendar: Broken tooltips from version 0.65.0 on

[archaeron]

Describe/explain the bug

When I copy the sample code for the ResponsiveCalendar from the webpage verbatim I can't get tooltips to work on the newest version. After much trying, I downgraded and found out that the last version I can get the tooltips to work is 0.64.0.

Is there a new way of using tooltips that is not documented yet, or a bug?

To Reproduce

From the web page:

const data =
[
  {
    "day": "2018-02-09",
    "value": 6
  },
  {
    "day": "2014-03-03",
    "value": 321
  },
  {
    "day": "2013-06-01",
    "value": 330
  },
  {
    "day": "2018-09-16",
    "value": 177
  },
  {
    "day": "2016-06-08",
    "value": 48
  },
  {
    "day": "2016-12-14",
    "value": 30
  },
  {
    "day": "2014-06-11",
    "value": 123
  }]

const MyResponsiveCalendarCanvas = () => (
    <ResponsiveCalendarCanvas
        data={data}
        from="2013-03-01"
        to="2019-07-12"
        emptyColor="#aa7942"
        colors={[ '#61cdbb', '#97e3d5', '#e8c1a0', '#f47560' ]}
        margin={{ top: 40, right: 40, bottom: 50, left: 40 }}
        direction="vertical"
        monthBorderColor="#ffffff"
        dayBorderWidth={0}
        dayBorderColor="#ffffff"
        legends={[
            {
                anchor: 'bottom-right',
                direction: 'row',
                translateY: 36,
                itemCount: 4,
                itemWidth: 42,
                itemHeight: 36,
                itemsSpacing: 14,
                itemDirection: 'right-to-left'
            }
        ]}
    />
)

Steps to reproduce the behavior:

1. Hover over a colored field

Expected behavior

A tooltip should show up, but it doesn't from version 0.65.0 on up.

Screenshots

Desktop (please complete the following information):

• OS: Linux
• Browser: chomre, firefox
• Version: 0.65-0.67

[plouc]

@archaeron, tooltips should work as expected, the website is using the latest package version without any specific handling. A potential issue could be that the versions of the @nivo packages you use are not aligned. It would be ideal if you could reproduce this on codesandbox if that's not related to version mismatch.

[archaeron]

@plouc thanks for the answer :) You are right, this is working: https://codesandbox.io/s/stoic-perlman-q625c It looks like I'm doing the same thing on my end (plus it weirdly works if I downgrade) I'll have to find out what is different in my version. Sorry

[archaeron]

okay, I upgraded again and it's working. I'm a bit stumped but I'm blaming the package-lock.json right now.

Sorry for your troubles and thank you!

[plouc]

No worries, I'm glad it worked!

[erceamet]

Hello,

I have just encountered the same issue. I don't seem to be able to see the little popup box when hovering over any of the coloured boxes. I have version 0.67.0 for @nivo/calendar and version 0.67.0 for @nivo/core (not sure if this matter and initially I had 0.65.0 and I upgraded as I thought that's the issue but it's not).

Code:

<div className={styles.Calendar}>
                    <ResponsiveCalendar
                      data={data}
                      from="2018-01-01"
                      to="2018-07-12"
                      emptyColor="#eeeeee"
                      colors={["#61cdbb", "#97e3d5", "#e8c1a0", "#f47560"]}
                      margin={{ top: 40, right: 40, bottom: 40, left: 40 }}
                      monthBorderColor="#ffffff"
                      dayBorderWidth={2}
                      dayBorderColor="#ffffff"
                      legends={[
                        {
                          textColor: "#ffffff",
                          itemTextColor: "#ffffff",
                          anchor: "bottom-right",
                          direction: "row",
                          translateY: 36,
                          itemCount: 4,
                          itemWidth: 42,
                          itemHeight: 36,
                          itemsSpacing: 14,
                          itemDirection: "right-to-left",
                        },
                      ]}
                      theme={theme}
                    />
                  </div>

Styling:

.Calendar {
  justify-content: flex-end;
  border-radius: 1rem;
  background: #282a38;
  box-shadow: 24px 24px 38px #20222d, -24px -24px 38px #303243;
  flex: 1 0 50%;
  height: 15rem;
  margin-top: 3rem;
  width: 5rem;
  margin-left: 2.5rem;
}

Unless it's an actual issue with the newer version of the @nivo/calendar the only other thing I can think of would be my styling but I doubt that.

Here is what I have

Thank you for your time.

[archaeron]

@erceamet try removing the lock file and regenerating it. I’m pretty sure that fixed it for me.

[erceamet]

@erceamet try removing the lock file and regenerating it. I’m pretty sure that fixed it for me.

Hey. Thanks for your reply. Unfortunately, that did not fix my issues.

[archaeron]

@erceamet you can see here: https://codesandbox.io/s/stoic-perlman-q625c that it really should work. and it's now working for me. do you have all the nivo packages on the same version?

[erceamet]

@erceamet you can see here: https://codesandbox.io/s/stoic-perlman-q625c that it really should work. and it's now working for me. do you have all the nivo packages on the same version?

I have updated all the nivo packages to 0.67.0 as stated above (core,bar and calendar one). That did not seem to fix the problem. May I ask what version do you currently have? Thanks.

[archaeron]

I'm using:

    "@nivo/bar": "0.67.0",
    "@nivo/calendar": "0.67.0",
    "@nivo/core": "0.67.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "typescript": "3.9.2"

and some others

I should update react and typescript though

[erceamet]

I'm using:

    "@nivo/bar": "0.67.0",
    "@nivo/calendar": "0.67.0",
    "@nivo/core": "0.67.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "typescript": "3.9.2"

and some others

I should update react and typescript though

Strangely I have the same version of React as you. My only option would probably be to try the calendar package on a newly created and see if it works or not. I will probably open a new issue if that's the case. Thanks for your informative replies.

EDIT: I have managed to fix it. I did reinitiate the package-lock (again) using npm i --package-lock-only then I have removed any traces of the calendar -> reinstalled only the @nivo/calendar package -> started the app -> added the calendar back. That seemed to have fixed it for me. Strange is the fact that I did this process before and it didn't seem to have done anything.

[archaeron]

@erceamet I used more or less the same process to "fix" it. Reinstalled multiple times. Deleted the node_modules folder and the package lock and without changing the package.json it fixed itself. No idea what happened :(

But I'm glad it's working for you now too