last ...

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

@@ -40,6 +40,8 @@ import {
   XChartTooltipAnnotations,
   XChartContainerComponent,
   XChartStoryboardBeatInfo,
+  XChartStroke,
+  XChartFill,
 } from './x-chart.typings';
 import ApexCharts from 'apexcharts';
 import { Subscription } from 'rxjs';
@@ -187,6 +189,32 @@ export class XChartComponent extends XChartContainerComponent {
       await this.prepareActionBar();
     }
 
+    //
+    // Stroke ...
+    isChanged = changeKeys.includes(nameof<XChartComponent>('stroke'));
+    if (isChanged) {
+      //
+      if (isNullOrUndefined(this.stroke)) {
+        this.stroke = this.propertyProvider.stroke;
+      }
+
+      //
+      this.handleChartUpdate();
+    }
+
+    //
+    // Colors ...
+    isChanged = changeKeys.includes(nameof<XChartComponent>('colors'));
+    if (isChanged) {
+      //
+      if (isNullOrUndefined(this.colors)) {
+        this.colors = this.propertyProvider.colors;
+      }
+
+      //
+      this.handleChartUpdate();
+    }
+
     //
     // Zoom Step ...
     isChanged = changeKeys.includes(nameof<XChartComponent>('zoomStep'));
@@ -789,6 +817,10 @@ export class XChartComponent extends XChartContainerComponent {
     const chartId = await this.getValueAsync(this.uuid);
     const series = await this.getValueAsync(this.series);
 
+    //
+    const stroke = await this.getPreparedStroke();
+    const colors = await this.getPreparedColors();
+
     //
     const cOptions = await this.getValueAsync(this.options);
 
@@ -872,35 +904,31 @@ export class XChartComponent extends XChartContainerComponent {
     //
     this.CHART_OPTIONS = {
       ...cOptions,
-      series: 
+      series: series,
-      { 
-        ...cOptions?.series,
-        ...series as any
-      },
       annotations: {
         ...cOptions?.annotations,
         ...annotations
       },
       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,
@@ -910,7 +938,7 @@ export class XChartComponent extends XChartContainerComponent {
           autoSelected: 'pan',
         },
         events: {
-          ...cOptions.chart?.events,
+          ...cOptions?.chart?.events,
           //
           //#region Attach Events ...
           //
@@ -921,7 +949,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.animationEnd?.(chart, options);
+            cOptions?.chart?.events?.animationEnd?.(chart, options);
           },
 
           //
@@ -932,7 +960,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beforeMount?.(chart, options);
+            cOptions?.chart?.events?.beforeMount?.(chart, options);
           },
 
           //
@@ -943,7 +971,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.mounted?.(chart, options);
+            cOptions?.chart?.events?.mounted?.(chart, options);
           },
 
           //
@@ -954,7 +982,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.updated?.(chart, options);
+            cOptions?.chart?.events?.updated?.(chart, options);
           },
 
           //
@@ -969,7 +997,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.mouseMove?.(e, chart, options);
+            cOptions?.chart?.events?.mouseMove?.(e, chart, options);
           },
 
           //
@@ -984,7 +1012,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.mouseLeave?.(e, chart, options);
+            cOptions?.chart?.events?.mouseLeave?.(e, chart, options);
           },
 
           //
@@ -999,7 +1027,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.click?.(e, chart, options);
+            cOptions?.chart?.events?.click?.(e, chart, options);
           },
 
           //
@@ -1014,7 +1042,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.xAxisLabelClick?.(e, chart, options);
+            cOptions?.chart?.events?.xAxisLabelClick?.(e, chart, options);
           },
 
           //
@@ -1032,7 +1060,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.legendClick?.(chart, seriesIndex, options);
+            cOptions?.chart?.events?.legendClick?.(chart, seriesIndex, options);
           },
 
           //
@@ -1047,7 +1075,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.markerClick?.(e, chart, options);
+            cOptions?.chart?.events?.markerClick?.(e, chart, options);
           },
 
           //
@@ -1064,7 +1092,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.selection?.(chart, options);
+            cOptions?.chart?.events?.selection?.(chart, options);
           },
 
           //
@@ -1079,7 +1107,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.dataPointSelection?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointSelection?.(e, chart, options);
           },
 
           //
@@ -1094,7 +1122,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.dataPointMouseEnter?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointMouseEnter?.(e, chart, options);
           },
 
           //
@@ -1109,7 +1137,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.dataPointMouseLeave?.(e, chart, options);
+            cOptions?.chart?.events?.dataPointMouseLeave?.(e, chart, options);
           },
 
           //
