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 22:24:23 +03:30
parent 576136dbd3
commit f7b3cc65a3
1 changed files with 156 additions and 103 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
+156 -103
View File
@@ -7,6 +7,7 @@ import {
import { import {
nameof, nameof,
toArray, toArray,
isString,
XMimeType, XMimeType,
downloadFile, downloadFile,
generateUuid, generateUuid,
@@ -21,12 +22,16 @@ import {
downloadArrayBufferedFile, downloadArrayBufferedFile,
} from 'x-framework-core'; } from 'x-framework-core';
import { import {
XChartFill,
isChartType, isChartType,
XChartXAxis, XChartXAxis,
XChartYAxis, XChartYAxis,
XChartStroke,
XChartAction, XChartAction,
XChartTooltip, XChartTooltip,
XChartOptions, XChartOptions,
XChartColorStop,
XChartColorType,
XChartEventOpts, XChartEventOpts,
XChartTextAlign, XChartTextAlign,
XChartSeriesType, XChartSeriesType,
@@ -40,8 +45,6 @@ import {
XChartTooltipAnnotations, XChartTooltipAnnotations,
XChartContainerComponent, XChartContainerComponent,
XChartStoryboardBeatInfo, XChartStoryboardBeatInfo,
XChartStroke,
XChartFill,
} from './x-chart.typings'; } from './x-chart.typings';
import ApexCharts from 'apexcharts'; import ApexCharts from 'apexcharts';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
@@ -784,7 +787,7 @@ export class XChartComponent extends XChartContainerComponent {
printWindow.document.close(); printWindow.document.close();
} }
} }
} catch (error) { } } catch (error) {}
} }
async handleToggleFullscreen() { async handleToggleFullscreen() {
@@ -905,9 +908,13 @@ export class XChartComponent extends XChartContainerComponent {
this.CHART_OPTIONS = { this.CHART_OPTIONS = {
...cOptions, ...cOptions,
series: series, series: series,
stroke: {
...cOptions?.stroke,
...stroke
},
annotations: { annotations: {
...cOptions?.annotations, ...cOptions?.annotations,
...annotations ...annotations,
}, },
title: { title: {
...cOptions?.title, ...cOptions?.title,
@@ -1482,17 +1489,15 @@ export class XChartComponent extends XChartContainerComponent {
}, },
colors: colors, colors: colors,
xaxis: { xaxis: {
...xAxis ...xAxis,
}, },
yaxis: [ yaxis: [...yAxis],
...yAxis
],
grid: { grid: {
...cOptions?.grid, ...cOptions?.grid,
borderColor: gridColorValue, borderColor: gridColorValue,
}, },
tooltip: { tooltip: {
...tooltip ...tooltip,
}, },
dataLabels: { dataLabels: {
...cOptions?.dataLabels, ...cOptions?.dataLabels,
@@ -2222,14 +2227,15 @@ export class XChartComponent extends XChartContainerComponent {
// //
const offset = 24; const offset = 24;
height = `${window.innerHeight - height = `${
window.innerHeight -
offset - offset -
(actionBarHeight + (actionBarHeight +
(cardImageElement?.clientHeight || 0) + (cardImageElement?.clientHeight || 0) +
(cardHeaderElement?.clientHeight || 0) + (cardHeaderElement?.clientHeight || 0) +
(cardActionsElement?.clientHeight || 0) + (cardActionsElement?.clientHeight || 0) +
(cardFooterElement?.clientHeight || 0)) (cardFooterElement?.clientHeight || 0))
}px`; }px`;
} }
// //
@@ -2374,8 +2380,40 @@ export class XChartComponent extends XChartContainerComponent {
// //
result = { result = {
...result, ...result,
colors: result?.colors.map(c => this.normalizeColor(c)), colors: result?.colors.map((c) => this.normalizeColor(c)),
fill: this.normalizeFill(result?.fill) 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) { private async getPreparedXAxis(v?: XChartXAxis) {
@@ -2408,7 +2446,7 @@ export class XChartComponent extends XChartContainerComponent {
if (!isNullOrUndefined(this.xAxis)) { if (!isNullOrUndefined(this.xAxis)) {
// //
result = { result = {
...(await this.getValueAsync(this.xAxis)) ...(await this.getValueAsync(this.xAxis)),
}; };
} }
@@ -2417,7 +2455,7 @@ export class XChartComponent extends XChartContainerComponent {
// //
result = { result = {
...v, ...v,
...result ...result,
}; };
} }
@@ -2426,22 +2464,24 @@ export class XChartComponent extends XChartContainerComponent {
// //
result = { result = {
...result, ...result,
} };
// //
if (!isNullOrUndefined(result.labels)) { if (!isNullOrUndefined(result.labels)) {
// //
result.labels = { result.labels = {
...result.labels, ...result.labels,
} };
// //
if (!isNullOrUndefined(result.labels.style)) { if (!isNullOrUndefined(result.labels.style)) {
// //
result.labels.style = { 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)) { if (!isNullOrUndefined(result.group)) {
// //
result.group = { result.group = {
...result.group ...result.group,
} };
// //
if (!isNullOrUndefined(result.group.style)) { if (!isNullOrUndefined(result.group.style)) {
// //
result.group.style = { 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 = {
...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 = {
...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 = {
...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)) { if (!isNullOrUndefined(result.title.style)) {
// //
result.title.style = { 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)) { if (!isNullOrUndefined(result.crosshairs)) {
// //
result.crosshairs = { result.crosshairs = {
...result.crosshairs ...result.crosshairs,
} };
// //
if (!isNullOrUndefined(result.crosshairs.stroke)) { if (!isNullOrUndefined(result.crosshairs.stroke)) {
// //
result.crosshairs.stroke = { 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 = {
...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)) { if (!isNullOrUndefined(result.crosshairs.fill.gradient)) {
// //
result.crosshairs.fill.gradient = { result.crosshairs.fill.gradient = {
...result.crosshairs.fill.gradient, ...result.crosshairs.fill.gradient,
colorTo: this.normalizeColor(result.crosshairs.fill.gradient.colorTo), colorTo: this.normalizeColor(
colorFrom: this.normalizeColor(result.crosshairs.fill.gradient.colorFrom), 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)) { if (!isNullOrUndefined(v)) {
// //
result = [ result = [...toArray(v)];
...toArray(v)
];
} }
// //
@@ -2556,16 +2600,16 @@ export class XChartComponent extends XChartContainerComponent {
// //
result = [ result = [
...(this.hasChild(result) ? 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)) { if (!isNullOrUndefined(x.labels)) {
// //
x.labels = { x.labels = {
...x.labels ...x.labels,
}; };
// //
@@ -2573,8 +2617,10 @@ export class XChartComponent extends XChartContainerComponent {
// //
x.labels.style = { x.labels.style = {
...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 = {
...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 = {
...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 = {
...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)) { if (!isNullOrUndefined(x.title.style)) {
// //
x.title.style = { 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 = {
...x.crosshairs, ...x.crosshairs,
} };
// //
if (!isNullOrUndefined(x.crosshairs.stroke)) { if (!isNullOrUndefined(x.crosshairs.stroke)) {
// //
x.crosshairs.stroke = { 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); const items = await Promise.all(mappers);
// //
result = [ result = [...result, ...items];
...result,
...items
];
} }
// //
@@ -2665,7 +2708,7 @@ export class XChartComponent extends XChartContainerComponent {
// Texts ... // Texts ...
if (this.hasChild(result.texts)) { if (this.hasChild(result.texts)) {
// //
const mappers = result.texts.map(async x => { const mappers = result.texts.map(async (x) => {
// //
// Normalizing Text ... // Normalizing Text ...
x.text = (await this.normalizeText(x.text)) as string; x.text = (await this.normalizeText(x.text)) as string;
@@ -2680,16 +2723,14 @@ export class XChartComponent extends XChartContainerComponent {
return x; return x;
}); });
const items = await Promise.all(mappers); const items = await Promise.all(mappers);
result.texts = [ result.texts = [...items];
...items
];
} }
// //
// Y Axis ... // Y Axis ...
if (this.hasChild(result.yaxis)) { if (this.hasChild(result.yaxis)) {
// //
const mappers = result.yaxis.map(async x => { const mappers = result.yaxis.map(async (x) => {
// //
// Normalizing Text ... // Normalizing Text ...
x.label = await this.normalizeLabel(x.label); x.label = await this.normalizeLabel(x.label);
@@ -2703,16 +2744,14 @@ export class XChartComponent extends XChartContainerComponent {
return x; return x;
}); });
const items = await Promise.all(mappers); const items = await Promise.all(mappers);
result.yaxis = [ result.yaxis = [...items];
...items
];
} }
// //
// X Axis ... // X Axis ...
if (this.hasChild(result.xaxis)) { if (this.hasChild(result.xaxis)) {
// //
const mappers = result.xaxis.map(async x => { const mappers = result.xaxis.map(async (x) => {
// //
// Normalizing Text ... // Normalizing Text ...
x.label = await this.normalizeLabel(x.label); x.label = await this.normalizeLabel(x.label);
@@ -2726,16 +2765,14 @@ export class XChartComponent extends XChartContainerComponent {
return x; return x;
}); });
const items = await Promise.all(mappers); const items = await Promise.all(mappers);
result.yaxis = [ result.yaxis = [...items];
...items
];
} }
// //
// Points ... // Points ...
if (this.hasChild(result.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.marker = this.normalizeMarker(x.marker);
x.label = await this.normalizeLabel(x.label); x.label = await this.normalizeLabel(x.label);
@@ -2745,18 +2782,14 @@ export class XChartComponent extends XChartContainerComponent {
return x; return x;
}); });
const items = await Promise.all(mappers); const items = await Promise.all(mappers);
result.points = [ result.points = [...items];
...items
];
} }
// //
// Images ... // Images ...
if (this.hasChild(result.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 ... //#region Normalizers ...
private async normalizeText( private async normalizeText(
v: XOneOrManyType<XResourceIdentifier>, v: XOneOrManyType<XResourceIdentifier>,
forceLocale: boolean = false forceLocale: boolean = false,
) { ) {
// //
let result: XOneOrManyType<string> = undefined; let result: XOneOrManyType<string> = undefined;
@@ -2780,7 +2813,7 @@ export class XChartComponent extends XChartContainerComponent {
let items = toArray(v); let items = toArray(v);
if (this.hasChild(items)) { if (this.hasChild(items)) {
// //
const mappers = items.map(async x => { const mappers = items.map(async (x) => {
// //
let r: string = await this.getResourceValueAsync(x); let r: string = await this.getResourceValueAsync(x);
@@ -2802,9 +2835,7 @@ export class XChartComponent extends XChartContainerComponent {
if (results.length == 1) { if (results.length == 1) {
result = results[0]; result = results[0];
} else { } else {
result = [ result = [...results];
...results
];
} }
} }
} }
@@ -2820,33 +2851,41 @@ export class XChartComponent extends XChartContainerComponent {
// //
v = { v = {
...v, ...v,
colors: v?.colors.map(c => this.normalizeColor(c)), colors: v?.colors.map((c) => this.normalizeColor(c)),
} };
// //
if (!isNullOrUndefined(v.gradient)) { if (!isNullOrUndefined(v.gradient)) {
// //
v.gradient = { 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)) { if (!isNullOrUndefined(v?.gradient?.colorStops)) {
// //
const isMatrix = const isMatrix =
Array.isArray(v?.gradient?.colorStops) && Array.isArray(v?.gradient?.colorStops) &&
this.hasChild(v?.gradient?.colorStops) && this.hasChild(v?.gradient?.colorStops) &&
Array.isArray(v?.gradient?.colorStops); Array.isArray(v?.gradient?.colorStops);
if (isMatrix) { if (isMatrix) {
// //
// Normalize Matrix ... // 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 { } else {
// //
// Normalize Array ... // 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, ...v,
fillColor: this.normalizeColor(v.fillColor), fillColor: this.normalizeColor(v.fillColor),
strokeColor: this.normalizeColor(v.strokeColor), strokeColor: this.normalizeColor(v.strokeColor),
} };
} }
// //
@@ -2947,7 +2986,7 @@ export class XChartComponent extends XChartContainerComponent {
...v, ...v,
// //
text: await this.normalizeText(v.text), text: await this.normalizeText(v.text),
} };
} }
// //
@@ -2971,7 +3010,7 @@ export class XChartComponent extends XChartContainerComponent {
// //
result.style = { result.style = {
...v.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 = { result.z = {
...v.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 = { result.marker = {
...v.marker, ...v.marker,
fillColors: v.marker.fillColors?.map(fc => this.normalizeColor(fc)) fillColors: v.marker.fillColors?.map((fc) => this.normalizeColor(fc)),
} };
} }
} }
// //
return result; return result;
} }
private normalizeFillGradientColorStop(v: XChartColorStop) {
//
if (!isNullOrUndefined(v)) {
//
v = {
...v,
color: this.normalizeColor(v.color),
};
}
//
return v;
}
//#endregion //#endregion
//#endregion //#endregion
} }