From 829795c7c11c47db4e91593bece103b4b53a9f33 Mon Sep 17 00:00:00 2001
From: Andrew Cross <andrew-stuart-cross@outlook.com>
Date: Fri, 2 Aug 2024 15:29:45 +0100
Subject: [PATCH] add y-axis on right-hand side (but without ticks)

---
 .../age-analysis-line.component.ts            | 19 ++++++++
 .../cumulative-ave-line.component.ts          | 19 ++++++++
 .../economy-rate/economy-rate.component.ts    | 21 ++++++++-
 .../format-analysis-line.component.ts         | 19 ++++++++
 src/app/strike-rate/strike-rate.component.ts  | 45 ++++++++++++++++++-
 5 files changed, 120 insertions(+), 3 deletions(-)

diff --git a/src/app/age-analysis-line/age-analysis-line.component.ts b/src/app/age-analysis-line/age-analysis-line.component.ts
index feb006a..57ef467 100644
--- a/src/app/age-analysis-line/age-analysis-line.component.ts
+++ b/src/app/age-analysis-line/age-analysis-line.component.ts
@@ -104,6 +104,25 @@ export class AgeAnalysisLineComponent {
       //   display: true,
       //   text: 'JM Anderson',
       // }
+    },
+    scales: {
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        ticks: {
+          display: false
+        },
+        // grid line settings
+        grid: {
+          drawOnChartArea: false, // only want the grid lines for one axis to show up
+        },
+      }
     }
   };
 }
diff --git a/src/app/cumulative-ave-line/cumulative-ave-line.component.ts b/src/app/cumulative-ave-line/cumulative-ave-line.component.ts
index cff65b6..a797ce5 100644
--- a/src/app/cumulative-ave-line/cumulative-ave-line.component.ts
+++ b/src/app/cumulative-ave-line/cumulative-ave-line.component.ts
@@ -72,6 +72,25 @@ export class CumulativeAveLineComponent {
       //   display: true,
       //   text: 'JM Anderson',
       // }
+    },
+    scales: {
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        ticks: {
+          display: false
+        },
+        // grid line settings
+        grid: {
+          drawOnChartArea: false, // only want the grid lines for one axis to show up
+        },
+      }
     }
   };
 }
\ No newline at end of file
diff --git a/src/app/economy-rate/economy-rate.component.ts b/src/app/economy-rate/economy-rate.component.ts
index a1314b5..bffa7e3 100644
--- a/src/app/economy-rate/economy-rate.component.ts
+++ b/src/app/economy-rate/economy-rate.component.ts
@@ -18,7 +18,7 @@ export class EconomyRateComponent {
   onResize() {
     this.chart?.chart?.resize();
   }
-  
+
   public loaded = signal(false);
 
   public bowlingEconomyData: ChartData<'line'> = {
@@ -59,6 +59,25 @@ export class EconomyRateComponent {
       legend: {
         position: 'bottom'
       }
+    },
+    scales: {
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        ticks: {
+          display: false
+        },
+        // grid line settings
+        grid: {
+          drawOnChartArea: false, // only want the grid lines for one axis to show up
+        },
+      }
     }
   };
 }
\ No newline at end of file
diff --git a/src/app/format-analysis-line/format-analysis-line.component.ts b/src/app/format-analysis-line/format-analysis-line.component.ts
index 6c0c3c1..37389b4 100644
--- a/src/app/format-analysis-line/format-analysis-line.component.ts
+++ b/src/app/format-analysis-line/format-analysis-line.component.ts
@@ -87,6 +87,25 @@ export class FormatAnalysisLineComponent {
       //   display: true,
       //   text: 'JM Anderson',
       // }
+    },
+    scales: {
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        ticks: {
+          display: false
+        },
+        // grid line settings
+        grid: {
+          drawOnChartArea: false, // only want the grid lines for one axis to show up
+        },
+      }
     }
   };
 }
\ No newline at end of file
diff --git a/src/app/strike-rate/strike-rate.component.ts b/src/app/strike-rate/strike-rate.component.ts
index c7e2c57..448f79f 100644
--- a/src/app/strike-rate/strike-rate.component.ts
+++ b/src/app/strike-rate/strike-rate.component.ts
@@ -34,7 +34,8 @@ export class StrikeRateComponent implements OnInit {
     datasets: [
       {
         data: [],
-        label: 'cumulative strike rate'
+        label: 'cumulative strike rate',
+        yAxisID: 'y'
       }
     ]
   };
@@ -68,9 +69,30 @@ export class StrikeRateComponent implements OnInit {
       this.btnText.set('Reset axis');
     }
     this.lineChartOptions = {
+      // scales: {
+      //   y: {
+      //     min: this.axis()
+      //   }
+      // },
       scales: {
         y: {
-          min: this.axis()
+          min: this.axis(),
+          type: 'linear',
+          display: true,
+          position: 'left',
+        },
+        y1: {
+          min: this.axis(),
+          type: 'linear',
+          display: true,
+          position: 'right',
+          ticks: {
+            display: false
+          },
+          // grid line settings
+          grid: {
+            drawOnChartArea: false, // only want the grid lines for one axis to show up
+          },
         }
       },
       responsive: true, maintainAspectRatio: false,
@@ -110,6 +132,25 @@ export class StrikeRateComponent implements OnInit {
     //   alert('k')
     //   this.chart?.chart?.resize();//.update();
     // },
+    scales: {
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        ticks: {
+          display: false
+        },
+        // grid line settings
+        grid: {
+          drawOnChartArea: false, // only want the grid lines for one axis to show up
+        },
+      },
+    },
     maintainAspectRatio: false,
     devicePixelRatio: 4,
     responsive: true,