@@ -1123,7 +1151,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beforeZoom?.(chart, options);
+            cOptions?.chart?.events?.beforeZoom?.(chart, options);
           },
 
           //
@@ -1134,7 +1162,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beforeResetZoom?.(chart, options);
+            cOptions?.chart?.events?.beforeResetZoom?.(chart, options);
           },
 
           //
@@ -1151,7 +1179,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.zoomed?.(chart, options);
+            cOptions?.chart?.events?.zoomed?.(chart, options);
           },
 
           //
@@ -1165,7 +1193,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.scrolled?.(chart, options);
+            cOptions?.chart?.events?.scrolled?.(chart, options);
           },
 
           //
@@ -1182,7 +1210,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.brushScrolled?.(chart, options);
+            cOptions?.chart?.events?.brushScrolled?.(chart, options);
           },
 
           //
@@ -1199,7 +1227,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.crossFilter?.(chart, options);
+            cOptions?.chart?.events?.crossFilter?.(chart, options);
           },
 
           //
@@ -1219,7 +1247,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.filterChange?.(chart, options);
+            cOptions?.chart?.events?.filterChange?.(chart, options);
           },
 
           //
@@ -1241,7 +1269,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationDragged?.(chart, options);
+            cOptions?.chart?.events?.annotationDragged?.(chart, options);
           },
 
           //
@@ -1260,7 +1288,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationEdited?.(chart, options);
+            cOptions?.chart?.events?.annotationEdited?.(chart, options);
           },
 
           //
@@ -1280,7 +1308,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationCreated?.(chart, options);
+            cOptions?.chart?.events?.annotationCreated?.(chart, options);
           },
 
           //
@@ -1300,7 +1328,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationStyled?.(chart, options);
+            cOptions?.chart?.events?.annotationStyled?.(chart, options);
           },
 
           //
@@ -1318,7 +1346,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.annotationDeleted?.(chart, options);
+            cOptions?.chart?.events?.annotationDeleted?.(chart, options);
           },
 
           //
@@ -1339,7 +1367,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.measured?.(chart, options);
+            cOptions?.chart?.events?.measured?.(chart, options);
           },
 
           //
@@ -1353,7 +1381,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.beatChange?.(chart, options);
+            cOptions?.chart?.events?.beatChange?.(chart, options);
           },
 
           //
@@ -1368,7 +1396,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.keyDown?.(e, chart, options);
+            cOptions?.chart?.events?.keyDown?.(e, chart, options);
           },
 
           //
@@ -1383,7 +1411,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.keyUp?.(e, chart, options);
+            cOptions?.chart?.events?.keyUp?.(e, chart, options);
           },
 
           //
@@ -1398,7 +1426,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillDownStart?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownStart?.(info, chart, options);
           },
 
           //
@@ -1413,7 +1441,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillDownEnd?.(info, chart, options);
+            cOptions?.chart?.events?.drillDownEnd?.(info, chart, options);
           },
 
           //
@@ -1428,7 +1456,7 @@ export class XChartComponent extends XChartContainerComponent {
             }
 
             //
-            cOptions.chart?.events?.drillUp?.(info, chart, options);
+            cOptions?.chart?.events?.drillUp?.(info, chart, options);
           },
 
           //
@@ -1443,16 +1471,16 @@ 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,
       xaxis: {
         ...xAxis
       },
@@ -1460,14 +1488,14 @@ export class XChartComponent extends XChartContainerComponent {
         ...yAxis
       ],
       grid: {
-        ...cOptions.grid,
+        ...cOptions?.grid,
         borderColor: gridColorValue,
       },
       tooltip: {
         ...tooltip
       },
       dataLabels: {
-        ...cOptions.dataLabels,
+        ...cOptions?.dataLabels,
       },
     };
 
@@ -1486,6 +1514,9 @@ export class XChartComponent extends XChartContainerComponent {
     //
     await this.prepareActionBar();
 
+    //
+    console.log('CHART_OPTIONS: ', this.CHART_OPTIONS);
+
     //
     await this.chartInstance.render();
   }
