ObjectBlehHQまたはどんなウェブサイトにでも我々のOpenSource貢献を示してください.

こんにちは.今日、ダイナミックなOpenSource貢献表示テーブルを持ってきます.
まず見ましょう.

live demo

概要

Github APIは、私たちにpullrequest情報または他を提供することができました.ObjectBableHQのウェブサイト上でAPIを呼び出し、テーブルビューとして情報を表示します.
ObjecveAbleHQは、データと考えるオンラインブックです.あなたはそれと分析データにJSコードを実行することができます.

ステップ

設定する

我々は最初にObjectBleqにGithub 3 APIライブラリを使用します

import { viewof ghKey,github3 } from '@yhyddr/github-api-in-observable-v3-and-v4'

GghkeyはGithubから情報を要求する力を与えてくれます.COM .そして、我々は秘密としてそれを格納します:ObjecveBlehqの概念、したがって、秘密は誰にでも露出しません.
Githubでトークンを生成します.COM .

次に入力ボックスを入力し、set secretをクリックします.

今すぐこのライブラリでGithub APIを要求することができます!🎉

PR = github3`search/issues?q=author:abserari+type:pr`

PR変数の値には、ユーザのPR情報が含まれます.

データを扱う。

最初にテーブルをインポートするので、手動で入力して情報を入力する必要はありません.

import { table } from "@gampleman/table"

テーブルにprエントリをマップするテーブルを使用します

table(DisplayPR, {
  nully: () => '<span style="color: red">No data</span>',
  limit: 500,
  enableFilter: false,
  enableCSVDownload: true,
  columns: [
    {
      key: 'repo',
      name: 'Repo',
      render: val => `${val}`
      // `<a href="https://google.com/?q=${val}" target="_blank">${val}</a>`
    },
    {
      key: 'statusHTML',
      name: 'Status',
      render: val => `${val}`
    },

    {
      key: 'checksHTML',
      name: 'Checks',
      render: val => `${val}`
    },
    // 'body'
    {
      key: 'content',
      name: 'Content',
      render: val => `${val}`
    }
  ]
})

我々は、ObjecveBlehHQ上の動的なテーブルを取得します!
JSファイルをダウンロードして自分のアプリに埋め込むことができます.
また、私のノートブックをforkし、Githubトークンで設定できます.