cipchk · cipchk · Feb 24, 2019
diff --git a/README.md b/README.md
@@ -33,16 +33,20 @@ export class AppModule { }
 ### 2、Template
 
 ```html
-<github-button type="stargazers" size="large" namespace="cipchk" repo="ng-github-button"></github-button>
+<github-button token="REQUIRED" type="stargazers" size="large" namespace="cipchk" repo="ng-github-button"></github-button>
 ```
 
 | Name    | Type           | Default  | Summary |
 | ------- | ------------- | ----- | ----- |
-| `type` | `stargazers,subscribers,forks` | - | - |
+| `token` | `string` | - | **REQUIRED** To communicate with the GraphQL server, you'll need an OAuth token with the right scopes, [Creating a personal access token for the command line](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line) |
+| `namespace` | `string` | - | **REQUIRED** Your GitHub id or organization name. |
+| `repo` | `string` | - | **REQUIRED** The name of your repository. |
+| `type` | `stargazers,subscribers,watchers,forks` | `stargazers`| - |
 | `size` | `default,large` | - | - |
-| `namespace` | `string` | - | Your GitHub id or organization name. |
-| `repo` | `string` | - | The name of your repository. |
 | `showZero` | `boolean` | `false` | Can be show zero value |
+| `query` | `string` | - | Custom query string in github api v4, pls refer to [GraphQL API v4](https://developer.github.com/v4/guides/) |
+| `callback` | `(data: any) => string` | - | Callback in data render |
+| `svg` | `string` | - | Icon |
 
 ## Troubleshooting
 

diff --git a/lib/src/component.ts b/lib/src/component.ts
@@ -10,21 +10,23 @@ import {
 } from '@angular/core';
 import { GithubButtonService } from './service';
 import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'github-button',
   template: `
     <a class="gh-btn" href="{{ repo_url }}" target="_blank">
-      <span class="gh-ico" aria-hidden="true"></span>
+      <span class="gh-ico" aria-hidden="true" [innerHTML]="_svg"></span>
       <span class="gh-text">{{ typeToLabel[type] }}</span>
     </a>
     <a
       class="gh-count"
       target="_blank"
       href="{{ count_url }}"
-      [ngStyle]="{ display: showZero || count > 0 ? 'block' : 'none' }"
+      [ngStyle]="{ display: value ? 'block' : 'none' }"
     >
-      {{ count }}
+      {{ value }}
     </a>
     <ng-content></ng-content>
   `,
@@ -38,26 +40,30 @@ import { Subscription } from 'rxjs';
 })
 export class GithubButtonComponent implements OnChanges, OnInit, OnDestroy {
   private notify$: Subscription;
-  typeToLabel = {
+  _svg = this.dom.bypassSecurityTrustHtml(`<svg viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>`);
+  value: string;
+
+  // region: fields
+
+  @Input() type: 'stargazers' | 'subscribers' | 'watchers' | 'forks' =
+    'stargazers';
+  @Input() typeToLabel = {
     stargazers: 'Star',
     subscribers: 'Watch',
     forks: 'Fork',
   };
-  typeToPath = {
+  @Input() typeToPath = {
     forks: 'network',
   };
-  count: number;
-
-  // region: fields
-
-  @Input() type: 'stargazers' | 'subscribers' | 'forks' = 'stargazers';
-
   @Input() size: 'default' | 'large';
-
+  @Input() set svg(value: string) {
+    this._svg = this.dom.bypassSecurityTrustHtml(value);
+  }
   @Input() namespace: string;
-
   @Input() repo: string;
-
+  @Input() token: string;
+  @Input() query: string = null;
+  @Input() callback: (data: any) => string = null;
   @Input() showZero = false;
 
   // endregion
@@ -67,27 +73,71 @@ export class GithubButtonComponent implements OnChanges, OnInit, OnDestroy {
   }
 
   get count_url() {
-    return `//github.com/${this.namespace}/${this.repo}/${this.typeToPath[
-      this.type
-    ] || this.type}/`;
+    const type = this.typeToPath[this.type];
+    return `//github.com/${this.namespace}/${this.repo}/${
+      type ? type + '/' : ''
+    }`;
+  }
+
+  get defaultQuery(): string {
+    const { namespace, repo } = this;
+    return `query { repository(owner:"${namespace}", name:"${repo}") { stargazers { totalCount } forkCount watchers(first: 1) { totalCount } } }`;
   }
 
   constructor(
     private srv: GithubButtonService,
+    private dom: DomSanitizer,
     private cdr: ChangeDetectorRef,
   ) {}
 
-  private setCount(data: any) {
-    this.count = data ? data[`${this.type}_count`] : 0;
-    this.cdr.detectChanges();
+  private setCount(res: any) {
+    const { callback, type, showZero, cdr } = this;
+    const { data } = res;
+    let c = '';
+    if (data != null) {
+      if (callback) {
+        c = callback(data);
+      } else {
+        const { forkCount, stargazers, watchers } = data.repository;
+        switch (type) {
+          case 'forks':
+            c = forkCount;
+            break;
+          case 'stargazers':
+            c = stargazers!.totalCount;
+            break;
+          case 'watchers':
+          case 'subscribers':
+            c = watchers!.totalCount;
+            break;
+        }
+        c = showZero && +c <= 0 ? '0' : c;
+      }
+    }
+    this.value = c;
+    cdr.detectChanges();
   }
 
   ngOnInit(): void {
-    this.notify$ = this.srv.notify.subscribe(res => this.setCount(res));
+    this.notify$ = this.srv.notify
+      .pipe(
+        filter(
+          res =>
+            res != null &&
+            res.key ===
+              this.srv.getKey(
+                this.namespace,
+                this.repo,
+                this.query || this.defaultQuery,
+              ),
+        ),
+      )
+      .subscribe(res => this.setCount(res));
   }
 
   ngOnChanges(): void {
-    this.srv.req(this.namespace, this.repo);
+    const { namespace, repo, token, query, defaultQuery } = this;
+    this.srv.req(namespace, repo, token, query || defaultQuery);
   }
 
   ngOnDestroy(): void {

diff --git a/lib/src/service.ts b/lib/src/service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
@@ -10,22 +11,34 @@ export class GithubButtonService {
     return this._notify.asObservable();
   }
 
-  req(namespace: string, repo: string): void {
-    const url = `https://api.github.com/repos/${namespace}/${repo}`;
-    if (this.cached[url] != null) {
-      this._notify.next(this.cached[url]);
+  constructor(private http: HttpClient) {}
+
+  getKey(namespace: string, repo: string, query: string): string {
+    return `${namespace}_${repo}_${query}`;
+  }
+
+  req(namespace: string, repo: string, token: string, query: string): void {
+    const key = this.getKey(namespace, repo, query);
+    if (this.cached[key] === null) {
+      this._notify.next(this.cached[key]);
       return;
     }
-    this.cached[url] = {};
-    const xhr = new XMLHttpRequest();
-    xhr.onreadystatechange = () => {
-      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
-        this.cached[url] = JSON.parse(xhr.responseText);
-        this._notify.next(this.cached[url]);
-        return;
-      }
-    };
-    xhr.open('GET', url, true);
-    xhr.send();
+    this.cached[key] = null;
+    this.http
+      .post(
+        `https://api.github.com/graphql`,
+        {
+          query,
+        },
+        {
+          headers: {
+            // Authorization: `bearer ${token}`,
+          },
+        },
+      )
+      .subscribe((res: any) => {
+        this.cached[key] = { key, data: res.data };
+        this._notify.next(this.cached[key]);
+      });
   }
 }
diff --git a/lib/src/style.less b/lib/src/style.less
@@ -51,9 +51,6 @@
       width: 14px;
       height: 14px;
       margin-right: 4px;
-      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMTIgMTIgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMTIgMTIgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiAxMy40Yy0xMC41IDAtMTkgOC41LTE5IDE5YzAgOC40IDUuNSAxNS41IDEzIDE4YzEgMC4yIDEuMy0wLjQgMS4zLTAuOWMwLTAuNSAwLTEuNyAwLTMuMiBjLTUuMyAxLjEtNi40LTIuNi02LjQtMi42QzIwIDQxLjYgMTguOCA0MSAxOC44IDQxYy0xLjctMS4yIDAuMS0xLjEgMC4xLTEuMWMxLjkgMC4xIDIuOSAyIDIuOSAyYzEuNyAyLjkgNC41IDIuMSA1LjUgMS42IGMwLjItMS4yIDAuNy0yLjEgMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEgMC43LTMuNyAyLTUuMWMtMC4yLTAuNS0wLjgtMi40IDAuMi01YzAgMCAxLjYtMC41IDUuMiAyIGMxLjUtMC40IDMuMS0wLjcgNC44LTAuN2MxLjYgMCAzLjMgMC4yIDQuNyAwLjdjMy42LTIuNCA1LjItMiA1LjItMmMxIDIuNiAwLjQgNC42IDAuMiA1YzEuMiAxLjMgMiAzIDIgNS4xYzAgNy4zLTQuNSA4LjktOC43IDkuNCBjMC43IDAuNiAxLjMgMS43IDEuMyAzLjVjMCAyLjYgMCA0LjYgMCA1LjJjMCAwLjUgMC40IDEuMSAxLjMgMC45YzcuNS0yLjYgMTMtOS43IDEzLTE4LjFDNTEgMjEuOSA0Mi41IDEzLjQgMzIgMTMuNHoiLz48L3N2Zz4=');
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
     }
     .gh-count {
       position: relative;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-github-button",
-  "version": "2.1.4",
+  "version": "3.0.0",
   "description": "Unofficial GitHub buttons in Angular.",
   "repository": {
     "type": "git",
@@ -34,41 +34,42 @@
     "release": "npm run build && cd publish && npm publish --access public"
   },
   "devDependencies": {
-    "@angular/animations": "~7.0.0",
-    "@angular/common": "~7.0.0",
-    "@angular/compiler": "~7.0.0",
-    "@angular/core": "~7.0.0",
-    "@angular/forms": "~7.0.0",
-    "@angular/http": "~7.0.0",
-    "@angular/platform-browser": "~7.0.0",
-    "@angular/platform-browser-dynamic": "~7.0.0",
-    "@angular/router": "~7.0.0",
+    "@angular/animations": "~7.2.0",
+    "@angular/common": "~7.2.0",
+    "@angular/compiler": "~7.2.0",
+    "@angular/core": "~7.2.0",
+    "@angular/forms": "~7.2.0",
+    "@angular/platform-browser": "~7.2.0",
+    "@angular/platform-browser-dynamic": "~7.2.0",
+    "@angular/router": "~7.2.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
+    "tslib": "^1.9.0",
     "zone.js": "~0.8.26",
-    "ngx-highlight-js": "^2.0.0",
-    "@angular-devkit/build-angular": "~0.10.0",
-    "@angular/cli": "~7.0.4",
-    "@angular/compiler-cli": "~7.0.0",
-    "@angular/language-service": "~7.0.0",
+    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular/cli": "~7.3.3",
+    "@angular/compiler-cli": "~7.2.0",
+    "@angular/language-service": "~7.2.0",
     "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~3.0.0",
+    "karma": "~4.0.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
-    "typescript": "~3.1.1",
-    "codecov": "^3.0.0",
-    "ng-packagr": "^4.4.0",
-    "tsickle": "^0.33.1"
+    "typescript": "~3.2.2",
+    "ngx-highlight-js": "^2.1.1",
+    "codecov": "^3.2.0",
+    "ng-packagr": "^4.7.0",
+    "tsickle": "^0.34.0",
+    "gh-pages": "^2.0.1"
   },
   "ngPackage": {
     "lib": {

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,26 +1,34 @@
 <h1>ng-github-button</h1>
 <p>Unofficial GitHub buttons in Angular.</p>
 <div style="margin-top: 24px;">
-  <github-button type="stargazers" size="large" namespace="cipchk" repo="ng-github-button"></github-button>
+  <github-button type="stargazers" size="large" namespace="cipchk" repo="ng-github-button" [token]="token"></github-button>
   <div style="margin-top: 8px">
     <textarea highlight-js>
-      &lt;github-button type="stargazers" size="large" namespace="cipchk" repo="ng-github-button"></github-button>
+      &lt;github-button type="stargazers" size="large" namespace="cipchk" repo="ng-github-button" [token]="token"></github-button>
     </textarea>
   </div>
 </div>
 <div style="margin-top: 24px;">
-  <github-button type="subscribers" namespace="cipchk" repo="ng-github-button"></github-button>
+  <github-button type="subscribers" namespace="cipchk" repo="ng-github-button" [token]="token"></github-button>
   <div style="margin-top: 8px">
     <textarea highlight-js>
-      &lt;github-button type="subscribers" namespace="cipchk" repo="ng-github-button"></github-button>
+      &lt;github-button type="subscribers" namespace="cipchk" repo="ng-github-button" [token]="token"></github-button>
     </textarea>
   </div>
 </div>
 <div style="margin-top: 24px;">
-  <github-button type="forks" namespace="cipchk" repo="ng-github-button" [showZero]="true"></github-button>
+  <github-button type="forks" namespace="cipchk" repo="ng-github-button" [showZero]="true" [token]="token"></github-button>
   <div style="margin-top: 8px">
     <textarea highlight-js>
-      &lt;github-button type="forks" namespace="cipchk" repo="ng-github-button" [showZero]="true"></github-button>
+      &lt;github-button type="forks" namespace="cipchk" repo="ng-github-button" [showZero]="true" [token]="token"></github-button>
+    </textarea>
+  </div>
+</div>
+<div style="margin-top: 24px;">
+  <github-button [typeToLabel]="{diskUsage: 'Disk Usage'}" type="diskUsage" namespace="ng-alain" repo="ng-alain" [query]="diskUsageQuery" [callback]="diskUsageCallback"></github-button>
+  <div style="margin-top: 8px">
+    <textarea highlight-js>
+      &lt;github-button [typeToLabel]="{diskUsage: 'Disk Usage'}" type="diskUsage" namespace="ng-alain" repo="ng-alain" [token]="token" [query]="diskUsageQuery" [callback]="diskUsageCallback"></github-button>
     </textarea>
   </div>
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,8 +1,22 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html'
+  selector: 'app-root',
+  templateUrl: './app.component.html',
 })
 export class AppComponent {
+  token = `75cdf4b6c16ad7fde95f170320c81f6375dce35e`;
+
+  diskUsageQuery = `
+  query {
+    {
+      repository(owner: "ng-alain", name: "ng-alain") {
+        diskUsage
+      }
+    }
+  }
+  `;
+  diskUsageCallback(data: any): string {
+    return `${(data.repository.diskUsage / 1024).toFixed(2)} KB`;
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { HighlightJsModule } from 'ngx-highlight-js';
@@ -9,7 +9,7 @@ import { GithubButtonModule } from 'ng-github-button';
 import { AppComponent } from './app.component';
 
 @NgModule({
-  imports: [BrowserModule, CommonModule, HighlightJsModule, GithubButtonModule],
+  imports: [BrowserModule, CommonModule, HttpClientModule, HighlightJsModule, GithubButtonModule],
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent],