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

try to use x-chart component ...

Browse Source
This commit is contained in:
saherelm
2026-08-21 18:44:46 +03:30
parent 203c09a0e8
commit 0f37e94ac9
8 changed files with 3498 additions and 98 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
+150 -79
View File
@@ -4,10 +4,16 @@ import {
ElementRef,
ChangeDetectionStrategy,
} from '@angular/core';
import {
isChartType,
XChartAction,
XChartOptions,
XChartSeriesType,
XChartContainerComponent,
} from './x-chart.typings';
import { Subscription } from 'rxjs';
import ApexCharts from 'apexcharts';
import { isNullOrUndefined, nameof } from 'x-framework-core';
import ApexCharts, { ApexAxisChartSeries, ApexOptions } from 'apexcharts';
import { XChartAction, XChartContainerComponent } from './x-chart.typings';
@Component({
selector: 'x-chart',
@@ -19,11 +25,31 @@ export class XChartComponent extends XChartContainerComponent {
//
//#region Props ...
//
@ViewChild('chartContainer', { static: true })
chartContainer!: ElementRef;
private CHART_CONTAINER: ElementRef | undefined;
@ViewChild('chartContainer', { static: false })
set chartContainer(el: ElementRef | undefined) {
//
if (isNullOrUndefined(el)) {
//
this.destroyComponent();
return;
}
//
this.CHART_CONTAINER = el;
this.initializeComponent();
}
get chartContainer() {
return this.CHART_CONTAINER;
}
//
private chartInstance: ApexCharts | null = null;
private CHART_OPTIONS: XChartOptions = null;
//
private chartInstance: ApexCharts = null;
//
private ACTION_PROVIDER_SUBSCRIPTION: Subscription;
@@ -31,11 +57,11 @@ export class XChartComponent extends XChartContainerComponent {
//
//#region LifeCycles ...
afterViewInit() {
async afterViewInit() {
super.afterViewInit();
//
this.initializeComponent();
await this.initializeComponent();
}
async onChange(changeKeys: string[]) {
@@ -53,45 +79,6 @@ export class XChartComponent extends XChartContainerComponent {
}
}
//
// Check Auto Update ...
var autoUpdate = await this.getValueAsync(this.autoUpdate);
if (!autoUpdate || isNullOrUndefined(this.chartInstance)) {
return;
}
//
// Options Changed ...
const isOptionsChanged = changeKeys.includes(
nameof<XChartComponent>('options'),
);
if (isOptionsChanged) {
//
if (isNullOrUndefined(this.options)) {
this.options = this.propertyProvider.options;
}
//
const options = await this.getValueAsync(this.options);
await this.chartInstance.updateOptions(options);
}
//
// Series Changed ...
const isSeriesChanged = changeKeys.includes(
nameof<XChartComponent>('series'),
);
if (isSeriesChanged) {
//
if (isNullOrUndefined(this.series)) {
this.series = this.propertyProvider.series;
}
//
const series = await this.getValueAsync(this.series);
await this.chartInstance.updateSeries(series);
}
//
// Action Provider Changed ...
const isActionProviderChanged = changeKeys.includes(
@@ -101,6 +88,69 @@ export class XChartComponent extends XChartContainerComponent {
this.registerActionProvider();
}
//
// Check Auto Update ...
var autoUpdate = await this.getValueAsync(this.autoUpdate);
if (
autoUpdate &&
!isNullOrUndefined(this.chartInstance) &&
!isNullOrUndefined(this.chartContainer) &&
!isNullOrUndefined(this.chartContainer.nativeElement)
) {
//
// Options Changed ...
const isOptionsChanged = changeKeys.includes(
nameof<XChartComponent>('options'),
);
if (isOptionsChanged) {
//
if (isNullOrUndefined(this.options)) {
this.options = this.propertyProvider.options;
}
//
await this.handleChartUpdate();
}
//
// Chart Type ...
const isTypeChanged = changeKeys.includes(
nameof<XChartComponent>('type'),
);
if (isTypeChanged) {
//
if (isNullOrUndefined(this.type)) {
this.type = this.propertyProvider.type;
}
//
var type = await this.getValueAsync(this.type);
if (!isChartType(type)) {
//
type = await this.getValueAsync(this.propertyProvider.type);
this.type = type;
}
//
await this.handleChartUpdate();
}
//
// Series Changed ...
const isSeriesChanged = changeKeys.includes(
nameof<XChartComponent>('series'),
);
if (isSeriesChanged) {
//
if (isNullOrUndefined(this.series)) {
this.series = this.propertyProvider.series;
}
//
await this.handleChartUpdate();
}
}
//
this.detectChanges();
}
@@ -109,13 +159,7 @@ export class XChartComponent extends XChartContainerComponent {
super.onDestroy();
//
if (!isNullOrUndefined(this.chartInstance)) {
//
this.chartInstance.destroy();
this.chartInstance = null;
}
//
this.destroyComponent();
this.unregisterActionProvider();
}
//#endregion
@@ -123,18 +167,18 @@ export class XChartComponent extends XChartContainerComponent {
//
//#region Private ...
private async initializeComponent() {
//
if (isNullOrUndefined(this.CHART_CONTAINER)) {
return;
}
//
// Reading Requirement Properties ...
const type = await this.getValueAsync(this.type);
const chartId = await this.getValueAsync(this.uuid);
const series = await this.getValueAsync(this.series);
const options = await this.getValueAsync(this.options);
//
// Validate Options ...
if (isNullOrUndefined(options)) {
return;
}
//
const computedStyle = getComputedStyle(document.documentElement);
const primaryColor =
@@ -145,13 +189,15 @@ export class XChartComponent extends XChartContainerComponent {
const gridColor =
computedStyle.getPropertyValue('--x-color-light-shade').trim() ||
'#e0e0e0';
const finalOptions: ApexOptions = {
//
this.CHART_OPTIONS = {
...options,
series: series as any,
series: series || options.series,
chart: {
...options.chart,
id: chartId,
type: options.chart?.type || 'line',
type: type as any,
foreColor: textColor,
events: {
...options.chart?.events,
@@ -182,32 +228,57 @@ export class XChartComponent extends XChartContainerComponent {
...options.grid,
borderColor: gridColor,
},
xaxis: {
...options.xaxis,
labels: {
...options.xaxis?.labels,
style: { colors: textColor },
},
},
yaxis: {
...options.yaxis,
labels: {
...(options.yaxis as any).labels,
style: { colors: textColor },
},
},
};
//
this.chartInstance = new ApexCharts(
this.chartContainer.nativeElement,
finalOptions,
this.CHART_OPTIONS,
);
//
await this.chartInstance.render();
}
private async handleChartUpdate() {
//
if (
isNullOrUndefined(this.chartInstance) ||
isNullOrUndefined(this.CHART_OPTIONS) ||
isNullOrUndefined(this.chartContainer) ||
isNullOrUndefined(this.chartContainer.nativeElement)
) {
return;
}
//
// Reading Requirement Properties ...
const type = await this.getValueAsync(this.type);
const series = await this.getValueAsync(this.series);
//
const options = await this.getValueAsync(this.options);
this.CHART_OPTIONS = {
...options,
...this.CHART_OPTIONS,
};
//
await this.chartInstance.updateOptions(this.CHART_OPTIONS);
await this.chartInstance.updateSeries(series);
}
private destroyComponent() {
//
if (isNullOrUndefined(this.chartInstance)) {
return;
}
//
this.chartInstance.destroy();
this.chartInstance = null;
}
private registerActionProvider() {
//
this.unregisterActionProvider();
@@ -242,7 +313,7 @@ export class XChartComponent extends XChartContainerComponent {
) {
//
this.series = await this.getValueAsync(
model.payload as ApexAxisChartSeries,
model.payload as XChartSeriesType,
);
await this.chartInstance.updateSeries(this.series);
this.detectChanges();
@@ -258,7 +329,7 @@ export class XChartComponent extends XChartContainerComponent {
) {
//
this.options = await this.getValueAsync(
model.payload as ApexOptions,
model.payload as XChartOptions,
);
await this.chartInstance.updateOptions(this.options);
this.detectChanges();