splash chart

src/app/components/splash/splash.component.html

@@ -34,5 +34,15 @@
                 </div>
             </div>
         </div>
+
+        <div class="col-12">
+
+            <div *ngIf="chartData$ | async as chartData">
+                <div class="card">
+                    <p-chart type="line" [data]="chartData" [options]="chartOptions"></p-chart>
+                </div>
+            </div>
+
+        </div>
     </div>
 </div>

src/app/components/splash/splash.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { map, Observable } from 'rxjs';
 
+import { AppService } from '../../services/app.service';
 import { bitcoinAddressValidator } from '../../validators/bitcoin-address.validator';
 
 @Component({
@@ -11,7 +13,77 @@ import { bitcoinAddressValidator } from '../../validators/bitcoin-address.valida
 export class SplashComponent {
 
   public address: FormControl;
-  constructor() {
+
+  public chartData$: Observable<any>;
+
+  public chartOptions: any;
+
+  constructor(private appService: AppService) {
+    this.chartData$ = this.appService.getInfo().pipe(
+      map((info: any) => {
+
+        console.log(info)
+        return {
+          labels: info.chartData.map((d: any) => d.label),
+          datasets: [
+            {
+              label: 'Public-Pool Hashrate',
+              data: info.chartData.map((d: any) => d.data),
+              fill: false,
+              backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
+              borderColor: documentStyle.getPropertyValue('--bluegray-700'),
+              tension: .4
+            }
+          ]
+        }
+      })
+    );
+
     this.address = new FormControl(null, bitcoinAddressValidator());
+
+
+
+    const documentStyle = getComputedStyle(document.documentElement);
+    const textColor = documentStyle.getPropertyValue('--text-color');
+    const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+    const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+
+
+    this.chartOptions = {
+      plugins: {
+        legend: {
+          labels: {
+            color: textColor
+          }
+        }
+      },
+      scales: {
+        x: {
+          type: 'time',
+          time: {
+            unit: 'hour', // Set the unit to 'minute'
+          },
+          ticks: {
+            color: textColorSecondary
+          },
+          grid: {
+            color: surfaceBorder,
+            drawBorder: false,
+            display: true
+          }
+        },
+        y: {
+          ticks: {
+            color: textColorSecondary,
+            callback: (value: number) => value + ' GH/s',
+          },
+          grid: {
+            color: surfaceBorder,
+            drawBorder: false
+          }
+        }
+      }
+    };
+
   }
 }

src/app/services/app.service.ts

@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { environment } from '../../environments/environment';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AppService {
+
+    constructor(
+        private httpClient: HttpClient
+    ) { }
+
+    public getInfo() {
+        return this.httpClient.get(`${environment.API_URL}/api/info`);
+    }
+}