work on fullscreen

second-slip · Aug 1, 2024 · d9643e1 · d9643e1
1 parent 1ad7611
commit d9643e1
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/src/app/wkts-match/wkts-match.component.css b/src/app/wkts-match/wkts-match.component.css
@@ -1,3 +1,15 @@
 canvas {
     box-sizing: initial;
+}
+
+
+.chart.full-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: auto;
+    background: lime;
+    z-index: 25;
 }
diff --git a/src/app/wkts-match/wkts-match.component.html b/src/app/wkts-match/wkts-match.component.html
@@ -1,6 +1,12 @@
 @if (loaded()) {
-<div class="chart">
-  <h4 class="centre">Wickets per Test match</h4>
+<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">
+    <mat-icon>delete</mat-icon>
+  </button> -->
+
   <canvas baseChart [type]="'bar'" [legend]="true" [datasets]="formatAnalysisData.chartData"
     [labels]="formatAnalysisData.chartLabels" [options]="barChartOptions">
   </canvas>
@@ -11,6 +17,6 @@ <h4 class="centre">Wickets per Test match</h4>
     <button mat-flat-button (click)="toggleBar()">{{btnText()}}</button>
     Hide the wicket count bars.<sup>[1]</sup>
   </p>
-    <p class="footnote"><sup>1</sup> This will show the trend more clearly (on a smaller y-axis scale).</p>
+  <p class="footnote"><sup>1</sup> This will show the trend more clearly (on a smaller y-axis scale).</p>
 </section>
 }
diff --git a/src/app/wkts-match/wkts-match.component.ts b/src/app/wkts-match/wkts-match.component.ts
@@ -80,6 +80,22 @@ export class WktsMatchComponent {
     }
   }
 
+  public toggleFullscreen(): void {
+    var chartEle = document.getElementById("gh");
+
+    if (document.fullscreenElement || document.fullscreenElement) {
+      document?.exitFullscreen();
+      console.log('exit fullscreen')
+    }
+    else {
+      // @ts-ignore
+      screen.orientation.lock("landscape");
+      chartEle?.requestFullscreen();
+      console.log('enter fullscreen')
+    }
+  }
+
+
   public barChartOptions: ChartConfiguration<'bar'>['options'] = {
     devicePixelRatio: 4,
     responsive: true,
@@ -92,16 +108,16 @@ export class WktsMatchComponent {
       legend: {
         position: 'bottom'
       },
-      // title: {
-      //   display: true,
-      //   text: 'Wickets per Test match',
-      //   font: {
-      //     size: 24,
-      //     family: "Roboto",
-      //     // style: 'normal',
-      //     // weight: 'normal'
-      //   }
-      // },
+      title: {
+        display: true,
+        text: 'Wickets per Test match',
+        font: {
+          size: 24,
+          family: "Roboto",
+          // style: 'normal',
+          // weight: 'normal'
+        }
+      },
       // subtitle: {
       //   display: true,
       //   text: 'JM Anderson',
@@ -116,4 +132,6 @@ export class WktsMatchComponent {
       // }
     }
   };
-}
+}
+
+