last ...

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

@@ -7,6 +7,7 @@ import {
 import {
   nameof,
   toArray,
+  isString,
   XMimeType,
   downloadFile,
   generateUuid,
@@ -21,12 +22,16 @@ import {
   downloadArrayBufferedFile,
 } from 'x-framework-core';
 import {
+  XChartFill,
   isChartType,
   XChartXAxis,
   XChartYAxis,
+  XChartStroke,
   XChartAction,
   XChartTooltip,
   XChartOptions,
+  XChartColorStop,
+  XChartColorType,
   XChartEventOpts,
   XChartTextAlign,
   XChartSeriesType,
@@ -40,8 +45,6 @@ import {
   XChartTooltipAnnotations,
   XChartContainerComponent,
   XChartStoryboardBeatInfo,
-  XChartStroke,
-  XChartFill,
 } from './x-chart.typings';
 import ApexCharts from 'apexcharts';
 import { Subscription } from 'rxjs';
@@ -905,9 +908,13 @@ export class XChartComponent extends XChartContainerComponent {
     this.CHART_OPTIONS = {
       ...cOptions,
       series: series,
+      stroke: {
+        ...cOptions?.stroke,
+        ...stroke
+      },
       annotations: {
         ...cOptions?.annotations,
-        ...annotations
+        ...annotations,
       },
       title: {
         ...cOptions?.title,
@@ -1482,17 +1489,15 @@ export class XChartComponent extends XChartContainerComponent {
       },
       colors: colors,
       xaxis: {
-        ...xAxis
+        ...xAxis,
       },
-      yaxis: [
-        ...yAxis
-      ],
+      yaxis: [...yAxis],
       grid: {
         ...cOptions?.grid,
         borderColor: gridColorValue,
       },
       tooltip: {
-        ...tooltip
+        ...tooltip,
       },
       dataLabels: {
         ...cOptions?.dataLabels,
@@ -2222,7 +2227,8 @@ export class XChartComponent extends XChartContainerComponent {
 
       //
       const offset = 24;
-      height = `${window.innerHeight -
+      height = `${
+        window.innerHeight -
         offset -
         (actionBarHeight +
           (cardImageElement?.clientHeight || 0) +
@@ -2374,8 +2380,40 @@ export class XChartComponent extends XChartContainerComponent {
       //
       result = {
         ...result,
-        colors: result?.colors.map(c => this.normalizeColor(c)),
-        fill: this.normalizeFill(result?.fill)
+        colors: result?.colors.map((c) => this.normalizeColor(c)),
+        fill: this.normalizeFill(result?.fill),
+      };
+    }
+
+    //
+    return result;
+  }
+
+  private async getPreparedColors() {
+    //
+    let result: XChartColorType = undefined;
+
+    //
+    if (!isNullOrUndefined(this.colors)) {
+      //
+      result = await this.getValueAsync(this.colors);
+
+      //
+      // Try to Normalize ...
+      if (!isNullOrUndefined(result) && this.hasChild(result)) {
+        //
+        result = [
+          ...result.map((x) => {
+            //
+            // Only Normalize when color is string ...
+            if (!isNullOrUndefined(x) && isString(x)) {
+              x = this.normalizeColor(x as string);
+            }
+
+            //
+            return x;
+          }),
+        ];
       }
     }
 
@@ -2397,7 +2435,7 @@ export class XChartComponent extends XChartContainerComponent {
     }
 
     //
-    return result;;
+    return result;
   }
 
   private async getPreparedXAxis(v?: XChartXAxis) {
@@ -2408,7 +2446,7 @@ export class XChartComponent extends XChartContainerComponent {
     if (!isNullOrUndefined(this.xAxis)) {
       //
       result = {
-        ...(await this.getValueAsync(this.xAxis))
+        ...(await this.getValueAsync(this.xAxis)),
       };
     }
 
@@ -2417,7 +2455,7 @@ export class XChartComponent extends XChartContainerComponent {
       //
       result = {
         ...v,
-        ...result
+        ...result,
       };
     }
 
@@ -2426,22 +2464,24 @@ export class XChartComponent extends XChartContainerComponent {
       //
       result = {
         ...result,
-      }
+      };
 
       //
       if (!isNullOrUndefined(result.labels)) {
         //
         result.labels = {
           ...result.labels,
-        }
+        };
 
         //
         if (!isNullOrUndefined(result.labels.style)) {
           //
           result.labels.style = {
             ...result.labels.style,
-            colors: toArray(result.labels.style.colors).map(c => this.normalizeColor(c))
-          }
+            colors: toArray(result.labels.style.colors).map((c) =>
+              this.normalizeColor(c),
+            ),
+          };
         }
       }
 
@@ -2449,16 +2489,18 @@ export class XChartComponent extends XChartContainerComponent {
       if (!isNullOrUndefined(result.group)) {
         //
         result.group = {
-          ...result.group
-        }
+          ...result.group,
+        };
 
         //
         if (!isNullOrUndefined(result.group.style)) {
           //
           result.group.style = {
             ...result.group.style,
-            colors: toArray(result.group.style.colors).map(x => this.normalizeColor(x))
-          }
+            colors: toArray(result.group.style.colors).map((x) =>
+              this.normalizeColor(x),
+            ),
+          };
         }
       }
 
@@ -2467,8 +2509,8 @@ export class XChartComponent extends XChartContainerComponent {
         //
         result.axisBorder = {
           ...result.axisBorder,
-          color: this.normalizeColor(result.axisBorder.color)
-        }
+          color: this.normalizeColor(result.axisBorder.color),
+        };
       }
 
       //
@@ -2476,8 +2518,8 @@ export class XChartComponent extends XChartContainerComponent {
         //
         result.axisTicks = {
           ...result.axisTicks,
-          color: this.normalizeColor(result.axisTicks.color)
-        }
+          color: this.normalizeColor(result.axisTicks.color),
+        };
       }
 
       //
@@ -2485,16 +2527,16 @@ export class XChartComponent extends XChartContainerComponent {
         //
         result.title = {
           ...result.title,
-          text: (await this.normalizeText(result.title.text) as string)
-        }
+          text: (await this.normalizeText(result.title.text)) as string,
+        };
 
         //
         if (!isNullOrUndefined(result.title.style)) {
           //
           result.title.style = {
             ...result.title.style,
-            color: this.normalizeColor(result.title.style.color)
-          }
+            color: this.normalizeColor(result.title.style.color),
+          };
         }
       }
 
@@ -2502,16 +2544,16 @@ export class XChartComponent extends XChartContainerComponent {
       if (!isNullOrUndefined(result.crosshairs)) {
         //
         result.crosshairs = {
-          ...result.crosshairs
-        }
+          ...result.crosshairs,
+        };
 
         //
         if (!isNullOrUndefined(result.crosshairs.stroke)) {
           //
           result.crosshairs.stroke = {
             ...result.crosshairs.stroke,
-            color: this.normalizeColor(result.crosshairs.stroke.color)
-          }
+            color: this.normalizeColor(result.crosshairs.stroke.color),
+          };
         }
 
         //
@@ -2519,17 +2561,21 @@ export class XChartComponent extends XChartContainerComponent {
           //
           result.crosshairs.fill = {
             ...result.crosshairs.fill,
-            color: this.normalizeColor(result.crosshairs.fill.color)
-          }
+            color: this.normalizeColor(result.crosshairs.fill.color),
+          };
 
           //
           if (!isNullOrUndefined(result.crosshairs.fill.gradient)) {
             //
             result.crosshairs.fill.gradient = {
               ...result.crosshairs.fill.gradient,
-              colorTo: this.normalizeColor(result.crosshairs.fill.gradient.colorTo),
-              colorFrom: this.normalizeColor(result.crosshairs.fill.gradient.colorFrom),
-            }
+              colorTo: this.normalizeColor(
+                result.crosshairs.fill.gradient.colorTo,
+              ),
+              colorFrom: this.normalizeColor(
+                result.crosshairs.fill.gradient.colorFrom,
+              ),
+            };
           }
         }
       }
@@ -2546,9 +2592,7 @@ export class XChartComponent extends XChartContainerComponent {
     //
     if (!isNullOrUndefined(v)) {
       //
-      result = [
-        ...toArray(v)
-      ];
+      result = [...toArray(v)];
     }
 
     //
@@ -2556,16 +2600,16 @@ export class XChartComponent extends XChartContainerComponent {
       //
       result = [
         ...(this.hasChild(result) ? result : []),
-        ...await this.getArrayValueAsync(this.yAxis)
+        ...(await this.getArrayValueAsync(this.yAxis)),
       ];
 
       //
-      const mappers = result.map(async x => {
+      const mappers = result.map(async (x) => {
         //
         if (!isNullOrUndefined(x.labels)) {
           //
           x.labels = {
-            ...x.labels
+            ...x.labels,
           };
 
           //
@@ -2573,8 +2617,10 @@ export class XChartComponent extends XChartContainerComponent {
             //
             x.labels.style = {
               ...x.labels.style,
-              colors: toArray(x.labels.style.colors).map(c => this.normalizeColor(c))
-            }
+              colors: toArray(x.labels.style.colors).map((c) =>
+                this.normalizeColor(c),
+              ),
+            };
           }
         }
 
@@ -2583,8 +2629,8 @@ export class XChartComponent extends XChartContainerComponent {
           //
           x.axisBorder = {
             ...x.axisBorder,
-            color: this.normalizeColor(x.axisBorder.color)
-          }
+            color: this.normalizeColor(x.axisBorder.color),
+          };
         }
 
         //
@@ -2592,8 +2638,8 @@ export class XChartComponent extends XChartContainerComponent {
           //
           x.axisTicks = {
             ...x.axisTicks,
-            color: this.normalizeColor(x.axisTicks.color)
-          }
+            color: this.normalizeColor(x.axisTicks.color),
+          };
         }
 
         //
@@ -2601,16 +2647,16 @@ export class XChartComponent extends XChartContainerComponent {
           //
           x.title = {
             ...x.title,
-            text: (await this.normalizeText(x.title.text) as string)
-          }
+            text: (await this.normalizeText(x.title.text)) as string,
+          };
 
           //
           if (!isNullOrUndefined(x.title.style)) {
             //
             x.title.style = {
               ...x.title.style,
-              color: this.normalizeColor(x.title.style.color)
-            }
+              color: this.normalizeColor(x.title.style.color),
+            };
           }
         }
 
@@ -2619,15 +2665,15 @@ export class XChartComponent extends XChartContainerComponent {
           //
           x.crosshairs = {
             ...x.crosshairs,
-          }
+          };
 
           //
           if (!isNullOrUndefined(x.crosshairs.stroke)) {
             //
             x.crosshairs.stroke = {
               ...x.crosshairs.stroke,
-              color: this.normalizeColor(x.crosshairs.stroke.color)
-            }
+              color: this.normalizeColor(x.crosshairs.stroke.color),
+            };
           }
         }
 
