new buttons design

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>Bowling average charts moved into a tabs group design.
+                </td>
+                <td>02/08/2024</td>
+            </tr>
             <tr>
                 <td>Major change to responsive design: charts display better in small screens in portrait screen orientation.
                 </td>

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

@@ -1,15 +1,23 @@
 @if (loaded()) {
-<h4 class="centre">Strike rate</h4>
+<h4 class="centre">Bowling strike rate</h4>
+
 <canvas class="chart" baseChart [type]="'line'" [legend]="true" [datasets]="bowlingStrikeData.datasets"
   [labels]="bowlingStrikeData.labels" [options]="lineChartOptions" [plugins]="chartPlugins">
 </canvas>
-<section>
+
+<section class="chart-buttons centre">
+  <button mat-stroked-button matTooltip="Focus the scale to a new minimum of 53.  This hides the first 13 'outlier' innings to show the trend in the remaining 343
+    innings more clearly." [matTooltipHideDelay]="2000" (click)="focusAxis()">{{btnText()}}</button>
+</section>
+
+
+<!-- <section>
   <p class="alert alert-info">
     <button mat-flat-button (click)="focusAxis()">{{btnText()}}</button>
     Focus the scale to a new minimum of 53.<sup>[1]</sup>
   </p>
   <p class="footnote"><sup>1</sup> This hides the first 13 'outlier' innings to show the trend in the remaining 343
     innings more
     clearly.</p>
-</section>
+</section> -->
 }

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

@@ -6,11 +6,12 @@ import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { DataFetchService } from '../data-fetch.service';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-strike-rate',
   standalone: true,
-  imports: [BaseChartDirective, MatButtonModule, MatIconModule],
+  imports: [BaseChartDirective, MatButtonModule, MatIconModule, MatTooltipModule],
   templateUrl: './strike-rate.component.html',
   styleUrl: './strike-rate.component.css'
 })

src/app/wickets-opponent-bar/wickets-opponent-bar.component.html

@@ -5,12 +5,8 @@ <h4 class="centre">Matches & wickets taken by opposition</h4>
     [labels]="wicketsData.labels" [options]="barChartOptions" [plugins]="chartPlugins">
 </canvas>
 
-<section>
-    <p class="alert alert-info icon-text">
-        <button mat-flat-button (click)="toggle5w()">{{btnText()}}</button>
-        <mat-icon class="info-icon" aria-hidden="false" aria-label="information icon"
-            fontIcon="info_outline"></mat-icon>
-        Show or hide the five-wicket haul counts.
-    </p>
+<section class="chart-buttons centre">
+    <button mat-stroked-button matTooltip="Show or hide the five-wicket haul counts." [matTooltipHideDelay]="2000"
+        (click)="toggle5w()">{{btnText()}}</button>
 </section>
 }

src/app/wickets-opponent-bar/wickets-opponent-bar.component.ts

@@ -6,11 +6,12 @@ import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { DataFetchService } from '../data-fetch.service';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-wickets-opponent-bar',
   standalone: true,
-  imports: [BaseChartDirective, MatButtonModule, MatIconModule],
+  imports: [BaseChartDirective, MatButtonModule, MatIconModule, MatTooltipModule],
   templateUrl: './wickets-opponent-bar.component.html',
   styleUrl: './wickets-opponent-bar.component.css'
 })

src/styles.css

@@ -67,6 +67,11 @@ body {
     margin: 1%;
 }
 
+.tab-conent-top-padding {
+    /* padding: 3%; */
+    padding-top: 3%;
+}
+
 /* Small devices (up to 768px) */
 @media only screen and (max-width: 666px) {
     .chart {