refactor: fix typings when strictTemplates enabled (#1647)

* refactor: fix issues when `strictTemplates` enabled * refactor: fix `string` issue for `seriesName` * refactor: type `activeEntries` & adjust `isActive()` * refactor: type `orientation` with `BarOrientation` * refactor: adjust type of `seriesName` to `StringOrNumberOrDate` * refactor: again type of `seriesName` to `StringOrNumberOrDate` * refactor: fix `this.seriesName` checks * style: fix Prettier issue * refactor: remove missed `group.name.toString()`
swimlane · Jul 8, 2021 · dbf0061 · dbf0061
1 parent 6a58d9f
commit dbf0061
Show file tree

Hide file tree

Showing 67 changed files with 413 additions and 309 deletions.
diff --git a/projects/swimlane/ngx-charts/src/lib/area-chart/area-chart-normalized.component.ts b/projects/swimlane/ngx-charts/src/lib/area-chart/area-chart-normalized.component.ts
@@ -7,7 +7,8 @@ import {
   ViewEncapsulation,
   ChangeDetectionStrategy,
   ContentChild,
-  TemplateRef
+  TemplateRef,
+  TrackByFunction
 } from '@angular/core';
 import { scaleLinear, scalePoint, scaleTime } from 'd3-scale';
 import { curveLinear } from 'd3-shape';
@@ -19,6 +20,7 @@ import { id } from '../utils/id';
 import { getUniqueXDomainValues, getScaleType } from '../common/domain.helper';
 import { ViewDimensions, LegendPosition, LegendOptions, ScaleType } from '../common/types';
 import { Series } from '../models/chart-data.model';
+import { SeriesType } from '../common/circle-series.component';
 
 @Component({
   selector: 'ngx-charts-area-chart-normalized',
@@ -83,7 +85,7 @@ import { Series } from '../models/chart-data.model';
               [scaleType]="scaleType"
               [activeEntries]="activeEntries"
               [gradient]="gradient"
-              normalized="true"
+              [normalized]="true"
               [curve]="curve"
               [animations]="animations"
             />
@@ -107,7 +109,7 @@ import { Series } from '../models/chart-data.model';
             <svg:g *ngFor="let series of results">
               <svg:g
                 ngx-charts-circle-series
-                type="stacked"
+                [type]="seriesType.Stacked"
                 [xScale]="xScale"
                 [yScale]="yScale"
                 [colors]="colors"
@@ -147,7 +149,7 @@ import { Series } from '../models/chart-data.model';
             [data]="series"
             [scaleType]="scaleType"
             [gradient]="gradient"
-            normalized="true"
+            [normalized]="true"
             [curve]="curve"
             [animations]="animations"
           />
@@ -213,6 +215,8 @@ export class AreaChartNormalizedComponent extends BaseChartComponent {
   filteredDomain: any;
   legendOptions: LegendOptions;
 
+  seriesType = SeriesType;
+
   timelineWidth: any;
   timelineHeight: number = 50;
   timelineXScale: any;
@@ -411,9 +415,9 @@ export class AreaChartNormalizedComponent extends BaseChartComponent {
     this.select.emit(data);
   }
 
-  trackBy(index: number, item: Series): any {
+  trackBy: TrackByFunction<Series> = (index: number, item: Series) => {
     return item.name;
-  }
+  };
 
   setColors(): void {
     let domain;

diff --git a/projects/swimlane/ngx-charts/src/lib/area-chart/area-chart-stacked.component.ts b/projects/swimlane/ngx-charts/src/lib/area-chart/area-chart-stacked.component.ts
@@ -18,6 +18,7 @@ import { BaseChartComponent } from '../common/base-chart.component';
 import { id } from '../utils/id';
 import { getUniqueXDomainValues, getScaleType } from '../common/domain.helper';
 import { ViewDimensions, LegendPosition, ScaleType, LegendOptions } from '../common/types';
+import { SeriesType } from '../common/circle-series.component';
 
 @Component({
   selector: 'ngx-charts-area-chart-stacked',
@@ -82,7 +83,7 @@ import { ViewDimensions, LegendPosition, ScaleType, LegendOptions } from '../com
               [scaleType]="scaleType"
               [gradient]="gradient"
               [activeEntries]="activeEntries"
-              stacked="true"
+              [stacked]="true"
               [curve]="curve"
               [animations]="animations"
             />
@@ -105,7 +106,7 @@ import { ViewDimensions, LegendPosition, ScaleType, LegendOptions } from '../com
             <svg:g *ngFor="let series of results; trackBy: trackBy">
               <svg:g
                 ngx-charts-circle-series
-                type="stacked"
+                [type]="seriesType.Stacked"
                 [xScale]="xScale"
                 [yScale]="yScale"
                 [colors]="colors"
@@ -145,7 +146,7 @@ import { ViewDimensions, LegendPosition, ScaleType, LegendOptions } from '../com
             [data]="series"
             [scaleType]="scaleType"
             [gradient]="gradient"
-            stacked="true"
+            [stacked]="true"
             [curve]="curve"
             [animations]="animations"
           />
@@ -222,6 +223,8 @@ export class AreaChartStackedComponent extends BaseChartComponent {
   timelineTransform: any;
   timelinePadding: number = 10;
 
+  seriesType = SeriesType;
+
   update(): void {
     super.update();
 
@@ -427,7 +430,7 @@ export class AreaChartStackedComponent extends BaseChartComponent {
   }
 
   trackBy(index, item): string {
-    return item.name;
+    return `${item.name}`;
   }
 
   setColors(): void {

diff --git a/projects/swimlane/ngx-charts/src/lib/area-chart/area-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/area-chart/area-chart.component.ts
@@ -7,7 +7,8 @@ import {
   HostListener,
   ChangeDetectionStrategy,
   ContentChild,
-  TemplateRef
+  TemplateRef,
+  TrackByFunction
 } from '@angular/core';
 import { scaleLinear, scalePoint, scaleTime } from 'd3-scale';
 import { curveLinear, CurveFactory } from 'd3-shape';
@@ -418,9 +419,9 @@ export class AreaChartComponent extends BaseChartComponent {
     this.select.emit(data);
   }
 
-  trackBy(index: number, item: Series): StringOrNumberOrDate {
+  trackBy: TrackByFunction<Series> = (index: number, item: Series) => {
     return item.name;
-  }
+  };
 
   setColors(): void {
     let domain;

diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts
@@ -6,7 +6,8 @@ import {
   EventEmitter,
   ChangeDetectionStrategy,
   ContentChild,
-  TemplateRef
+  TemplateRef,
+  TrackByFunction
 } from '@angular/core';
 import { trigger, style, animate, transition } from '@angular/animations';
 
@@ -17,7 +18,7 @@ import { ColorHelper } from '../common/color.helper';
 import { DataItem } from '../models/chart-data.model';
 
 import { BaseChartComponent } from '../common/base-chart.component';
-import { ViewDimensions, LegendPosition, ScaleType, LegendOptions } from '../common/types';
+import { ViewDimensions, LegendPosition, ScaleType, LegendOptions, BarOrientation } from '../common/types';
 
 @Component({
   selector: 'ngx-charts-bar-horizontal-2d',
@@ -39,7 +40,7 @@ import { ViewDimensions, LegendPosition, ScaleType, LegendOptions } from '../com
           [yScale]="groupScale"
           [data]="results"
           [dims]="dims"
-          orient="horizontal"
+          [orient]="barOrientation.Horizontal"
         ></svg:g>
         <svg:g
           ngx-charts-x-axis
@@ -169,6 +170,8 @@ export class BarHorizontal2DComponent extends BaseChartComponent {
   legendOptions: LegendOptions;
   dataLabelMaxWidth: any = { negative: 0, positive: 0 };
 
+  barOrientation = BarOrientation;
+
   update(): void {
     super.update();
 
@@ -286,9 +289,9 @@ export class BarHorizontal2DComponent extends BaseChartComponent {
     this.select.emit(data);
   }
 
-  trackBy(index: number, item: DataItem): string {
-    return item.name as any;
-  }
+  trackBy: TrackByFunction<DataItem> = (index: number, item: DataItem) => {
+    return item.name;
+  };
 
   setColors(): void {
     let domain;

diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts
@@ -6,7 +6,8 @@ import {
   EventEmitter,
   ChangeDetectionStrategy,
   ContentChild,
-  TemplateRef
+  TemplateRef,
+  TrackByFunction
 } from '@angular/core';
 import { trigger, style, animate, transition } from '@angular/animations';
 
@@ -18,6 +19,7 @@ import { Series } from '../models/chart-data.model';
 
 import { BaseChartComponent } from '../common/base-chart.component';
 import { ViewDimensions, LegendPosition, ScaleType, LegendOptions } from '../common/types';
+import { BarChartType } from './types/bar-chart-type.enum';
 
 @Component({
   selector: 'ngx-charts-bar-horizontal-normalized',
@@ -68,7 +70,7 @@ import { ViewDimensions, LegendPosition, ScaleType, LegendOptions } from '../com
         >
           <svg:g
             ngx-charts-series-horizontal
-            type="normalized"
+            [type]="barChartType.Normalized"
             [xScale]="xScale"
             [yScale]="yScale"
             [activeEntries]="activeEntries"
@@ -149,6 +151,7 @@ export class BarHorizontalNormalizedComponent extends BaseChartComponent {
   xAxisHeight: number = 0;
   yAxisWidth: number = 0;
   legendOptions: LegendOptions;
+  barChartType = BarChartType;
 
   update(): void {
     super.update();
@@ -231,9 +234,9 @@ export class BarHorizontalNormalizedComponent extends BaseChartComponent {
     this.select.emit(data);
   }
 
-  trackBy(index: number, item: Series): string {
-    return item.name as any;
-  }
+  trackBy: TrackByFunction<Series> = (index: number, item: Series) => {
+    return item.name;
+  };
 
   setColors(): void {
     let domain;

diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts
@@ -6,7 +6,8 @@ import {
   ViewEncapsulation,
   ChangeDetectionStrategy,
   ContentChild,
-  TemplateRef
+  TemplateRef,
+  TrackByFunction
 } from '@angular/core';
 import { trigger, style, animate, transition } from '@angular/animations';
 
@@ -17,6 +18,7 @@ import { ColorHelper } from '../common/color.helper';
 import { Series } from '../models/chart-data.model';
 import { BaseChartComponent } from '../common/base-chart.component';
 import { ViewDimensions, LegendPosition, ScaleType, LegendOptions } from '../common/types';
+import { BarChartType } from './types/bar-chart-type.enum';
 
 @Component({
   selector: 'ngx-charts-bar-horizontal-stacked',
@@ -68,7 +70,7 @@ import { ViewDimensions, LegendPosition, ScaleType, LegendOptions } from '../com
         >
           <svg:g
             ngx-charts-series-horizontal
-            type="stacked"
+            [type]="barChartType.Stacked"
             [xScale]="xScale"
             [yScale]="yScale"
             [colors]="colors"
@@ -157,6 +159,8 @@ export class BarHorizontalStackedComponent extends BaseChartComponent {
   legendOptions: LegendOptions;
   dataLabelMaxWidth: any = { negative: 0, positive: 0 };
 
+  barChartType = BarChartType;
+
   update(): void {
     super.update();
 
@@ -272,9 +276,9 @@ export class BarHorizontalStackedComponent extends BaseChartComponent {
     this.select.emit(data);
   }
 
-  trackBy(index: string, item: Series): any {
+  trackBy: TrackByFunction<Series> = (index: number, item: Series) => {
     return item.name;
-  }
+  };
 
   setColors(): void {
     let domain;

diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-label.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-label.component.ts
@@ -9,6 +9,7 @@ import {
   EventEmitter
 } from '@angular/core';
 import { formatLabel } from '../common/label.helper';
+import { BarOrientation } from '../common/types';
 
 @Component({
   selector: 'g[ngx-charts-bar-label]',
@@ -34,7 +35,7 @@ export class BarLabelComponent implements OnChanges {
   @Input() barY;
   @Input() barWidth;
   @Input() barHeight;
-  @Input() orientation;
+  @Input() orientation: BarOrientation;
 
   @Output() dimensionsChanged: EventEmitter<any> = new EventEmitter();
 

diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts
@@ -6,7 +6,8 @@ import {
   EventEmitter,
   ChangeDetectionStrategy,
   ContentChild,
-  TemplateRef
+  TemplateRef,
+  TrackByFunction
 } from '@angular/core';
 import { trigger, style, animate, transition } from '@angular/animations';
 import { scaleBand, scaleLinear } from 'd3-scale';
@@ -16,7 +17,7 @@ import { ColorHelper } from '../common/color.helper';
 import { DataItem } from '../models/chart-data.model';
 
 import { BaseChartComponent } from '../common/base-chart.component';
-import { ViewDimensions, LegendPosition, ScaleType, LegendOptions } from '../common/types';
+import { ViewDimensions, LegendPosition, ScaleType, LegendOptions, BarOrientation } from '../common/types';
 
 @Component({
   selector: 'ngx-charts-bar-vertical-2d',
@@ -38,7 +39,7 @@ import { ViewDimensions, LegendPosition, ScaleType, LegendOptions } from '../com
           [yScale]="valueScale"
           [data]="results"
           [dims]="dims"
-          orient="vertical"
+          [orient]="barOrientation.Vertical"
         ></svg:g>
         <svg:g
           ngx-charts-x-axis
@@ -166,6 +167,8 @@ export class BarVertical2DComponent extends BaseChartComponent {
   legendOptions: LegendOptions;
   dataLabelMaxHeight: any = { negative: 0, positive: 0 };
 
+  barOrientation = BarOrientation;
+
   update(): void {
     super.update();
 
@@ -292,9 +295,9 @@ export class BarVertical2DComponent extends BaseChartComponent {
     this.select.emit(data);
   }
 
-  trackBy(index: number, item: DataItem): any {
+  trackBy: TrackByFunction<DataItem> = (index: number, item: DataItem) => {
     return item.name;
-  }
+  };
 
   setColors(): void {
     let domain;