plane/web/components/ui/graphs/calendar-graph.tsx

// nivo
import { ResponsiveCalendar, CalendarSvgProps } from "@nivo/calendar";
// types
import { TGraph } from "./types";
// constants
import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";

export const CalendarGraph: React.FC<TGraph & Omit<CalendarSvgProps, "height" | "width">> = ({
  height = "400px",
  width = "100%",
  margin,
  theme,
  ...rest
}) => (
  <div style={{ height, width }}>
    <ResponsiveCalendar
      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
      colors={
        rest.colors ?? [
          "rgba(var(--color-primary-100), 0.2)",
          "rgba(var(--color-primary-100), 0.4)",
          "rgba(var(--color-primary-100), 0.8)",
          "rgba(var(--color-primary-100), 1)",
        ]
      }
      emptyColor={rest.emptyColor ?? "rgb(var(--color-background-80))"}
      dayBorderColor={rest.dayBorderColor ?? "transparent"}
      daySpacing={rest.daySpacing ?? 5}
      monthBorderColor={rest.monthBorderColor ?? "rgb(var(--color-background-100))"}
      theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
      {...rest}
    />
  </div>
);