feat(web): shimmer components styling

vtstats · Feb 17, 2021 · 5c74ae9 · 5c74ae9
1 parent 5cd2940
commit 5c74ae9
Show file tree

Hide file tree

Showing 33 changed files with 430 additions and 378 deletions.
diff --git a/web/src/app/components/apx-chart/apx-chart.ts b/web/src/app/components/apx-chart/apx-chart.ts
@@ -1,7 +1,9 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
+  Input,
   OnDestroy,
   ViewChild,
   ViewEncapsulation,
@@ -10,7 +12,16 @@ import type { ApexOptions } from "apexcharts";
 
 @Component({
   selector: "apx-chart",
-  template: `<div class="apx-chart" #chart></div>`,
+  template: `
+    <div class="apx-chart" #chart>
+      <div
+        class="shimmer"
+        *ngIf="loading"
+        [style.height.px]="height"
+        [style.marginBottom.px]="marginBottom"
+      ></div>
+    </div>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
@@ -20,6 +31,13 @@ export class ApxChart implements OnDestroy {
 
   private chartObj: ApexCharts | undefined;
 
+  loading: boolean = true;
+
+  @Input() height: number;
+  @Input() marginBottom: number;
+
+  constructor(private cdf: ChangeDetectorRef) {}
+
   ngOnDestroy() {
     if (this.chartObj) {
       this.chartObj.destroy();
@@ -33,6 +51,8 @@ export class ApxChart implements OnDestroy {
 
     if ((window as any).ApexCharts) {
       this.chartObj = new ApexCharts(this.chartElement.nativeElement, options);
+      this.loading = false;
+      this.cdf.markForCheck();
       this.render();
       return;
     }
@@ -43,6 +63,8 @@ export class ApxChart implements OnDestroy {
     ).then(({ default: ApexCharts }) => {
       (window as any).ApexCharts = ApexCharts;
       this.chartObj = new ApexCharts(this.chartElement.nativeElement, options);
+      this.loading = false;
+      this.cdf.markForCheck();
       this.render();
     });
   }

diff --git a/web/src/app/components/big-number/big-number.html b/web/src/app/components/big-number/big-number.html
diff --git a/web/src/app/components/big-number/big-number.scss b/web/src/app/components/big-number/big-number.scss
@@ -0,0 +1,5 @@
+.big-number {
+  flex: 1;
+  text-align: center;
+  padding-bottom: 20px;
+}
diff --git a/web/src/app/components/big-number/big-number.ts b/web/src/app/components/big-number/big-number.ts
@@ -7,7 +7,11 @@ import {
 
 @Component({
   selector: "hs-big-number",
-  templateUrl: "big-number.html",
+  template: `
+    <div class="value">{{ value }}</div>
+    <div class="label">{{ label }}</div>
+  `,
+  styleUrls: ["big-number.scss"],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: "big-number" },
@@ -16,3 +20,19 @@ export class BigNumber {
   @Input() value: string;
   @Input() label: string;
 }
+
+@Component({
+  selector: "hs-big-number-shimmer",
+  template: `
+    <div class="value">
+      <span class="shimmer text" [style.width.px]="100"></span>
+    </div>
+    <div class="label">
+      <span class="shimmer text" [style.width.px]="70"></span>
+    </div>
+  `,
+  styleUrls: ["big-number.scss"],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: "big-number" },
+})
+export class BigNumberShimmer {}
diff --git a/web/src/app/components/channel-stats-chart/channel-stats-chart.scss b/web/src/app/components/channel-stats-chart/channel-stats-chart.scss
@@ -14,6 +14,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    margin-bottom: 4px;
   }
 
   .spacer {
@@ -46,6 +47,7 @@
 
     .number {
       font-size: 24px;
+      margin-bottom: 4px;
     }
 
     .chart {

diff --git a/web/src/app/components/channel-stats-chart/channel-stats-chart.ts b/web/src/app/components/channel-stats-chart/channel-stats-chart.ts
@@ -32,7 +32,7 @@ import { translate } from "src/i18n";
           </div>
         </div>
         <div class="chart">
-          <apx-chart #chart></apx-chart>
+          <apx-chart #chart [height]="120" [marginBottom]="15"></apx-chart>
         </div>
       </div>
       <mat-divider></mat-divider>
@@ -93,24 +93,6 @@ export class ChannelStatsChart implements OnChanges {
     ][1];
   }
 
-  prev() {
-    this.start -= 24 * 60 * 60 * 1000;
-    this.end -= 24 * 60 * 60 * 1000;
-    this.chart.zoomX(this.start, this.end);
-  }
-
-  next() {
-    this.start += 24 * 60 * 60 * 1000;
-    this.end += 24 * 60 * 60 * 1000;
-    this.chart.zoomX(this.start, this.end);
-  }
-
-  changeRange(day: number) {
-    this.end = this.report.rows[this.report.rows.length - 1][0];
-    this.start = this.end - day * 24 * 60 * 60 * 1000;
-    this.chart.zoomX(this.start, this.end);
-  }
-
   ngOnChanges() {
     this.chart.createChart({
       series: [{ data: this.report.rows }],
@@ -168,3 +150,31 @@ export class ChannelStatsChart implements OnChanges {
     });
   }
 }
+
+@Component({
+  selector: "hs-channel-stats-chart-shimmer",
+  template: `
+    <div class="channel-stats-chart">
+      <div class="container">
+        <div class="desc">
+          <span class="title text shimmer" [style.width.px]="150"></span>
+          <div class="row">
+            <span class="number text shimmer" [style.width.px]="100"></span>
+            <span class="spacer"></span>
+            <span class="text shimmer" [style.width.px]="130"></span>
+          </div>
+        </div>
+        <div
+          class="chart shimmer"
+          [style.height.px]="120"
+          [style.marginBottom.px]="15"
+        ></div>
+      </div>
+      <mat-divider></mat-divider>
+    </div>
+  `,
+  styleUrls: ["channel-stats-chart.scss"],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChannelStatsChartShimmer {}
diff --git a/web/src/app/components/channel-stats/_channel-stats-theme.scss b/web/src/app/components/channel-stats/_channel-stats-theme.scss
@@ -5,12 +5,6 @@
   $foreground: map-get($theme, "foreground");
   $is-dark-theme: map-get($theme, "is-dark");
 
-  .chart-container {
-    .toolbar {
-      color: mat-color($foreground, "secondary-text");
-    }
-  }
-
   $background-shadow: if(
     $is-dark-theme,
     rgba(255, 255, 255, 0.1),
@@ -29,13 +23,6 @@
 }
 
 @mixin channel-stats-typography($config) {
-  .chart-container {
-    .toolbar {
-      font-size: mat-font-size($config, "body-2");
-      font-weight: mat-font-weight($config, "body-2");
-    }
-  }
-
   .vtuber-summary {
     .name {
       font-size: mat-font-size($config, "title");

diff --git a/web/src/app/components/channel-stats/channel-stats.html b/web/src/app/components/channel-stats/channel-stats.html
@@ -34,16 +34,28 @@
   </div>
 </div>
 
-<div class="chart-container">
-  <div class="toolbar">
-    <span class="spacer"></span>
-    <button mat-icon-button (click)="changeRange(1)">1d</button>
-    <button mat-icon-button (click)="changeRange(3)">3d</button>
-    <button mat-icon-button (click)="changeRange(7)">7d</button>
+<ng-container *ngIf="!loading; else shimmer">
+  <div class="chart-container">
+    <hs-channel-stats-chart
+      *ngFor="let report of reports"
+      [report]="report"
+    ></hs-channel-stats-chart>
   </div>
+</ng-container>
 
-  <hs-channel-stats-chart
-    *ngFor="let report of reports"
-    [report]="report"
-  ></hs-channel-stats-chart>
-</div>
+<ng-template #shimmer>
+  <div class="chart-container">
+    <hs-channel-stats-chart-shimmer
+      *ngIf="hasYouTubeChannel"
+    ></hs-channel-stats-chart-shimmer>
+    <hs-channel-stats-chart-shimmer
+      *ngIf="hasYouTubeChannel"
+    ></hs-channel-stats-chart-shimmer>
+    <hs-channel-stats-chart-shimmer
+      *ngIf="hasBilibiliChannel"
+    ></hs-channel-stats-chart-shimmer>
+    <hs-channel-stats-chart-shimmer
+      *ngIf="hasBilibiliChannel"
+    ></hs-channel-stats-chart-shimmer>
+  </div>
+</ng-template>
diff --git a/web/src/app/components/channel-stats/channel-stats.scss b/web/src/app/components/channel-stats/channel-stats.scss
@@ -34,8 +34,4 @@
 .chart-container {
   padding-right: 16px;
   padding-left: 16px;
-
-  .toolbar {
-    text-align: right;
-  }
 }
diff --git a/web/src/app/components/channel-stats/channel-stats.ts b/web/src/app/components/channel-stats/channel-stats.ts
@@ -54,33 +54,4 @@ export class ChannelStats implements OnInit {
         this.reports = res.reports;
       });
   }
-
-  prev() {
-    this.start -= 24 * 60 * 60 * 1000;
-    this.end -= 24 * 60 * 60 * 1000;
-    this.zoomX();
-  }
-
-  next() {
-    this.start += 24 * 60 * 60 * 1000;
-    this.end += 24 * 60 * 60 * 1000;
-    this.zoomX();
-  }
-
-  changeRange(day: number) {
-    this.end = this.reports[0].rows[this.reports[0].rows.length - 1][0];
-    this.start = this.end - day * 24 * 60 * 60 * 1000;
-    this.zoomX();
-  }
-
-  zoomX() {
-    [
-      "youtube_channel_subscriber",
-      "youtube_channel_view",
-      "bilibili_channel_subscriber",
-      "bilibili_channel_view",
-    ].forEach((id) =>
-      (window as any).ApexCharts.exec(id, "zoomX", this.start, this.end)
-    );
-  }
 }
diff --git a/web/src/app/components/channel-table/channel-table-shimmer.html b/web/src/app/components/channel-table/channel-table-shimmer.html
@@ -0,0 +1,25 @@
+<table class="mx-auto" mat-table [dataSource]="data">
+  <ng-container matColumnDef="shimmerProfile">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef>
+      <div class="profile"></div>
+    </td>
+    <td mat-footer-cell *matFooterCellDef></td>
+  </ng-container>
+
+  <ng-container matColumnDef="shimmerText">
+    <th mat-header-cell *matHeaderCellDef>
+      <span class="shimmer text" [style.width.px]="80"></span>
+    </th>
+    <td mat-cell *matCellDef>
+      <span class="shimmer text" [style.width.px]="80"></span>
+    </td>
+    <td mat-footer-cell *matFooterCellDef>
+      <span class="shimmer text" [style.width.px]="80"></span>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+</table>
diff --git a/web/src/app/components/channel-table/channel-table.html b/web/src/app/components/channel-table/channel-table.html
@@ -154,26 +154,6 @@
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="shimmerProfile">
-    <th mat-header-cell mat-sort-header *matHeaderCellDef></th>
-    <td mat-cell *matCellDef>
-      <div class="profile"></div>
-    </td>
-    <td mat-footer-cell *matFooterCellDef></td>
-  </ng-container>
-
-  <ng-container matColumnDef="shimmerText">
-    <th mat-header-cell *matHeaderCellDef>
-      <span class="shimmer text" [style.width.px]="80"></span>
-    </th>
-    <td mat-cell *matCellDef>
-      <span class="shimmer text" [style.width.px]="80"></span>
-    </td>
-    <td mat-footer-cell *matFooterCellDef>
-      <span class="shimmer text" [style.width.px]="80"></span>
-    </td>
-  </ng-container>
-
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>