kevinsqi / react-calendar-heatmap

An svg calendar heatmap inspired by github's contribution graph
http://www.kevinqi.com/react-calendar-heatmap/
MIT License
1.23k stars 156 forks source link

Tooltip not working in Next.js + Mantine #205

Open YunusEmreAlps opened 1 year ago

YunusEmreAlps commented 1 year ago

Hello,

I hope you're well and everything is good with you.

I'm using this library with mantine + next.js. Everything working good but tooltip feature not working. How can I activate this feature in my code?

               <CalendarHeatmap
                  startDate={
                    currentYear.startDate
                  }
                  endDate={
                    currentYear.endDate
                  }
                  values={
                    pastShellsbyDate && pastShellsbyDate?.length > 0
                      ? pastShellsbyDate?.map((s: any) => {
                          return {
                            date: moment(s?.started_at).isValid()
                              ? moment(s?.started_at).format("YYYY-MM-DD")
                              : moment().format("YYYY-MM-DD"),
                            count: s?.shells?.length ?? 1,
                          };
                        })
                      : []
                  }
                  showWeekdayLabels={false}
                  tooltipDataAttrs={(value: any) => {
                    return {
                      "data-tip": `${value.date} has count: ${value.count}`,
                    };
                  }}
                  showOutOfRangeDays={true}
                  classForValue ={(value: any) => {
                    if (!value) {
                      return "color-empty";
                    } else if (value.count < 4) {
                      return `color-gitlab-${value.count}`;
                    } else {
                      return `color-gitlab-4`;
                    }
                  }}
                  monthLabels   = {[
                    tp("january_short"),
                    tp("february_short"),
                    tp("march_short"),
                    tp("april_short"),
                    tp("may_short"),
                    tp("june_short"),
                    tp("july_short"),
                    tp("august_short"),
                    tp("september_short"),
                    tp("october_short"),
                    tp("november_short"),
                    tp("december_short"),
                  ]}
                />

Thank you very much. Best regards,

punit-mistry commented 1 year ago

facing same problem in the next js any updates on this ?

veerviren commented 1 year ago

+1 tooltip not working for me too

jackfriks commented 8 months ago

not working for me either

shivam-880 commented 7 months ago

Let me know if this works for you guys! https://github.com/kevinsqi/react-calendar-heatmap/pull/208