f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update chart samples

Browse Source
This commit is contained in:
Cagatay Civici 2022-10-15 22:54:58 +03:00
parent 28d7e9aee2
commit bc619be6b6
7 changed files with 71 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/demo/components/uikit/charts/charts-routing.module.ts
View File

@ -1,12 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ChartsComponent } from './charts.component';
@NgModule({
imports: [RouterModule.forChild([
{ path: '', component: ChartsComponent }
])],
exports: [RouterModule]
})
export class ChartsRoutingModule { }

15
src/app/demo/components/uikit/charts/charts.module.ts
View File

@ -1,15 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartModule } from 'primeng/chart'
import { ChartsComponent } from './charts.component';
import { ChartsRoutingModule } from './charts-routing.module';
@NgModule({
imports: [
CommonModule,
ChartsRoutingModule,
ChartModule
],
declarations: [ChartsComponent]
})
export class ChartsModule { }

11
src/app/demo/components/uikit/charts/chartsdemo-routing.module.ts Normal file
View File

@ -0,0 +1,11 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ChartsDemoComponent } from './chartsdemo.component';
@NgModule({
imports: [RouterModule.forChild([
{ path: '', component: ChartsDemoComponent }
])],
exports: [RouterModule]
})
export class ChartsDemoRoutingModule { }

0
src/app/demo/components/uikit/charts/charts.component.html → src/app/demo/components/uikit/charts/chartsdemo.component.html Normal file → Executable file
View File

91
src/app/demo/components/uikit/charts/charts.component.ts → src/app/demo/components/uikit/charts/chartsdemo.component.ts Normal file → Executable file
View File

@ -1,11 +1,11 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { LayoutService } from 'src/app/layout/service/app.layout.service'; import { LayoutService } from 'src/app/layout/service/app.layout.service';
@Component({ @Component({
templateUrl: './charts.component.html' templateUrl: './chartsdemo.component.html'
}) })
export class ChartsComponent implements OnInit, OnDestroy { export class ChartsDemoComponent implements OnInit {
lineData: any; lineData: any;
@ -27,10 +27,10 @@ export class ChartsComponent implements OnInit, OnDestroy {
radarOptions: any; radarOptions: any;
subscription!: Subscription; subscription: Subscription;
constructor(public layoutService: LayoutService) { constructor(public layoutService: LayoutService) {
this.subscription = this.layoutService.configUpdate$.subscribe(() => { this.subscription = this.layoutService.configUpdate$.subscribe(config => {
this.initCharts(); this.initCharts();
}); });
} }
@ -51,13 +51,13 @@ export class ChartsComponent implements OnInit, OnDestroy {
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--primary-500'), backgroundColor: documentStyle.getPropertyValue('--primary-500'),
borderColor: documentStyle.getPropertyValue('--primary-700'), borderColor: documentStyle.getPropertyValue('--primary-500'),
data: [65, 59, 80, 81, 56, 55, 40] data: [65, 59, 80, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--bluegray-500'), backgroundColor: documentStyle.getPropertyValue('--primary-200'),
borderColor: documentStyle.getPropertyValue('--bluegray-500'), borderColor: documentStyle.getPropertyValue('--primary-200'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -67,7 +67,7 @@ export class ChartsComponent implements OnInit, OnDestroy {
plugins: { plugins: {
legend: { legend: {
labels: { labels: {
color: textColor fontColor: textColor
} }
} }
}, },
@ -80,7 +80,7 @@ export class ChartsComponent implements OnInit, OnDestroy {
} }
}, },
grid: { grid: {
color:[surfaceBorder], display: false,
drawBorder: false drawBorder: false
} }
}, },
@ -89,7 +89,7 @@ export class ChartsComponent implements OnInit, OnDestroy {
color: textColorSecondary color: textColorSecondary
}, },
grid: { grid: {
color:[surfaceBorder], color: surfaceBorder,
drawBorder: false drawBorder: false
} }
}, },
@ -102,16 +102,15 @@ export class ChartsComponent implements OnInit, OnDestroy {
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [ backgroundColor: [
documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--indigo-500'),
documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--purple-500'),
documentStyle.getPropertyValue('--pink-500') documentStyle.getPropertyValue('--teal-500')
], ],
hoverBackgroundColor: [ hoverBackgroundColor: [
documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--indigo-400'),
documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--purple-400'),
documentStyle.getPropertyValue('--red-400') documentStyle.getPropertyValue('--teal-400')
], ]
borderColor: [surfaceBorder]
}] }]
}; };
@ -133,16 +132,16 @@ export class ChartsComponent implements OnInit, OnDestroy {
label: 'First Dataset', label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
fill: false, fill: false,
backgroundColor: documentStyle.getPropertyValue('--primary-700'), backgroundColor: documentStyle.getPropertyValue('--primary-500'),
borderColor: documentStyle.getPropertyValue('--primary-700'), borderColor: documentStyle.getPropertyValue('--primary-500'),
tension: .4 tension: .4
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90], data: [28, 48, 40, 19, 86, 27, 90],
fill: false, fill: false,
backgroundColor: documentStyle.getPropertyValue('--bluegray-600'), backgroundColor: documentStyle.getPropertyValue('--primary-200'),
borderColor: documentStyle.getPropertyValue('--bluegray-600'), borderColor: documentStyle.getPropertyValue('--primary-200'),
tension: .4 tension: .4
} }
] ]
@ -152,7 +151,7 @@ export class ChartsComponent implements OnInit, OnDestroy {
plugins: { plugins: {
legend: { legend: {
labels: { labels: {
color: textColor fontColor: textColor
} }
} }
}, },
@ -162,7 +161,7 @@ export class ChartsComponent implements OnInit, OnDestroy {
color: textColorSecondary color: textColorSecondary
}, },
grid: { grid: {
color: [surfaceBorder], color: surfaceBorder,
drawBorder: false drawBorder: false
} }
}, },
@ -171,7 +170,7 @@ export class ChartsComponent implements OnInit, OnDestroy {
color: textColorSecondary color: textColorSecondary
}, },
grid: { grid: {
color: [surfaceBorder], color: surfaceBorder,
drawBorder: false drawBorder: false
} }
}, },
@ -187,18 +186,18 @@ export class ChartsComponent implements OnInit, OnDestroy {
3 3
], ],
backgroundColor: [ backgroundColor: [
documentStyle.getPropertyValue('--red-500'), documentStyle.getPropertyValue('--indigo-500'),
documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--purple-500'),
documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--teal-500'),
documentStyle.getPropertyValue('--green-500') documentStyle.getPropertyValue('--orange-500')
], ],
label: 'My dataset' label: 'My dataset'
}], }],
labels: [ labels: [
'Red', 'Indigo',
'Blue', 'Purple',
'Yellow', 'Teal',
'Green' 'Orange'
] ]
}; };
@ -224,20 +223,20 @@ export class ChartsComponent implements OnInit, OnDestroy {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
borderColor: documentStyle.getPropertyValue('--red-500'), borderColor: documentStyle.getPropertyValue('--indigo-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--red-500'), pointBackgroundColor: documentStyle.getPropertyValue('--indigo-400'),
pointBorderColor: documentStyle.getPropertyValue('--red-500'), pointBorderColor: documentStyle.getPropertyValue('--indigo-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--red-500'), pointHoverBorderColor: documentStyle.getPropertyValue('--indigo-400'),
data: [65, 59, 90, 81, 56, 55, 40] data: [65, 59, 90, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
borderColor: documentStyle.getPropertyValue('--bluegray-500'), borderColor: documentStyle.getPropertyValue('--purple-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-500'), pointBackgroundColor: documentStyle.getPropertyValue('--purple-400'),
pointBorderColor: documentStyle.getPropertyValue('--bluegray-500'), pointBorderColor: documentStyle.getPropertyValue('--purple-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-500'), pointHoverBorderColor: documentStyle.getPropertyValue('--purple-400'),
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100]
} }
] ]
@ -247,18 +246,14 @@ export class ChartsComponent implements OnInit, OnDestroy {
plugins: { plugins: {
legend: { legend: {
labels: { labels: {
color: textColor fontColor: textColor
} }
} }
}, },
scales: { scales: {
r: { r: {
pointLabels: {
color: textColor
},
grid: { grid: {
color:[surfaceBorder], color: textColorSecondary
drawBorder: false
} }
} }
} }

15
src/app/demo/components/uikit/charts/chartsdemo.module.ts Normal file
View File

@ -0,0 +1,15 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartsDemoRoutingModule } from './chartsdemo-routing.module';
import { ChartModule } from 'primeng/chart'
import { ChartsDemoComponent } from './chartsdemo.component';
@NgModule({
imports: [
CommonModule,
ChartsDemoRoutingModule,
ChartModule
],
declarations: [ChartsDemoComponent]
})
export class ChartsDemoModule { }

