GitHub comme Contribution HeatMap en JS

Vous êtes-vous déjà demandé comment reproduire le tableau de contributions GitHub ? La plupart d’entre nous l’ont fait, alors voici comment vous pouvez également le faire.

Nous utiliserons une bibliothèque appelée cal-heatmap

Vous pouvez installer la bibliothèque avec npm install cal-heatmap puis importer la bibliothèque dans votre application :

import CalHeatmap from 'cal-heatmap';

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

Insérer

pour restituer la carte thermique et instancier la fonction paint :

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

Définissez le domaine et le sous-domaine, où le domaine est l'unité de temps principale et le sous-domaine est la sous-unité de temps. Dans ce cas, nous aurons le domaine comme mois et le sous-domaine comme ghDay afin qu'il n'y ait pas de lacunes dans les graphiques

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

La gouttière définit l'espace entre chaque domaine ou sous-domaine c'est à dire chaque mois ou jour dans notre cas.

L'option date définit la date de début du calendrier et l'option plage définit le nombre de domaines à afficher qui est de 12 dans notre cas pour le nombre de mois.

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

Ajoutons maintenant les données de GitHub à l'aide de GraphQL où le nom d'utilisateur est le nom d'utilisateur de votre GitHub

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

La réponse de la requête GraphQL sera utilisée comme source des données

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

Nous allons enfin définir l'apparence de la carte thermique avec la propriété scale et ajouter un plugin d'info-bulle et d'étiquette de calendrier.

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

Avec cela maintenant, vous devriez pouvoir voir une belle carte thermique de vos contributions GitHub.

Suivez-moi sur X (anciennement Twitter) pour plus de détails techniques

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!