saherelm/xFrameworkComponentsHolder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

last ...

Browse Source
This commit is contained in:
saherelm
2026-09-01 11:25:18 +03:30
parent 76dc91fb4b
commit 576136dbd3
2 changed files with 170 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
projects/x-framework-components/src/lib/x-chart/x-chart.component.ts
+144 -50
View File
@@ -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:
{
...cOptions?.series,
...series as any
},
series: series,
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,
palette: cOptions.theme?.palette || 'palette1',
...cOptions?.theme,
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
+26 -2
View File
@@ -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),