carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update dashboard

Browse Source
This commit is contained in:
Mehmet Çetin
2025-01-06 12:25:17 +03:00
parent 513019e17d
commit 04160d6fc2
4 changed files with 51 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/dashboard/recentsaleswidget.ts
View File

@@ -15,7 +15,7 @@ import { Product, ProductService } from '@/src/service/product.service';
ButtonModule, ButtonModule,
RippleModule, RippleModule,
], ],
template: `<div class="card"> template: `<div class="card !mb-8">
<div class="font-semibold text-xl mb-4">Recent Sales</div> <div class="font-semibold text-xl mb-4">Recent Sales</div>
<p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll"> <p-table [value]="products" [paginator]="true" [rows]="5" responsiveLayout="scroll">
<ng-template pTemplate="header"> <ng-template pTemplate="header">

87
src/components/dashboard/revenuestreamwidget.ts
View File

@@ -9,7 +9,7 @@ import { LayoutService } from '@/src/service/layout.service';
imports: [ imports: [
ChartModule, ChartModule,
], ],
template: `<div class="card"> template: `<div class="card !mb-8">
<div class="font-semibold text-xl mb-4">Revenue Stream</div> <div class="font-semibold text-xl mb-4">Revenue Stream</div>
<p-chart type="bar" [data]="chartData" [options]="chartOptions" class="h-80" /> <p-chart type="bar" [data]="chartData" [options]="chartOptions" class="h-80" />
</div>`, </div>`,
@@ -35,61 +35,68 @@ export class RevenueStreamWidget {
initChart() { initChart() {
const documentStyle = getComputedStyle(document.documentElement); const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color'); const borderColor = documentStyle.getPropertyValue('--surface-border');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const textMutedColor = documentStyle.getPropertyValue('--text-color-secondary');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
this.chartData = { this.chartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [ datasets: [
{ {
label: 'First Dataset', type: 'bar',
data: [65, 59, 80, 81, 56, 55, 40], label: 'Subscriptions',
fill: false, backgroundColor: documentStyle.getPropertyValue('--p-primary-400'),
backgroundColor: documentStyle.getPropertyValue('--bluegray-700'), data: [4000, 10000, 15000, 4000],
borderColor: documentStyle.getPropertyValue('--bluegray-700'), barThickness: 32
tension: .4
}, },
{ {
label: 'Second Dataset', type: 'bar',
data: [28, 48, 40, 19, 86, 27, 90], label: 'Advertising',
fill: false, backgroundColor: documentStyle.getPropertyValue('--p-primary-300'),
backgroundColor: documentStyle.getPropertyValue('--green-600'), data: [2100, 8400, 2400, 7500],
borderColor: documentStyle.getPropertyValue('--green-600'), barThickness: 32
tension: .4 },
{
type: 'bar',
label: 'Affiliate',
backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
data: [4100, 5200, 3400, 7400],
borderRadius: {
topLeft: 8,
topRight: 8
},
borderSkipped: true,
barThickness: 32
} }
] ]
}; };
this.chartOptions = { this.chartOptions = {
plugins: { maintainAspectRatio: false,
legend: { aspectRatio: 0.8,
labels: { scales: {
color: textColor x: {
} stacked: true,
ticks: {
color: textMutedColor
},
grid: {
color: 'transparent',
borderColor: 'transparent'
} }
}, },
scales: { y: {
x: { stacked: true,
ticks: { ticks: {
color: textColorSecondary color: textMutedColor
},
grid: {
color: surfaceBorder,
drawBorder: false
}
}, },
y: { grid: {
ticks: { color: borderColor,
color: textColorSecondary borderColor: 'transparent',
}, drawTicks: false
grid: {
color: surfaceBorder,
drawBorder: false
}
} }
} }
}; }
};
} }
ngOnDestroy() { ngOnDestroy() {

4
src/views/dashboard.ts
View File

@@ -10,14 +10,14 @@ import { NotificationsWidget } from '@/src/components/dashboard/notificationswid
imports: [StatsWidget, RecentSalesWidget, BestSellingWidget, RevenueStreamWidget, NotificationsWidget], imports: [StatsWidget, RecentSalesWidget, BestSellingWidget, RevenueStreamWidget, NotificationsWidget],
template: ` template: `
<div class="grid grid-cols-12 gap-8"> <div class="grid grid-cols-12 gap-8">
<app-stats-widget /> <app-stats-widget class="contents" />
<div class="col-span-12 xl:col-span-6"> <div class="col-span-12 xl:col-span-6">
<app-recent-sales-widget /> <app-recent-sales-widget />
<app-best-selling-widget /> <app-best-selling-widget />
</div> </div>
<div class="col-span-12 xl:col-span-6"> <div class="col-span-12 xl:col-span-6">
<app-revenue-stream-widget /> <app-revenue-stream-widget />
<app-notifications-widget /> <app-notifications-widget />
</div> </div>
</div> </div>
`, `,

2
src/views/uikit/formlayoutdoc.ts
View File

@@ -84,7 +84,7 @@ import {TextareaModule} from "primeng/textarea";
</div> </div>
</div> </div>
<div class="flex mt-20"> <div class="flex mt-8">
<div class="card flex flex-col gap-6 w-full"> <div class="card flex flex-col gap-6 w-full">
<div class="font-semibold text-xl">Advanced</div> <div class="font-semibold text-xl">Advanced</div>
<div class="flex flex-col md:flex-row gap-6"> <div class="flex flex-col md:flex-row gap-6">