add color properties has issues ...

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

@@ -28,6 +28,7 @@ import {
   XChartDrilldownEvent,
   XChartContainerComponent,
   XChartStoryboardBeatInfo,
+  XChartColorFormatterOpts,
 } from './x-chart.typings';
 import ApexCharts from 'apexcharts';
 import { Subject, Subscription } from 'rxjs';
@@ -113,8 +114,7 @@ export class XChartComponent extends XChartContainerComponent {
   //#endregion
 
   //
-  private ORIGINAL_HEIGHT: string = '300px';
+  private ORIGINAL_HEIGHT: string = undefined;
-  private RESIZE_SUBJECT = new Subject<Event>();
 
   //
   private CHART_OPTIONS: XChartOptions = null;
@@ -371,10 +371,6 @@ export class XChartComponent extends XChartContainerComponent {
   onDestroy() {
     super.onDestroy();
 
-    //
-    this.RESIZE_SUBJECT.next();
-    this.RESIZE_SUBJECT.complete();
-
     //
     this.destroyComponent();
     this.unregisterActionProvider();
@@ -729,8 +725,14 @@ export class XChartComponent extends XChartContainerComponent {
     const type = await this.getValueAsync(this.type);
     const chartId = await this.getValueAsync(this.uuid);
     const series = await this.getValueAsync(this.series);
+
+    //
     const cOptions = await this.getValueAsync(this.options);
 
+    //
+    const colors: Array<string | ((opts: XChartColorFormatterOpts) => string)> =
+      [getXColorValue(XColorWithBrightness.PrimaryShade)];
+
     //
     const title = await this.getResourceValueAsync(this.title);
     const titleAlignProp = await this.getValueAsync(this.titleAlign);
@@ -764,6 +766,9 @@ export class XChartComponent extends XChartContainerComponent {
     //
     const primaryColorValue = getXColorValue(XColorWithBrightness.Primary);
 
+    //
+    console.log('cOptions: ', cOptions);
+
     //
     // Normalize Directional Properties ....
     if (this.managerService.uiDirection == 'ltr') {
@@ -803,27 +808,27 @@ export class XChartComponent extends XChartContainerComponent {
     //
     this.CHART_OPTIONS = {
       ...cOptions,
-      series: series || cOptions.series,
+      series: series,
       title: {
-        ...cOptions.title,
+        ...cOptions?.title,
         text: title,
         align: titleAlign,
         style: {
-          ...cOptions.title?.style,
+          ...cOptions?.title?.style,
           color: titleColorValue,
         },
       },
       subtitle: {
-        ...cOptions.subtitle,
+        ...cOptions?.subtitle,
         text: subTitle,
         align: subTitleAlign,
         style: {
-          ...cOptions.subtitle?.style,
+          ...cOptions?.subtitle?.style,
           color: subTitleColorValue,
         },
       },
       chart: {
-        ...cOptions.chart,
+        ...cOptions?.chart,
         id: chartId,
         type: type as any,
         foreColor: foregroundColorValue,
@@ -833,7 +838,7 @@ export class XChartComponent extends XChartContainerComponent {
           autoSelected: 'pan',
         },
         events: {
-          ...cOptions.chart?.events,
+          ...cOptions?.chart?.events,
           //
           //#region Attach Events ...
           //
@@ -844,7 +849,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.animationEnd?.(chart, options);
+            cOptions?.chart?.events?.animationEnd?.(chart, options);
           },
 
           //
@@ -855,7 +860,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beforeMount?.(chart, options);
+            cOptions?.chart?.events?.beforeMount?.(chart, options);
           },
 
           //
@@ -866,7 +871,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.mounted?.(chart, options);
+            cOptions?.chart?.events?.mounted?.(chart, options);
           },
 
           //
@@ -877,7 +882,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.updated?.(chart, options);
+            cOptions?.chart?.events?.updated?.(chart, options);
           },
 
           //
@@ -892,7 +897,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.mouseMove?.(e, chart, options);
+            cOptions?.chart?.events?.mouseMove?.(e, chart, options);
           },
 
           //
@@ -907,7 +912,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.mouseLeave?.(e, chart, options);
+            cOptions?.chart?.events?.mouseLeave?.(e, chart, options);
           },
 
           //
@@ -922,7 +927,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.click?.(e, chart, options);
+            cOptions?.chart?.events?.click?.(e, chart, options);
           },
 
           //
@@ -937,7 +942,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.xAxisLabelClick?.(e, chart, options);
+            cOptions?.chart?.events?.xAxisLabelClick?.(e, chart, options);
           },
 
           //
@@ -955,7 +960,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.legendClick?.(chart, seriesIndex, options);
+            cOptions?.chart?.events?.legendClick?.(chart, seriesIndex, options);
           },
 
           //
@@ -970,7 +975,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.markerClick?.(e, chart, options);
+            cOptions?.chart?.events?.markerClick?.(e, chart, options);
           },
 
           //
