react-date-heatmap

A React Component that allows you to visualize an array of dates in form of a heatmap.

Installation

Install react-date-heatmap in your project using the following npm command:

npm install react-date-heatmap

Or with yarn

yarn add react-date-heatmap

After installation, you can use the ReactDateHeatmap component in your React project.

import React from 'react';
import ReactDateHeatmap from 'react-date-heatmap';

const YourComponent = () => {
  const arrayOfDates = /* ... */;

  return (
    <ReactDateHeatmap data={arrayOfDates} />
  );
}

export default YourComponent;

Usage Example

import React, { useState } from "react";
import { DateEntry, ReactDateHeatmap } from "react-date-heatmap";

// generate an array of random dates
function getRandomDateArray(length: number) {
  const startDate = new Date(2023, 9, 7);
  const endDate = new Date(2023, 11, 31);
  const dateArray: Date[] = [];
  for (let i = 0; i < length; i++) {
    const randomTime =
      startDate.getTime() +
      Math.random() * (endDate.getTime() - startDate.getTime());
    const randomDate = new Date(randomTime);
    dateArray.push(randomDate);
  }
  return dateArray;
}

function ExampleApp() {
  const [data, setData] = useState(getRandomDateArray(100));

  // Console log the Entry you clicked on
  const onSquareClick = (entry: DateEntry) => {
    console.log("You Clicked on entry", entry);
  };
  // Create your own content div that shows up when you hover over a square/entry
  const TooltipContent = ({ entry }: { entry: DateEntry }) => {
    return (
      <div style={{ display: "flex", flexDirection: "column" }}>
        <span>{entry.formatted}</span>
        <span>Entries: {entry.quantity}</span>
      </div>
    );
  };

  return (
    <ReactDateHeatmap
      data={data}
      tooltipContent={TooltipContent}
      onSquareClick={onSquareClick}
      squareColor="#ff0000"
    />
  );
}

export default ExampleApp;

List of Props

| Name | Type | Default Value | Description | | ------------------- | -------------------------------------------------- | ------------- | ---------------------------------------------------- | | data | Date[] | - | An array of dates to be visualized in the heatmap. | | startDate | Date | - | The start date for the heatmap range. | | endDate | Date | - | The end date for the heatmap range. | | rows | number | 7 | Number of rows to display in the heatmap grid. | | showMonths | boolean | true | Display month indicators on the heatmap. | | showShades | boolean | true | Display shades indicating the quantity of each date. | | squareSize | number | 32 | Size of each square in the heatmap grid. | | squareColor | string | "#00ff00" | Color of the filled squares in the heatmap. | | textColor | string | #000000 | Color of the months text. | | emptySquareColor | string | "#333333" | Color of empty squares in the heatmap. | | onSquareClick | (entry: DateEntry) => void | - | Callback function triggered on square click. | | hideTooltip | boolean | false | Hide tooltips on square hover. | | tooltipContent | ({ entry }: { entry: DateEntry }) => JSX.Element | - | Custom tooltip content for each square. | | tooltipBackground | string | "#ffffff" | Background color of the tooltip. | | tooltipTextColor | string | "#000000" | Text color of the tooltip. |

Types

DateEntry

| Name | Type | Description | | ----------- | --------- | ---------------------------------------------- | | date | Date | The date represented by the entry. | | formatted | string | A formatted string representation of the date. | | active | boolean | Indicates whether the date is active or not. | | quantity | number | Quantity associated with the date. |