GitHub seperti Contribution HeatMap dalam JS

Pernahkah anda terfikir bagaimana anda boleh meniru carta sumbangan GitHub? Kebanyakan daripada kita ada, jadi berikut ialah cara anda juga boleh melakukannya.

Kami akan menggunakan perpustakaan yang dipanggil cal-heatmap

Anda boleh memasang perpustakaan dengan npm install cal-heatmap dan kemudian mengimport perpustakaan ke dalam aplikasi anda:

import CalHeatmap from 'cal-heatmap';

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

Masukkan

untuk memaparkan peta haba dan membuat instantiate fungsi cat:

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

Tentukan domain dan sub-domain, di mana domain adalah unit masa utama dan sub-domain ialah unit sub-masa. Dalam kes ini, kita akan mempunyai domain sebagai bulan dan sub-domain sebagai ghDay supaya tiada jurang dalam carta

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

Longkang mentakrifkan ruang antara setiap domain atau sub-domain iaitu setiap bulan atau hari dalam kes kami.

Pilihan tarikh mentakrifkan tarikh mula kalendar dan pilihan julat mentakrifkan bilangan domain untuk ditunjukkan iaitu 12 dalam kes kami untuk bilangan bulan.

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

Sekarang mari tambah data daripada GitHub menggunakan GraphQL dengan nama pengguna ialah nama pengguna GitHub anda

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

Respons daripada pertanyaan GraphQL akan digunakan sebagai sumber data

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

Kami akhirnya akan menentukan rupa peta haba dengan sifat skala dan menambah pemalam alat dan label kalendar.

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

Dengan ini sekarang, anda sepatutnya dapat melihat peta haba yang cantik bagi sumbangan GitHub anda.

Ikuti saya di X(dahulunya Twitter) untuk lebih banyak barangan teknologi

Atas ialah kandungan terperinci GitHub seperti Contribution HeatMap dalam JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!