GitHub wie Contribution HeatMap in JS-js-Tutorial-php.cn

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';

Nach dem Login kopieren

Fügen Sie

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

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

Nach dem Login kopieren

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 }, });

Nach dem Login kopieren

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, });

Nach dem Login kopieren

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 } } } } } }

Nach dem Login kopieren

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 }, });

Nach dem Login kopieren

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], }, ], ] });

Nach dem Login kopieren

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

GitHub like Contribution HeatMap in JS

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!