@@ -987,7 +992,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.selection?.(chart, options);
+            cOptions?.chart?.events?.selection?.(chart, options);
           },
 
           //
@@ -1002,7 +1007,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.dataPointSelection?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointSelection?.(e, chart, options);
           },
 
           //
@@ -1017,7 +1022,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.dataPointMouseEnter?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointMouseEnter?.(e, chart, options);
           },
 
           //
@@ -1032,7 +1037,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.dataPointMouseLeave?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointMouseLeave?.(e, chart, options);
           },
 
           //
@@ -1046,7 +1051,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beforeZoom?.(chart, options);
+            cOptions?.chart?.events?.beforeZoom?.(chart, options);
           },
 
           //
@@ -1057,7 +1062,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beforeResetZoom?.(chart, options);
+            cOptions?.chart?.events?.beforeResetZoom?.(chart, options);
           },
 
           //
@@ -1074,7 +1079,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.zoomed?.(chart, options);
+            cOptions?.chart?.events?.zoomed?.(chart, options);
           },
 
           //
@@ -1088,7 +1093,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.scrolled?.(chart, options);
+            cOptions?.chart?.events?.scrolled?.(chart, options);
           },
 
           //
@@ -1105,7 +1110,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.brushScrolled?.(chart, options);
+            cOptions?.chart?.events?.brushScrolled?.(chart, options);
           },
 
           //
@@ -1122,7 +1127,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.crossFilter?.(chart, options);
+            cOptions?.chart?.events?.crossFilter?.(chart, options);
           },
 
           //
@@ -1142,7 +1147,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.filterChange?.(chart, options);
+            cOptions?.chart?.events?.filterChange?.(chart, options);
           },
 
           //
@@ -1164,7 +1169,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationDragged?.(chart, options);
+            cOptions?.chart?.events?.annotationDragged?.(chart, options);
           },
 
           //
@@ -1183,7 +1188,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationEdited?.(chart, options);
+            cOptions?.chart?.events?.annotationEdited?.(chart, options);
           },
 
           //
@@ -1203,7 +1208,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationCreated?.(chart, options);
+            cOptions?.chart?.events?.annotationCreated?.(chart, options);
           },
 
           //
@@ -1223,7 +1228,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationStyled?.(chart, options);
+            cOptions?.chart?.events?.annotationStyled?.(chart, options);
           },
 
           //
@@ -1241,7 +1246,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationDeleted?.(chart, options);
+            cOptions?.chart?.events?.annotationDeleted?.(chart, options);
           },
 
           //
@@ -1262,7 +1267,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.measured?.(chart, options);
+            cOptions?.chart?.events?.measured?.(chart, options);
           },
 
           //
@@ -1276,7 +1281,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beatChange?.(chart, options);
+            cOptions?.chart?.events?.beatChange?.(chart, options);
           },
 
           //
@@ -1291,7 +1296,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.keyDown?.(e, chart, options);
+            cOptions?.chart?.events?.keyDown?.(e, chart, options);
           },
 
           //
@@ -1306,7 +1311,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.keyUp?.(e, chart, options);
+            cOptions?.chart?.events?.keyUp?.(e, chart, options);
           },
 
           //
@@ -1321,7 +1326,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillDownStart?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownStart?.(info, chart, options);
           },
 
           //
@@ -1336,7 +1341,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillDownEnd?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownEnd?.(info, chart, options);
           },
 
           //
@@ -1351,7 +1356,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillUp?.(info, chart, options);
+            cOptions?.chart?.events?.drillUp?.(info, chart, options);
           },
 
           //
