using ngx-charts

weirdyang · May 26, 2021 · bfa9764 · bfa9764
1 parent 555991e
commit bfa9764
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 19 deletions.
diff --git a/src/app/products/product-bar-chart/product-bar-chart.component.ts b/src/app/products/product-bar-chart/product-bar-chart.component.ts
@@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
 import { colorSets } from '@swimlane/ngx-charts';
 import { groupBy, mergeMap, toArray } from 'rxjs/operators';
 import { OrderService } from 'src/app/order/order.service';
 import { defaultColor } from '../config';
 import { Order } from '../../order/order';
-import { of, zip } from 'rxjs';
+import { interval, of, Subscription, zip } from 'rxjs';
 import { ValueConverter } from '@angular/compiler/src/render3/view/template';
 import { ScaleType } from 'chart.js';
 
@@ -16,7 +16,7 @@ import { ScaleType } from 'chart.js';
   styleUrls: ['./product-bar-chart.component.scss']
 })
 
-export class ProductBarChartComponent implements OnInit {
+export class ProductBarChartComponent implements OnInit, AfterViewInit, OnDestroy {
   single: any[] = [];
   showXAxis = true;
   showYAxis = true;
@@ -27,13 +27,33 @@ export class ProductBarChartComponent implements OnInit {
   showYAxisLabel = true;
   yAxisLabel = 'Count';
   colorScheme: any;
+  subscription!: Subscription;
 
   constructor(private orderService: OrderService) {
-    this.setColorScheme('cool');
+    this.setColorScheme(defaultColor);
+  }
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+
+  }
+
+
+  ngAfterViewInit(): void {
+    this.subscription = interval(1000).subscribe({
+      next: () => this.getDataSource()
+    })
   }
 
   ngOnInit(): void {
-    // setTimeout(() => this.setColorScheme(defaultColor));
+    this.getDataSource();
+  }
+  setColorScheme(name: string) {
+    this.colorScheme = colorSets.find(s => s.name === name);
+  }
+  onSelect(event: Event) {
+    console.log(event);
+  }
+  getDataSource() {
     const data: any[] = [];
     this.orderService.getRandomOrders(10)
       .pipe(
@@ -48,12 +68,6 @@ export class ProductBarChartComponent implements OnInit {
         complete: () => this.single = [...data]
       });
   }
-  setColorScheme(name: string) {
-    this.colorScheme = colorSets.find(s => s.name === name);
-  }
-  onSelect(event: Event) {
-    console.log(event);
-  }
   groupByProperty(prop: string, array: any[]) {
     return array.reduce((acc, value) => {
       if (!acc[value[prop]]) {

diff --git a/src/app/products/product-dashboard/product-dashboard.component.html b/src/app/products/product-dashboard/product-dashboard.component.html
@@ -1,17 +1,29 @@
 <div class="grid-container dark">
-  <mat-grid-list cols=4
+  <h1 class="mat-h1">Dashboard</h1>
+  <mat-grid-list cols="{{ ( cardLayout | async)?.columns }}"
     rowHeight="200px">
-    <mat-grid-tile [colspan]="2"
-      [rowspan]="2">
-      <cd-card>
-        <cd-product-bar-chart></cd-product-bar-chart>
+    <!-- Cards -->
+    <mat-grid-tile *ngFor="let mc of ( cardLayout | async )?.miniCard?.data"
+      [colspan]="( cardLayout | async )?.miniCard?.cols"
+      [rowspan]="( cardLayout | async )?.miniCard?.rows">
+      <cd-card [title]="mc.title">
+        <p> {{ mc }} </p>
       </cd-card>
     </mat-grid-tile>
-    <mat-grid-tile [colspan]="2"
-      [rowspan]="2">
-      <cd-card>
+    <!--Charts-->
+    <mat-grid-tile [colspan]="( cardLayout | async )?.chart?.cols"
+      [rowspan]="( cardLayout | async )?.chart?.rows">
+      <cd-card title="Payment mode count">
         <cd-product-bar-chart></cd-product-bar-chart>
       </cd-card>
     </mat-grid-tile>
+    <!-- Tables -->
+    <mat-grid-tile *ngFor="let mc of ( cardLayout | async )?.table?.data"
+      [colspan]="( cardLayout | async )?.table?.cols"
+      [rowspan]="( cardLayout | async )?.table?.rows">
+      <cd-card [title]="mc.title">
+
+      </cd-card>
+    </mat-grid-tile>
   </mat-grid-list>
 </div>