Heatmap Calendar

"use client";

import React from "react";
import {HeatmapCalendar, HeatmapCalendarData} from "@brynlabs/fusion-ui";

export const HeatmapCalendarExample = () => {
  const data: HeatmapCalendarData = [
    ...Array.from({length: 365}, (_, i) => {
      const date = new Date("2024-01-01");
      date.setDate(date.getDate() + i);
      // eslint-disable-next-line react-hooks/purity
      const value = Math.floor(Math.random() * 20);
      return {
        value,
        label: `${value} commits`,
        date: date.toISOString().split("T")[0],
      };
    }),
  ];
  return (
    <div style={{width: "100%", height: "200px", marginTop: "10px"}}>
      <HeatmapCalendar data={data} />
    </div>
  );
};

"use client";

import React from "react";
import {HeatmapCalendar, HeatmapCalendarData} from "@brynlabs/fusion-ui";

export const HeatmapCalendarSmallExample = () => {
  const data: HeatmapCalendarData = [
    {value: 10, label: "10 commits", date: "2024-01-01"},
    {value: 5, label: "5 commits", date: "2024-01-02"},
    {value: 8, label: "8 commits", date: "2024-01-03"},
    {value: 15, label: "15 commits", date: "2024-01-04"},
    {value: 3, label: "3 commits", date: "2024-01-05"},
    {value: 12, label: "12 commits", date: "2024-01-06"},
    {value: 7, label: "7 commits", date: "2024-01-07"},
    {value: 10, label: "10 commits", date: "2024-01-08"},
    {value: 5, label: "5 commits", date: "2024-01-09"},
    {value: 8, label: "8 commits", date: "2024-01-10"},
    {value: 15, label: "15 commits", date: "2024-01-11"},
    {value: 3, label: "3 commits", date: "2024-01-12"},
    {value: 12, label: "12 commits", date: "2024-01-13"},
    {value: 7, label: "7 commits", date: "2024-01-14"},
    {value: 10, label: "10 commits", date: "2024-01-15"},
    {value: 5, label: "5 commits", date: "2024-01-16"},
    {value: 8, label: "8 commits", date: "2024-01-17"},
    {value: 15, label: "15 commits", date: "2024-01-18"},
    {value: 3, label: "3 commits", date: "2024-01-19"},
    {value: 12, label: "12 commits", date: "2024-01-20"},
    {value: 7, label: "7 commits", date: "2024-01-21"},
    {value: 10, label: "10 commits", date: "2024-01-22"},
    {value: 5, label: "5 commits", date: "2024-01-23"},
    {value: 8, label: "8 commits", date: "2024-01-24"},
    {value: 15, label: "15 commits", date: "2024-01-25"},
    {value: 3, label: "3 commits", date: "2024-01-26"},
    {value: 12, label: "12 commits", date: "2024-01-27"},
    {value: 7, label: "7 commits", date: "2024-01-28"},
    {value: 10, label: "10 commits", date: "2024-01-29"},
    {value: 5, label: "5 commits", date: "2024-01-30"},
    {value: 8, label: "8 commits", date: "2024-01-31"},
  ];
  return (
    <div style={{width: "20%", height: "200px", marginTop: "10px"}}>
      <HeatmapCalendar data={data} />
    </div>
  );
};