apply some features on x-chart ...

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

@@ -3,6 +3,7 @@ import {
   ViewChild,
   ElementRef,
   ChangeDetectionStrategy,
+  HostListener,
 } from '@angular/core';
 import {
   nameof,
@@ -61,6 +62,18 @@ export class XChartComponent extends XChartContainerComponent {
     return this.CHART_CONTAINER;
   }
 
+  @HostListener('resize', ['$event'])
+  onResize(event: any) {
+    //
+    if (isNullOrUndefined(this.chartInstance)) {
+      return;
+    }
+
+    //
+    // TODO: Complete this ...
+    // this.chartInstance.updateOptions();
+  }
+
   //
   private CHART_OPTIONS: XChartOptions = null;
 
@@ -332,6 +345,7 @@ export class XChartComponent extends XChartContainerComponent {
         foreColor: textColor,
         toolbar: {
           show: false,
+          autoSelected: 'pan',
         },
         events: {
           ...options.chart?.events,
@@ -370,6 +384,9 @@ export class XChartComponent extends XChartContainerComponent {
       this.CHART_OPTIONS,
     );
 
+    //
+    await this.prepareActionBar();
+
     //
     await this.chartInstance.render();
   }
@@ -389,6 +406,7 @@ export class XChartComponent extends XChartContainerComponent {
     //
     //#region DefaultActionBarActions ...
     //
+    // Print ...
     const defaultPrintItem: XActionBarItem = {
       onlyIcon: true,
       disabled: this.uiDisabled,
@@ -400,10 +418,11 @@ export class XChartComponent extends XChartContainerComponent {
     };
 
     //
+    // Export As PNG ...
     const defaultExportPNGItem: XActionBarItem = {
       onlyIcon: true,
+      icon: this.IconNames.png,
       disabled: this.uiDisabled,
-      icon: this.IconNames.image,
       slot: this.ActionBarItemSlots.END,
       title: this.ResourceIDs.export_png,
       id: this.ActionBarItems.ExportAsPNG,
@@ -411,10 +430,11 @@ export class XChartComponent extends XChartContainerComponent {
     };
 
     //
+    // Export as SVG ...
     const defaultExportSVGItem: XActionBarItem = {
       onlyIcon: true,
-      disabled: this.uiDisabled,
       icon: this.IconNames.image,
+      disabled: this.uiDisabled,
       slot: this.ActionBarItemSlots.END,
       title: this.ResourceIDs.export_svg,
       id: this.ActionBarItems.ExportAsSVG,
@@ -422,10 +442,11 @@ export class XChartComponent extends XChartContainerComponent {
     };
 
     //
+    // Export as CSV ...
     const defaultExportCSVItem: XActionBarItem = {
       onlyIcon: true,
+      icon: this.IconNames.csv,
       disabled: this.uiDisabled,
-      icon: this.IconNames.data_table,
       slot: this.ActionBarItemSlots.END,
       title: this.ResourceIDs.export_csv,
       id: this.ActionBarItems.ExportAsCSV,
@@ -433,10 +454,11 @@ export class XChartComponent extends XChartContainerComponent {
     };
 
     //
+    // Zoom In ...
     const defaultZoomInItem: XActionBarItem = {
       onlyIcon: true,
       disabled: this.uiDisabled,
-      icon: this.IconNames.add,
+      icon: this.IconNames.zoom_in,
       id: this.ActionBarItems.ZoomIn,
       title: this.ResourceIDs.zoom_in,
       slot: this.ActionBarItemSlots.START,
@@ -444,17 +466,19 @@ export class XChartComponent extends XChartContainerComponent {
     };
 
     //
+    // Zoom Out ...
     const defaultZoomOutItem: XActionBarItem = {
       onlyIcon: true,
       disabled: this.uiDisabled,
+      icon: this.IconNames.zoom_out,
       id: this.ActionBarItems.ZoomOut,
       title: this.ResourceIDs.zoom_out,
       slot: this.ActionBarItemSlots.START,
-      icon: this.IconNames.friendship_reject,
       iconColor: this.defaultActionBarItemColor,
     };
 
     //
+    // Zoom Selection ...
     const defaultZoomSelectionItem: XActionBarItem = {
       onlyIcon: true,
       disabled: this.uiDisabled,
@@ -466,6 +490,7 @@ export class XChartComponent extends XChartContainerComponent {
     };
 
     //
+    // X Axis Selection ...
     const defaultXAxisSelectionItem: XActionBarItem = {
       onlyIcon: true,
       disabled: this.uiDisabled,
@@ -477,6 +502,7 @@ export class XChartComponent extends XChartContainerComponent {
     };
 
     //
+    // Y Axis Selection ...
     const defaultYAxisSelectionItem: XActionBarItem = {
       onlyIcon: true,
       disabled: this.uiDisabled,
@@ -488,6 +514,7 @@ export class XChartComponent extends XChartContainerComponent {
     };
 
     //
+    // XY Axis Selection ...
     const defaultXYAxisSelectionItem: XActionBarItem = {
       onlyIcon: true,
       disabled: this.uiDisabled,
@@ -499,6 +526,7 @@ export class XChartComponent extends XChartContainerComponent {
     };
 
     //
+    // Pan ...
     const defaultPanItem: XActionBarItem = {
       onlyIcon: true,
       disabled: this.uiDisabled,
@@ -510,6 +538,7 @@ export class XChartComponent extends XChartContainerComponent {
     };
 
     //
+    // Reset ...
     const defaultResetItem: XActionBarItem = {
       onlyIcon: true,
       disabled: this.uiDisabled,
@@ -521,6 +550,7 @@ export class XChartComponent extends XChartContainerComponent {
     };
 
     //
+    // Toggle Full Screen ...
     const defaultFullscreenItem: XActionBarItem = {
       onlyIcon: true,
       disabled: this.uiDisabled,