From bc619be6b603f3aae520f5719c84fc7908e43278 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 15 Oct 2022 22:54:58 +0300 Subject: [PATCH] Update chart samples --- .../uikit/charts/charts-routing.module.ts | 12 --- .../components/uikit/charts/charts.module.ts | 15 --- .../uikit/charts/chartsdemo-routing.module.ts | 11 +++ ...mponent.html => chartsdemo.component.html} | 0 ...s.component.ts => chartsdemo.component.ts} | 93 +++++++++---------- .../uikit/charts/chartsdemo.module.ts | 15 +++ .../components/uikit/uikit-routing.module.ts | 2 +- 7 files changed, 71 insertions(+), 77 deletions(-) delete mode 100644 src/app/demo/components/uikit/charts/charts-routing.module.ts delete mode 100644 src/app/demo/components/uikit/charts/charts.module.ts create mode 100644 src/app/demo/components/uikit/charts/chartsdemo-routing.module.ts rename src/app/demo/components/uikit/charts/{charts.component.html => chartsdemo.component.html} (100%) mode change 100644 => 100755 rename src/app/demo/components/uikit/charts/{charts.component.ts => chartsdemo.component.ts} (78%) mode change 100644 => 100755 create mode 100644 src/app/demo/components/uikit/charts/chartsdemo.module.ts diff --git a/src/app/demo/components/uikit/charts/charts-routing.module.ts b/src/app/demo/components/uikit/charts/charts-routing.module.ts deleted file mode 100644 index d2949ed..0000000 --- a/src/app/demo/components/uikit/charts/charts-routing.module.ts +++ /dev/null @@ -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 { } diff --git a/src/app/demo/components/uikit/charts/charts.module.ts b/src/app/demo/components/uikit/charts/charts.module.ts deleted file mode 100644 index 7ec097a..0000000 --- a/src/app/demo/components/uikit/charts/charts.module.ts +++ /dev/null @@ -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 { } diff --git a/src/app/demo/components/uikit/charts/chartsdemo-routing.module.ts b/src/app/demo/components/uikit/charts/chartsdemo-routing.module.ts new file mode 100644 index 0000000..00f7221 --- /dev/null +++ b/src/app/demo/components/uikit/charts/chartsdemo-routing.module.ts @@ -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 { } diff --git a/src/app/demo/components/uikit/charts/charts.component.html b/src/app/demo/components/uikit/charts/chartsdemo.component.html old mode 100644 new mode 100755 similarity index 100% rename from src/app/demo/components/uikit/charts/charts.component.html rename to src/app/demo/components/uikit/charts/chartsdemo.component.html diff --git a/src/app/demo/components/uikit/charts/charts.component.ts b/src/app/demo/components/uikit/charts/chartsdemo.component.ts old mode 100644 new mode 100755 similarity index 78% rename from src/app/demo/components/uikit/charts/charts.component.ts rename to src/app/demo/components/uikit/charts/chartsdemo.component.ts index 50a048d..56b97ee --- a/src/app/demo/components/uikit/charts/charts.component.ts +++ b/src/app/demo/components/uikit/charts/chartsdemo.component.ts @@ -1,11 +1,11 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { Subscription } from 'rxjs'; import { LayoutService } from 'src/app/layout/service/app.layout.service'; @Component({ - templateUrl: './charts.component.html' + templateUrl: './chartsdemo.component.html' }) -export class ChartsComponent implements OnInit, OnDestroy { +export class ChartsDemoComponent implements OnInit { lineData: any; @@ -27,10 +27,10 @@ export class ChartsComponent implements OnInit, OnDestroy { radarOptions: any; - subscription!: Subscription; + subscription: Subscription; constructor(public layoutService: LayoutService) { - this.subscription = this.layoutService.configUpdate$.subscribe(() => { + this.subscription = this.layoutService.configUpdate$.subscribe(config => { this.initCharts(); }); } @@ -44,20 +44,20 @@ export class ChartsComponent implements OnInit, OnDestroy { const textColor = documentStyle.getPropertyValue('--text-color'); const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); - + this.barData = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: documentStyle.getPropertyValue('--primary-500'), - borderColor: documentStyle.getPropertyValue('--primary-700'), + borderColor: documentStyle.getPropertyValue('--primary-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', - backgroundColor: documentStyle.getPropertyValue('--bluegray-500'), - borderColor: documentStyle.getPropertyValue('--bluegray-500'), + backgroundColor: documentStyle.getPropertyValue('--primary-200'), + borderColor: documentStyle.getPropertyValue('--primary-200'), data: [28, 48, 40, 19, 86, 27, 90] } ] @@ -67,7 +67,7 @@ export class ChartsComponent implements OnInit, OnDestroy { plugins: { legend: { labels: { - color: textColor + fontColor: textColor } } }, @@ -80,7 +80,7 @@ export class ChartsComponent implements OnInit, OnDestroy { } }, grid: { - color:[surfaceBorder], + display: false, drawBorder: false } }, @@ -89,7 +89,7 @@ export class ChartsComponent implements OnInit, OnDestroy { color: textColorSecondary }, grid: { - color:[surfaceBorder], + color: surfaceBorder, drawBorder: false } }, @@ -102,16 +102,15 @@ export class ChartsComponent implements OnInit, OnDestroy { { data: [540, 325, 702], backgroundColor: [ - documentStyle.getPropertyValue('--yellow-500'), - documentStyle.getPropertyValue('--blue-500'), - documentStyle.getPropertyValue('--pink-500') + documentStyle.getPropertyValue('--indigo-500'), + documentStyle.getPropertyValue('--purple-500'), + documentStyle.getPropertyValue('--teal-500') ], hoverBackgroundColor: [ - documentStyle.getPropertyValue('--yellow-400'), - documentStyle.getPropertyValue('--blue-400'), - documentStyle.getPropertyValue('--red-400') - ], - borderColor: [surfaceBorder] + documentStyle.getPropertyValue('--indigo-400'), + documentStyle.getPropertyValue('--purple-400'), + documentStyle.getPropertyValue('--teal-400') + ] }] }; @@ -133,16 +132,16 @@ export class ChartsComponent implements OnInit, OnDestroy { label: 'First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, - backgroundColor: documentStyle.getPropertyValue('--primary-700'), - borderColor: documentStyle.getPropertyValue('--primary-700'), + backgroundColor: documentStyle.getPropertyValue('--primary-500'), + borderColor: documentStyle.getPropertyValue('--primary-500'), tension: .4 }, { label: 'Second Dataset', data: [28, 48, 40, 19, 86, 27, 90], fill: false, - backgroundColor: documentStyle.getPropertyValue('--bluegray-600'), - borderColor: documentStyle.getPropertyValue('--bluegray-600'), + backgroundColor: documentStyle.getPropertyValue('--primary-200'), + borderColor: documentStyle.getPropertyValue('--primary-200'), tension: .4 } ] @@ -152,7 +151,7 @@ export class ChartsComponent implements OnInit, OnDestroy { plugins: { legend: { labels: { - color: textColor + fontColor: textColor } } }, @@ -162,7 +161,7 @@ export class ChartsComponent implements OnInit, OnDestroy { color: textColorSecondary }, grid: { - color: [surfaceBorder], + color: surfaceBorder, drawBorder: false } }, @@ -171,7 +170,7 @@ export class ChartsComponent implements OnInit, OnDestroy { color: textColorSecondary }, grid: { - color: [surfaceBorder], + color: surfaceBorder, drawBorder: false } }, @@ -187,18 +186,18 @@ export class ChartsComponent implements OnInit, OnDestroy { 3 ], backgroundColor: [ - documentStyle.getPropertyValue('--red-500'), - documentStyle.getPropertyValue('--blue-500'), - documentStyle.getPropertyValue('--yellow-500'), - documentStyle.getPropertyValue('--green-500') + documentStyle.getPropertyValue('--indigo-500'), + documentStyle.getPropertyValue('--purple-500'), + documentStyle.getPropertyValue('--teal-500'), + documentStyle.getPropertyValue('--orange-500') ], label: 'My dataset' }], labels: [ - 'Red', - 'Blue', - 'Yellow', - 'Green' + 'Indigo', + 'Purple', + 'Teal', + 'Orange' ] }; @@ -224,20 +223,20 @@ export class ChartsComponent implements OnInit, OnDestroy { datasets: [ { label: 'My First dataset', - borderColor: documentStyle.getPropertyValue('--red-500'), - pointBackgroundColor: documentStyle.getPropertyValue('--red-500'), - pointBorderColor: documentStyle.getPropertyValue('--red-500'), + borderColor: documentStyle.getPropertyValue('--indigo-400'), + pointBackgroundColor: documentStyle.getPropertyValue('--indigo-400'), + pointBorderColor: documentStyle.getPropertyValue('--indigo-400'), pointHoverBackgroundColor: textColor, - pointHoverBorderColor: documentStyle.getPropertyValue('--red-500'), + pointHoverBorderColor: documentStyle.getPropertyValue('--indigo-400'), data: [65, 59, 90, 81, 56, 55, 40] }, { label: 'My Second dataset', - borderColor: documentStyle.getPropertyValue('--bluegray-500'), - pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-500'), - pointBorderColor: documentStyle.getPropertyValue('--bluegray-500'), + borderColor: documentStyle.getPropertyValue('--purple-400'), + pointBackgroundColor: documentStyle.getPropertyValue('--purple-400'), + pointBorderColor: documentStyle.getPropertyValue('--purple-400'), pointHoverBackgroundColor: textColor, - pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-500'), + pointHoverBorderColor: documentStyle.getPropertyValue('--purple-400'), data: [28, 48, 40, 19, 96, 27, 100] } ] @@ -247,18 +246,14 @@ export class ChartsComponent implements OnInit, OnDestroy { plugins: { legend: { labels: { - color: textColor + fontColor: textColor } } }, scales: { r: { - pointLabels: { - color: textColor - }, grid: { - color:[surfaceBorder], - drawBorder: false + color: textColorSecondary } } } diff --git a/src/app/demo/components/uikit/charts/chartsdemo.module.ts b/src/app/demo/components/uikit/charts/chartsdemo.module.ts new file mode 100644 index 0000000..7a9f7ae --- /dev/null +++ b/src/app/demo/components/uikit/charts/chartsdemo.module.ts @@ -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 { } diff --git a/src/app/demo/components/uikit/uikit-routing.module.ts b/src/app/demo/components/uikit/uikit-routing.module.ts index 4ee11e2..965c7e4 100644 --- a/src/app/demo/components/uikit/uikit-routing.module.ts +++ b/src/app/demo/components/uikit/uikit-routing.module.ts @@ -5,7 +5,7 @@ import { RouterModule } from '@angular/router'; imports: [RouterModule.forChild([ { path: 'formlayout', loadChildren: () => import('./formlayout/formlayout.module').then(m => m.FormlayoutModule) }, { 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: 'floatlabel', loadChildren: () => import('./floatlabel/floatlabeldemo.module').then(m => m.FloatlabelDemoModule) }, { path: 'input', loadChildren: () => import('./input/inputdemo.module').then(m => m.InputDemoModule) },