@@ -2639,10 +2685,7 @@ export class XChartComponent extends XChartContainerComponent {
       const items = await Promise.all(mappers);
 
       //
-      result = [
-        ...result,
-        ...items
-      ];
+      result = [...result, ...items];
     }
 
     //
@@ -2665,7 +2708,7 @@ export class XChartComponent extends XChartContainerComponent {
       // Texts ...
       if (this.hasChild(result.texts)) {
         //
-        const mappers = result.texts.map(async x => {
+        const mappers = result.texts.map(async (x) => {
           //
           // Normalizing Text ...
           x.text = (await this.normalizeText(x.text)) as string;
@@ -2680,16 +2723,14 @@ export class XChartComponent extends XChartContainerComponent {
           return x;
         });
         const items = await Promise.all(mappers);
-        result.texts = [
-          ...items
-        ];
+        result.texts = [...items];
       }
 
       //
       // Y Axis ...
       if (this.hasChild(result.yaxis)) {
         //
-        const mappers = result.yaxis.map(async x => {
+        const mappers = result.yaxis.map(async (x) => {
           //
           // Normalizing Text ...
           x.label = await this.normalizeLabel(x.label);
@@ -2703,16 +2744,14 @@ export class XChartComponent extends XChartContainerComponent {
           return x;
         });
         const items = await Promise.all(mappers);
-        result.yaxis = [
-          ...items
-        ];
+        result.yaxis = [...items];
       }
 
       //
       // X Axis ...
       if (this.hasChild(result.xaxis)) {
         //
-        const mappers = result.xaxis.map(async x => {
+        const mappers = result.xaxis.map(async (x) => {
           //
           // Normalizing Text ...
           x.label = await this.normalizeLabel(x.label);
@@ -2726,16 +2765,14 @@ export class XChartComponent extends XChartContainerComponent {
           return x;
         });
         const items = await Promise.all(mappers);
-        result.yaxis = [
-          ...items
-        ];
+        result.yaxis = [...items];
       }
 
       //
       // Points ...
       if (this.hasChild(result.points)) {
         //
-        const mappers = result.points.map(async x => {
+        const mappers = result.points.map(async (x) => {
           //
           x.marker = this.normalizeMarker(x.marker);
           x.label = await this.normalizeLabel(x.label);
@@ -2745,18 +2782,14 @@ export class XChartComponent extends XChartContainerComponent {
           return x;
         });
         const items = await Promise.all(mappers);
-        result.points = [
-          ...items
-        ];
+        result.points = [...items];
       }
 
       //
       // Images ...
       if (this.hasChild(result.images)) {
         //
-        result.images = [
-          ...result.images
-        ];
+        result.images = [...result.images];
       }
     }
 
@@ -2769,7 +2802,7 @@ export class XChartComponent extends XChartContainerComponent {
   //#region Normalizers ...
   private async normalizeText(
     v: XOneOrManyType<XResourceIdentifier>,
-    forceLocale: boolean = false
+    forceLocale: boolean = false,
   ) {
     //
     let result: XOneOrManyType<string> = undefined;
@@ -2780,7 +2813,7 @@ export class XChartComponent extends XChartContainerComponent {
       let items = toArray(v);
       if (this.hasChild(items)) {
         //
-        const mappers = items.map(async x => {
+        const mappers = items.map(async (x) => {
           //
           let r: string = await this.getResourceValueAsync(x);
 
@@ -2802,9 +2835,7 @@ export class XChartComponent extends XChartContainerComponent {
           if (results.length == 1) {
             result = results[0];
           } else {
-            result = [
-              ...results
-            ];
+            result = [...results];
           }
         }
       }
@@ -2820,16 +2851,18 @@ export class XChartComponent extends XChartContainerComponent {
       //
       v = {
         ...v,
-        colors: v?.colors.map(c => this.normalizeColor(c)),
-      }
+        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)),
-        }
+          gradientToColors: v?.gradient?.gradientToColors.map((c) =>
+            this.normalizeColor(c),
+          ),
+        };
 
         //
         if (!isNullOrUndefined(v?.gradient?.colorStops)) {
@@ -2841,12 +2874,18 @@ export class XChartComponent extends XChartContainerComponent {
           if (isMatrix) {
             //
             // Normalize Matrix ...
-            for (let c of v?.gradient?.colorStops) {
-
+            for (let c of v?.gradient?.colorStops as XChartColorStop[][]) {
+              //
+              c = [...c.map((x) => this.normalizeFillGradientColorStop(x))];
             }
           } else {
             //
             // Normalize Array ...
+            v.gradient.colorStops = [
+              ...(v?.gradient?.colorStops as XChartColorStop[]).map((x) =>
+                this.normalizeFillGradientColorStop(x),
+              ),
+            ];
           }
         }
       }
@@ -2884,7 +2923,7 @@ export class XChartComponent extends XChartContainerComponent {
         ...v,
         fillColor: this.normalizeColor(v.fillColor),
         strokeColor: this.normalizeColor(v.strokeColor),
-      }
+      };
     }
 
     //
@@ -2947,7 +2986,7 @@ export class XChartComponent extends XChartContainerComponent {
         ...v,
         //
         text: await this.normalizeText(v.text),
-      }
+      };
     }
 
     //
@@ -2971,7 +3010,7 @@ export class XChartComponent extends XChartContainerComponent {
         //
         result.style = {
           ...v.style,
-          background: this.normalizeColor(v.style.background)
+          background: this.normalizeColor(v.style.background),
         };
       }
 
@@ -2981,8 +3020,8 @@ export class XChartComponent extends XChartContainerComponent {
         //
         result.z = {
           ...v.z,
-          title: (await this.normalizeText(v.z.title) as string)
-        }
+          title: (await this.normalizeText(v.z.title)) as string,
+        };
       }
 
       //
@@ -2991,14 +3030,28 @@ export class XChartComponent extends XChartContainerComponent {
         //
         result.marker = {
           ...v.marker,
-          fillColors: v.marker.fillColors?.map(fc => this.normalizeColor(fc))
-        }
+          fillColors: v.marker.fillColors?.map((fc) => this.normalizeColor(fc)),
+        };
       }
     }
 
     //
     return result;
   }
+
+  private normalizeFillGradientColorStop(v: XChartColorStop) {
+    //
+    if (!isNullOrUndefined(v)) {
+      //
+      v = {
+        ...v,
+        color: this.normalizeColor(v.color),
+      };
+    }
+
+    //
+    return v;
+  }
   //#endregion
   //#endregion
 }