@@ -2331,6 +2362,27 @@ export class XChartComponent extends XChartContainerComponent {
 
   //
   //#region Preparers ...
+  private async getPreparedStroke() {
+    //
+    let result: XChartStroke = undefined;
+
+    //
+    if (!isNullOrUndefined(this.stroke)) {
+      //
+      result = await this.getValueAsync(this.stroke);
+
+      //
+      result = {
+        ...result,
+        colors: result?.colors.map(c => this.normalizeColor(c)),
+        fill: this.normalizeFill(result?.fill)
+      }
+    }
+
+    //
+    return result;
+  }
+
   private async getPreparedTooltip() {
     //
     let result: XChartTooltip = undefined;
@@ -2762,6 +2814,48 @@ export class XChartComponent extends XChartContainerComponent {
     return result;
   }
 
+  private normalizeFill(v: XChartFill) {
+    //
+    if (!isNullOrUndefined(v)) {
+      //
+      v = {
+        ...v,
+        colors: v?.colors.map(c => this.normalizeColor(c)),
+      }
+
+      //
+      if (!isNullOrUndefined(v.gradient)) {
+        //
+        v.gradient = {
+          ...v?.gradient,
+          gradientToColors: v?.gradient?.gradientToColors.map(c => this.normalizeColor(c)),
+        }
+
+        //
+        if (!isNullOrUndefined(v?.gradient?.colorStops)) {
+          //
+          const isMatrix = 
+            Array.isArray(v?.gradient?.colorStops) && 
+            this.hasChild(v?.gradient?.colorStops) &&
+            Array.isArray(v?.gradient?.colorStops);
+          if (isMatrix) {
+            //
+            // Normalize Matrix ...
+            for (let c of v?.gradient?.colorStops) {
+
+            }
+          } else {
+            //
+            // Normalize Array ...
+          }
+        }
+      }
+    }
+
+    //
+    return v;
+  }
+
   private normalizeColor(v: XColorIdentifier) {
     //
     let result = '';

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

@@ -13,6 +13,7 @@ import {
 import {
   XStandardType,
   isValueInEnum,
+  getXColorValue,
   XOneOrManyType,
   XColorIdentifier,
   XResourceIdentifier,
@@ -2411,6 +2412,8 @@ export type XChartTooltip = {
   };
 };
 
+export type XChartColorType = Array<string | ((opts: XChartColorFormatterOpts) => string)>;
+
 export interface XChartOptions {
   annotations?: XChartAnnotations;
   chart?: XChart;
@@ -2419,7 +2422,7 @@ export interface XChartOptions {
    * named) or a function returning one per-datapoint. The list cycles when
    * there are more series than colors.
    */
-  colors?: Array<string | ((opts: XChartColorFormatterOpts) => string)>;
+  colors?: XChartColorType;
   dataLabels?: XChartDataLabels;
   /** Opt-in drilldown navigation. Requires `import 'apexcharts/features/drilldown'`. */
   drilldown?: XChartDrilldown;
@@ -3327,6 +3330,10 @@ export interface IXChartContainer extends TXChartContainer {
   series: XStandardType<XChartSeriesType>;
   type: XStandardType<XChartTypeIdentifier>;
 
+  //
+  stroke: XStandardType<XChartStroke>;
+  colors: XStandardType<XChartColorType>;
+
   //
   xAxis: XStandardType<XChartXAxis>;
   yAxis: XStandardType<XOneOrManyType<XChartYAxis>>;
@@ -3482,7 +3489,14 @@ export class XChartContainer
   readonly options: XStandardType<XChartOptions>;
   readonly zoomStep: XStandardType<number> = 0.125;
   readonly series: XStandardType<XChartSeriesType>;
+
+  //
+  readonly stroke: XStandardType<XChartStroke> = {
+    width: 3,
+    curve: 'smooth'
+  };
   readonly type: XStandardType<XChartTypeIdentifier> = XChartType.Line;
+  readonly colors: XStandardType<XChartColorType> = [getXColorValue(XColorWithBrightness.PrimaryShade)];
 
   //
   readonly xAxis: XStandardType<XChartXAxis>;
@@ -3722,6 +3736,12 @@ export abstract class XChartContainerComponent
   @Input()
   yAxis: XStandardType<XOneOrManyType<XChartYAxis>> = this.propertyProvider.yAxis;
 
+  @Input()
+  colors: XStandardType<XChartColorType> = this.propertyProvider.colors;
+
+  @Input()
+  stroke: XStandardType<XChartStroke> = this.propertyProvider.stroke;
+
   @Input()
   tooltip: XStandardType<XChartTooltip> = this.propertyProvider.tooltip;
 
@@ -4060,9 +4080,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),
+      
+      //
+      stroke: this.getValue(container ? container.stroke : this.stroke),
+      colors: this.getArrayValue(container ? container.colors : this.colors),
 
       //
       xAxis: this.getValue(container ? container.xAxis : this.xAxis),