work on responsive design

second-slip · Aug 1, 2024 · 4818b88 · 4818b88
1 parent 2c5c467
commit 4818b88
Show file tree

Hide file tree

Showing 18 changed files with 64 additions and 44 deletions.
diff --git a/src/app/age-analysis-line/age-analysis-line.component.html b/src/app/age-analysis-line/age-analysis-line.component.html
@@ -1,9 +1,9 @@
 @if (loaded()) {
   <h4 class="centre">Bowling average with age analysis</h4>
 
-<div class="chart">
-  <canvas baseChart [type]="'line'" [legend]="true" [datasets]="ageAnalysisData.datasets"
+
+  <canvas class="chart" baseChart [type]="'line'" [legend]="true" [datasets]="ageAnalysisData.datasets"
     [labels]="ageAnalysisData.labels" [options]="lineChartOptions">
   </canvas>
-</div>
+
 }
diff --git a/src/app/age-analysis-line/age-analysis-line.component.ts b/src/app/age-analysis-line/age-analysis-line.component.ts
@@ -90,7 +90,7 @@ export class AgeAnalysisLineComponent {
   // }
 
   public lineChartOptions: ChartConfiguration<'line'>['options'] = {
-    responsive: true,
+    responsive: true, maintainAspectRatio: false,
     devicePixelRatio: 4,
     plugins: {
       legend: {

diff --git a/src/app/ave-strike-multi-axis-line/ave-strike-multi-axis-line.component.html b/src/app/ave-strike-multi-axis-line/ave-strike-multi-axis-line.component.html
@@ -3,9 +3,9 @@ <h4 class="centre">Bowling average & strike rate</h4>
 
 <p class="centre">Multiple y-axes chart</p>
 
-<div class="chart">
-    <canvas baseChart [type]="'line'" [legend]="true" [datasets]="bowlingAverageStrikeData.datasets"
-        [labels]="bowlingAverageStrikeData.labels" [options]="lineChartOptions" [plugins]="chartPlugins">
-    </canvas>
-</div>
+
+<canvas class="chart" baseChart [type]="'line'" [legend]="true" [datasets]="bowlingAverageStrikeData.datasets"
+    [labels]="bowlingAverageStrikeData.labels" [options]="lineChartOptions" [plugins]="chartPlugins">
+</canvas>
+
 }
diff --git a/src/app/ave-strike-multi-axis-line/ave-strike-multi-axis-line.component.ts b/src/app/ave-strike-multi-axis-line/ave-strike-multi-axis-line.component.ts
@@ -71,7 +71,8 @@ export class AveStrikeMultiAxisLineComponent implements OnInit {
 
   public lineChartOptions: ChartConfiguration<'line'>['options'] = {
     devicePixelRatio: 4,
-    responsive: true,
+    responsive: true, 
+    maintainAspectRatio: false,
     plugins: {
       // title: {
       //   display: true,

diff --git a/src/app/cumulative-ave-line/cumulative-ave-line.component.html b/src/app/cumulative-ave-line/cumulative-ave-line.component.html
@@ -1,7 +1,7 @@
 @if (loaded()) {
 <h4 class="centre">Bowling average</h4>
 <div class="graph">
-    <canvas baseChart [type]="'line'" [legend]="true" [datasets]="bowlingAverageData.datasets"
+    <canvas class="chart" baseChart [type]="'line'" [legend]="true" [datasets]="bowlingAverageData.datasets"
         [labels]="bowlingAverageData.labels" [options]="lineChartOptions">
     </canvas>
 </div>

diff --git a/src/app/cumulative-ave-line/cumulative-ave-line.component.ts b/src/app/cumulative-ave-line/cumulative-ave-line.component.ts
@@ -57,7 +57,7 @@ export class CumulativeAveLineComponent {
   }
 
   public lineChartOptions: ChartConfiguration<'line'>['options'] = {
-    responsive: true,
+    responsive: true, maintainAspectRatio: false,
     devicePixelRatio: 4,
     plugins: {
       legend: {

diff --git a/src/app/economy-rate/economy-rate.component.html b/src/app/economy-rate/economy-rate.component.html
@@ -1,9 +1,8 @@
 @if (loaded()) {
 <h4 class="centre">Economy rate</h4>
 
-<div class="chart">
-  <canvas baseChart [type]="'line'" [legend]="true" [datasets]="bowlingEconomyData.datasets"
-    [labels]="bowlingEconomyData.labels" [options]="lineChartOptions">
-  </canvas>
-</div>
+<canvas class="chart" baseChart [type]="'line'" [legend]="true" [datasets]="bowlingEconomyData.datasets"
+  [labels]="bowlingEconomyData.labels" [options]="lineChartOptions">
+</canvas>
+
 }
diff --git a/src/app/economy-rate/economy-rate.component.ts b/src/app/economy-rate/economy-rate.component.ts
@@ -53,6 +53,7 @@ export class EconomyRateComponent {
 
   public lineChartOptions: ChartConfiguration<'line'>['options'] = {
     responsive: true,
+    maintainAspectRatio: false,
     devicePixelRatio: 4,
     plugins: {
       legend: {

diff --git a/src/app/format-analysis-line/format-analysis-line.component.html b/src/app/format-analysis-line/format-analysis-line.component.html
@@ -3,9 +3,8 @@ <h4 class="centre">Bowling average with format analysis</h4>
 
 <p class="centre">After the 2015 World Cup James Anderson specialised in first-class cricket.</p>
 
-<div class="chart">
-  <canvas baseChart [type]="'line'" [legend]="true" [datasets]="formatAnalysisData.datasets"
+
+  <canvas class="chart" baseChart [type]="'line'" [legend]="true" [datasets]="formatAnalysisData.datasets"
     [labels]="formatAnalysisData.labels" [options]="lineChartOptions">
   </canvas>
-</div>
 }
diff --git a/src/app/format-analysis-line/format-analysis-line.component.ts b/src/app/format-analysis-line/format-analysis-line.component.ts
@@ -73,7 +73,7 @@ export class FormatAnalysisLineComponent {
 
 
   public lineChartOptions: ChartConfiguration<'line'>['options'] = {
-    responsive: true,
+    responsive: true, maintainAspectRatio: false,
     devicePixelRatio: 4,
     plugins: {
       legend: {

diff --git a/src/app/strike-rate/strike-rate.component.html b/src/app/strike-rate/strike-rate.component.html
@@ -1,11 +1,11 @@
 @if (loaded()) {
 <h4 class="centre">Strike rate</h4>
 
-<div class="chart">
-  <canvas baseChart [type]="'line'" [legend]="true" [datasets]="bowlingStrikeData.datasets"
+
+  <canvas class="chart" baseChart [type]="'line'" [legend]="true" [datasets]="bowlingStrikeData.datasets"
     [labels]="bowlingStrikeData.labels" [options]="lineChartOptions" [plugins]="chartPlugins">
   </canvas>
-</div>
+
 
 <section>
   <p class="alert alert-info">

diff --git a/src/app/strike-rate/strike-rate.component.ts b/src/app/strike-rate/strike-rate.component.ts
@@ -72,7 +72,7 @@ export class StrikeRateComponent implements OnInit {
           min: this.axis()
         }
       },
-      responsive: true,
+      responsive: true, maintainAspectRatio: false,
       devicePixelRatio: 4,
       plugins: {
         legend: {
@@ -109,6 +109,7 @@ export class StrikeRateComponent implements OnInit {
     //   alert('k')
     //   this.chart?.chart?.resize();//.update();
     // },
+    maintainAspectRatio: false,
     devicePixelRatio: 4,
     responsive: true,
     plugins: {

diff --git a/src/app/wickets-opponent-bar/wickets-opponent-bar.component.html b/src/app/wickets-opponent-bar/wickets-opponent-bar.component.html
@@ -1,11 +1,11 @@
 @if (loaded()) {
 <h4 class="centre">Matches & wickets taken by opposition</h4>
 
-<div class="graph">
-    <canvas baseChart [type]="'bar'" [legend]="true" [datasets]="wicketsData.datasets" [labels]="wicketsData.labels"
+
+    <canvas class="chart" baseChart [type]="'bar'" [legend]="true" [datasets]="wicketsData.datasets" [labels]="wicketsData.labels"
         [options]="barChartOptions" [plugins]="chartPlugins">
     </canvas>
-</div>
+
 
 <section>
     <p class="alert alert-info icon-text">

diff --git a/src/app/wickets-opponent-bar/wickets-opponent-bar.component.ts b/src/app/wickets-opponent-bar/wickets-opponent-bar.component.ts
@@ -81,6 +81,7 @@ export class WicketsOpponentBarComponent {
 
   public barChartOptions: ChartConfiguration<'bar'>['options'] = {
     responsive: true,
+    maintainAspectRatio: false,
     devicePixelRatio: 4,
     indexAxis: 'y',
     plugins: {

diff --git a/src/app/wkts-match/wkts-match.component.css b/src/app/wkts-match/wkts-match.component.css
@@ -1,4 +1,4 @@
-canvas {
+canvas class="chart" {
     box-sizing: initial;
 }
 

diff --git a/src/app/wkts-match/wkts-match.component.html b/src/app/wkts-match/wkts-match.component.html
@@ -1,16 +1,16 @@
 @if (loaded()) {
-<h4 class="centre">Wickets per Test match</h4>
-<div class="chart full-scree" id="gh">
-  <button mat-flat-button (click)="toggleBar()">{{btnText()}}</button>
-  <button mat-flat-button id="fs-doc-button" (click)="toggleFullscreen()">Toggle fullscreen</button>
-  <!-- <button mat-fab aria-label="Example icon button with a delete icon">
+<!-- <h4 class="centre">Wickets per Test match</h4> -->
+<!-- <div id="gh"> -->
+<!-- <button mat-flat-button (click)="toggleBar()">{{btnText()}}</button>
+  <button mat-flat-button id="fs-doc-button" (click)="toggleFullscreen()">Toggle fullscreen</button> -->
+<!-- <button mat-fab aria-label="Example icon button with a delete icon">
     <mat-icon>delete</mat-icon>
   </button> -->
 
-  <canvas baseChart [type]="'bar'" [legend]="true" [datasets]="formatAnalysisData.chartData"
-    [labels]="formatAnalysisData.chartLabels" [options]="barChartOptions">
-  </canvas>
-</div>
+<canvas class="chart" baseChart [type]="'bar'" [legend]="true" [datasets]="formatAnalysisData.chartData"
+  [labels]="formatAnalysisData.chartLabels" [options]="barChartOptions">
+</canvas>
+<!-- </div> -->
 
 <section>
   <p class="alert alert-info">

diff --git a/src/app/wkts-match/wkts-match.component.ts b/src/app/wkts-match/wkts-match.component.ts
@@ -16,8 +16,9 @@ import { MatIconModule } from '@angular/material/icon';
 export class WktsMatchComponent {
   @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
 
-  @HostListener('window:resize', ['$event.target.innerWidth'])
-  onResize() {
+  @HostListener('window:resize', ['$event.target.innerHeight'])
+  onResize() { //event: any) {
+    // console.log(event)
     this.chart?.chart?.resize();
   }
 
@@ -99,6 +100,7 @@ export class WktsMatchComponent {
   public barChartOptions: ChartConfiguration<'bar'>['options'] = {
     devicePixelRatio: 4,
     responsive: true,
+    maintainAspectRatio: false,
     scales: {
       y: {
         stacked: false

diff --git a/src/styles.css b/src/styles.css
@@ -8,10 +8,6 @@ body {
     font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
-.chart {
-    width: 100%;
-}
-
 .centre {
     text-align: center;
 }
@@ -64,6 +60,11 @@ body {
 
 /* Small devices (up to 768px) */
 @media only screen and (max-width: 666px) {
+    .chart {
+        max-height: 350px;
+        width: 100%;
+    }
+
     .container {
         padding-top: 10%;
         margin: 2% 1% 5%;
@@ -86,6 +87,11 @@ body {
 
 /* Larger devices (769px and up) */
 @media only screen and (min-width: 667px) {
+    .chart {
+        max-height: 350px;
+        width: 100%;
+    }
+
     .container {
         padding-top: 8%;
         margin: 2% 4% 5%;
@@ -103,6 +109,11 @@ body {
 
 /* Larger devices (769px and up) */
 @media only screen and (min-width: 769px) {
+    .chart {
+        max-height: 350px;
+        width: 100%;
+    }
+
     .container {
         padding-top: 5%;
         margin: 2% 4% 5%;
@@ -120,6 +131,11 @@ body {
 
 /* Larger devices (769px and up) */
 @media only screen and (min-width: 992px) {
+    .chart {
+        max-height: 500px;
+        width: 100%;
+    }
+
     .container {
         padding-top: 6%;
         margin: 2% 15% 5%;