From 752efe3e3cc55e7fc6a427dfd8697867e05809bf Mon Sep 17 00:00:00 2001 From: Hadi Khazaee Asl Date: Mon, 31 Aug 2026 22:24:40 +0330 Subject: [PATCH] add color properties has issues ... --- .../src/lib/x-chart/x-chart.component.ts | 105 ++++++++++-------- .../src/lib/x-chart/x-chart.typings.ts | 17 ++- 2 files changed, 75 insertions(+), 47 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 b7665d9..e84bb17 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 @@ -28,6 +28,7 @@ import { XChartDrilldownEvent, XChartContainerComponent, XChartStoryboardBeatInfo, + XChartColorFormatterOpts, } from './x-chart.typings'; import ApexCharts from 'apexcharts'; import { Subject, Subscription } from 'rxjs'; @@ -724,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)> = + [getXColorValue(XColorWithBrightness.PrimaryShade)]; + // const title = await this.getResourceValueAsync(this.title); const titleAlignProp = await this.getValueAsync(this.titleAlign); @@ -759,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') { @@ -798,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, @@ -828,7 +838,7 @@ export class XChartComponent extends XChartContainerComponent { autoSelected: 'pan', }, events: { - ...cOptions.chart?.events, + ...cOptions?.chart?.events, // //#region Attach Events ... // @@ -839,7 +849,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.animationEnd?.(chart, options); + cOptions?.chart?.events?.animationEnd?.(chart, options); }, // @@ -850,7 +860,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.beforeMount?.(chart, options); + cOptions?.chart?.events?.beforeMount?.(chart, options); }, // @@ -861,7 +871,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.mounted?.(chart, options); + cOptions?.chart?.events?.mounted?.(chart, options); }, // @@ -872,7 +882,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.updated?.(chart, options); + cOptions?.chart?.events?.updated?.(chart, options); }, // @@ -887,7 +897,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.mouseMove?.(e, chart, options); + cOptions?.chart?.events?.mouseMove?.(e, chart, options); }, // @@ -902,7 +912,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.mouseLeave?.(e, chart, options); + cOptions?.chart?.events?.mouseLeave?.(e, chart, options); }, // @@ -917,7 +927,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.click?.(e, chart, options); + cOptions?.chart?.events?.click?.(e, chart, options); }, // @@ -932,7 +942,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.xAxisLabelClick?.(e, chart, options); + cOptions?.chart?.events?.xAxisLabelClick?.(e, chart, options); }, // @@ -950,7 +960,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.legendClick?.(chart, seriesIndex, options); + cOptions?.chart?.events?.legendClick?.(chart, seriesIndex, options); }, // @@ -965,7 +975,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.markerClick?.(e, chart, options); + cOptions?.chart?.events?.markerClick?.(e, chart, options); }, // @@ -982,7 +992,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.selection?.(chart, options); + cOptions?.chart?.events?.selection?.(chart, options); }, // @@ -997,7 +1007,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.dataPointSelection?.(e, chart, options); + cOptions?.chart?.events?.dataPointSelection?.(e, chart, options); }, // @@ -1012,7 +1022,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.dataPointMouseEnter?.(e, chart, options); + cOptions?.chart?.events?.dataPointMouseEnter?.(e, chart, options); }, // @@ -1027,7 +1037,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.dataPointMouseLeave?.(e, chart, options); + cOptions?.chart?.events?.dataPointMouseLeave?.(e, chart, options); }, // @@ -1041,7 +1051,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.beforeZoom?.(chart, options); + cOptions?.chart?.events?.beforeZoom?.(chart, options); }, // @@ -1052,7 +1062,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.beforeResetZoom?.(chart, options); + cOptions?.chart?.events?.beforeResetZoom?.(chart, options); }, // @@ -1069,7 +1079,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.zoomed?.(chart, options); + cOptions?.chart?.events?.zoomed?.(chart, options); }, // @@ -1083,7 +1093,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.scrolled?.(chart, options); + cOptions?.chart?.events?.scrolled?.(chart, options); }, // @@ -1100,7 +1110,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.brushScrolled?.(chart, options); + cOptions?.chart?.events?.brushScrolled?.(chart, options); }, // @@ -1117,7 +1127,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.crossFilter?.(chart, options); + cOptions?.chart?.events?.crossFilter?.(chart, options); }, // @@ -1137,7 +1147,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.filterChange?.(chart, options); + cOptions?.chart?.events?.filterChange?.(chart, options); }, // @@ -1159,7 +1169,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.annotationDragged?.(chart, options); + cOptions?.chart?.events?.annotationDragged?.(chart, options); }, // @@ -1178,7 +1188,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.annotationEdited?.(chart, options); + cOptions?.chart?.events?.annotationEdited?.(chart, options); }, // @@ -1198,7 +1208,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.annotationCreated?.(chart, options); + cOptions?.chart?.events?.annotationCreated?.(chart, options); }, // @@ -1218,7 +1228,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.annotationStyled?.(chart, options); + cOptions?.chart?.events?.annotationStyled?.(chart, options); }, // @@ -1236,7 +1246,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.annotationDeleted?.(chart, options); + cOptions?.chart?.events?.annotationDeleted?.(chart, options); }, // @@ -1257,7 +1267,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.measured?.(chart, options); + cOptions?.chart?.events?.measured?.(chart, options); }, // @@ -1271,7 +1281,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.beatChange?.(chart, options); + cOptions?.chart?.events?.beatChange?.(chart, options); }, // @@ -1286,7 +1296,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.keyDown?.(e, chart, options); + cOptions?.chart?.events?.keyDown?.(e, chart, options); }, // @@ -1301,7 +1311,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.keyUp?.(e, chart, options); + cOptions?.chart?.events?.keyUp?.(e, chart, options); }, // @@ -1316,7 +1326,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.drillDownStart?.(info, chart, options); + cOptions?.chart?.events?.drillDownStart?.(info, chart, options); }, // @@ -1331,7 +1341,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.drillDownEnd?.(info, chart, options); + cOptions?.chart?.events?.drillDownEnd?.(info, chart, options); }, // @@ -1346,7 +1356,7 @@ export class XChartComponent extends XChartContainerComponent { } // - cOptions.chart?.events?.drillUp?.(info, chart, options); + cOptions?.chart?.events?.drillUp?.(info, chart, options); }, // @@ -1361,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, - palette: cOptions.theme?.palette || 'palette1', + ...cOptions?.theme, + palette: cOptions?.theme?.palette || 'palette1', }, - colors: cOptions.colors || [primaryColorValue], + colors: colors, grid: { - ...cOptions.grid, + ...cOptions?.grid, borderColor: gridColorValue, }, dataLabels: { - ...cOptions.dataLabels, + ...cOptions?.dataLabels, }, }; @@ -1395,6 +1405,9 @@ export class XChartComponent extends XChartContainerComponent { // await this.prepareActionBar(); + // + console.log('CHART_OPTIONS: ', this.CHART_OPTIONS); + // await this.chartInstance.render(); } diff --git a/projects/x-framework-components/src/lib/x-chart/x-chart.typings.ts b/projects/x-framework-components/src/lib/x-chart/x-chart.typings.ts index 0de2cb9..4232876 100644 --- a/projects/x-framework-components/src/lib/x-chart/x-chart.typings.ts +++ b/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; type: XStandardType; + // + colors: Array string)>; + // title: XStandardType; titleAlign: XStandardType; @@ -3473,6 +3477,11 @@ export class XChartContainer readonly series: XStandardType; readonly type: XStandardType = XChartType.Line; + // + readonly colors: Array< + string | ((opts: XChartColorFormatterOpts) => string) + > = [getXColorValue(XColorWithBrightness.PrimaryShade)]; + // readonly title: XStandardType; readonly titleAlign: XStandardType = @@ -3698,6 +3707,9 @@ export abstract class XChartContainerComponent @Input() zoomStep: XStandardType = this.propertyProvider.zoomStep; + @Input() + colors: Array string)> = this.propertyProvider.colors; + @Input() defaultActionBarItemColor: XStandardType = 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(