From f9f0408daf7ee7bcb9a23aa8e6e15a174f46e00c Mon Sep 17 00:00:00 2001 From: Hadi Khazaee Asl Date: Fri, 28 Aug 2026 20:56:50 +0330 Subject: [PATCH] apply all x-chart component works ... --- .../src/lib/x-chart/x-chart.component.ts | 951 +++++++++++++++--- .../src/lib/x-chart/x-chart.typings.ts | 922 +++++++++++++---- 2 files changed, 1572 insertions(+), 301 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 caacea9..622bdf6 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 @@ -10,18 +10,25 @@ import { XMimeType, downloadFile, generateUuid, + getXColorValue, downloadFileByUrl, isNullOrUndefined, isNullOrEmptyString, + XColorWithBrightness, downloadArrayBufferedFile, } from 'x-framework-core'; import { isChartType, XChartAction, XChartOptions, + XChartEventOpts, + XChartTextAlign, XChartSeriesType, + isChartTextAlign, XChartActionBarItem, + XChartDrilldownEvent, XChartContainerComponent, + XChartStoryboardBeatInfo, } from './x-chart.typings'; import { Subscription } from 'rxjs'; import ApexCharts from 'apexcharts'; @@ -103,35 +110,31 @@ export class XChartComponent extends XChartContainerComponent { super.onChange(changeKeys); // - // Auto Update ... - const isAutoUpdateChanged = changeKeys.includes( - nameof('autoUpdate'), - ); - if (isAutoUpdateChanged) { - // - if (isNullOrUndefined(this.autoUpdate)) { - this.autoUpdate = this.propertyProvider.autoUpdate; - } - } + let isChanged = false; // // Action Provider Changed ... - const isActionProviderChanged = changeKeys.includes( - nameof('actionProvider'), - ); - if (isActionProviderChanged) { + isChanged = changeKeys.includes(nameof('actionProvider')); + if (isChanged) { + // + if (isNullOrUndefined(this.actionProvider)) { + this.actionProvider = this.propertyProvider.actionProvider; + } + + // this.registerActionProvider(); } // // Available Action Bar Items Changed ... - const isAvailableActionBarItemsChanged = changeKeys.includes( - nameof('availableActionBarItems') + isChanged = changeKeys.includes( + nameof('availableActionBarItems'), ); - if (isAvailableActionBarItemsChanged) { + if (isChanged) { // if (isNullOrUndefined(this.availableActionBarItems)) { - this.availableActionBarItems = this.propertyProvider.availableActionBarItems; + this.availableActionBarItems = + this.propertyProvider.availableActionBarItems; } // @@ -140,16 +143,11 @@ export class XChartComponent extends XChartContainerComponent { // // Zoom Step ... - const isZoomStepChanged = changeKeys.includes( - nameof('zoomStep') - ); - if (isZoomStepChanged) { + isChanged = changeKeys.includes(nameof('zoomStep')); + if (isChanged) { // let zoomStep = await this.getValueAsync(this.zoomStep); - if (isNullOrUndefined(zoomStep) || - zoomStep < 0 || - zoomStep > 1 - ) { + if (isNullOrUndefined(zoomStep) || zoomStep < 0 || zoomStep > 1) { this.zoomStep = 0.125; } @@ -158,66 +156,177 @@ export class XChartComponent extends XChartContainerComponent { } // - // Check Auto Update ... - var autoUpdate = await this.getValueAsync(this.autoUpdate); - if ( - autoUpdate && - !isNullOrUndefined(this.chartInstance) && - !isNullOrUndefined(this.chartContainer) && - !isNullOrUndefined(this.chartContainer.nativeElement) - ) { + // Chart Title ... + isChanged = changeKeys.includes(nameof('title')); + if (isChanged) { // - // Options Changed ... - const isOptionsChanged = changeKeys.includes( - nameof('options'), - ); - if (isOptionsChanged) { - // - if (isNullOrUndefined(this.options)) { - this.options = this.propertyProvider.options; - } - - // - await this.handleChartUpdate(); + if (isNullOrUndefined(this.title)) { + this.title = this.propertyProvider.title; } // - // Chart Type ... - const isTypeChanged = changeKeys.includes( - nameof('type'), - ); - if (isTypeChanged) { - // - if (isNullOrUndefined(this.type)) { - this.type = this.propertyProvider.type; - } + this.handleChartUpdate(); + } - // - var type = await this.getValueAsync(this.type); - if (!isChartType(type)) { - // - type = await this.getValueAsync(this.propertyProvider.type); - this.type = type; - } - - // - await this.handleChartUpdate(); + // + // Chart Title Align ... + isChanged = changeKeys.includes(nameof('titleAlign')); + if (isChanged) { + // + const align = await this.getValueAsync(this.titleAlign); + if ( + isNullOrUndefined(this.titleAlign) || + isNullOrEmptyString(align) || + !isChartTextAlign(align) + ) { + this.titleAlign = this.propertyProvider.titleAlign; } // - // Series Changed ... - const isSeriesChanged = changeKeys.includes( - nameof('series'), - ); - if (isSeriesChanged) { - // - if (isNullOrUndefined(this.series)) { - this.series = this.propertyProvider.series; - } + this.handleChartUpdate(); + } - // - await this.handleChartUpdate(); + // + // Chart SubTitle ... + isChanged = changeKeys.includes(nameof('subTitle')); + if (isChanged) { + // + if (isNullOrUndefined(this.subTitle)) { + this.subTitle = this.propertyProvider.subTitle; } + + // + this.handleChartUpdate(); + } + + // + // Chart Sub Title Align ... + isChanged = changeKeys.includes(nameof('subTitleAlign')); + if (isChanged) { + // + const align = await this.getValueAsync(this.subTitleAlign); + if ( + isNullOrUndefined(this.subTitleAlign) || + isNullOrEmptyString(align) || + !isChartTextAlign(align) + ) { + this.subTitleAlign = this.propertyProvider.subTitleAlign; + } + + // + this.handleChartUpdate(); + } + + // + // Foreground Color Changed ... + isChanged = changeKeys.includes(nameof('foregroundColor')); + if (isChanged) { + // + if (isNullOrUndefined(this.foregroundColor)) { + this.foregroundColor = this.propertyProvider.foregroundColor; + } + + // + await this.handleChartUpdate(); + } + + // + // Background Color Changed ... + isChanged = changeKeys.includes(nameof('backgroundColor')); + if (isChanged) { + // + if (isNullOrUndefined(this.backgroundColor)) { + this.backgroundColor = this.propertyProvider.backgroundColor; + } + + // + await this.handleChartUpdate(); + } + + // + // Grid Color Changed ... + isChanged = changeKeys.includes(nameof('gridColor')); + if (isChanged) { + // + if (isNullOrUndefined(this.gridColor)) { + this.gridColor = this.propertyProvider.gridColor; + } + + // + await this.handleChartUpdate(); + } + + // + // Chart Title Color ... + isChanged = changeKeys.includes(nameof('titleColor')); + if (isChanged) { + // + if (isNullOrUndefined(this.titleColor)) { + this.titleColor = this.propertyProvider.titleColor; + } + + // + this.handleChartUpdate(); + } + + // + // Chart SubTitle Color ... + isChanged = changeKeys.includes(nameof('subTitleColor')); + if (isChanged) { + // + if (isNullOrUndefined(this.subTitleColor)) { + this.subTitleColor = this.propertyProvider.subTitleColor; + } + + // + this.handleChartUpdate(); + } + + // + // Options Changed ... + isChanged = changeKeys.includes(nameof('options')); + if (isChanged) { + // + if (isNullOrUndefined(this.options)) { + this.options = this.propertyProvider.options; + } + + // + await this.handleChartUpdate(); + } + + // + // Chart Type ... + isChanged = changeKeys.includes(nameof('type')); + if (isChanged) { + // + 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 ... + isChanged = changeKeys.includes(nameof('series')); + if (isChanged) { + // + if (isNullOrUndefined(this.series)) { + this.series = this.propertyProvider.series; + } + + // + await this.handleChartUpdate(); } // @@ -426,7 +535,10 @@ export class XChartComponent extends XChartContainerComponent { const rangeIn = maxX - minX; // - await this.chartInstance.zoomX(minX + rangeIn * zoomStep, maxX - rangeIn * zoomStep); + await this.chartInstance.zoomX( + minX + rangeIn * zoomStep, + maxX - rangeIn * zoomStep, + ); } async handleZoomOut() { @@ -445,7 +557,10 @@ export class XChartComponent extends XChartContainerComponent { const rangeIn = maxX - minX; // - await this.chartInstance.zoomX(minX - rangeIn * zoomStep, maxX + rangeIn * zoomStep); + await this.chartInstance.zoomX( + minX - rangeIn * zoomStep, + maxX + rangeIn * zoomStep, + ); } async handlePan() { @@ -458,13 +573,13 @@ export class XChartComponent extends XChartContainerComponent { await this.chartInstance.updateOptions({ chart: { zoom: { - enabled: false + enabled: false, }, selection: { type: 'x', enabled: true, }, - } + }, }); } @@ -494,7 +609,7 @@ export class XChartComponent extends XChartContainerComponent { const printWindow = window.open('', '_blank'); if (printWindow) { // - // Write Data Uri on a Page for Printing ... + // Write Data Uri on a Page for Printing ... printWindow.document.write(` @@ -542,13 +657,13 @@ export class XChartComponent extends XChartContainerComponent { printWindow.document.close(); } } - } catch (error) { - } + } catch (error) {} } async handleToggleFullscreen() { // - if (isNullOrUndefined(this.chartInstance) || + if ( + isNullOrUndefined(this.chartInstance) || isNullOrUndefined(this.chartContainer) || isNullOrUndefined(this.chartContainer.nativeElement) ) { @@ -556,8 +671,7 @@ export class XChartComponent extends XChartContainerComponent { } // - const chartWrapper = - this.chartContainer.nativeElement; + const chartWrapper = this.chartContainer.nativeElement; const doc = document as any; // @@ -608,60 +722,659 @@ 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 options = await this.getValueAsync(this.options); + const cOptions = await this.getValueAsync(this.options); // - const computedStyle = getComputedStyle(document.documentElement); - const primaryColor = - computedStyle.getPropertyValue('--x-color-primary').trim() || '#008ffb'; - const textColor = - computedStyle.getPropertyValue('--x-color-dark-contrast').trim() || - '#373d3f'; - const gridColor = - computedStyle.getPropertyValue('--x-color-light-shade').trim() || - '#e0e0e0'; + const title = await this.getResourceValueAsync(this.title); + const titleAlignProp = await this.getValueAsync(this.titleAlign); + let titleAlign: 'left' | 'center' | 'right' = 'center'; + + // + const subTitle = await this.getResourceValueAsync(this.subTitle); + const subTitleAlignProp = await this.getValueAsync(this.subTitleAlign); + let subTitleAlign: 'left' | 'center' | 'right' = 'center'; + + // + const gridColorName = await this.getValueAsync(this.gridColor); + const gridColorValue = getXColorValue(gridColorName); + + // + const titleColorName = await this.getValueAsync(this.titleColor); + const titleColorValue = getXColorValue(titleColorName); + + // + const subTitleColorName = await this.getValueAsync(this.subTitleColor); + const subTitleColorValue = getXColorValue(subTitleColorName); + + // + const foregroundColorName = await this.getValueAsync(this.foregroundColor); + const foregroundColorValue = getXColorValue(foregroundColorName); + + // + const backgroundColorName = await this.getValueAsync(this.backgroundColor); + const backgroundColorValue = getXColorValue(backgroundColorName); + + // + const primaryColorValue = getXColorValue(XColorWithBrightness.Primary); + + // + // Normalize Directional Properties .... + if (this.managerService.uiDirection == 'ltr') { + // + titleAlign = + titleAlignProp == XChartTextAlign.Start + ? 'left' + : titleAlignProp == XChartTextAlign.End + ? 'right' + : 'center'; + + // + subTitleAlign = + subTitleAlignProp == XChartTextAlign.Start + ? 'left' + : subTitleAlignProp == XChartTextAlign.End + ? 'right' + : 'center'; + } else if (this.managerService.uiDirection == 'rtl') { + // + titleAlign = + titleAlignProp == XChartTextAlign.Start + ? 'right' + : titleAlignProp == XChartTextAlign.End + ? 'left' + : 'center'; + + // + subTitleAlign = + subTitleAlignProp == XChartTextAlign.Start + ? 'right' + : subTitleAlignProp == XChartTextAlign.End + ? 'left' + : 'center'; + } // this.CHART_OPTIONS = { - ...options, - series: series || options.series, + ...cOptions, + series: series || cOptions.series, + title: { + ...cOptions.title, + text: title, + align: titleAlign, + style: { + ...cOptions.title?.style, + color: titleColorValue, + }, + }, + subtitle: { + ...cOptions.subtitle, + text: subTitle, + align: subTitleAlign, + style: { + ...cOptions.subtitle?.style, + color: subTitleColorValue, + }, + }, chart: { - ...options.chart, + ...cOptions.chart, id: chartId, type: type as any, - foreColor: textColor, + foreColor: foregroundColorValue, + background: backgroundColorValue, toolbar: { show: false, autoSelected: 'pan', }, events: { - ...options.chart?.events, - mounted: (chartContext, config) => { - this.chartRendered.emit(); - options.chart?.events?.mounted?.(chartContext, config); + ...cOptions.chart?.events, + // + //#region Attach Events ... + // + animationEnd: (chart: ApexCharts, options?: XChartEventOpts) => { + // + if (!this.loading && !this.uiDisabled) { + this.animationEnd.emit(options); + } + + // + cOptions.chart?.events?.animationEnd?.(chart, options); }, - dataPointSelection: (event, chartContext, config) => { - this.dataPointSelected.emit({ event, chartContext, config }); - options.chart?.events?.dataPointSelection?.( - event, - chartContext, - config, - ); + + // + beforeMount: (chart: ApexCharts, options?: XChartEventOpts) => { + // + if (!this.loading && !this.uiDisabled) { + this.beforeMount.emit(options); + } + + // + cOptions.chart?.events?.beforeMount?.(chart, options); }, - zoomed: (chartContext, { xaxis, yaxis }) => { - this.zoomed.emit({ xaxis, yaxis }); - options.chart?.events?.zoomed?.(chartContext, { xaxis, yaxis }); + + // + mounted: (chart: ApexCharts, options?: XChartEventOpts) => { + // + if (!this.loading && !this.uiDisabled) { + this.mounted.emit(options); + } + + // + cOptions.chart?.events?.mounted?.(chart, options); }, + + // + updated: (chart: ApexCharts, options?: XChartEventOpts) => { + // + if (!this.loading && !this.uiDisabled) { + this.updated.emit(options); + } + + // + cOptions.chart?.events?.updated?.(chart, options); + }, + + // + mouseMove: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.mouseMove.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.mouseMove?.(e, chart, options); + }, + + // + mouseLeave: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.mouseLeave.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.mouseLeave?.(e, chart, options); + }, + + // + click: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.click.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.click?.(e, chart, options); + }, + + // + xAxisLabelClick: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.xAxisLabelClick.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.xAxisLabelClick?.(e, chart, options); + }, + + // + legendClick: ( + chart: ApexCharts, + seriesIndex?: number, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.legendClick.emit({ + seriesIndex: seriesIndex, + options: options, + }); + } + + // + cOptions.chart?.events?.legendClick?.(chart, seriesIndex, options); + }, + + // + markerClick: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.markerClick.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.markerClick?.(e, chart, options); + }, + + // + selection: ( + chart: ApexCharts, + options?: { + xaxis?: { min: number; max: number }; + yaxis?: { min: number; max: number }; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.selection.emit(options); + } + + // + cOptions.chart?.events?.selection?.(chart, options); + }, + + // + dataPointSelection: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.dataPointSelection.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.dataPointSelection?.(e, chart, options); + }, + + // + dataPointMouseEnter: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.dataPointMouseEnter.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.dataPointMouseEnter?.(e, chart, options); + }, + + // + dataPointMouseLeave: ( + e: MouseEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.dataPointMouseLeave.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.dataPointMouseLeave?.(e, chart, options); + }, + + // + beforeZoom: ( + chart: ApexCharts, + options?: { xaxis: { min: number; max: number } }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.beforeZoom.emit(options); + } + + // + cOptions.chart?.events?.beforeZoom?.(chart, options); + }, + + // + beforeResetZoom: (chart: ApexCharts, options?: XChartEventOpts) => { + // + if (!this.loading && !this.uiDisabled) { + this.beforeResetZoom.emit(options); + } + + // + cOptions.chart?.events?.beforeResetZoom?.(chart, options); + }, + + // + zoomed: ( + chart: ApexCharts, + options?: { + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.zoomed.emit(options); + } + + // + cOptions.chart?.events?.zoomed?.(chart, options); + }, + + // + scrolled: ( + chart: ApexCharts, + options?: { xaxis: { min: number; max: number } }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.scrolled.emit(options); + } + + // + cOptions.chart?.events?.scrolled?.(chart, options); + }, + + // + brushScrolled: ( + chart: ApexCharts, + options?: { + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.brushScrolled.emit(options); + } + + // + cOptions.chart?.events?.brushScrolled?.(chart, options); + }, + + // + crossFilter: ( + chart: ApexCharts, + options?: { + xaxis: { min: number; max: number }; + sourceChartID?: string; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.crossFilter.emit(options); + } + + // + cOptions.chart?.events?.crossFilter?.(chart, options); + }, + + // + filterChange: ( + chart: ApexCharts, + options?: { + filters: Record; + filteredCount: number; + total: number; + sourceChartID?: string; + key?: any; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.filterChange.emit(options); + } + + // + cOptions.chart?.events?.filterChange?.(chart, options); + }, + + // + annotationDragged: ( + chart: ApexCharts, + options?: { + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x: any; + y: any; + x2?: any; + y2?: any; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.annotationDragged.emit(options); + } + + // + cOptions.chart?.events?.annotationDragged?.(chart, options); + }, + + // + annotationEdited: ( + chart: ApexCharts, + options?: { + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + text: string; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.annotationEdited.emit(options); + } + + // + cOptions.chart?.events?.annotationEdited?.(chart, options); + }, + + // + annotationCreated: ( + chart: ApexCharts, + options?: { + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x?: any; + y?: any; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.annotationCreated.emit(options); + } + + // + cOptions.chart?.events?.annotationCreated?.(chart, options); + }, + + // + annotationStyled: ( + chart: ApexCharts, + options?: { + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + label?: any; + marker?: any; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.annotationStyled.emit(options); + } + + // + cOptions.chart?.events?.annotationStyled?.(chart, options); + }, + + // + annotationDeleted: ( + chart: ApexCharts, + options?: { + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.annotationDeleted.emit(options); + } + + // + cOptions.chart?.events?.annotationDeleted?.(chart, options); + }, + + // + measured: ( + chart: ApexCharts, + options?: { + from: { x: any; y: any }; + to: { x: any; y: any }; + dx: number; + dy: number; + percentChange: number; + slope: number; + }, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.measured.emit(options); + } + + // + cOptions.chart?.events?.measured?.(chart, options); + }, + + // + beatChange: ( + chart: ApexCharts, + options?: XChartStoryboardBeatInfo, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.beatChange.emit(options); + } + + // + cOptions.chart?.events?.beatChange?.(chart, options); + }, + + // + keyDown: ( + e: KeyboardEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.keyDown.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.keyDown?.(e, chart, options); + }, + + // + keyUp: ( + e: KeyboardEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.keyUp.emit({ e: e, options: options }); + } + + // + cOptions.chart?.events?.keyUp?.(e, chart, options); + }, + + // + drillDownStart: ( + info: XChartDrilldownEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.drillDownStart.emit({ info: info, options: options }); + } + + // + cOptions.chart?.events?.drillDownStart?.(info, chart, options); + }, + + // + drillDownEnd: ( + info: XChartDrilldownEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.drillDownEnd.emit({ info: info, options: options }); + } + + // + cOptions.chart?.events?.drillDownEnd?.(info, chart, options); + }, + + // + drillUp: ( + info: XChartDrilldownEvent, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.drillUp.emit({ info: info, options: options }); + } + + // + cOptions.chart?.events?.drillUp?.(info, chart, options); + }, + + // + drillDownError: ( + info: { id: string | number | null; error: any }, + chart?: ApexCharts, + options?: XChartEventOpts, + ) => { + // + if (!this.loading && !this.uiDisabled) { + this.drillDownError.emit({ info: info, options: options }); + } + + // + cOptions.chart?.events?.drillDownError?.(info, chart, options); + }, + //#endregion }, }, theme: { - ...options.theme, - palette: options.theme?.palette || 'palette1', + ...cOptions.theme, + palette: cOptions.theme?.palette || 'palette1', }, - colors: options.colors || [primaryColor], + colors: cOptions.colors || [primaryColorValue], grid: { - ...options.grid, - borderColor: gridColor, + ...cOptions.grid, + borderColor: gridColorValue, + }, + dataLabels: { + ...cOptions.dataLabels, }, }; 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 3965721..0de2cb9 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 @@ -370,71 +370,71 @@ export type XChartAxisChartSeries = { zIndex?: number; parsing?: XChartParsing; data: - | (number | null)[] - | { - /** - * A category label, a timestamp, or a `Date`. On a `datetime` axis all - * three keep millisecond resolution. - */ - x: string | number | Date; - /** - * A plain value for most charts. For `candlestick`/`boxPlot`, the - * summary array (`[O,H,L,C]` / `[min,Q1,median,Q3,max]`). For `violin`, an - * object carrying the precomputed density profile (`[value, weight]` pairs) - * plus the raw observations rendered as jitter. For a `scatter` strip plot - * (`plotOptions.scatter.jitter`), the array of observations in this category. - */ - y: - | number - | null - | number[] - | { density: [number, number][]; points?: number[] }; - /** - * Optional raw observations for a `boxPlot` data point, rendered as jitter - * dots when `plotOptions.boxPlot.points.show` is enabled. - */ - points?: number[]; - fill?: XChartFill; - fillColor?: string; - strokeColor?: string; - meta?: unknown; - /** - * A second metric that drives this point's COLOUR, independent of `y` - * which drives its size (`treemap`). See - * `plotOptions.treemap.colorScale.colorValue` to read a different key. - */ - colorValue?: number; - /** - * Nested hierarchy: this point is a branch containing these children, - * to any depth (`treemap`, `sunburst`). A branch normally omits `y` and - * takes the sum of its children instead. - */ - children?: XChartHierarchyNode[]; - /** - * Drilldown target: the `id` of a `drilldown.series` entry. Clicking this - * point drills into that level. Requires the Drilldown feature. - */ - drilldown?: string | number; - goals?: { - name?: string; - value: number; - strokeHeight?: number; - strokeWidth?: number; - strokeColor?: string; - strokeDashArray?: number; - strokeLineCap?: 'butt' | 'square' | 'round'; - }[]; - barHeightOffset?: number; - columnWidthOffset?: number; - }[] - | [number, number | null][] - | [number, (number | null)[]][] - | number[][] - // A `children` hierarchy for the partition charts, where a branch carries no - // value of its own. Listed before the catch-all so authors get completion on - // the node shape instead of falling through to `Record`. - | XChartHierarchyNode[] - | Record[]; + | (number | null)[] + | { + /** + * A category label, a timestamp, or a `Date`. On a `datetime` axis all + * three keep millisecond resolution. + */ + x: string | number | Date; + /** + * A plain value for most charts. For `candlestick`/`boxPlot`, the + * summary array (`[O,H,L,C]` / `[min,Q1,median,Q3,max]`). For `violin`, an + * object carrying the precomputed density profile (`[value, weight]` pairs) + * plus the raw observations rendered as jitter. For a `scatter` strip plot + * (`plotOptions.scatter.jitter`), the array of observations in this category. + */ + y: + | number + | null + | number[] + | { density: [number, number][]; points?: number[] }; + /** + * Optional raw observations for a `boxPlot` data point, rendered as jitter + * dots when `plotOptions.boxPlot.points.show` is enabled. + */ + points?: number[]; + fill?: XChartFill; + fillColor?: string; + strokeColor?: string; + meta?: unknown; + /** + * A second metric that drives this point's COLOUR, independent of `y` + * which drives its size (`treemap`). See + * `plotOptions.treemap.colorScale.colorValue` to read a different key. + */ + colorValue?: number; + /** + * Nested hierarchy: this point is a branch containing these children, + * to any depth (`treemap`, `sunburst`). A branch normally omits `y` and + * takes the sum of its children instead. + */ + children?: XChartHierarchyNode[]; + /** + * Drilldown target: the `id` of a `drilldown.series` entry. Clicking this + * point drills into that level. Requires the Drilldown feature. + */ + drilldown?: string | number; + goals?: { + name?: string; + value: number; + strokeHeight?: number; + strokeWidth?: number; + strokeColor?: string; + strokeDashArray?: number; + strokeLineCap?: 'butt' | 'square' | 'round'; + }[]; + barHeightOffset?: number; + columnWidthOffset?: number; + }[] + | [number, number | null][] + | [number, (number | null)[]][] + | number[][] + // A `children` hierarchy for the partition charts, where a branch carries no + // value of its own. Listed before the catch-all so authors get completion on + // the node shape instead of falling through to `Record`. + | XChartHierarchyNode[] + | Record[]; }[]; export type XChartNonAxisChartSeries = number[] | XChartAxisChartSeries; @@ -931,11 +931,11 @@ export type XChartPlotOptions = { * property, or an accessor to compute one. */ colorValue?: - | string - | (( - datum: any, - opts: { seriesIndex: number; dataPointIndex: number; w: any }, - ) => number); + | string + | (( + datum: any, + opts: { seriesIndex: number; dataPointIndex: number; w: any }, + ) => number); /** * Continuous interpolation between colour stops, for the metric above. * Active as soon as any datum carries a colour metric; `enabled: false` @@ -1068,13 +1068,13 @@ export type XChartPlotOptions = { * 'custom': positions come from `positions`. */ layout?: - | 'grouped' - | 'packed' - | 'columns' - | 'grid' - | 'scatter' - | 'arc' - | 'custom'; + | 'grouped' + | 'packed' + | 'columns' + | 'grid' + | 'scatter' + | 'arc' + | 'custom'; /** * `layout: 'custom'` only. The layout provider: either a function returning * plot-pixel positions, or the name of one registered with @@ -2102,19 +2102,19 @@ export interface XChartDrilldown { /** Inline child levels referenced by data-point `drilldown` ids. */ series?: XChartDrilldownSeries[]; breadcrumb?: - | false - | { - show?: boolean; - position?: 'top-left' | 'top-right'; - separator?: string; - rootLabel?: string; - offsetX?: number; - offsetY?: number; - formatter?( - label: string, - opts: { index: number; depth: number }, - ): string; - }; + | false + | { + show?: boolean; + position?: 'top-left' | 'top-right'; + separator?: string; + rootLabel?: string; + offsetX?: number; + offsetY?: number; + formatter?( + label: string, + opts: { index: number; depth: number }, + ): string; + }; animation?: { enabled?: boolean; /** @@ -2163,11 +2163,11 @@ export interface XChartDrilldown { * name, so the default ships no user-visible English. */ loading?: - | false - | { - show?: boolean; - text?: string; - }; + | false + | { + show?: boolean; + text?: string; + }; /** * Cache levels resolved by `onDrillDown`, keyed by id, so drilling back down * a branch does not re-fetch. Default true. Clear it with the drilldown @@ -2273,12 +2273,12 @@ export type XChartStates = { export type XChartStroke = { show?: boolean; curve?: - | 'smooth' - | 'straight' - | 'stepline' - | 'linestep' - | 'monotoneCubic' - | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[]; + | 'smooth' + | 'straight' + | 'stepline' + | 'linestep' + | 'monotoneCubic' + | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[]; lineCap?: 'butt' | 'square' | 'round'; colors?: string[]; width?: number | number[]; @@ -2329,11 +2329,11 @@ export type XChartTheme = { }; accessibility?: { colorBlindMode?: - | 'deuteranopia' - | 'protanopia' - | 'tritanopia' - | 'highContrast' - | ''; + | 'deuteranopia' + | 'protanopia' + | 'tritanopia' + | 'highContrast' + | ''; }; }; @@ -2362,14 +2362,14 @@ export type XChartTooltip = { inverseOrder?: boolean; arrow?: boolean; custom?: - | (( - opts: XChartTooltipCustomOpts, - ) => string | number | Element | { nodeName: string }) - | Array< - ( - opts: XChartTooltipCustomOpts, - ) => string | number | Element | { nodeName: string } - >; + | (( + opts: XChartTooltipCustomOpts, + ) => string | number | Element | { nodeName: string }) + | Array< + ( + opts: XChartTooltipCustomOpts, + ) => string | number | Element | { nodeName: string } + >; fillSeriesColor?: boolean; theme?: 'light' | 'dark'; cssClass?: string; @@ -2446,30 +2446,30 @@ export type XChart = { width?: string | number; height?: string | number; type?: - | 'line' - | 'area' - | 'bar' - | 'pie' - | 'donut' - | 'radialBar' - | 'scatter' - | 'bubble' - | 'heatmap' - | 'candlestick' - | 'boxPlot' - | 'violin' - | 'histogram' - | 'radar' - | 'polarArea' - | 'rangeBar' - | 'rangeArea' - | 'treemap' - | 'unit' - | 'waffle' - | 'sunburst' - | 'funnel' - | 'pyramid' - | 'gauge'; + | 'line' + | 'area' + | 'bar' + | 'pie' + | 'donut' + | 'radialBar' + | 'scatter' + | 'bubble' + | 'heatmap' + | 'candlestick' + | 'boxPlot' + | 'violin' + | 'histogram' + | 'radar' + | 'polarArea' + | 'rangeBar' + | 'rangeArea' + | 'treemap' + | 'unit' + | 'waffle' + | 'sunburst' + | 'funnel' + | 'pyramid' + | 'gauge'; /** * Internal — populated when `type` is a first-class alias (`'funnel'`, * `'pyramid'`, `'gauge'`, `'waffle'`, `'histogram'`). The original requested @@ -2752,9 +2752,9 @@ export type XChart = { dimension?: (row: any) => any; /** FILTER mode: reduction over a bucket's rows. @default 'count' */ reduce?: - | 'count' - | { sum?: string; avg?: string; min?: string; max?: string } - | ((rows: any[]) => number); + | 'count' + | { sum?: string; avg?: string; min?: string; max?: string } + | ((rows: any[]) => number); /** * FILTER mode: bucket kind. Else inferred: `bins` present => 'range', a * heatmap chart => 'matrix' (2D), otherwise 'category'. @@ -2872,21 +2872,21 @@ export type XChart = { | 'yline' | 'measure' | { - id?: string; - label?: string; - icon?: string; - onClick?: ( - chart: ApexCharts, - context: { - x: any; - y: any; - seriesIndex: number | null; - dataPointIndex: number | null; - clientX: number; - clientY: number; - }, - ) => void; - } + id?: string; + label?: string; + icon?: string; + onClick?: ( + chart: ApexCharts, + context: { + x: any; + y: any; + seriesIndex: number | null; + dataPointIndex: number | null; + clientX: number; + clientY: number; + }, + ) => void; + } >; /** Override the built-in item labels. */ labels?: { @@ -3225,7 +3225,7 @@ export enum XChartAction { export type XChartActionIdentifier = XChartAction | string; -export interface XChartActionModel extends XBaseActionModel { } +export interface XChartActionModel extends XBaseActionModel {} export type XChartSeriesType = XChartAxisChartSeries | XChartNonAxisChartSeries; @@ -3286,6 +3286,28 @@ export interface XChartAvailableActionBarItem { popoverPresentOptions?: XPopoverPresentOptions; } +export interface XChartMouseEvent { + e: MouseEvent; + options?: XChartEventOpts; +} + +export interface XChartKeyboardEvent { + e: KeyboardEvent; + options?: XChartEventOpts; +} + +export enum XChartTextAlign { + Start = 'start', + Center = 'center', + End = 'end', +} + +export type XChartTextAlignIdentifier = XChartTextAlign | string; + +export function isChartTextAlign(value: XChartTextAlignIdentifier) { + return isValueInEnum(value, Object.assign({}, XChartTextAlign)); +} + type TXChartContainer = IXComponentCardContainer & IXComponentActionBarContainer; export interface IXChartContainer extends TXChartContainer { @@ -3296,12 +3318,27 @@ export interface IXChartContainer extends TXChartContainer { // // Chart Props ... - autoUpdate: XStandardType; + zoomStep: XStandardType; options: XStandardType; series: XStandardType; - zoomStep: XStandardType; type: XStandardType; + // + title: XStandardType; + titleAlign: XStandardType; + + // + subTitle: XStandardType; + subTitleAlign: XStandardType; + + // + // Chart Colors ... + gridColor: XStandardType; + titleColor: XStandardType; + subTitleColor: XStandardType; + foregroundColor: XStandardType; + backgroundColor: XStandardType; + // //#region ActionBar ... defaultActionBarItemColor: XStandardType; @@ -3311,10 +3348,111 @@ export interface IXChartContainer extends TXChartContainer { //#endregion // - // Events ... - chartRendered: EventEmitter; - dataPointSelected: EventEmitter; - zoomed: EventEmitter; + //#region Events ... + click: EventEmitter; + keyUp: EventEmitter; + zoomed: EventEmitter<{ + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }>; + keyDown: EventEmitter; + drillUp: EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>; + mounted: EventEmitter; + updated: EventEmitter; + measured: EventEmitter<{ + from: { x: any; y: any }; + to: { x: any; y: any }; + dx: number; + dy: number; + percentChange: number; + slope: number; + }>; + scrolled: EventEmitter<{ xaxis: { min: number; max: number } }>; + mouseMove: EventEmitter; + selection: EventEmitter<{ + xaxis?: { min: number; max: number }; + yaxis?: { min: number; max: number }; + }>; + beatChange: EventEmitter; + mouseLeave: EventEmitter; + beforeZoom: EventEmitter<{ xaxis: { min: number; max: number } }>; + legendClick: EventEmitter<{ + seriesIndex?: number; + options?: XChartEventOpts; + }>; + markerClick: EventEmitter; + crossFilter: EventEmitter<{ + xaxis: { min: number; max: number }; + sourceChartID?: string; + }>; + beforeMount: EventEmitter; + drillDownEnd: EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>; + animationEnd: EventEmitter; + filterChange: EventEmitter<{ + filters: Record; + filteredCount: number; + total: number; + sourceChartID?: string; + key?: any; + }>; + brushScrolled: EventEmitter<{ + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }>; + drillDownStart: EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>; + drillDownError: EventEmitter<{ + info: { id: string | number | null; error: any }; + options?: XChartEventOpts; + }>; + xAxisLabelClick: EventEmitter; + beforeResetZoom: EventEmitter; + annotationEdited: EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + text: string; + }>; + annotationStyled: EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + label?: any; + marker?: any; + }>; + annotationDragged: EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x: any; + y: any; + x2?: any; + y2?: any; + }>; + annotationCreated: EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x?: any; + y?: any; + }>; + annotationDeleted: EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + }>; + dataPointSelection: EventEmitter; + dataPointMouseEnter: EventEmitter; + dataPointMouseLeave: EventEmitter; + //#endregion } @Injectable({ @@ -3322,18 +3460,42 @@ export interface IXChartContainer extends TXChartContainer { }) export class XChartContainer extends XBaseContainer - implements Readonly { + implements Readonly +{ // readonly actionProvider = new Subject(); readonly cssClass: XStandardType>; // + // Chart Props ... readonly options: XStandardType; readonly zoomStep: XStandardType = 0.125; readonly series: XStandardType; - readonly autoUpdate: XStandardType = true; readonly type: XStandardType = XChartType.Line; + // + readonly title: XStandardType; + readonly titleAlign: XStandardType = + XChartTextAlign.Center; + + // + readonly subTitle: XStandardType; + readonly subTitleAlign: XStandardType = + XChartTextAlign.Center; + + // + // Chart Colors ... + readonly gridColor: XStandardType = + XColorWithBrightness.Medium; + readonly titleColor: XStandardType = + XColorWithBrightness.Dark; + readonly subTitleColor: XStandardType = + XColorWithBrightness.Dark; + readonly foregroundColor: XStandardType = + XColorWithBrightness.Dark; + readonly backgroundColor: XStandardType = + XColorWithBrightness.Light; + // readonly availableActionBarItems: XStandardType< XOneOrManyType @@ -3342,9 +3504,115 @@ export class XChartContainer XColorWithBrightness.Dark; // - readonly zoomed = new EventEmitter(); - readonly chartRendered = new EventEmitter(); - readonly dataPointSelected = new EventEmitter(); + //#region Events ... + readonly click = new EventEmitter(); + readonly keyUp = new EventEmitter(); + readonly zoomed = new EventEmitter<{ + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }>(); + readonly keyDown = new EventEmitter(); + readonly drillUp = new EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>(); + readonly mounted = new EventEmitter(); + readonly updated = new EventEmitter(); + readonly measured = new EventEmitter<{ + from: { x: any; y: any }; + to: { x: any; y: any }; + dx: number; + dy: number; + percentChange: number; + slope: number; + }>(); + readonly scrolled = new EventEmitter<{ + xaxis: { min: number; max: number }; + }>(); + readonly mouseMove = new EventEmitter(); + readonly selection = new EventEmitter<{ + xaxis?: { min: number; max: number }; + yaxis?: { min: number; max: number }; + }>(); + readonly beatChange = new EventEmitter(); + readonly mouseLeave = new EventEmitter(); + readonly beforeZoom = new EventEmitter<{ + xaxis: { min: number; max: number }; + }>(); + readonly legendClick = new EventEmitter<{ + seriesIndex?: number; + options?: XChartEventOpts; + }>(); + readonly markerClick = new EventEmitter(); + readonly crossFilter = new EventEmitter<{ + xaxis: { min: number; max: number }; + sourceChartID?: string; + }>(); + readonly beforeMount = new EventEmitter(); + readonly drillDownEnd = new EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>(); + readonly animationEnd = new EventEmitter(); + readonly filterChange = new EventEmitter<{ + filters: Record; + filteredCount: number; + total: number; + sourceChartID?: string; + key?: any; + }>(); + readonly brushScrolled = new EventEmitter<{ + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }>(); + readonly drillDownStart = new EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>(); + readonly drillDownError = new EventEmitter<{ + info: { id: string | number | null; error: any }; + options?: XChartEventOpts; + }>(); + readonly xAxisLabelClick = new EventEmitter(); + readonly beforeResetZoom = new EventEmitter(); + readonly annotationEdited = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + text: string; + }>(); + readonly annotationStyled = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + label?: any; + marker?: any; + }>(); + readonly annotationDragged = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x: any; + y: any; + x2?: any; + y2?: any; + }>(); + readonly annotationCreated = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x?: any; + y?: any; + }>(); + readonly annotationDeleted = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + }>(); + readonly dataPointSelection = new EventEmitter(); + readonly dataPointMouseEnter = new EventEmitter(); + readonly dataPointMouseLeave = new EventEmitter(); + //#endregion // //#region ComponentActionBar Props ... @@ -3403,7 +3671,8 @@ export class XChartContainer @Component({ template: `` }) export abstract class XChartContainerComponent extends XBaseContainerComponent - implements IXChartContainer { + implements IXChartContainer +{ // //#region Props ... @Input() @@ -3429,9 +3698,6 @@ export abstract class XChartContainerComponent @Input() zoomStep: XStandardType = this.propertyProvider.zoomStep; - @Input() - autoUpdate: XStandardType = this.propertyProvider.autoUpdate; - @Input() defaultActionBarItemColor: XStandardType = this.propertyProvider.defaultActionBarItemColor; @@ -3442,15 +3708,219 @@ export abstract class XChartContainerComponent > = this.propertyProvider.availableActionBarItems; // - // Events ... + + @Input() + title: XStandardType = this.propertyProvider.title; + + @Input() + titleAlign: XStandardType = + this.propertyProvider.titleAlign; + + @Input() + subTitle: XStandardType = this.propertyProvider.subTitle; + + @Input() + subTitleAlign: XStandardType = + this.propertyProvider.subTitleAlign; + + // + + @Input() + gridColor: XStandardType = this.propertyProvider.gridColor; + + @Input() + titleColor: XStandardType = + this.propertyProvider.titleColor; + + @Input() + subTitleColor: XStandardType = + this.propertyProvider.subTitleColor; + + @Input() + foregroundColor: XStandardType = + this.propertyProvider.foregroundColor; + + @Input() + backgroundColor: XStandardType = + this.propertyProvider.backgroundColor; + + // + //#region Events ... @Output() - chartRendered: EventEmitter = new EventEmitter(); + click = new EventEmitter(); @Output() - dataPointSelected: EventEmitter = new EventEmitter(); + keyUp = new EventEmitter(); @Output() - zoomed: EventEmitter = new EventEmitter(); + zoomed = new EventEmitter<{ + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }>(); + + @Output() + keyDown = new EventEmitter(); + + @Output() + drillUp = new EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>(); + + @Output() + mounted = new EventEmitter(); + + @Output() + updated = new EventEmitter(); + + @Output() + measured = new EventEmitter<{ + from: { x: any; y: any }; + to: { x: any; y: any }; + dx: number; + dy: number; + percentChange: number; + slope: number; + }>(); + + @Output() + scrolled = new EventEmitter<{ + xaxis: { min: number; max: number }; + }>(); + + @Output() + mouseMove = new EventEmitter(); + + @Output() + selection = new EventEmitter<{ + xaxis?: { min: number; max: number }; + yaxis?: { min: number; max: number }; + }>(); + + @Output() + beatChange = new EventEmitter(); + + @Output() + mouseLeave = new EventEmitter(); + + @Output() + beforeZoom = new EventEmitter<{ + xaxis: { min: number; max: number }; + }>(); + + @Output() + legendClick = new EventEmitter<{ + seriesIndex?: number; + options?: XChartEventOpts; + }>(); + + @Output() + markerClick = new EventEmitter(); + + @Output() + crossFilter = new EventEmitter<{ + xaxis: { min: number; max: number }; + sourceChartID?: string; + }>(); + + @Output() + beforeMount = new EventEmitter(); + + @Output() + drillDownEnd = new EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>(); + + @Output() + animationEnd = new EventEmitter(); + + @Output() + filterChange = new EventEmitter<{ + filters: Record; + filteredCount: number; + total: number; + sourceChartID?: string; + key?: any; + }>(); + + @Output() + brushScrolled = new EventEmitter<{ + xaxis: { min: number; max: number }; + yaxis?: { min: number; max: number }[]; + }>(); + + @Output() + drillDownStart = new EventEmitter<{ + info: XChartDrilldownEvent; + options?: XChartEventOpts; + }>(); + + @Output() + drillDownError = new EventEmitter<{ + info: { id: string | number | null; error: any }; + options?: XChartEventOpts; + }>(); + + @Output() + xAxisLabelClick = new EventEmitter(); + + @Output() + beforeResetZoom = new EventEmitter(); + + @Output() + annotationEdited = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + text: string; + }>(); + + @Output() + annotationStyled = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + label?: any; + marker?: any; + }>(); + + @Output() + annotationDragged = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x: any; + y: any; + x2?: any; + y2?: any; + }>(); + + @Output() + annotationCreated = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + x?: any; + y?: any; + }>(); + + @Output() + annotationDeleted = new EventEmitter<{ + type?: 'point' | 'xaxis' | 'yaxis'; + id?: string; + index: number; + }>(); + + @Output() + dataPointSelection = new EventEmitter(); + + @Output() + dataPointMouseEnter = new EventEmitter(); + + @Output() + dataPointMouseLeave = new EventEmitter(); + //#endregion // //#region ComponentCard Props ... @@ -3563,8 +4033,34 @@ export abstract class XChartContainerComponent options: this.getValue(container ? container.options : this.options), series: this.getValue(container ? container.series : this.series), zoomStep: this.getValue(container ? container.zoomStep : this.zoomStep), - autoUpdate: this.getValue( - container ? container.autoUpdate : this.autoUpdate, + + // + title: this.getValue(container ? container.title : this.title), + titleAlign: this.getValue( + container ? container.titleAlign : this.titleAlign, + ), + + // + subTitle: this.getValue(container ? container.subTitle : this.subTitle), + subTitleAlign: this.getValue( + container ? container.subTitleAlign : this.subTitleAlign, + ), + + // + gridColor: this.getValue( + container ? container.gridColor : this.gridColor, + ), + titleColor: this.getValue( + container ? container.titleColor : this.titleColor, + ), + subTitleColor: this.getValue( + container ? container.subTitleColor : this.subTitleColor, + ), + foregroundColor: this.getValue( + container ? container.foregroundColor : this.foregroundColor, + ), + backgroundColor: this.getValue( + container ? container.backgroundColor : this.backgroundColor, ), // @@ -3642,11 +4138,73 @@ export abstract class XChartContainerComponent actionBarActionProvider: container ? container.actionBarActionProvider : this.actionBarActionProvider, + // - zoomed: this.zoomed, - chartRendered: this.chartRendered, - dataPointSelected: this.dataPointSelected, - actionBarActionFired: this.actionBarActionFired, + //#region Events ... + click: container ? container.click : this.click, + keyUp: container ? container.keyUp : this.keyUp, + zoomed: container ? container.zoomed : this.zoomed, + keyDown: container ? container.keyDown : this.keyDown, + drillUp: container ? container.drillUp : this.drillUp, + mounted: container ? container.mounted : this.mounted, + updated: container ? container.updated : this.updated, + measured: container ? container.measured : this.measured, + scrolled: container ? container.scrolled : this.scrolled, + mouseMove: container ? container.mouseMove : this.mouseMove, + selection: container ? container.selection : this.selection, + beatChange: container ? container.beatChange : this.beatChange, + mouseLeave: container ? container.mouseLeave : this.mouseLeave, + beforeZoom: container ? container.beforeZoom : this.beforeZoom, + legendClick: container ? container.legendClick : this.legendClick, + markerClick: container ? container.markerClick : this.markerClick, + crossFilter: container ? container.crossFilter : this.crossFilter, + beforeMount: container ? container.beforeMount : this.beforeMount, + drillDownEnd: container ? container.drillDownEnd : this.drillDownEnd, + animationEnd: container ? container.animationEnd : this.animationEnd, + filterChange: container ? container.filterChange : this.filterChange, + brushScrolled: container ? container.brushScrolled : this.brushScrolled, + drillDownStart: container + ? container.drillDownStart + : this.drillDownStart, + drillDownError: container + ? container.drillDownError + : this.drillDownError, + xAxisLabelClick: container + ? container.xAxisLabelClick + : this.xAxisLabelClick, + beforeResetZoom: container + ? container.beforeResetZoom + : this.beforeResetZoom, + annotationEdited: container + ? container.annotationEdited + : this.annotationEdited, + annotationStyled: container + ? container.annotationStyled + : this.annotationStyled, + annotationDragged: container + ? container.annotationDragged + : this.annotationDragged, + annotationCreated: container + ? container.annotationCreated + : this.annotationCreated, + annotationDeleted: container + ? container.annotationDeleted + : this.annotationDeleted, + dataPointSelection: container + ? container.dataPointSelection + : this.dataPointSelection, + dataPointMouseEnter: container + ? container.dataPointMouseEnter + : this.dataPointMouseEnter, + dataPointMouseLeave: container + ? container.dataPointMouseLeave + : this.dataPointMouseLeave, + + // + actionBarActionFired: container + ? container.actionBarActionFired + : this.actionBarActionFired, + //#endregion })), ); }