GitHub wie Contribution HeatMap in JS

Haben Sie sich jemals gefragt, wie Sie das GitHub-Beitragsdiagramm nachbilden könnten? Die meisten von uns haben es getan, also erfahren Sie hier, wie Sie es auch tun können.

Wir werden eine Bibliothek namens cal-heatmap verwenden

Sie können die Bibliothek mit npm install cal-heatmap installieren und dann die Bibliothek in Ihre Anwendung importieren:

import CalHeatmap from 'cal-heatmap';

// Optionally import the CSS
import 'cal-heatmap/cal-heatmap.css';

Fügen Sie

ein. um die Heatmap zu rendern und die Malfunktion zu instanziieren:

const cal = new CalHeatmap();
cal.paint({
   itemSelector: '#cal-heatmap',
});

Definieren Sie die Domäne und die Unterdomäne, wobei die Domäne die Hauptzeiteinheit und die Unterdomäne die Unterzeiteinheit ist. In diesem Fall haben wir die Domain als Monat und die Subdomain als ghDay, damit es keine Lücken in den Diagrammen gibt

cal.paint({
   itemSelector: '#cal-heatmap',
   domain: {
      type: 'month',
      gutter: 4,
      label: { text: 'MMM', textAlign: 'start', position: 'top' },
    },
    subDomain: { type: 'ghDay', radius: 2, width: 11, height: 11, gutter: 4 },
});

Der Bundsteg definiert den Abstand zwischen jeder Domain oder Subdomain, d. h. in unserem Fall jeden Monat oder Tag.

Die Datumsoption definiert das Startdatum des Kalenders und die Bereichsoption definiert die Anzahl der anzuzeigenden Domains, die in unserem Fall 12 für die Anzahl der Monate beträgt.

cal.paint({
   itemSelector: '#cal-heatmap',
   domain: {
      type: 'month',
      gutter: 4,
      label: { text: 'MMM', textAlign: 'start', position: 'top' },
    },
    subDomain: { type: 'ghDay', radius: 2, width: 11, height: 11, gutter: 4 },
    date: { start: new Date('2012-01-01') },
    range: 12,
});

Jetzt fügen wir die Daten von GitHub mit GraphQL hinzu, wobei „userName“ der Benutzername Ihres GitHubs ist

query($userName:String!) { 
  user(login: $userName){
    contributionsCollection {
      contributionCalendar {
        totalContributions
        weeks {
          contributionDays {
            contributionCount
            date
          }
        }
      }
    }
  }
}

Die Antwort der GraphQL-Abfrage wird als Datenquelle verwendet

cal.paint({
   itemSelector: '#cal-heatmap',
   domain: {
      type: 'month',
      gutter: 4,
      label: { text: 'MMM', textAlign: 'start', position: 'top' },
    },
    subDomain: { type: 'ghDay', radius: 2, width: 11, height: 11, gutter: 4 },
    date: { start: new Date('2012-01-01') },
    range: 12,
    data: {
       source: response,
       x: 'date',
       y: 'contributionCount',
       defaultValue: 0
    },
});

Wir werden schließlich mit der Scale-Eigenschaft definieren, wie die Heatmap aussieht, und ein Tooltip- und Kalenderbeschriftungs-Plugin hinzufügen.

cal.paint({
   itemSelector: '#cal-heatmap',
   domain: {
      type: 'month',
      gutter: 4,
      label: { text: 'MMM', textAlign: 'start', position: 'top' },
    },
    subDomain: { type: 'ghDay', radius: 2, width: 11, height: 11, gutter: 4 },
    date: { start: new Date('2012-01-01') },
    range: 12,
    data: {
       source: response,
       x: 'date',
       y: 'contributionCount',
       defaultValue: 0
    },
    scale: {
      color: {
        type: 'threshold',
        range: ['#14432a', '#166b34', '#37a446', '#4dd05a'],
        domain: [10, 20, 30],
      },
    },
    [
    [
      Tooltip,
      {
        text: function (date, value, dayjsDate) {
          return (
            (value ? value : 'No') +
            ' contributions on ' +
            dayjsDate.format('dddd, MMMM D, YYYY')
          );
        },
      },
    ],
    [
      CalendarLabel,
      {
        width: 30,
        textAlign: 'start',
        text: () => dayjs.weekdaysShort().map((d, i) => (i % 2 == 0 ? '' : d)),
        padding: [25, 0, 0, 0],
      },
    ],
]
});

Damit sollten Sie jetzt eine schöne Heatmap Ihrer GitHub-Beiträge sehen können.

Folgen Sie mir auf X (ehemals Twitter), um mehr über Technik zu erfahren

Das obige ist der detaillierte Inhalt vonGitHub wie Contribution HeatMap in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!