From 00117452b9a99e6ee40f787ab652b886dd13dedb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Fri, 3 Jan 2025 01:13:17 +0300 Subject: [PATCH] Add widgets --- src/components/dashboard/bestsellingwidget.ts | 105 ++++++++++++++++++ .../dashboard/notificationswidget.ts | 59 ++++++++++ src/components/dashboard/recentsaleswidget.ts | 52 +++++++++ .../dashboard/revenuestreamwidget.ts | 99 +++++++++++++++++ src/components/dashboard/statswidget.ts | 68 ++++++++++++ 5 files changed, 383 insertions(+) create mode 100644 src/components/dashboard/bestsellingwidget.ts create mode 100644 src/components/dashboard/notificationswidget.ts create mode 100644 src/components/dashboard/recentsaleswidget.ts create mode 100644 src/components/dashboard/revenuestreamwidget.ts create mode 100644 src/components/dashboard/statswidget.ts diff --git a/src/components/dashboard/bestsellingwidget.ts b/src/components/dashboard/bestsellingwidget.ts new file mode 100644 index 0000000..76270aa --- /dev/null +++ b/src/components/dashboard/bestsellingwidget.ts @@ -0,0 +1,105 @@ +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ButtonModule } from 'primeng/button'; +import { MenuModule } from 'primeng/menu'; + +@Component({ + standalone:true, + imports: [ + CommonModule, + ButtonModule, + MenuModule, + ], + template: ` +
+
+
Best Selling Products
+
+ + +
+
+ +
`, +}) +export class BestSellingWidget { + menu = null; + + items = [ + { label: 'Add New', icon: 'pi pi-fw pi-plus' }, + { label: 'Remove', icon: 'pi pi-fw pi-trash' } + ]; +} diff --git a/src/components/dashboard/notificationswidget.ts b/src/components/dashboard/notificationswidget.ts new file mode 100644 index 0000000..029882c --- /dev/null +++ b/src/components/dashboard/notificationswidget.ts @@ -0,0 +1,59 @@ +import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; +import { MenuModule } from 'primeng/menu'; + +@Component({ + standalone:true, + imports: [ + ButtonModule, + MenuModule, + ], + template: `
+
+
Notifications
+
+ + +
+
+ + TODAY + + + YESTERDAY + +
`, +}) +export class NotificationsWidget { + +} diff --git a/src/components/dashboard/recentsaleswidget.ts b/src/components/dashboard/recentsaleswidget.ts new file mode 100644 index 0000000..dc03926 --- /dev/null +++ b/src/components/dashboard/recentsaleswidget.ts @@ -0,0 +1,52 @@ +import { Component } from '@angular/core'; +import { RippleModule } from 'primeng/ripple'; +import { TableModule } from 'primeng/table'; +import { ButtonModule } from 'primeng/button'; +import { CommonModule } from '@angular/common'; +import { Product } from '@/src/app/demo/api/product'; +import { ProductService } from '@/src/app/demo/service/product.service'; + +@Component({ + standalone:true, + imports: [ + CommonModule, + TableModule, + ButtonModule, + RippleModule, + ], + template: `
+
Recent Sales
+ + + + Image + Name + Price + View + + + + + + {{product.name}} + + {{product.name}} + {{product.price | currency:'USD'}} + + + + + + +
`, +}) +export class RecentSalesWidget { + products!: Product[]; + + + constructor(private productService: ProductService) {} + + ngOnInit() { + this.productService.getProductsSmall().then(data => this.products = data); + } +} diff --git a/src/components/dashboard/revenuestreamwidget.ts b/src/components/dashboard/revenuestreamwidget.ts new file mode 100644 index 0000000..e9fbff9 --- /dev/null +++ b/src/components/dashboard/revenuestreamwidget.ts @@ -0,0 +1,99 @@ +import { Component } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; +import { debounceTime, Subscription } from 'rxjs'; +import { LayoutService } from '@/src/app/layout/service/app.layout.service'; + +@Component({ + standalone:true, + imports: [ + ChartModule, + ], + template: `
+
Revenue Stream
+ +
`, +}) +export class RevenueStreamWidget { + chartData: any; + + chartOptions: any; + + subscription!: Subscription; + + constructor(public layoutService: LayoutService) { + this.subscription = this.layoutService.configUpdate$ + .pipe(debounceTime(25)) + .subscribe((config) => { + this.initChart(); + }); + } + + ngOnInit() { + this.initChart(); + } + + initChart() { + 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.chartData = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'First Dataset', + data: [65, 59, 80, 81, 56, 55, 40], + fill: false, + backgroundColor: documentStyle.getPropertyValue('--bluegray-700'), + borderColor: documentStyle.getPropertyValue('--bluegray-700'), + tension: .4 + }, + { + label: 'Second Dataset', + data: [28, 48, 40, 19, 86, 27, 90], + fill: false, + backgroundColor: documentStyle.getPropertyValue('--green-600'), + borderColor: documentStyle.getPropertyValue('--green-600'), + tension: .4 + } + ] + }; + + this.chartOptions = { + plugins: { + legend: { + labels: { + color: textColor + } + } + }, + scales: { + x: { + ticks: { + color: textColorSecondary + }, + grid: { + color: surfaceBorder, + drawBorder: false + } + }, + y: { + ticks: { + color: textColorSecondary + }, + grid: { + color: surfaceBorder, + drawBorder: false + } + } + } + }; + } + + ngOnDestroy() { + if (this.subscription) { + this.subscription.unsubscribe(); + } + } +} diff --git a/src/components/dashboard/statswidget.ts b/src/components/dashboard/statswidget.ts new file mode 100644 index 0000000..d70cdb7 --- /dev/null +++ b/src/components/dashboard/statswidget.ts @@ -0,0 +1,68 @@ +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@Component({ + standalone:true, + imports: [CommonModule], + template: `
+
+
+
+ Orders +
152
+
+
+ +
+
+ 24 new + since last visit +
+
+
+
+
+
+ Revenue +
$2.100
+
+
+ +
+
+ %52+ + since last week +
+
+
+
+
+
+ Customers +
28441
+
+
+ +
+
+ 520 + newly registered +
+
+
+
+
+
+ Comments +
152 Unread
+
+
+ +
+
+ 85 + responded +
+
`, +}) +export class StatsWidget {}