Erstellen eines React GitHub Heatmap-Beitrags

Einführung

Dieses Projekt führt Sie durch die Erstellung eines Heatmap-Kalenders in React, der dem Beitragsdiagramm von GitHub ähnelt. Ein solcher Kalender kann eine überzeugende Möglichkeit sein, Aktivitätsdaten im Laufe der Zeit zu visualisieren, wobei die Intensität der Farbe das Aktivitätsniveau an einem bestimmten Tag angibt. Am Ende dieses Projekts werden Sie einen klaren Überblick darüber haben, wie ein Kalender-Heatmap in einer React-Anwendung integriert und verwendet wird.

👀 Vorschau

Installieren Sie die erforderlichen Abhängigkeiten

Die Grundlage unseres Heatmap-Kalenders ist eine neue React-Anwendung.

Funktionalität:

• Installieren Sie die Projektabhängigkeiten.
• Installieren Sie die Bibliothek react-calendar-heatmap für den Heatmap.
• Installieren Sie date-fns für einfache Datumsmanipulation.

Um die Projektabhängigkeiten zu installieren, verwenden Sie den folgenden Befehl:

cd github-heatmap-calendar
npm install

Um die Heatmap-Funktionalität des Kalenders hinzuzufügen, müssen wir eine React-spezifische Bibliothek zusammen mit einer Datums-Utilitätsbibliothek installieren. (Die Bibliothek ist bereits im Projekt enthalten und muss nicht installiert werden.)

npm install react-calendar-heatmap date-fns

Erstellen Sie die Heatmap-Komponentenschale

Wir beginnen mit der Erstellung der grundlegenden Struktur unserer Heatmap-Komponente ohne jede Funktionalität.

Funktionalität:

• Erstellen Sie eine neue Datei für die Heatmap-Komponente.
• Definieren Sie die funktionale Komponente mit Platzhalterinhalten.

Code:

// src/GitHubCalendar.js
import React from "react";

const GitHubCalendar = () => {
  return (
    <div>
      {/* Platzhalter für den Heatmap */}
      <div>Heatmap wird hier eingefügt</div>
    </div>
  );
};

export default GitHubCalendar;

Fügen Sie Zustand für das Filtern hinzu

Bevor wir unseren Heatmap mit Daten füllen, fügen wir zunächst etwas Zustand hinzu, um die Filterung der Daten basierend auf der Benutzeroberfläche zu steuern.

Funktionalität:

• Importieren Sie den useState-Hook.
• Initialisieren Sie die colorFilter-Zustandsvariable.

Code:

// src/GitHubCalendar.js
import React, { useState } from "react";

const GitHubCalendar = () => {
  const [colorFilter, setColorFilter] = useState(null);

  return (
    <div>
      {/* Platzhalter für den Heatmap */}
      <div>Heatmap wird hier eingefügt</div>
    </div>
  );
};

export default GitHubCalendar;

Generieren Sie Dummy-Daten

Generieren Sie Dummy-Daten, um die Aktivität zu simulieren. Wir werden dies in einer Echtanwendung durch tatsächliche Daten ersetzen.

Funktionalität:

• Nutzen Sie date-fns, um einen Datumsbereich zu erstellen.
• Befüllen Sie ein Array mit Dummy-Daten für jeden Tag.

Code:

// src/GitHubCalendar.js
import { subYears, isBefore, format } from "date-fns";

// Fügen Sie dies innerhalb der GitHubCalendar-Komponente hinzu
const startDate = subYears(new Date(), 1);
const endDate = new Date();
const values = [];
let currentDate = startDate;

while (isBefore(currentDate, endDate)) {
  values.push({
    date: format(currentDate, "yyyy-MM-dd"),
    count: Math.floor(Math.random() * 5)
  });
  currentDate = new Date(currentDate.setDate(currentDate.getDate() + 1));
}

Rendern Sie den Kalender-Heatmap

Jetzt werden wir die CalendarHeatmap-Komponente hinzufügen und unsere Dummy-Daten an sie übergeben.

Funktionalität:

• Rendern Sie die Heatmap mit Daten.
• Definieren Sie eine Farbskala basierend auf der Anzahl.

Code:

// src/GitHubCalendar.js
import CalendarHeatmap from "react-calendar-heatmap";
import "react-calendar-heatmap/dist/styles.css";

// Fügen Sie dies innerhalb der return-Anweisung der GitHubCalendar-Komponente hinzu
<CalendarHeatmap
  startDate={startDate}
  endDate={endDate}
  values={values}
  classForValue={(value) => {
    if (!value || value.count === 0) {
      return "color-empty";
    }
    return `color-scale-${value.count}`;
  }}
  showWeekdayLabels={true}
