How to make a custom Tooltip about react-heat-map

[jaywcjlove]

@tyler-morales Example https://codesandbox.io/s/react-heat-map-example-forked-m5dn1?file=/src/index.js

[tyler-morales]

Thanks for the quick reply, but I am still unclear on how the custom tool tip is created.

[jaywcjlove]

https://codesandbox.io/embed/sweet-aj-jpl6mx?fontsize=14&hidenavigation=1&theme=dark

import Tooltip from "@uiw/react-tooltip";
import HeatMap from "@uiw/react-heat-map";

const value = [
  { date: "2016/01/11", count: 2 },
  ...[...Array(17)].map((_, idx) => ({
    date: `2016/01/${idx + 10}`,
    count: idx
  })),
  ...[...Array(17)].map((_, idx) => ({
    date: `2016/02/${idx + 10}`,
    count: idx
  })),
  { date: "2016/04/12", count: 2 },
  { date: "2016/05/01", count: 5 },
  { date: "2016/05/02", count: 5 },
  { date: "2016/05/03", count: 1 },
  { date: "2016/05/04", count: 11 },
  { date: "2016/05/08", count: 32 }
];

export default function App() {
  return (
    <div>
      <HeatMap
        value={value}
        width={600}
        startDate={new Date("2016/01/01")}
        rectRender={(props, data) => {
          console.log("props", props);
          // if (!data.count) return <rect {...props} />;
          return (
            <Tooltip placement="top" content={`count: ${data.count || 0}`}>
              <rect {...props} />
            </Tooltip>
          );
        }}
      />
    </div>
  );
}