Fixes AB#446: Name property not defined for monitor charts

cRui861 · gingi · commit aa70a6dcdaa7 · 2022-12-16T08:42:11.000-08:00
diff --git a/src/app/components/account/monitoring/monitor-chart/monitor-chart.component.ts b/src/app/components/account/monitoring/monitor-chart/monitor-chart.component.ts
@@ -24,12 +24,15 @@ const aggregationAttributes = {
     [MonitorChartAggregation.Avg]: "average",
     [MonitorChartAggregation.Sum]: "total",
 };
+
+let idCounter = 0;
 @Component({
     selector: "bl-monitor-chart",
     templateUrl: "monitor-chart.html",
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MonitorChartComponent implements OnChanges, OnDestroy {
+    @Input() public headerId = `monitor-chart-header-id-${idCounter++}`;
     @Input() public chartType: ChartType = ChartType.Line;
     @Input() public metrics: MonitorChartType;
     @Input() public preview: boolean = false;
@@ -77,11 +80,11 @@ export class MonitorChartComponent implements OnChanges, OnDestroy {
             }),
         );
 
-        const metrics = combineLatest(
+        const metrics = combineLatest([
             this._metrics.pipe(filter(isNotNullOrUndefined)),
             this._timeRange.pipe(filter(isNotNullOrUndefined)),
             this.accountService.currentAccountId,
-        ).pipe(
+        ]).pipe(
             takeUntil(this._destroy),
             tap(() => {
                 this.chartError = null;
diff --git a/src/app/components/account/monitoring/monitor-chart/monitor-chart.html b/src/app/components/account/monitoring/monitor-chart/monitor-chart.html
@@ -1,17 +1,21 @@
 <ng-container *ngIf="!preview">
     <div class="header">
-        <h2 tabindex="0">
+        <h2 tabindex="0" id="{{headerId}}">
             {{ 'account-monitoring.' + metrics | i18n }}
         </h2>
-
-
         <div class="aggregation" *ngIf="aggregation" tabindex="0">
             {{aggregation}}
         </div>
     </div>
     <ng-container *ngIf="isChartReady">
         <div class="chart-container" tabindex="0" aria-label="graph">
-            <canvas blChart [datasets]="datasets" [options]="options" [chartType]="chartType" [colors]="colors"></canvas>
+            <canvas blChart
+                [datasets]="datasets"
+                [options]="options"
+                [chartType]="chartType"
+                [colors]="colors"
+                [attr.aria-labelledby]="headerId">
+            </canvas>
         </div>
         <div class="legend">
             <div class="legend-item" *ngFor="let dataset of datasets;trackBy: trackDataSet;let index=index" tabindex="0">
