last ...

2026-09-01 22:24:23 +03:30
parent 576136dbd3
commit f7b3cc65a3
1 changed files with 156 additions and 103 deletions
@@ -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';
@@ -784,7 +787,7 @@ export class XChartComponent extends XChartContainerComponent {
          printWindow.document.close();
        }
      }
-    } catch (error) { }
+    } catch (error) {}
  }

  async handleToggleFullscreen() {
@@ -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,14 +2227,15 @@ export class XChartComponent extends XChartContainerComponent {

      //
      const offset = 24;
-      height = `${window.innerHeight -
+      height = `${
+        window.innerHeight -
        offset -
        (actionBarHeight +
          (cardImageElement?.clientHeight || 0) +
          (cardHeaderElement?.clientHeight || 0) +
          (cardActionsElement?.clientHeight || 0) +
          (cardFooterElement?.clientHeight || 0))
-        }px`;
+      }px`;
    }

    //
@@ -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,33 +2851,41 @@ 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)) {
          //
-          const isMatrix = 
-            Array.isArray(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) {
-
+            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
 }