# ice450028456/react-heat-map architecture

> Architecture diagram of the GitHub repository ice450028456/react-heat-map, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ice450028456/react-heat-map
- Repository: https://github.com/ice450028456/react-heat-map

## Overview

This repository is a React calendar heatmap component: callers supply date/count values and display options, and it renders an SVG calendar with day cells, weekday/month labels, and an optional color legend. The website demonstrates the component and embeds runnable README examples. Edges reflect calls and imports visible in the excerpts or README; the styling file and other unsampled implementation details are represented only where their paths are evident.

Main entry points: [`src/SVG.tsx`](https://github.com/ice450028456/react-heat-map/blob/main/src/SVG.tsx) (Calendar SVG), [`website/App.tsx`](https://github.com/ice450028456/react-heat-map/blob/main/website/App.tsx) (Documentation app), [`src/index.tsx`](https://github.com/ice450028456/react-heat-map/blob/main/src/index.tsx) (HeatMap API), [`src/LabelsMonth.tsx`](https://github.com/ice450028456/react-heat-map/blob/main/src/LabelsMonth.tsx) (Month labels)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public_api["Heatmap API"]
  node_heatmap["HeatMap API<br/>[index.tsx]"]
  node_component_styles["Component styles<br/>[index.less]"]
end

subgraph group_rendering["SVG Rendering"]
  node_svg["Calendar SVG<br/>[SVG.tsx]"]
  node_date_data["Date data utilities<br/>[utils.ts]"]
  node_day_cells["Day rectangles<br/>[Rect.tsx]"]
  node_week_labels["Week labels<br/>[LabelsWeek.tsx]"]
  node_month_labels["Month labels<br/>[LabelsMonth.tsx]"]
  node_color_legend["Color legend<br/>[Legend.tsx]"]
end

subgraph group_website["Demo Website"]
  node_website_entry["Website entry<br/>[index.tsx]"]
  node_website_app["Documentation app<br/>[App.tsx]"]
  node_interactive_demo["Interactive demo<br/>[Example.tsx]"]
  node_code_examples["Code examples<br/>[Code.tsx]"]
  node_readme["Usage documentation<br/>[README.md]"]
end

node_consumer(("Component caller"))
node_preview_service["Example hosting"]

node_consumer -->|"provides values"| node_heatmap
node_heatmap -->|"renders"| node_svg
node_heatmap -->|"loads styles"| node_component_styles
node_svg -->|"formats dates"| node_date_data
node_svg -->|"renders cells"| node_day_cells
node_svg -->|"renders labels"| node_week_labels
node_svg -->|"renders labels"| node_month_labels
node_svg -->|"renders legend"| node_color_legend
node_month_labels -->|"uses day length"| node_date_data
node_color_legend -->|"renders rectangles"| node_day_cells
node_website_entry -->|"mounts"| node_website_app
node_website_app -->|"renders demo"| node_interactive_demo
node_website_app -->|"supplies component"| node_heatmap
node_website_app -->|"renders markdown"| node_readme
node_website_app -->|"renders previews"| node_code_examples
node_code_examples -->|"exports examples"| node_preview_service
node_interactive_demo -->|"configures"| node_heatmap

click node_heatmap "https://github.com/ice450028456/react-heat-map/blob/main/src/index.tsx"
click node_svg "https://github.com/ice450028456/react-heat-map/blob/main/src/SVG.tsx"
click node_date_data "https://github.com/ice450028456/react-heat-map/blob/main/src/utils.ts"
click node_day_cells "https://github.com/ice450028456/react-heat-map/blob/main/src/Rect.tsx"
click node_week_labels "https://github.com/ice450028456/react-heat-map/blob/main/src/LabelsWeek.tsx"
click node_month_labels "https://github.com/ice450028456/react-heat-map/blob/main/src/LabelsMonth.tsx"
click node_color_legend "https://github.com/ice450028456/react-heat-map/blob/main/src/Legend.tsx"
click node_component_styles "https://github.com/ice450028456/react-heat-map/blob/main/src/style/index.less"
click node_website_entry "https://github.com/ice450028456/react-heat-map/blob/main/website/index.tsx"
click node_website_app "https://github.com/ice450028456/react-heat-map/blob/main/website/App.tsx"
click node_interactive_demo "https://github.com/ice450028456/react-heat-map/blob/main/website/Example.tsx"
click node_code_examples "https://github.com/ice450028456/react-heat-map/blob/main/website/Code.tsx"
click node_readme "https://github.com/ice450028456/react-heat-map/blob/main/README.md"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_heatmap,node_component_styles toneBlue
class node_svg,node_date_data,node_day_cells,node_week_labels,node_month_labels,node_color_legend toneAmber
class node_website_entry,node_website_app,node_interactive_demo,node_code_examples,node_readme toneMint
class node_consumer,node_preview_service toneIndigo
```

## Components

### Heatmap API

- [HeatMap API](https://github.com/ice450028456/react-heat-map/blob/main/src/index.tsx): `src/index.tsx`
- [Component styles](https://github.com/ice450028456/react-heat-map/blob/main/src/style/index.less): `src/style/index.less`

### SVG Rendering

- [Calendar SVG](https://github.com/ice450028456/react-heat-map/blob/main/src/SVG.tsx): `src/SVG.tsx`
- [Date data utilities](https://github.com/ice450028456/react-heat-map/blob/main/src/utils.ts): `src/utils.ts`
- [Day rectangles](https://github.com/ice450028456/react-heat-map/blob/main/src/Rect.tsx): `src/Rect.tsx`
- [Week labels](https://github.com/ice450028456/react-heat-map/blob/main/src/LabelsWeek.tsx): `src/LabelsWeek.tsx`
- [Month labels](https://github.com/ice450028456/react-heat-map/blob/main/src/LabelsMonth.tsx): `src/LabelsMonth.tsx`
- [Color legend](https://github.com/ice450028456/react-heat-map/blob/main/src/Legend.tsx): `src/Legend.tsx`

### Demo Website

- [Website entry](https://github.com/ice450028456/react-heat-map/blob/main/website/index.tsx): `website/index.tsx`
- [Documentation app](https://github.com/ice450028456/react-heat-map/blob/main/website/App.tsx): `website/App.tsx`
- [Interactive demo](https://github.com/ice450028456/react-heat-map/blob/main/website/Example.tsx): `website/Example.tsx`
- [Code examples](https://github.com/ice450028456/react-heat-map/blob/main/website/Code.tsx): `website/Code.tsx`
- [Usage documentation](https://github.com/ice450028456/react-heat-map/blob/main/README.md): `README.md`

### Other components

- **Component caller**
- **Example hosting**

## Connections

- Component caller → HeatMap API: provides values (evidence: `README.md`)
- HeatMap API → Calendar SVG: renders (evidence: `src/index.tsx`)
- HeatMap API → Component styles: loads styles (evidence: `src/index.tsx`)
- Calendar SVG → Date data utilities: formats dates (evidence: `src/SVG.tsx`)
- Calendar SVG → Day rectangles: renders cells (evidence: `src/SVG.tsx`)
- Calendar SVG → Week labels: renders labels (evidence: `src/SVG.tsx`)
- Calendar SVG → Month labels: renders labels (evidence: `src/SVG.tsx`)
- Calendar SVG → Color legend: renders legend (evidence: `src/SVG.tsx`)
- Month labels → Date data utilities: uses day length (evidence: `src/LabelsMonth.tsx`)
- Color legend → Day rectangles: renders rectangles (evidence: `src/Legend.tsx`)
- Website entry → Documentation app: mounts (evidence: `website/index.tsx`)
- Documentation app → Interactive demo: renders demo (evidence: `website/App.tsx`)
- Documentation app → HeatMap API: supplies component (evidence: `website/App.tsx`)
- Documentation app → Usage documentation: renders markdown (evidence: `website/App.tsx`)
- Documentation app → Code examples: renders previews (evidence: `website/App.tsx`)
- Code examples → Example hosting: exports examples (evidence: `website/Code.tsx`)
- Interactive demo → HeatMap API: configures (evidence: `website/Example.tsx`)