Refactor components to use Angular's inject function for dependency i…

…njection
PioneerCode · Nov 22, 2024 · bdca9f3 · bdca9f3
1 parent f861d27
commit bdca9f3
Show file tree

Hide file tree

Showing 14 changed files with 119 additions and 112 deletions.
diff --git 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
@@ -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
@@ -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/...rts-web/src/app/pages/docs/components/charts/line-area-chart/line-area-chart.component.ts b/...rts-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 = `<pcac-line-area-chart [config]="config" (dotClicked)="onClicked($event)"></pcac-line-area-chart>`;
   importCode = `import { PcacLineAreaChartModule } from '@pioneer-code/pioneer-charts';`;
-  constructor(public pcService: AppService) { }
 }
 
diff --git a/.../pioneer-charts-web/src/app/pages/docs/components/charts/pie-chart/pie-chart.component.ts b/.../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 = `<pcac-pie-chart [config]="config" (sliceClicked)="onClicked($event)"></pcac-pie-chart>`;
   importCode = `import { PcacPieChartModule } from '@pioneer-code/pioneer-charts';`;
-
-  constructor(public pcService: AppService) { }
 }
diff --git a/...cts/pioneer-charts/src/lib/bar-chart/bar-horizontal-chart/bar-horizontal-chart.builder.ts b/...cts/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<Element |
   providedIn: 'root',
 })
 export class BarHorizontalChartBuilder extends PcacChart {
+  override axisBuilder: PcacAxisBuilder;
+  override gridBuilder: PcacGridBuilder;
+  override transitionService: PcacTransitionService;
+  override tooltipBuilder: PcacTooltipBuilder;
+  override colorService: PcacColorService;
+
 
   private xScale!: ScaleLinear<number, number>;
   private yScaleStacked!: ScaleBand<string>;
@@ -43,20 +49,26 @@ 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,
       transitionService,
       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/...s/pioneer-charts/src/lib/bar-chart/bar-horizontal-chart/bar-horizontal-chart.component.ts b/...s/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<PcacData> = 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
@@ -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,26 +38,38 @@ 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<string>;
   private xScaleGrouped!: ScaleBand<string>;
   private yScale!: ScaleLinear<number, number>;
   private barClickedSource = new Subject<PcacData>();
   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,
       transitionService,
       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
@@ -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<PcacData> = 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
@@ -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<BaseType, {}, HTMLElement, any> | 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
@@ -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<number, number> | ScaleTime<number, number, never>;
@@ -35,20 +41,26 @@ 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,
       transitionService,
       tooltipBuilder,
       colorService
     );
+    this.axisBuilder = axisBuilder;
+    this.gridBuilder = gridBuilder;
+    this.transitionService = transitionService;
+    this.tooltipBuilder = tooltipBuilder;
+    this.colorService = colorService;
+
   }
 
   buildChart(chartElm: ElementRef, config: PcacLineAreaChartConfig): void {