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 |

License

react-custom-calendar-heatmap is Copyright © 2024 Ahyeon, Jung(@a-honey) and is released under an MIT License.