React-custom-calendar-heatmap NPM

React Custom Calendar Heatmap

A heatmap library designed for customizable SVG elements, offering flexible configuration options and interactive hover actions to enhance data visualization. It is currently under development and expected to include features for seamless integration and extensive customization.🚀

Setup

Install the npm module with npm, yarn or pnpm:

pnpm install react-custom-calendar-heatmap

Usage

Import the component:

import CalendarHeatmap from "react-custom-calendar-heatmap";

Import styles. You can directly import from the module, which requires a CSS loader:

import "react-custom-calendar-heatmap/dist/styles.css";

A CSS loader is included by default in create-react-app. If you don't have a CSS loader, you can simply copy the stylesheet into a file in your project and import it instead.

Create a component with SVG:

import React from "react";

const DefaultElement = ({ ...props }) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" {...props}>
      <rect width="100%" height="100%" fill="current" />
    </svg>
  );
};

export default DefaultElement;

When setting the SVG's fill attribute, using "current" is crucial for conveying the color to its child elements. This approach ensures that the child elements inside the SVG inherit the color seamlessly from their parent element. Additionally, remember to pass props to the component as needed.

To show a basic heatmap:

<CalendarHeatmap
  values={[
    { date: "2024-07-09", value: 12 },
    { date: "2024-07-10", value: 54 },
    { date: "2024-07-11", value: 38 },
    // ...and so on
  ]}
/>

Props

Name	IsRequired	Type	Description
values	true	{date: Date, value: number}	An array of objects, each containing a date and a numerical value.
SvgComponent	false	JSX.Element	An optional SVG component to be displayed alongside the gradient.
mainColor	false	string	The base color code (hexadecimal string) for generating the gradient. The gradient will start from this color and transition to gray.
colorSet	false	string[]	The color set with depth