diff --git a/projects/pioneer-charts-dev/src/app/services/pc.service.ts b/projects/pioneer-charts-dev/src/app/services/pc.service.ts index dc4f53d..262388c 100644 --- a/projects/pioneer-charts-dev/src/app/services/pc.service.ts +++ b/projects/pioneer-charts-dev/src/app/services/pc.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { PcacLineAreaChartConfig, PcacData, @@ -13,6 +13,8 @@ import { PcRepository } from './pc.repository'; providedIn: 'root', }) export class PcService { + private repository = inject(PcRepository); + barVerticalChartConfig!: PcacBarVerticalChartConfig; barVerticalChartSingleConfig!: PcacBarVerticalChartConfig; barVerticalChartGroupConfig!: PcacBarVerticalChartConfig; @@ -30,8 +32,6 @@ export class PcService { currentDocRoute = 'bar-chart'; navDisplay = 'none'; - constructor(private repository: PcRepository) { } - onClicked(data: any) { alert(`Key: ${data.key} - Value: ${data.value}`); } diff --git a/projects/pioneer-charts-web/src/app/app.repository.ts b/projects/pioneer-charts-web/src/app/app.repository.ts index c32be19..cb71082 100644 --- a/projects/pioneer-charts-web/src/app/app.repository.ts +++ b/projects/pioneer-charts-web/src/app/app.repository.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { PcacBarHorizontalChartConfig, @@ -13,8 +13,8 @@ import { providedIn: 'root', }) export class AppRepository { + private http = inject(HttpClient); - constructor(private http: HttpClient) { } /** * Bar Charts Horizontal diff --git a/projects/pioneer-charts-web/src/app/layouts/jump-nav/jump-nav.component.ts b/projects/pioneer-charts-web/src/app/layouts/jump-nav/jump-nav.component.ts index e35b927..0723a80 100644 --- a/projects/pioneer-charts-web/src/app/layouts/jump-nav/jump-nav.component.ts +++ b/projects/pioneer-charts-web/src/app/layouts/jump-nav/jump-nav.component.ts @@ -1,5 +1,5 @@ import { NgClass } from '@angular/common'; -import { Component, Input, OnInit, AfterViewChecked } from '@angular/core'; +import { Component, Input, OnInit, AfterViewChecked, inject } from '@angular/core'; import { Router, RouterLink } from '@angular/router'; export enum JumpNavLevel { @@ -24,13 +24,13 @@ export interface IJumpNav { ] }) export class JumpNavComponent implements OnInit, AfterViewChecked { + private route = inject(Router); + @Input() jumpNav: IJumpNav[] = [] currentRoute: string[] = [] fragment!: string; - constructor( - private route: Router - ) { + constructor() { this.route.events.subscribe((res) => { this.currentRoute = [this.route.url]; if (this.currentRoute[0].includes('#')) { diff --git a/projects/pioneer-charts-web/src/app/pages/docs/components/charts/line-area-chart/line-area-chart.component.ts b/projects/pioneer-charts-web/src/app/pages/docs/components/charts/line-area-chart/line-area-chart.component.ts index f87a156..e1b41c7 100644 --- a/projects/pioneer-charts-web/src/app/pages/docs/components/charts/line-area-chart/line-area-chart.component.ts +++ b/projects/pioneer-charts-web/src/app/pages/docs/components/charts/line-area-chart/line-area-chart.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { AppService } from '../../../../../app.service'; import { IJumpNav, JumpNavLevel } from '../../../../../layouts/jump-nav/jump-nav.component'; import { MatCardModule } from '@angular/material/card'; @@ -23,6 +23,8 @@ import { StringifyPipe } from 'projects/pioneer-charts-web/src/app/stringify.pip ] }) export class LineAreaChartComponent { + pcService = inject(AppService); + jumpNav = [ { key: 'Line Area Chart', @@ -57,6 +59,5 @@ export class LineAreaChartComponent { ] as IJumpNav[]; markupCode = ``; importCode = `import { PcacLineAreaChartModule } from '@pioneer-code/pioneer-charts';`; - constructor(public pcService: AppService) { } } diff --git a/projects/pioneer-charts-web/src/app/pages/docs/components/charts/pie-chart/pie-chart.component.ts b/projects/pioneer-charts-web/src/app/pages/docs/components/charts/pie-chart/pie-chart.component.ts index 20a69e7..1a14dd8 100644 --- a/projects/pioneer-charts-web/src/app/pages/docs/components/charts/pie-chart/pie-chart.component.ts +++ b/projects/pioneer-charts-web/src/app/pages/docs/components/charts/pie-chart/pie-chart.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { AppService } from '../../../../../app.service'; import { IJumpNav, JumpNavLevel } from '../../../../../layouts/jump-nav/jump-nav.component'; import { PcacPieChartComponent } from '@pioneer-code/pioneer-charts'; @@ -23,6 +23,8 @@ import { StringifyPipe } from 'projects/pioneer-charts-web/src/app/stringify.pip ] }) export class PieChartComponent { + pcService = inject(AppService); + jumpNav = [ { key: 'Pie Chart', @@ -57,6 +59,4 @@ export class PieChartComponent { ] as IJumpNav[]; markupCode = ``; importCode = `import { PcacPieChartModule } from '@pioneer-code/pioneer-charts';`; - - constructor(public pcService: AppService) { } } diff --git a/projects/pioneer-charts/src/lib/bar-chart/bar-horizontal-chart/bar-horizontal-chart.builder.ts b/projects/pioneer-charts/src/lib/bar-chart/bar-horizontal-chart/bar-horizontal-chart.builder.ts index c255db8..b06cbb4 100644 --- a/projects/pioneer-charts/src/lib/bar-chart/bar-horizontal-chart/bar-horizontal-chart.builder.ts +++ b/projects/pioneer-charts/src/lib/bar-chart/bar-horizontal-chart/bar-horizontal-chart.builder.ts @@ -1,4 +1,4 @@ -import { Injectable, ElementRef } from '@angular/core'; +import { Injectable, ElementRef, inject } from '@angular/core'; import { transition } from 'd3-transition'; import { color } from 'd3-color'; @@ -34,6 +34,12 @@ type GroupType = Selection; private yScaleStacked!: ScaleBand; @@ -43,13 +49,13 @@ export class BarHorizontalChartBuilder extends PcacChart { private cachedMargins: any; barClicked$ = this.barClickedSource.asObservable(); - constructor( - public override axisBuilder: PcacAxisBuilder, - public override gridBuilder: PcacGridBuilder, - public override transitionService: PcacTransitionService, - public override tooltipBuilder: PcacTooltipBuilder, - public override colorService: PcacColorService - ) { + constructor() { + const axisBuilder = inject(PcacAxisBuilder); + const gridBuilder = inject(PcacGridBuilder); + const transitionService = inject(PcacTransitionService); + const tooltipBuilder = inject(PcacTooltipBuilder); + const colorService = inject(PcacColorService); + super( axisBuilder, gridBuilder, @@ -57,6 +63,12 @@ export class BarHorizontalChartBuilder extends PcacChart { tooltipBuilder, colorService ); + this.axisBuilder = axisBuilder; + this.gridBuilder = gridBuilder; + this.transitionService = transitionService; + this.tooltipBuilder = tooltipBuilder; + this.colorService = colorService; + } buildChart(chartElm: ElementRef, config: PcacBarHorizontalChartConfig): void { diff --git a/projects/pioneer-charts/src/lib/bar-chart/bar-horizontal-chart/bar-horizontal-chart.component.ts b/projects/pioneer-charts/src/lib/bar-chart/bar-horizontal-chart/bar-horizontal-chart.component.ts index ea28cc0..d1ff833 100644 --- a/projects/pioneer-charts/src/lib/bar-chart/bar-horizontal-chart/bar-horizontal-chart.component.ts +++ b/projects/pioneer-charts/src/lib/bar-chart/bar-horizontal-chart/bar-horizontal-chart.component.ts @@ -1,14 +1,4 @@ -import { - Component, - Input, - ElementRef, - ViewChild, - OnChanges, - EventEmitter, - Output, - HostListener, - ViewEncapsulation -} from '@angular/core'; +import { Component, Input, ElementRef, ViewChild, OnChanges, EventEmitter, Output, HostListener, ViewEncapsulation, inject } from '@angular/core'; import { BarHorizontalChartBuilder } from './bar-horizontal-chart.builder'; import { PcacBarHorizontalChartConfig } from './bar-horizontal-chart.model'; import { PcacData } from '../../core'; @@ -21,15 +11,15 @@ import { PcacData } from '../../core'; standalone: true }) export class PcacBarHorizontalChartComponent implements OnChanges { + private chartBuilder = inject(BarHorizontalChartBuilder); + @Input() config!: PcacBarHorizontalChartConfig; @ViewChild('chart', { static: true }) chartElm!: ElementRef; @Output() barClicked: EventEmitter = new EventEmitter(); private resizeWindowTimeout: any; - constructor( - private chartBuilder: BarHorizontalChartBuilder, - ) { + constructor() { this.chartBuilder.barClicked$.subscribe(data => { this.barClicked.emit(data); }); diff --git a/projects/pioneer-charts/src/lib/bar-chart/bar-vertical-chart/bar-vertical-chart.builder.ts b/projects/pioneer-charts/src/lib/bar-chart/bar-vertical-chart/bar-vertical-chart.builder.ts index d3be29d..94a7237 100644 --- a/projects/pioneer-charts/src/lib/bar-chart/bar-vertical-chart/bar-vertical-chart.builder.ts +++ b/projects/pioneer-charts/src/lib/bar-chart/bar-vertical-chart/bar-vertical-chart.builder.ts @@ -1,4 +1,4 @@ -import { Injectable, ElementRef } from '@angular/core'; +import { Injectable, ElementRef, inject } from '@angular/core'; import { select, Selection, EnterElement, BaseType } from 'd3-selection'; import { scaleBand, ScaleBand, scaleLinear, ScaleLinear } from 'd3-scale'; @@ -38,19 +38,25 @@ export interface IBarVerticalChartBuilder { providedIn: 'root', }) export class BarVerticalChartBuilder extends PcacChart { + override axisBuilder: PcacAxisBuilder; + override gridBuilder: PcacGridBuilder; + override transitionService: PcacTransitionService; + override tooltipBuilder: PcacTooltipBuilder; + override colorService: PcacColorService; + private xScaleStacked!: ScaleBand; private xScaleGrouped!: ScaleBand; private yScale!: ScaleLinear; private barClickedSource = new Subject(); barClicked$ = this.barClickedSource.asObservable(); - constructor( - public override axisBuilder: PcacAxisBuilder, - public override gridBuilder: PcacGridBuilder, - public override transitionService: PcacTransitionService, - public override tooltipBuilder: PcacTooltipBuilder, - public override colorService: PcacColorService - ) { + constructor() { + const axisBuilder = inject(PcacAxisBuilder); + const gridBuilder = inject(PcacGridBuilder); + const transitionService = inject(PcacTransitionService); + const tooltipBuilder = inject(PcacTooltipBuilder); + const colorService = inject(PcacColorService); + super( axisBuilder, gridBuilder, @@ -58,6 +64,12 @@ export class BarVerticalChartBuilder extends PcacChart { tooltipBuilder, colorService ); + this.axisBuilder = axisBuilder; + this.gridBuilder = gridBuilder; + this.transitionService = transitionService; + this.tooltipBuilder = tooltipBuilder; + this.colorService = colorService; + } buildChart(chartElm: ElementRef, config: PcacBarVerticalChartConfig): void { diff --git a/projects/pioneer-charts/src/lib/bar-chart/bar-vertical-chart/bar-vertical-chart.component.ts b/projects/pioneer-charts/src/lib/bar-chart/bar-vertical-chart/bar-vertical-chart.component.ts index a228d83..ee804a3 100644 --- a/projects/pioneer-charts/src/lib/bar-chart/bar-vertical-chart/bar-vertical-chart.component.ts +++ b/projects/pioneer-charts/src/lib/bar-chart/bar-vertical-chart/bar-vertical-chart.component.ts @@ -1,14 +1,4 @@ -import { - Component, - Input, - ElementRef, - ViewChild, - OnChanges, - EventEmitter, - Output, - HostListener, - ViewEncapsulation -} from '@angular/core'; +import { Component, Input, ElementRef, ViewChild, OnChanges, EventEmitter, Output, HostListener, ViewEncapsulation, inject } from '@angular/core'; import { BarVerticalChartBuilder } from './bar-vertical-chart.builder'; import { PcacBarVerticalChartConfig } from './bar-vertical-chart.model'; import { PcacData } from '../../core'; @@ -21,15 +11,15 @@ import { PcacData } from '../../core'; standalone: true }) export class PcacBarVerticalChartComponent implements OnChanges { + private chartBuilder = inject(BarVerticalChartBuilder); + @Input() config!: PcacBarVerticalChartConfig; @ViewChild('chart', { static: true }) chartElm!: ElementRef; @Output() barClicked: EventEmitter = new EventEmitter(); private resizeWindowTimeout: any; - constructor( - private chartBuilder: BarVerticalChartBuilder - ) { + constructor() { this.chartBuilder.barClicked$.subscribe(data => { this.barClicked.emit(data); }); diff --git a/projects/pioneer-charts/src/lib/core/chart.ts b/projects/pioneer-charts/src/lib/core/chart.ts index 41b2385..200ff42 100644 --- a/projects/pioneer-charts/src/lib/core/chart.ts +++ b/projects/pioneer-charts/src/lib/core/chart.ts @@ -5,7 +5,7 @@ import { PcacGridBuilder } from './grid.builder'; import { PcacChartConfig } from './chart.model'; import { PcacColorService } from './color.service'; import { select } from 'd3-selection'; -import { ElementRef, Injectable } from '@angular/core'; +import { ElementRef, Injectable, inject } from '@angular/core'; import { PcacData } from '.'; import { PcacTransitionService } from './transition.service'; import { PcacTooltipBuilder } from './tooltip.builder'; @@ -14,21 +14,19 @@ import { PcacTooltipBuilder } from './tooltip.builder'; providedIn: 'root', }) export class PcacChart { + axisBuilder = inject(PcacAxisBuilder); + gridBuilder = inject(PcacGridBuilder); + transitionService = inject(PcacTransitionService); + tooltipBuilder = inject(PcacTooltipBuilder); + colorService = inject(PcacColorService); + margin = { top: 8, right: 16, bottom: 20, left: 40 }; svg: Selection | any; // Typing? width = 400; height = 400; colors = [] as string[]; startData = [] as any[]; // TODO: Strongly type - endData = [] as any[]; // TODO: Strongly type - - constructor( - public axisBuilder: PcacAxisBuilder, - public gridBuilder: PcacGridBuilder, - public transitionService: PcacTransitionService, - public tooltipBuilder: PcacTooltipBuilder, - public colorService: PcacColorService - ) { } + endData = [] as any[]; /** * Prior to building a chart, we need to initialize the state of the chart diff --git a/projects/pioneer-charts/src/lib/line-area-chart/line-area-chart.builder.ts b/projects/pioneer-charts/src/lib/line-area-chart/line-area-chart.builder.ts index 711b963..d4aa9fd 100644 --- a/projects/pioneer-charts/src/lib/line-area-chart/line-area-chart.builder.ts +++ b/projects/pioneer-charts/src/lib/line-area-chart/line-area-chart.builder.ts @@ -1,4 +1,4 @@ -import { Injectable, ElementRef } from '@angular/core'; +import { Injectable, ElementRef, inject } from '@angular/core'; import { ScaleTime, scaleTime } from 'd3'; import { transition } from 'd3-transition'; @@ -27,6 +27,12 @@ import { PcacData, PcacFormatEnum } from '../core/chart.model'; providedIn: 'root', }) export class LineAreaChartBuilder extends PcacChart { + override axisBuilder: PcacAxisBuilder; + override gridBuilder: PcacGridBuilder; + override transitionService: PcacTransitionService; + override tooltipBuilder: PcacTooltipBuilder; + override colorService: PcacColorService; + private line!: Line<[number, number]>; private area!: Area<[number, number]>; private xScale!: ScaleLinear | ScaleTime; @@ -35,13 +41,13 @@ export class LineAreaChartBuilder extends PcacChart { private config!: PcacLineAreaChartConfig; dotClicked$ = this.dotClickedSource.asObservable(); - constructor( - public override axisBuilder: PcacAxisBuilder, - public override gridBuilder: PcacGridBuilder, - public override transitionService: PcacTransitionService, - public override tooltipBuilder: PcacTooltipBuilder, - public override colorService: PcacColorService - ) { + constructor() { + const axisBuilder = inject(PcacAxisBuilder); + const gridBuilder = inject(PcacGridBuilder); + const transitionService = inject(PcacTransitionService); + const tooltipBuilder = inject(PcacTooltipBuilder); + const colorService = inject(PcacColorService); + super( axisBuilder, gridBuilder, @@ -49,6 +55,12 @@ export class LineAreaChartBuilder extends PcacChart { tooltipBuilder, colorService ); + this.axisBuilder = axisBuilder; + this.gridBuilder = gridBuilder; + this.transitionService = transitionService; + this.tooltipBuilder = tooltipBuilder; + this.colorService = colorService; + } buildChart(chartElm: ElementRef, config: PcacLineAreaChartConfig): void { diff --git a/projects/pioneer-charts/src/lib/line-area-chart/line-area-chart.component.ts b/projects/pioneer-charts/src/lib/line-area-chart/line-area-chart.component.ts index 4ad2af4..6c9ca49 100644 --- a/projects/pioneer-charts/src/lib/line-area-chart/line-area-chart.component.ts +++ b/projects/pioneer-charts/src/lib/line-area-chart/line-area-chart.component.ts @@ -1,14 +1,4 @@ -import { - Component, - Input, - ViewChild, - ElementRef, - EventEmitter, - Output, - HostListener, - ViewEncapsulation, - SimpleChanges -} from '@angular/core'; +import { Component, Input, ViewChild, ElementRef, EventEmitter, Output, HostListener, ViewEncapsulation, SimpleChanges, inject } from '@angular/core'; import { PcacLineAreaChartConfig } from './line-area-chart.model'; import { LineAreaChartBuilder } from './line-area-chart.builder'; @@ -22,15 +12,15 @@ import { PcacData } from '../core'; standalone: true }) export class PcacLineAreaChartComponent { + private chartBuilder = inject(LineAreaChartBuilder); + @Input() config!: PcacLineAreaChartConfig; @ViewChild('chart', { static: true }) chartElm!: ElementRef; @Output() dotClicked: EventEmitter = new EventEmitter(); private resizeWindowTimeout: any; - constructor( - private chartBuilder: LineAreaChartBuilder - ) { + constructor() { this.chartBuilder.dotClicked$.subscribe(data => { this.dotClicked.emit(data); }); diff --git a/projects/pioneer-charts/src/lib/pie-chart/pie-chart.builder.ts b/projects/pioneer-charts/src/lib/pie-chart/pie-chart.builder.ts index 8a77a5a..53e8fec 100644 --- a/projects/pioneer-charts/src/lib/pie-chart/pie-chart.builder.ts +++ b/projects/pioneer-charts/src/lib/pie-chart/pie-chart.builder.ts @@ -1,4 +1,4 @@ -import { Injectable, ElementRef } from '@angular/core'; +import { Injectable, ElementRef, inject } from '@angular/core'; /** * D3 @@ -28,6 +28,12 @@ import { Subject } from 'rxjs'; providedIn: 'root', }) export class PieChartBuilder extends PcacChart { + override axisBuilder: PcacAxisBuilder; + override gridBuilder: PcacGridBuilder; + override transitionService: PcacTransitionService; + override tooltipBuilder: PcacTooltipBuilder; + override colorService: PcacColorService; + private radius!: number; private arcShape!: Arc | any; private arcOverShape!: Arc | any; @@ -35,13 +41,13 @@ export class PieChartBuilder extends PcacChart { private sliceClickedSource = new Subject(); sliceClicked$ = this.sliceClickedSource.asObservable(); - constructor( - public override axisBuilder: PcacAxisBuilder, - public override gridBuilder: PcacGridBuilder, - public override transitionService: PcacTransitionService, - public override tooltipBuilder: PcacTooltipBuilder, - public override colorService: PcacColorService - ) { + constructor() { + const axisBuilder = inject(PcacAxisBuilder); + const gridBuilder = inject(PcacGridBuilder); + const transitionService = inject(PcacTransitionService); + const tooltipBuilder = inject(PcacTooltipBuilder); + const colorService = inject(PcacColorService); + super( axisBuilder, gridBuilder, @@ -49,6 +55,12 @@ export class PieChartBuilder extends PcacChart { tooltipBuilder, colorService ); + this.axisBuilder = axisBuilder; + this.gridBuilder = gridBuilder; + this.transitionService = transitionService; + this.tooltipBuilder = tooltipBuilder; + this.colorService = colorService; + } buildChart(chartElm: ElementRef, config: PcacPieChartConfig): void { diff --git a/projects/pioneer-charts/src/lib/pie-chart/pie-chart.component.ts b/projects/pioneer-charts/src/lib/pie-chart/pie-chart.component.ts index 49a9098..8de7bae 100644 --- a/projects/pioneer-charts/src/lib/pie-chart/pie-chart.component.ts +++ b/projects/pioneer-charts/src/lib/pie-chart/pie-chart.component.ts @@ -1,14 +1,4 @@ -import { - Component, - Input, - ViewChild, - ElementRef, - OnChanges, - Output, - EventEmitter, - HostListener, - ViewEncapsulation -} from '@angular/core'; +import { Component, Input, ViewChild, ElementRef, OnChanges, Output, EventEmitter, HostListener, ViewEncapsulation, inject } from '@angular/core'; import { PcacPieChartConfig } from './pie-chart.model'; import { PieChartBuilder } from './pie-chart.builder'; import { PcacData } from '../core'; @@ -21,15 +11,15 @@ import { PcacData } from '../core'; standalone: true }) export class PcacPieChartComponent implements OnChanges { + private chartBuilder = inject(PieChartBuilder); + @Input() config!: PcacPieChartConfig; @ViewChild('chart', { static: true }) chartElm!: ElementRef; @Output() sliceClicked: EventEmitter = new EventEmitter(); private resizeWindowTimeout: any; - constructor( - private chartBuilder: PieChartBuilder - ) { + constructor() { this.chartBuilder.sliceClicked$.subscribe(data => { this.sliceClicked.emit(data); });