From d8abd81000a49b36fce64f8f1a633243c65826bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Tue, 2 Jan 2024 14:04:49 +0300 Subject: [PATCH 1/4] initial --- src/app/showcase/layout/app.component.ts | 43 ++++++++++++++++---- src/app/showcase/service/appconfigservice.ts | 9 ++++ 2 files changed, 45 insertions(+), 7 deletions(-) diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts index 1b9854e45f2..22e260b5874 100644 --- a/src/app/showcase/layout/app.component.ts +++ b/src/app/showcase/layout/app.component.ts @@ -1,6 +1,6 @@ -import { DOCUMENT } from '@angular/common'; +import { DOCUMENT, isPlatformBrowser } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; -import { Component, Inject, OnDestroy, OnInit, Renderer2, afterNextRender } from '@angular/core'; +import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2, afterNextRender } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NavigationEnd, Router, RouterOutlet } from '@angular/router'; import { PrimeNGConfig } from 'primeng/api'; @@ -29,8 +29,8 @@ import { AppTopBarComponent } from './topbar/app.topbar.component'; imports: [RouterOutlet, FormsModule, ReactiveFormsModule, HttpClientModule, AppMainComponent, LandingComponent, AppNewsComponent, AppConfigComponent, AppTopBarComponent, AppMenuComponent], providers: [CarService, CountryService, EventService, NodeService, IconService, CustomerService, PhotoService, AppConfigService, ProductService] }) -export class AppComponent implements OnInit, OnDestroy { - constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router) { +export class AppComponent implements OnDestroy { + constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router, @Inject(PLATFORM_ID) private platformId: any) { afterNextRender(() => { if (process.env.NODE_ENV === 'production') { this.injectScripts(); @@ -41,15 +41,25 @@ export class AppComponent implements OnInit, OnDestroy { } themeChangeSubscription: Subscription; + theme - ngOnInit() { + ngOnInit(): void { this.primeng.ripple = true; this.themeChangeSubscription = this.configService.themeChange$.subscribe((theme: Theme) => { this.switchTheme(theme); + console.log("ds") + }); - } - + if (isPlatformBrowser(this.platformId)) { + if(this.configService.getAppState()==="true"){ + this.switchThemeByLocalStorage() + + } + } + } + + injectScripts() { const script = this.renderer.createElement('script'); script.type = 'text/javascript'; @@ -85,7 +95,25 @@ export class AppComponent implements OnInit, OnDestroy { } }); } + switchThemeByLocalStorage() { + const id = 'theme-link'; + const linkElement = this.document.getElementById(id); + const cloneLinkElement = linkElement.cloneNode(true); + + cloneLinkElement.setAttribute('href', linkElement.getAttribute('href').replace(this.configService.config.theme, "lara-dark-blue")); + cloneLinkElement.setAttribute('id', id + '-clone'); + linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling); + + cloneLinkElement.addEventListener('load', () => { + linkElement.remove(); + cloneLinkElement.setAttribute('id', id); + this.configService.updateConfig({ + theme: "lara-dark-blue", + darkMode: true + }); + }); + } switchTheme(theme: Theme) { const id = 'theme-link'; const linkElement = this.document.getElementById(id); @@ -104,6 +132,7 @@ export class AppComponent implements OnInit, OnDestroy { darkMode: theme.dark }); this.configService.completeThemeChange(theme); + this.configService.setAppState(theme.dark); }); } diff --git a/src/app/showcase/service/appconfigservice.ts b/src/app/showcase/service/appconfigservice.ts index a05b72e40f5..68ae253b892 100644 --- a/src/app/showcase/service/appconfigservice.ts +++ b/src/app/showcase/service/appconfigservice.ts @@ -76,4 +76,13 @@ export class AppConfigService { hideNews() { this.state.newsActive = false; } + + getAppState() : any{ + return localStorage.getItem("darkmode") + } + + setAppState(val){ + localStorage.setItem("darkmode",val) + console.log(this.getAppState()) + } } From 6ef652cceaafedc96842981be4cfdcb854675c50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 2 Jan 2024 17:39:21 +0300 Subject: [PATCH 2/4] Refactor and fix appconfig service --- src/app/showcase/doc/chart/basicdoc.ts | 14 ++- src/app/showcase/domain/appconfig.ts | 2 + src/app/showcase/layout/app.component.ts | 81 +++--------- src/app/showcase/layout/app.main.component.ts | 13 +- .../layout/config/app.config.component.ts | 46 ++++--- .../layout/doc/app.docapitable.component.ts | 2 +- .../layout/topbar/app.topbar.component.ts | 2 +- .../landing/featuressection.component.ts | 2 +- .../pages/landing/herosection.component.ts | 12 +- .../pages/landing/landing.component.ts | 52 ++------ .../landing/templatesection.component.ts | 2 +- .../pages/landing/themesection.component.ts | 44 ++----- .../pages/landing/userssection.component.ts | 2 +- .../showcase/pages/uikit/uikit.component.ts | 2 +- src/app/showcase/service/appconfigservice.ts | 117 ++++++++++++------ 15 files changed, 180 insertions(+), 213 deletions(-) diff --git a/src/app/showcase/doc/chart/basicdoc.ts b/src/app/showcase/doc/chart/basicdoc.ts index f2538e42387..81bd53480bd 100644 --- a/src/app/showcase/doc/chart/basicdoc.ts +++ b/src/app/showcase/doc/chart/basicdoc.ts @@ -1,6 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; import { Code } from '../../domain/code'; +import { AppConfigService } from '../../service/appconfigservice'; +import { Subscription, debounceTime } from 'rxjs'; @Component({ selector: 'chart-basic-demo', @@ -22,9 +24,19 @@ export class BasicDoc implements OnInit { basicOptions: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/domain/appconfig.ts b/src/app/showcase/domain/appconfig.ts index 8e1e7e05afd..1e998ebd93f 100644 --- a/src/app/showcase/domain/appconfig.ts +++ b/src/app/showcase/domain/appconfig.ts @@ -3,4 +3,6 @@ export interface AppConfig { darkMode?: boolean; theme?: string; ripple?: boolean; + scale?: number; + tableTheme?: string; } diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts index 22e260b5874..0e82afa168e 100644 --- a/src/app/showcase/layout/app.component.ts +++ b/src/app/showcase/layout/app.component.ts @@ -21,6 +21,7 @@ import { AppConfigComponent } from './config/app.config.component'; import { AppMenuComponent } from './menu/app.menu.component'; import { AppNewsComponent } from './news/app.news.component'; import { AppTopBarComponent } from './topbar/app.topbar.component'; +import { AppConfig } from '../domain/appconfig'; @Component({ selector: 'app-root', @@ -29,7 +30,7 @@ import { AppTopBarComponent } from './topbar/app.topbar.component'; imports: [RouterOutlet, FormsModule, ReactiveFormsModule, HttpClientModule, AppMainComponent, LandingComponent, AppNewsComponent, AppConfigComponent, AppTopBarComponent, AppMenuComponent], providers: [CarService, CountryService, EventService, NodeService, IconService, CustomerService, PhotoService, AppConfigService, ProductService] }) -export class AppComponent implements OnDestroy { +export class AppComponent implements OnInit { constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router, @Inject(PLATFORM_ID) private platformId: any) { afterNextRender(() => { if (process.env.NODE_ENV === 'production') { @@ -40,26 +41,22 @@ export class AppComponent implements OnDestroy { }); } - themeChangeSubscription: Subscription; - theme - ngOnInit(): void { this.primeng.ripple = true; - - this.themeChangeSubscription = this.configService.themeChange$.subscribe((theme: Theme) => { - this.switchTheme(theme); - console.log("ds") - - }); if (isPlatformBrowser(this.platformId)) { - if(this.configService.getAppState()==="true"){ - this.switchThemeByLocalStorage() - - } + this.checkAppState(); } - } - - + } + + checkAppState() { + const stored = localStorage.getItem('layout-config'); + let _config!: AppConfig; + if (stored) { + _config = JSON.parse(stored) as AppConfig; + this.configService.config.set(_config); + } + } + injectScripts() { const script = this.renderer.createElement('script'); script.type = 'text/javascript'; @@ -87,58 +84,12 @@ export class AppComponent implements OnDestroy { }); } - const { theme, darkMode } = this.configService.config; + const { theme, darkMode } = this.configService.config(); const landingTheme = darkMode ? 'lara-dark-blue' : 'lara-light-blue'; if (event.urlAfterRedirects === '/' && theme !== landingTheme) { - this.switchTheme({ name: landingTheme, dark: darkMode }); + this.configService.config.update((config) => ({ ...config, theme: landingTheme, dark: darkMode })); } } }); } - switchThemeByLocalStorage() { - const id = 'theme-link'; - const linkElement = this.document.getElementById(id); - const cloneLinkElement = linkElement.cloneNode(true); - - cloneLinkElement.setAttribute('href', linkElement.getAttribute('href').replace(this.configService.config.theme, "lara-dark-blue")); - cloneLinkElement.setAttribute('id', id + '-clone'); - - linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling); - - cloneLinkElement.addEventListener('load', () => { - linkElement.remove(); - cloneLinkElement.setAttribute('id', id); - this.configService.updateConfig({ - theme: "lara-dark-blue", - darkMode: true - }); - }); - } - switchTheme(theme: Theme) { - const id = 'theme-link'; - const linkElement = this.document.getElementById(id); - const cloneLinkElement = linkElement.cloneNode(true); - - cloneLinkElement.setAttribute('href', linkElement.getAttribute('href').replace(this.configService.config.theme, theme.name)); - cloneLinkElement.setAttribute('id', id + '-clone'); - - linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling); - - cloneLinkElement.addEventListener('load', () => { - linkElement.remove(); - cloneLinkElement.setAttribute('id', id); - this.configService.updateConfig({ - theme: theme.name, - darkMode: theme.dark - }); - this.configService.completeThemeChange(theme); - this.configService.setAppState(theme.dark); - }); - } - - ngOnDestroy() { - if (this.themeChangeSubscription) { - this.themeChangeSubscription.unsubscribe(); - } - } } diff --git a/src/app/showcase/layout/app.main.component.ts b/src/app/showcase/layout/app.main.component.ts index 8f763bf77bc..36387dd142b 100644 --- a/src/app/showcase/layout/app.main.component.ts +++ b/src/app/showcase/layout/app.main.component.ts @@ -37,15 +37,15 @@ export class AppMainComponent { } get isInputFilled(): boolean { - return this.configService.config.inputStyle === 'filled'; + return this.configService.config().inputStyle === 'filled'; } get isDarkMode(): boolean { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } get isRippleDisabled(): boolean { - return this.configService.config.ripple === false; + return this.configService.config().ripple === false; } get isMenuActive(): boolean { @@ -53,7 +53,7 @@ export class AppMainComponent { } get theme(): string { - return this.configService.config.theme; + return this.configService.config().theme; } get containerClass() { @@ -68,7 +68,7 @@ export class AppMainComponent { toggleDarkMode() { let newTheme = null; - const { theme, darkMode } = this.configService.config; + const { theme, darkMode } = this.configService.config(); if (darkMode) { newTheme = theme.replace('dark', 'light'); @@ -76,8 +76,7 @@ export class AppMainComponent { if (theme.includes('light') && theme !== 'fluent-light') newTheme = theme.replace('light', 'dark'); else newTheme = 'lara-dark-blue'; } - - this.configService.changeTheme({ name: newTheme, dark: !darkMode }); + this.configService.config.update((config) => ({ ...config, darkMode: !darkMode, theme: newTheme })); } hideMenu() { diff --git a/src/app/showcase/layout/config/app.config.component.ts b/src/app/showcase/layout/config/app.config.component.ts index cc664fd77f5..6345016f6b3 100644 --- a/src/app/showcase/layout/config/app.config.component.ts +++ b/src/app/showcase/layout/config/app.config.component.ts @@ -15,7 +15,6 @@ import { AppConfigService } from '../../service/appconfigservice'; imports: [CommonModule, FormsModule, SidebarModule, InputSwitchModule, ButtonModule, RadioButtonModule, SelectButtonModule] }) export class AppConfigComponent { - scale: number = 14; inputStyles = [ { label: 'Outlined', value: 'outlined' }, { label: 'Filled', value: 'filled' } @@ -35,19 +34,32 @@ export class AppConfigComponent { } get isDarkToggleDisabled(): boolean { - return this.lightOnlyThemes.includes(this.configService.config.theme); + return this.lightOnlyThemes.includes(this.configService.config().theme); } get isDarkMode(): boolean { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } get inputStyle(): string { - return this.configService.config.inputStyle; + return this.configService.config().inputStyle; + } + set inputStyle(val: string) { + this.configService.config.update((config) => ({ ...config, inputStyle: val })); } get ripple(): boolean { - return this.configService.config.ripple; + return this.configService.config().ripple; + } + set ripple(val: boolean) { + this.configService.config.update((config) => ({ ...config, ripple: val })); + } + + get scale(): number { + return this.configService.config().scale; + } + set scale(val: number) { + this.configService.config.update((config) => ({ ...config, scale: val })); } onVisibleChange(value: boolean) { @@ -57,7 +69,7 @@ export class AppConfigComponent { } onCompactMaterialChange() { - const theme = this.configService.config.theme; + const theme = this.configService.config().theme; if (theme.startsWith('md')) { let tokens = theme.split('-'); @@ -83,7 +95,7 @@ export class AppConfigComponent { themeName += '-' + color; } - return this.configService.config.theme === themeName; + return this.configService.config().theme === themeName; } changeTheme(theme: string, color?: string) { @@ -106,28 +118,22 @@ export class AppConfigComponent { darkMode = this.isDarkMode; } - this.configService.changeTheme({ name: newTheme, dark: darkMode }); + this.configService.config.update((config) => ({ ...config, dark: darkMode, theme: newTheme })); } - onInputStyleChange(event: SelectButtonChangeEvent) { - this.configService.setInputStyle(event.value); + decrementScale() { + this.scale--; } - onRippleChange(event: InputSwitchChangeEvent) { - this.configService.setRipple(event.checked); + onRippleChange(event) { + this.ripple = event.checked; } - decrementScale() { - this.scale--; - this.applyScale(); + onInputStyleChange(event) { + this.inputStyle = event.value; } incrementScale() { this.scale++; - this.applyScale(); - } - - applyScale() { - this.renderer.setStyle(this.document.documentElement, 'font-size', this.scale + 'px'); } } diff --git a/src/app/showcase/layout/doc/app.docapitable.component.ts b/src/app/showcase/layout/doc/app.docapitable.component.ts index b78b4151229..4ff25bb7616 100644 --- a/src/app/showcase/layout/doc/app.docapitable.component.ts +++ b/src/app/showcase/layout/doc/app.docapitable.component.ts @@ -109,7 +109,7 @@ export class AppDocApiTable { constructor(public viewContainerRef: ViewContainerRef, public router: Router, public location: Location, private configService: AppConfigService) {} get isDarkMode(): boolean { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } navigate(event, param) { diff --git a/src/app/showcase/layout/topbar/app.topbar.component.ts b/src/app/showcase/layout/topbar/app.topbar.component.ts index 7e0d546b041..e993e36cca1 100644 --- a/src/app/showcase/layout/topbar/app.topbar.component.ts +++ b/src/app/showcase/layout/topbar/app.topbar.component.ts @@ -37,7 +37,7 @@ export class AppTopBarComponent implements OnDestroy { } get isDarkMode() { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } toggleMenu() { diff --git a/src/app/showcase/pages/landing/featuressection.component.ts b/src/app/showcase/pages/landing/featuressection.component.ts index d2b2081c500..a402299fa95 100644 --- a/src/app/showcase/pages/landing/featuressection.component.ts +++ b/src/app/showcase/pages/landing/featuressection.component.ts @@ -79,6 +79,6 @@ export class FeaturesSectionComponent { constructor(private configService: AppConfigService) {} get isDarkMode() { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } } diff --git a/src/app/showcase/pages/landing/herosection.component.ts b/src/app/showcase/pages/landing/herosection.component.ts index 0816ef1d881..0831ab4805e 100644 --- a/src/app/showcase/pages/landing/herosection.component.ts +++ b/src/app/showcase/pages/landing/herosection.component.ts @@ -14,7 +14,7 @@ import { RadioButtonModule } from 'primeng/radiobutton'; import { SelectButtonModule } from 'primeng/selectbutton'; import { SliderModule } from 'primeng/slider'; import { TabMenuModule } from 'primeng/tabmenu'; -import { Subscription } from 'rxjs'; +import { Subscription, debounceTime } from 'rxjs'; import { AppConfigService } from '../../service/appconfigservice'; @Component({ @@ -173,7 +173,7 @@ export class HeroSectionComponent implements OnInit, OnDestroy { rangeValues = [20, 80]; - themeChangeCompleteSubscription: Subscription; + subscription!: Subscription; constructor(private configService: AppConfigService, @Inject(PLATFORM_ID) private platformId: any) {} @@ -199,7 +199,7 @@ export class HeroSectionComponent implements OnInit, OnDestroy { { name: 'Onyama Limba', image: 'onyamalimba.png' } ]; - this.themeChangeCompleteSubscription = this.configService.themeChangeComplete$.subscribe(() => { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { this.setChartOptions(); }); } @@ -258,9 +258,9 @@ export class HeroSectionComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { - if (this.themeChangeCompleteSubscription) { - this.themeChangeCompleteSubscription.unsubscribe(); - this.themeChangeCompleteSubscription = null; + if (this.subscription) { + this.subscription.unsubscribe(); + this.subscription = null; } } } diff --git a/src/app/showcase/pages/landing/landing.component.ts b/src/app/showcase/pages/landing/landing.component.ts index 3141567de0f..c17234f4901 100644 --- a/src/app/showcase/pages/landing/landing.component.ts +++ b/src/app/showcase/pages/landing/landing.component.ts @@ -11,6 +11,7 @@ import { HeroSectionComponent } from './herosection.component'; import { TemplateSectionComponent } from './templatesection.component'; import { ThemeSectionComponent } from './themesection.component'; import { UsersSectionComponent } from './userssection.component'; +import { Subscription } from 'rxjs'; @Component({ selector: 'landing', @@ -19,16 +20,14 @@ import { UsersSectionComponent } from './userssection.component'; imports: [CommonModule, NgOptimizedImage, AppNewsComponent, AppTopBarComponent, HeroSectionComponent, FeaturesSectionComponent, UsersSectionComponent, ThemeSectionComponent, BlockSectionComponent, TemplateSectionComponent, FooterSectionComponent] }) export class LandingComponent implements OnInit { - private tableTheme = 'lara-light-blue'; - - constructor(private configService: AppConfigService, private metaService: Meta, private titleService: Title) { - afterNextRender(() => { - if (this.configService.config.theme !== this.tableTheme) { - this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue'); - } - }); + get tableTheme() { + return this.configService.config().tableTheme; } + subscription!: Subscription; + + constructor(private configService: AppConfigService, private metaService: Meta, private titleService: Title) {} + get landingClass() { return { 'layout-dark': this.isDarkMode, @@ -38,7 +37,7 @@ export class LandingComponent implements OnInit { } get isDarkMode() { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } get isNewsActive() { @@ -51,37 +50,8 @@ export class LandingComponent implements OnInit { } toggleDarkMode() { - const theme = this.isDarkMode ? 'lara-light-blue' : 'lara-dark-blue'; - const newTableTheme = this.isDarkMode ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark'); - - this.configService.changeTheme({ name: theme, dark: !this.isDarkMode }); - this.replaceTableTheme(newTableTheme); - } - - changeTableTheme(value: string) { - this.replaceTableTheme(value); - } - - replaceTableTheme(newTheme: string) { - const elementId = 'home-table-link'; - const linkElement = document.getElementById(elementId); - const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null; - const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null; - - if (currentTableTheme !== newTheme && tableThemeTokens) { - const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme); - - const cloneLinkElement = linkElement.cloneNode(true); - - cloneLinkElement.setAttribute('id', elementId + '-clone'); - cloneLinkElement.setAttribute('href', newThemeUrl); - cloneLinkElement.addEventListener('load', () => { - linkElement.remove(); - cloneLinkElement.setAttribute('id', elementId); - }); - linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling); - - this.tableTheme = newTheme; - } + const dark = !this.isDarkMode; + const newTableTheme = !dark ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark'); + this.configService.config.update((config) => ({ ...config, darkMode: dark, theme: dark ? 'lara-dark-blue' : 'lara-light-blue', tableTheme: newTableTheme })); } } diff --git a/src/app/showcase/pages/landing/templatesection.component.ts b/src/app/showcase/pages/landing/templatesection.component.ts index f343223938f..abae8c2a40a 100644 --- a/src/app/showcase/pages/landing/templatesection.component.ts +++ b/src/app/showcase/pages/landing/templatesection.component.ts @@ -140,6 +140,6 @@ export class TemplateSectionComponent { constructor(private configService: AppConfigService) {} get isDarkMode() { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } } diff --git a/src/app/showcase/pages/landing/themesection.component.ts b/src/app/showcase/pages/landing/themesection.component.ts index 3ac215894bd..85439bfe67f 100644 --- a/src/app/showcase/pages/landing/themesection.component.ts +++ b/src/app/showcase/pages/landing/themesection.component.ts @@ -8,6 +8,7 @@ import { Customer } from '../../domain/customer'; import { AppComponent } from '../../layout/app.component'; import { AppConfigService } from '../../service/appconfigservice'; import { CustomerService } from '../../service/customerservice'; +import { Subscription } from 'rxjs'; @Component({ selector: 'theme-section', @@ -161,7 +162,12 @@ export class ThemeSectionComponent { @ViewChild('dt') table: Table; - tableTheme: string = 'lara-light-blue'; + get tableTheme() { + return this.configService.config().tableTheme; + } + set tableTheme(value: string) { + this.configService.config.update((config) => ({ ...config, tableTheme: value })); + } customers: Customer[]; @@ -170,46 +176,20 @@ export class ThemeSectionComponent { loading: boolean = true; get isDarkMode() { - return this.configService.config.darkMode; - } - - changeTableTheme(value: string) { - if (isPlatformBrowser(this.platformId)) { - this.replaceTableTheme(value); - } - } - replaceTableTheme(newTheme: string) { - const elementId = 'home-table-link'; - const linkElement = document.getElementById(elementId); - const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null; - const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null; - - if (currentTableTheme !== newTheme && tableThemeTokens) { - const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme); - - const cloneLinkElement = linkElement.cloneNode(true); - - cloneLinkElement.setAttribute('id', elementId + '-clone'); - cloneLinkElement.setAttribute('href', newThemeUrl); - cloneLinkElement.addEventListener('load', () => { - linkElement.remove(); - cloneLinkElement.setAttribute('id', elementId); - }); - linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling); - - this.tableTheme = newTheme; - } + return this.configService.config().darkMode; } ngOnInit() { - this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue'); - this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; this.loading = false; }); } + changeTableTheme(value: string) { + this.tableTheme = value; + } + getSeverity(status) { switch (status) { case 'unqualified': diff --git a/src/app/showcase/pages/landing/userssection.component.ts b/src/app/showcase/pages/landing/userssection.component.ts index fbb12681159..6eddb660048 100644 --- a/src/app/showcase/pages/landing/userssection.component.ts +++ b/src/app/showcase/pages/landing/userssection.component.ts @@ -76,6 +76,6 @@ export class UsersSectionComponent { ]; get isDarkMode() { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } } diff --git a/src/app/showcase/pages/uikit/uikit.component.ts b/src/app/showcase/pages/uikit/uikit.component.ts index 06140bd962a..3e73387cd4e 100755 --- a/src/app/showcase/pages/uikit/uikit.component.ts +++ b/src/app/showcase/pages/uikit/uikit.component.ts @@ -15,6 +15,6 @@ export class UIKitComponent { } get isDarkMode(): boolean { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } } diff --git a/src/app/showcase/service/appconfigservice.ts b/src/app/showcase/service/appconfigservice.ts index 68ae253b892..1047c696b9c 100644 --- a/src/app/showcase/service/appconfigservice.ts +++ b/src/app/showcase/service/appconfigservice.ts @@ -1,18 +1,20 @@ -import { Injectable } from '@angular/core'; +import { Inject, Injectable, PLATFORM_ID, effect, signal } from '@angular/core'; import { Subject } from 'rxjs'; import { AppConfig } from '../domain/appconfig'; import { AppState } from '../domain/appstate'; -import { Theme } from '../domain/theme'; +import { isPlatformBrowser } from '@angular/common'; @Injectable({ providedIn: 'root' }) export class AppConfigService { - config: AppConfig = { + _config: AppConfig = { theme: 'lara-light-blue', darkMode: false, inputStyle: 'outlined', - ripple: true + ripple: true, + scale: 14, + tableTheme: 'lara-light-blue' }; state: AppState = { @@ -21,28 +23,37 @@ export class AppConfigService { newsActive: false }; - private themeChange = new Subject(); - - themeChange$ = this.themeChange.asObservable(); - - private themeChangeComplete = new Subject(); - - themeChangeComplete$ = this.themeChangeComplete.asObservable(); - - changeTheme(theme: Theme) { - this.themeChange.next(theme); + config = signal(this._config); + + private configUpdate = new Subject(); + + configUpdate$ = this.configUpdate.asObservable(); + + constructor(@Inject(PLATFORM_ID) private platformId: any) { + effect(() => { + const config = this.config(); + if (isPlatformBrowser(this.platformId)) { + if (this.updateStyle(config)) { + this.changeTheme(); + const newTableTheme = !config.darkMode ? config.tableTheme.replace('dark', 'light') : config.tableTheme.replace('light', 'dark'); + this.replaceTableTheme(newTableTheme); + } + this.changeScale(config.scale); + this.onConfigUpdate(); + } + }); } - completeThemeChange(theme: Theme) { - this.themeChangeComplete.next(theme); + updateStyle(config: AppConfig) { + return config.theme !== this._config.theme || config.darkMode !== this._config.darkMode || config.tableTheme !== this._config.tableTheme; } - updateConfig(config: AppConfig) { - this.config = { ...this.config, ...config }; - } - - getConfig() { - return this.config; + onConfigUpdate() { + const config = this.config(); + config.tableTheme = !config.darkMode ? config.tableTheme.replace('light', 'dark') : config.tableTheme.replace('dark', 'light'); + this._config = { ...config }; + this.configUpdate.next(this.config()); + localStorage.setItem('layout-config', JSON.stringify(config)); } showMenu() { @@ -61,14 +72,6 @@ export class AppConfigService { this.state.configActive = false; } - setRipple(value: boolean) { - this.config.ripple = value; - } - - setInputStyle(value: string) { - this.config.inputStyle = value; - } - showNews() { this.state.newsActive = true; } @@ -77,12 +80,56 @@ export class AppConfigService { this.state.newsActive = false; } - getAppState() : any{ - return localStorage.getItem("darkmode") + changeTheme() { + const config = this.config(); + const themeLink = document.getElementById('theme-link'); + const themeLinkHref = themeLink.getAttribute('href')!; + const newHref = themeLinkHref + .split('/') + .map((el) => (el == this._config.theme ? (el = config.theme) : el == `theme-${this._config.darkMode}` ? (el = `theme-${config.darkMode}`) : el)) + .join('/'); + + this.replaceThemeLink(newHref); + } + + replaceThemeLink(href: string) { + const id = 'theme-link'; + let themeLink = document.getElementById(id); + const cloneLinkElement = themeLink.cloneNode(true); + + cloneLinkElement.setAttribute('href', href); + cloneLinkElement.setAttribute('id', id + '-clone'); + + themeLink.parentNode!.insertBefore(cloneLinkElement, themeLink.nextSibling); + cloneLinkElement.addEventListener('load', () => { + themeLink.remove(); + cloneLinkElement.setAttribute('id', id); + }); + } + + replaceTableTheme(newTheme: string) { + const elementId = 'home-table-link'; + const linkElement = document.getElementById(elementId); + const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null; + const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null; + if (currentTableTheme !== newTheme && tableThemeTokens) { + const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme); + + const cloneLinkElement = linkElement.cloneNode(true); + + cloneLinkElement.setAttribute('id', elementId + '-clone'); + cloneLinkElement.setAttribute('href', newThemeUrl); + cloneLinkElement.addEventListener('load', () => { + linkElement.remove(); + cloneLinkElement.setAttribute('id', elementId); + }); + linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling); + } } - setAppState(val){ - localStorage.setItem("darkmode",val) - console.log(this.getAppState()) + changeScale(value: number) { + if (isPlatformBrowser(this.platformId)) { + document.documentElement.style.fontSize = `${value}px`; + } } } From 885a69ab7b59b24db0016429f78ef1ff9499d587 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 2 Jan 2024 17:49:51 +0300 Subject: [PATCH 3/4] Fix chart light/dark switch --- src/app/showcase/doc/chart/basicdoc.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/app/showcase/doc/chart/basicdoc.ts b/src/app/showcase/doc/chart/basicdoc.ts index 81bd53480bd..600ce97c7b3 100644 --- a/src/app/showcase/doc/chart/basicdoc.ts +++ b/src/app/showcase/doc/chart/basicdoc.ts @@ -1,5 +1,5 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { ChangeDetectorRef, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; import { Code } from '../../domain/code'; import { AppConfigService } from '../../service/appconfigservice'; import { Subscription, debounceTime } from 'rxjs'; @@ -26,9 +26,10 @@ export class BasicDoc implements OnInit { subscription!: Subscription; - constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService) { + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { this.initChart(); + this.cd.markForCheck(); }); } @@ -60,22 +61,24 @@ export class BasicDoc implements OnInit { plugins: { legend: { labels: { - color: textColor + fontColor: textColor } } }, scales: { - y: { - beginAtZero: true, + x: { ticks: { - color: textColorSecondary + color: textColorSecondary, + font: { + weight: 500 + } }, grid: { - color: surfaceBorder, + display: false, drawBorder: false } }, - x: { + y: { ticks: { color: textColorSecondary }, From cefe5417ae3bde6d2060b0715d04051987d779be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Tue, 2 Jan 2024 18:17:40 +0300 Subject: [PATCH 4/4] charts updated --- src/app/showcase/doc/chart/combodoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/doughnutdoc.ts | 19 +++++++++++++++---- .../showcase/doc/chart/horizontalbardoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/linedoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/linestyledoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/multiaxisdoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/piedoc.ts | 17 +++++++++++++++-- src/app/showcase/doc/chart/polarareadoc.ts | 17 ++++++++++++++--- src/app/showcase/doc/chart/radardoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/stackedbardoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/verticalbardoc.ts | 18 +++++++++++++++--- 11 files changed, 164 insertions(+), 33 deletions(-) diff --git a/src/app/showcase/doc/chart/combodoc.ts b/src/app/showcase/doc/chart/combodoc.ts index c912e3f54d9..d1e0249e3e8 100644 --- a/src/app/showcase/doc/chart/combodoc.ts +++ b/src/app/showcase/doc/chart/combodoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-combo-demo', template: ` @@ -19,9 +20,20 @@ export class ComboDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/doughnutdoc.ts b/src/app/showcase/doc/chart/doughnutdoc.ts index efda6aba860..36e54b8a73e 100644 --- a/src/app/showcase/doc/chart/doughnutdoc.ts +++ b/src/app/showcase/doc/chart/doughnutdoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-doughnut-demo', template: ` @@ -19,9 +20,20 @@ export class DoughnutDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); @@ -49,7 +61,6 @@ export class DoughnutDoc implements OnInit { }; } } - code: Code = { basic: ``, html: ` diff --git a/src/app/showcase/doc/chart/horizontalbardoc.ts b/src/app/showcase/doc/chart/horizontalbardoc.ts index 77c39d2b19c..4a90253e016 100644 --- a/src/app/showcase/doc/chart/horizontalbardoc.ts +++ b/src/app/showcase/doc/chart/horizontalbardoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-horizontal-bar-demo', template: ` @@ -19,9 +20,20 @@ export class HorizontalBarDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart() + } + + initChart(){ if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/linedoc.ts b/src/app/showcase/doc/chart/linedoc.ts index c7cd4756e16..e1dc2fb978e 100644 --- a/src/app/showcase/doc/chart/linedoc.ts +++ b/src/app/showcase/doc/chart/linedoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-line-demo', template: ` @@ -19,9 +20,20 @@ export class LineDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/linestyledoc.ts b/src/app/showcase/doc/chart/linestyledoc.ts index 5bd73554764..4c612ad0eed 100644 --- a/src/app/showcase/doc/chart/linestyledoc.ts +++ b/src/app/showcase/doc/chart/linestyledoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-line-style-demo', template: ` @@ -19,9 +20,20 @@ export class LineStyleDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/multiaxisdoc.ts b/src/app/showcase/doc/chart/multiaxisdoc.ts index edcd92aa19b..debb7dc8cfb 100644 --- a/src/app/showcase/doc/chart/multiaxisdoc.ts +++ b/src/app/showcase/doc/chart/multiaxisdoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-multi-axis-demo', template: ` @@ -19,9 +20,20 @@ export class MultiAxisDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/piedoc.ts b/src/app/showcase/doc/chart/piedoc.ts index 260b8e005e0..06b60e9d97f 100644 --- a/src/app/showcase/doc/chart/piedoc.ts +++ b/src/app/showcase/doc/chart/piedoc.ts @@ -1,6 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { ChangeDetectorRef, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; import { Code } from '../../domain/code'; +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-pie-demo', @@ -19,9 +21,20 @@ export class PieDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/polarareadoc.ts b/src/app/showcase/doc/chart/polarareadoc.ts index 0b438c10734..6cf506310ea 100644 --- a/src/app/showcase/doc/chart/polarareadoc.ts +++ b/src/app/showcase/doc/chart/polarareadoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-polar-area-demo', template: ` @@ -19,9 +20,19 @@ export class PolarAreaDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/radardoc.ts b/src/app/showcase/doc/chart/radardoc.ts index 968da3827fd..708804a0612 100644 --- a/src/app/showcase/doc/chart/radardoc.ts +++ b/src/app/showcase/doc/chart/radardoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-radar-demo', template: ` @@ -19,9 +20,20 @@ export class RadarDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/stackedbardoc.ts b/src/app/showcase/doc/chart/stackedbardoc.ts index 74b4041ed00..e13c13c7401 100644 --- a/src/app/showcase/doc/chart/stackedbardoc.ts +++ b/src/app/showcase/doc/chart/stackedbardoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-stacked-bar-demo', template: ` @@ -19,9 +20,20 @@ export class StackedBarDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/verticalbardoc.ts b/src/app/showcase/doc/chart/verticalbardoc.ts index 373446ef4d8..67aee8438c1 100644 --- a/src/app/showcase/doc/chart/verticalbardoc.ts +++ b/src/app/showcase/doc/chart/verticalbardoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-vertical-bar-demo', template: ` @@ -19,9 +20,20 @@ export class VerticalBarDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart() + } + + initChart(){ if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color');