2
src/app/demo/components/uikit/uikit-routing.module.ts
View File

@ -5,7 +5,7 @@ import { RouterModule } from '@angular/router';
imports: [RouterModule.forChild([ imports: [RouterModule.forChild([
{ path: 'formlayout', loadChildren: () => import('./formlayout/formlayout.module').then(m => m.FormlayoutModule) }, { path: 'formlayout', loadChildren: () => import('./formlayout/formlayout.module').then(m => m.FormlayoutModule) },
{ path: 'button', loadChildren: () => import('./button/buttondemo.module').then(m => m.ButtonDemoModule) }, { path: 'button', loadChildren: () => import('./button/buttondemo.module').then(m => m.ButtonDemoModule) },
{ path: 'charts', loadChildren: () => import('./charts/charts.module').then(m => m.ChartsModule) }, { path: 'charts', loadChildren: () => import('./charts/chartsdemo.module').then(m => m.ChartsDemoModule) },
{ path: 'file', loadChildren: () => import('./file/filedemo.module').then(m => m.FileDemoModule) }, { path: 'file', loadChildren: () => import('./file/filedemo.module').then(m => m.FileDemoModule) },
{ path: 'floatlabel', loadChildren: () => import('./floatlabel/floatlabeldemo.module').then(m => m.FloatlabelDemoModule) }, { path: 'floatlabel', loadChildren: () => import('./floatlabel/floatlabeldemo.module').then(m => m.FloatlabelDemoModule) },
{ path: 'input', loadChildren: () => import('./input/inputdemo.module').then(m => m.InputDemoModule) }, { path: 'input', loadChildren: () => import('./input/inputdemo.module').then(m => m.InputDemoModule) },