@@ -1366,22 +1371,22 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillDownError?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownError?.(info, chart, options);
           },
           //#endregion
         },
       },
       theme: {
-        ...cOptions.theme,
+        ...cOptions?.theme,
-        palette: cOptions.theme?.palette || 'palette1',
+        palette: cOptions?.theme?.palette || 'palette1',
       },
-      colors: cOptions.colors || [primaryColorValue],
+      colors: colors,
       grid: {
-        ...cOptions.grid,
+        ...cOptions?.grid,
         borderColor: gridColorValue,
       },
       dataLabels: {
-        ...cOptions.dataLabels,
+        ...cOptions?.dataLabels,
       },
     };
 
@@ -1393,11 +1398,16 @@ export class XChartComponent extends XChartContainerComponent {
 
     //
     // Storing Original Height ...
+    if (isNullOrEmptyString(this.ORIGINAL_HEIGHT)) {
       this.ORIGINAL_HEIGHT = this.CHART_OPTIONS.chart?.height?.toString();
+    }
 
     //
     await this.prepareActionBar();
 
+    //
+    console.log('CHART_OPTIONS: ', this.CHART_OPTIONS);
+
     //
     await this.chartInstance.render();
   }
@@ -2123,7 +2133,13 @@ export class XChartComponent extends XChartContainerComponent {
     };
 
     //
-    this.chartInstance.updateOptions(this.CHART_OPTIONS, false, true, false, false);
+    this.chartInstance.updateOptions(
+      this.CHART_OPTIONS,
+      false,
+      true,
+      false,
+      false,
+    );
     this.managerService.dispatchResizeEvent();
   }
 
@@ -2217,7 +2233,9 @@ export class XChartComponent extends XChartContainerComponent {
         // Handle Full Screen Toggled ...
         if (model.action == XCardAction.FullScreenToggled) {
           //
-          const isFullscreen = isNullOrUndefined(model.payload) ? false : true;
+          const isFullscreen = isNullOrUndefined(model.payload)
+            ? false
+            : (model.payload as boolean) || false;
           await this.handleFullscreenMode(isFullscreen);
         }
       });

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

@@ -17,6 +17,7 @@ import {
   XColorIdentifier,
   XResourceIdentifier,
   XColorWithBrightness,
+  getXColorValue,
 } from 'x-framework-core';
 import {
   XCardActionModel,
@@ -3323,6 +3324,9 @@ export interface IXChartContainer extends TXChartContainer {
   series: XStandardType<XChartSeriesType>;
   type: XStandardType<XChartTypeIdentifier>;
 
+  //
+  colors: Array<string | ((opts: XChartColorFormatterOpts) => string)>;
+
   //
   title: XStandardType<XResourceIdentifier>;
   titleAlign: XStandardType<XChartTextAlignIdentifier>;
@@ -3473,6 +3477,11 @@ export class XChartContainer
   readonly series: XStandardType<XChartSeriesType>;
   readonly type: XStandardType<XChartTypeIdentifier> = XChartType.Line;
 
+  //
+  readonly colors: Array<
+    string | ((opts: XChartColorFormatterOpts) => string)
+  > = [getXColorValue(XColorWithBrightness.PrimaryShade)];
+
   //
   readonly title: XStandardType<XResourceIdentifier>;
   readonly titleAlign: XStandardType<XChartTextAlignIdentifier> =
@@ -3698,6 +3707,9 @@ export abstract class XChartContainerComponent
   @Input()
   zoomStep: XStandardType<number> = this.propertyProvider.zoomStep;
 
+  @Input()
+  colors: Array<string | ((opts: XChartColorFormatterOpts) => string)> = this.propertyProvider.colors;
+
   @Input()
   defaultActionBarItemColor: XStandardType<XColorIdentifier> =
     this.propertyProvider.defaultActionBarItemColor;
@@ -4030,10 +4042,13 @@ export abstract class XChartContainerComponent
 
       //
       type: this.getValue(container ? container.type : this.type),
-      options: this.getValue(container ? container.options : this.options),
       series: this.getValue(container ? container.series : this.series),
+      options: this.getValue(container ? container.options : this.options),
       zoomStep: this.getValue(container ? container.zoomStep : this.zoomStep),
 
+      //
+      colors: this.getValue(container ? container.colors : this.colors),
+
       //
       title: this.getValue(container ? container.title : this.title),
       titleAlign: this.getValue(