/>;

Implementieren Sie die Filterlogik

Erstellen Sie Buttons für jede Aktivitätsstufe, die die Heatmap filtern, wenn sie angeklickt werden.

Funktionalität:

• Fügen Sie Buttons hinzu, die den colorFilter-Zustand setzen.
• Filtern Sie die Heatmap-Daten basierend auf dem ausgewählten Filter.

Code:

// src/GitHubCalendar.js
// Fügen Sie dies unterhalb der CalendarHeatmap-Komponente in der return-Anweisung hinzu
<div className="filter-bar">
  {Array.from({ length: 5 }, (_, i) => (
    <button
      key={i}
      className={`filter-btn color-scale-${i}`}
      onClick={() => setColorFilter(colorFilter === i ? null : i)}
    >
      Filter {i}
    </button>
  ))}
</div>

Stylen Sie die Komponente

Definieren Sie die CSS für die Heatmap und die Filterbuttons, um die Daten visuell zu kommunizieren.

Funktionalität:

• Fügen Sie CSS-Regeln für die Heatmap-Farben und die Button-Stylisierung hinzu.

Code:

/* src/App.css */
/* Fügen Sie hier Ihre CSS-Regeln hinzu */
.color-empty {
  fill: #ebedf0; /* Keine Beiträge - Weiß */
}
.color-scale-0 {
  fill: #ebedf0; /* Hellstes Grün - Ändern Sie dies in Ihr hellstes Grün */
}
.color-scale-1 {
  fill: #9be9a8; /* Helles Grün */
}
.color-scale-2 {
  fill: #40c463; /* Mittelgrün */
}
.color-scale-3 {
  fill: #30a14e; /* Dunkles Grün */
}
.color-scale-4 {
  fill: #216e39; /* Dunkelstes Grün */
}

.filter-bar {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.filter-btn {
  background: none;
  border: 2px solid transparent;
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}

/* Wendet die gleichen Farben auf die Filterbuttons an */
.filter-btn.color-scale-0 {
  border-color: #ebedf0;
}
.filter-btn.color-scale-1 {
  border-color: #9be9a8;
}
.filter-btn.color-scale-2 {
  border-color: #40c463;
}
.filter-btn.color-scale-3 {
  border-color: #30a14e;
}
.filter-btn.color-scale-4 {
  border-color: #216e39;
}

.filter-btn:hover,
.filter-btn:focus {
  background-color: #ddd;
}

.reset {
  border-color: #000; /* Reset-Button-Borderfarbe */
}

/* Hervorhebt den aktiven Filter */
.filter-btn.active {
  border-color: #666; /* Aktiv-Button-Borderfarbe */
  font-weight: bold;
}

Verweisen Sie auf frühere CSS-Beispiele für die Anleitung bei der Einrichtung der Farbskalen und der Button-Styles.

Zusammenbauen der Anwendung

Integrieren Sie die Heatmap-Komponente in Ihre Hauptanwendungsdatei.

Funktionalität:

• Importieren Sie die GitHubCalendar-Komponente in App.js.
• Rendern Sie die GitHubCalendar-Komponente in der Anwendung.

Code:

// src/App.js
import React from "react";
import "./App.css";
import GitHubCalendar from "./GitHubCalendar";

function App() {
  return (
    <div className="App">
      <GitHubCalendar />
    </div>
  );
}

export default App;

Starten der Anwendung

Mit all den Teilen an ihrem Platz ist es an der Zeit, Ihre Heatmap-Kalender in Aktion zu sehen.

Funktionalität:

• Starten Sie die Anwendung und betrachten Sie den Heatmap-Kalender.

Befehle:

npm start

Dies wird die React-Anwendung kompilieren und in Ihrem Standard-Webbrowser unter 8080 öffnen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben gerade eine React-Anwendung erstellt, die einen Heatmap-Kalender ähnlich dem Beitragsdiagramm von GitHub enthält. Beginnend mit der Projektinitialisierung installierten Sie die erforderlichen Bibliotheken, erstellten eine Heatmap-Komponente, implementierten die Filterfunktionalität und stilisierten die Komponente. Dieses Projekt bot einen schrittweisen Ansatz zum Erstellen eines komplexen UI-Komponents in React, das angepasst werden kann, um verschiedene Arten von Zeitreihendaten oder Benutzeraktivität anzuzeigen.