economy rate chart fix and data label added

src/app/data-fetch.service.ts

@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { IChartData } from './i-chart-data.dto';
-import { cumulativeAverageData, cumulativeStrikeRateData, cumulativeEconomyData, wicketsByTeamData, ageAnalysisData, formatAnalysisData, wicketsPerMatch } from '../assets/chartData';
+import { cumulativeAverageData, cumulativeStrikeRateData, cumulativeEconomyData, ageAnalysisData, formatAnalysisData, wicketsPerMatch } from '../assets/chartData';
+import { wicketsByTeamData } from '../../dist/cricket-charts/browser/assets/chartData';
 
 @Injectable({
   providedIn: 'root'

src/app/economy-rate/economy-rate.component.html

@@ -1,6 +1,7 @@
 @if (loaded()) {
 <h4 class="centre">Economy rate</h4>
+<p class="centre">James Anderson's economy rate is 2.79. This is how it changed over his career.</p>
 <canvas class="chart" baseChart [type]="'line'" [legend]="true" [datasets]="bowlingEconomyData.datasets"
-  [labels]="bowlingEconomyData.labels" [options]="lineChartOptions">
+  [labels]="bowlingEconomyData.labels" [options]="lineChartOptions" [plugins]="chartPlugins">
 </canvas>
 }

src/app/economy-rate/economy-rate.component.ts

@@ -3,6 +3,7 @@ import { ChartConfiguration, ChartData } from 'chart.js';
 import { IChartData } from '../i-chart-data.dto';
 import { BaseChartDirective } from 'ng2-charts';
 import { DataFetchService } from '../data-fetch.service';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 
 @Component({
   selector: 'app-economy-rate',
@@ -19,6 +20,7 @@ export class EconomyRateComponent {
     this.chart?.chart?.resize();
   }
 
+  public chartPlugins = [ChartDataLabels];
   public loaded = signal(false);
 
   public bowlingEconomyData: ChartData<'line'> = {
@@ -44,6 +46,9 @@ export class EconomyRateComponent {
         next: (data: IChartData) => {
           this.bowlingEconomyData.labels = data.chartLabels,
             this.bowlingEconomyData.datasets[0].data = data.chartData[0]
+
+          console.log(this.bowlingEconomyData.labels.length)
+          console.log(this.bowlingEconomyData.datasets[0].data.length)
         },
         error: (e) => { console.log(e); }
       });
@@ -58,6 +63,18 @@ export class EconomyRateComponent {
     plugins: {
       legend: {
         position: 'bottom'
+      },
+      datalabels: {
+        borderRadius: 4,
+        color: 'black',
+        font: {
+          weight: 'bold'
+        },
+        padding: 6,
+        offset: 0,
+        align: 'top',
+        anchor: 'end',
+        formatter: (val, ctx) => ctx.dataIndex === this.bowlingEconomyData.datasets[0].data.length - 1 ? val : ''
       }
     },
     scales: {

src/app/ideas/ideas.component.html

@@ -33,6 +33,11 @@ <h3>Change log</h3>
                 <th style="width:85%">Change</th>
                 <th>Date</th>
             </tr>
+            <tr>
+                <td>Fix applied to economy rate chart.  Wrong data labels were in use.
+                </td>
+                <td>02/08/2024</td>
+            </tr>
             <tr>
                 <td>Bowling average charts moved into a tabs group design.
                 </td>