last works for handle card sizing ...

projects/x-framework-components/src/lib/x-chart/x-chart.component.ts

@@ -30,7 +30,7 @@ import {
   XChartContainerComponent,
   XChartStoryboardBeatInfo,
 } from './x-chart.typings';
-import { Subscription } from 'rxjs';
+import { fromEvent, Subject, Subscription } from 'rxjs';
 import ApexCharts from 'apexcharts';
 import {
   XActionBarItem,
@@ -39,6 +39,8 @@ import {
 } from '../x-action-bar/x-action-bar.typings';
 import { XIconNames } from '../x-icon/x-icon.typings';
 import { XCardAction } from '../x-card/x-card.typings';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { XCardComponent } from '../x-card/x-card.component';
 
 @Component({
   selector: 'x-chart',
@@ -50,10 +52,10 @@ export class XChartComponent extends XChartContainerComponent {
   //
   //#region Props ...
   //
-  private CHART_CONTAINER: ElementRef | undefined;
+  private CHART_CONTAINER: ElementRef = undefined;
 
   @ViewChild('chartContainer', { static: false })
-  set chartContainer(el: ElementRef | undefined) {
+  set chartContainer(el: ElementRef) {
     //
     if (isNullOrUndefined(el)) {
       //
@@ -71,17 +73,19 @@ export class XChartComponent extends XChartContainerComponent {
   }
 
   //
-  @HostListener('resize', ['$event'])
-  onResize(event: any) {
-    //
-    if (isNullOrUndefined(this.chartInstance)) {
-      return;
-    }
+  private CHART_CARD: ElementRef<XCardComponent> = undefined;
 
-    //
-    // TODO: Complete this ...
-    // this.chartInstance.updateOptions();
+  @ViewChild('chartCard', { static: false })
+  set chartCard(el: ElementRef<XCardComponent>) {
+    this.CHART_CARD = el;
   }
+  
+  get chartCard() {
+    return this.CHART_CARD;;
+  }
+
+  //
+  private RESIZE_SUBJECT = new Subject<Event>();
 
   //
   private CHART_OPTIONS: XChartOptions = null;
@@ -105,6 +109,7 @@ export class XChartComponent extends XChartContainerComponent {
 
     //
     await this.initializeComponent();
+    this.registerResizeHandler();
   }
 
   async onChange(changeKeys: string[]) {
@@ -337,6 +342,10 @@ export class XChartComponent extends XChartContainerComponent {
   onDestroy() {
     super.onDestroy();
 
+    //
+    this.RESIZE_SUBJECT.next();
+    this.RESIZE_SUBJECT.complete();
+
     //
     this.destroyComponent();
     this.unregisterActionProvider();
@@ -658,7 +667,7 @@ export class XChartComponent extends XChartContainerComponent {
           printWindow.document.close();
         }
       }
-    } catch (error) {}
+    } catch (error) { }
   }
 
   async handleToggleFullscreen() {
@@ -672,47 +681,8 @@ export class XChartComponent extends XChartContainerComponent {
     }
 
     //
+    // Handle Fullscreen Toggle using Card ...
     this.cardActionProvider.next({ action: XCardAction.ToggleFullScreen });
-
-    //
-    return;
-
-    //
-    const chartWrapper = this.chartContainer.nativeElement;
-    const doc = document as any;
-
-    //
-    // Check if the chart wrapper is currently in fullscreen mode
-    const isFullscreen =
-      doc.fullscreenElement === chartWrapper ||
-      doc.msFullscreenElement === chartWrapper ||
-      doc.mozFullScreenElement === chartWrapper ||
-      doc.webkitFullscreenElement === chartWrapper;
-    if (!isFullscreen) {
-      //
-      // Enter Fullscreen
-      if (chartWrapper.requestFullscreen) {
-        await chartWrapper.requestFullscreen();
-      } else if (chartWrapper.webkitRequestFullscreen) {
-        await chartWrapper.webkitRequestFullscreen();
-      } else if (chartWrapper.mozRequestFullScreen) {
-        await chartWrapper.mozRequestFullScreen();
-      } else if (chartWrapper.msRequestFullscreen) {
-        await chartWrapper.msRequestFullscreen();
-      }
-    } else {
-      //
-      // Exit Fullscreen
-      if (doc.exitFullscreen) {
-        await doc.exitFullscreen();
-      } else if (doc.webkitExitFullscreen) {
-        await doc.webkitExitFullscreen();
-      } else if (doc.mozCancelFullScreen) {
-        await doc.mozCancelFullScreen();
-      } else if (doc.msExitFullscreen) {
-        await doc.msExitFullscreen();
-      }
-    }
   }
   //#endregion
 
@@ -2075,6 +2045,42 @@ export class XChartComponent extends XChartContainerComponent {
     this.chartInstance = null;
   }
 
+  private registerResizeHandler() {
+    //
+    fromEvent(window, 'resize')
+      .pipe(
+        debounceTime(200),
+        takeUntil(this.RESIZE_SUBJECT)
+      )
+      .subscribe(() => {
+        //
+        if (isNullOrUndefined(this.chartInstance) || isNullOrUndefined(this.chartCard) || isNullOrUndefined(this.chartCard.nativeElement) || !this.chartCard.nativeElement.isFullscreen) {
+          return;
+        }
+
+        //
+        var height = this.chartCard.nativeElement.calculateContentSize();
+
+        //
+        // Reading Height ...
+        this.CHART_OPTIONS = {
+          ...this.CHART_OPTIONS,
+          chart: {
+            height: `${height}px`
+          }
+        };
+
+        //
+        // TODO: 
+        // Only Apply when Full Screen Mode ...
+        // Add FullScreen Event Handler in XCard Component ...
+        console.log('chart resize: ', height);
+
+        //
+        this.chartInstance.updateOptions(this.CHART_OPTIONS, false, false);
+      });
+  }
+
   private registerActionProvider() {
     //
     this.unregisterActionProvider();