From f7b3cc65a3813d5c70ecbdf0d410a1871defe45f Mon Sep 17 00:00:00 2001 From: Hadi Khazaee Asl Date: Tue, 1 Sep 2026 22:24:23 +0330 Subject: [PATCH] last ... --- .../src/lib/x-chart/x-chart.component.ts | 259 +++++++++++------- 1 file changed, 156 insertions(+), 103 deletions(-) diff --git a/projects/x-framework-components/src/lib/x-chart/x-chart.component.ts b/projects/x-framework-components/src/lib/x-chart/x-chart.component.ts index 5449533..b5e9a54 100644 --- a/projects/x-framework-components/src/lib/x-chart/x-chart.component.ts +++ b/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'; @@ -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, - forceLocale: boolean = false + forceLocale: boolean = false, ) { // let result: XOneOrManyType = 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 }