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

try to implement Chart Toolbars using XActionBar implementation like XIDEComponent ...

Browse Source
This commit is contained in:
saherelm
2026-08-22 00:07:04 +03:30
parent 0f37e94ac9
commit e768ba219c
4 changed files with 1056 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
projects/x-framework-components/src/lib/x-chart/x-chart.component.html
+16
View File
@@ -39,6 +39,22 @@
[class.mobile]="isMobileUi$ | async"
[ngClass]="getValue(cssClass) | async"
>
<!-- Toolbar -->
<x-action-bar
[color]="actionBarColor"
[cssClass]="actionBarCssClass"
[actionProvider]="actionBarActionProvider"
[foregroundColor]="actionBarForegroundColor"
(actionFired)="handleActionBarActionFired($event)"
*ngIf="
(getValue(showActionBar) | async) &&
(hasChildValue(actionBarActions) | async) &&
(hasChildValue(availableActionBarItems) | async)
"
[actions]="getArrayValue(actionBarActions) | async"
></x-action-bar>
<!-- Chart Box -->
<div #chartContainer class="x-chart-container"></div>
</div>
</ng-template>
projects/x-framework-components/src/lib/x-chart/x-chart.component.ts
+760 -1
View File
@@ -10,10 +10,26 @@ import {
XChartOptions,
XChartSeriesType,
XChartContainerComponent,
XChartActionBarItem,
} from './x-chart.typings';
import { Subscription } from 'rxjs';
import ApexCharts from 'apexcharts';
import { isNullOrUndefined, nameof } from 'x-framework-core';
import {
downloadArrayBufferedFile,
downloadFile,
downloadFileByUrl,
generateUuid,
isNullOrEmptyString,
isNullOrUndefined,
nameof,
XMimeType,
} from 'x-framework-core';
import {
XActionBarActionFiredModel,
XActionBarItem,
XActionBarItemSlot,
} from '../x-action-bar/x-action-bar.typings';
import { XIconNames } from '../x-icon/x-icon.typings';
@Component({
selector: 'x-chart',
@@ -53,6 +69,11 @@ export class XChartComponent extends XChartContainerComponent {
//
private ACTION_PROVIDER_SUBSCRIPTION: Subscription;
//
readonly IconNames = Object.assign({}, XIconNames);
readonly ActionBarItems = Object.assign({}, XChartActionBarItem);
readonly ActionBarItemSlots = Object.assign({}, XActionBarItemSlot);
//#endregion
//
@@ -164,6 +185,116 @@ export class XChartComponent extends XChartContainerComponent {
}
//#endregion
//
//#region UI Handler ...
async handleActionBarActionFired(model: XActionBarActionFiredModel) {
//
if (isNullOrUndefined(model) || isNullOrEmptyString(model.action)) {
return;
}
//
switch (
model.action
//
// case this.ActionBarItems.ChangeMode:
// this.handleActionModeFired(model.event);
// break;
// //
// case this.ActionBarItems.ChangeTheme:
// this.handleActionThemFired(model.event);
// break;
// //
// case this.ActionBarItems.Close:
// this.closeTab(this.currentTab);
// break;
// //
// case this.ActionBarItems.Undo:
// this.undo();
// break;
// //
// case this.ActionBarItems.Redo:
// this.redo();
// break;
// //
// case this.ActionBarItems.Beautify:
// await this.beautifyCode();
// break;
// //
// case this.ActionBarItems.Save:
// //
// this.updateCurrentTabDescriptor({
// canSave: false,
// });
// this.prepareActionBar();
// break;
) {
}
//
this.actionBarActionFired.emit(model);
}
//#endregion
//
//#region Actions ...
/**
* Export Chart Data in Specified Format ...
*
* @param format Export Format ...
* @param fileName Provided File Name without Extension ...
*/
async export(format: 'png' | 'svg' | 'csv' = 'png', fileName: string = '') {
//
// Normalize File Name ...
if (isNullOrEmptyString(fileName)) {
fileName = generateUuid('XChart');
}
//
fileName += '.' + format;
//
switch (format) {
//
case 'png':
//
const dataObject = await this.chartInstance.dataURI();
//
if ('imgURI' in dataObject) {
downloadFileByUrl(dataObject.imgURI, fileName);
} else if ('blob' in dataObject) {
downloadArrayBufferedFile(fileName, dataObject.blob);
}
break;
//
case 'svg':
//
const svgString = this.chartInstance.exports.exportToSVG();
downloadFile(svgString, XMimeType.ImageSVG, fileName);
break;
//
case 'csv':
//
this.chartInstance.exports.exportToCSV({
fileName: fileName,
columnDelimiter: ',',
lineDelimiter: '\n',
});
break;
}
}
//#endregion
//
//#region Private ...
private async initializeComponent() {
@@ -199,6 +330,9 @@ export class XChartComponent extends XChartContainerComponent {
id: chartId,
type: type as any,
foreColor: textColor,
toolbar: {
show: false,
},
events: {
...options.chart?.events,
mounted: (chartContext, config) => {
@@ -240,6 +374,627 @@ export class XChartComponent extends XChartContainerComponent {
await this.chartInstance.render();
}
private async prepareActionBar() {
//
if (isNullOrUndefined(this.chartInstance)) {
return;
}
//
const showActionBar = await this.getValueAsync(this.showActionBar);
if (!showActionBar) {
return;
}
//
//#region DefaultActionBarActions ...
//
const defaultPrintItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
icon: this.IconNames.print,
title: this.ResourceIDs.print,
id: this.ActionBarItems.Print,
slot: this.ActionBarItemSlots.END,
iconColor: this.defaultActionBarItemColor,
};
//
const defaultExportPNGItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
icon: this.IconNames.image,
slot: this.ActionBarItemSlots.END,
title: this.ResourceIDs.export_png,
id: this.ActionBarItems.ExportAsPNG,
iconColor: this.defaultActionBarItemColor,
};
//
const defaultExportSVGItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
icon: this.IconNames.image,
slot: this.ActionBarItemSlots.END,
title: this.ResourceIDs.export_svg,
id: this.ActionBarItems.ExportAsSVG,
iconColor: this.defaultActionBarItemColor,
};
//
const defaultExportCSVItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
icon: this.IconNames.data_table,
slot: this.ActionBarItemSlots.END,
title: this.ResourceIDs.export_csv,
id: this.ActionBarItems.ExportAsCSV,
iconColor: this.defaultActionBarItemColor,
};
//
const defaultZoomInItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
icon: this.IconNames.add,
id: this.ActionBarItems.ZoomIn,
title: this.ResourceIDs.zoom_in,
slot: this.ActionBarItemSlots.START,
iconColor: this.defaultActionBarItemColor,
};
//
const defaultZoomOutItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
id: this.ActionBarItems.ZoomOut,
title: this.ResourceIDs.zoom_out,
slot: this.ActionBarItemSlots.START,
icon: this.IconNames.friendship_reject,
iconColor: this.defaultActionBarItemColor,
};
//
const defaultZoomSelectionItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
slot: this.ActionBarItemSlots.START,
id: this.ActionBarItems.ZoomSelection,
title: this.ResourceIDs.zoom_selection,
icon: this.IconNames.friendship_reject,
iconColor: this.defaultActionBarItemColor,
};
//
const defaultXAxisSelectionItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
icon: this.IconNames.x_axist,
title: this.ResourceIDs.x_axis,
id: this.ActionBarItems.XSelection,
slot: this.ActionBarItemSlots.START,
iconColor: this.defaultActionBarItemColor,
};
//
const defaultYAxisSelectionItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
icon: this.IconNames.y_axis,
title: this.ResourceIDs.y_axis,
id: this.ActionBarItems.YSelection,
slot: this.ActionBarItemSlots.START,
iconColor: this.defaultActionBarItemColor,
};
//
const defaultXYAxisSelectionItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
icon: this.IconNames.xy_axis,
title: this.ResourceIDs.xy_axis,
id: this.ActionBarItems.XYSelection,
slot: this.ActionBarItemSlots.START,
iconColor: this.defaultActionBarItemColor,
};
//
const defaultPanItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
icon: this.IconNames.touch,
title: this.ResourceIDs.pan,
id: this.ActionBarItems.Pan,
slot: this.ActionBarItemSlots.START,
iconColor: this.defaultActionBarItemColor,
};
//
const defaultResetItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
icon: this.IconNames.refresh,
title: this.ResourceIDs.reset,
slot: this.ActionBarItemSlots.END,
id: this.ActionBarItems.ResetChart,
iconColor: this.defaultActionBarItemColor,
};
//
const defaultFullscreenItem: XActionBarItem = {
onlyIcon: true,
disabled: this.uiDisabled,
icon: this.IconNames.fullscreen,
title: this.ResourceIDs.full_screen,
slot: this.ActionBarItemSlots.START,
id: this.ActionBarItems.ToggleFullScreen,
iconColor: this.defaultActionBarItemColor,
};
//#endregion
//
this.actionBarActions = [];
this.detectChanges();
//
const availableItems = await this.getArrayValueAsync(
this.availableActionBarItems,
);
if (!this.hasChild(availableItems)) {
return;
}
//
let hasItem = false;
const actionBarItems: XActionBarItem[] = [];
//
//#region Print ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.Print);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.Print,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultPrintItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
//#region ExportAsPNG ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.ExportAsPNG);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.ExportAsPNG,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultExportPNGItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
//#region ExportAsSVG ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.ExportAsSVG);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.ExportAsSVG,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultExportSVGItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
//#region ExportAsCSV ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.ExportAsCSV);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.ExportAsCSV,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultExportCSVItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
//#region ZoomIn ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.ZoomIn);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.ZoomIn,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultZoomInItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
//#region ZoomOut ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.ZoomOut);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.ZoomOut,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultZoomOutItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
//#region ZoomSelection ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.ZoomSelection);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.ZoomSelection,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultZoomSelectionItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
//#region XSelection ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.XSelection);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.XSelection,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultXAxisSelectionItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
//#region YSelection ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.YSelection);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.YSelection,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultYAxisSelectionItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
//#region XYSelection ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.XYSelection);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.XYSelection,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultXYAxisSelectionItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
//#region Pan ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.Pan);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.Pan,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultPanItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
//#region Reset ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.ResetChart);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.ResetChart,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultResetItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
//#region FullScreen ...
hasItem = availableItems
.map((ai) => ai.actionId)
.includes(this.ActionBarItems.ToggleFullScreen);
//
if (hasItem) {
//
const selectedItem = availableItems.find(
(ai) => ai.actionId === this.ActionBarItems.ToggleFullScreen,
);
const providedItem = selectedItem.descriptor;
let item = {
...defaultFullscreenItem,
};
if (!isNullOrUndefined(providedItem)) {
item = {
...item,
...providedItem,
};
}
//
item = {
...item,
disabled: this.uiDisabled,
};
//
actionBarItems.push(item);
}
//#endregion
//
this.actionBarActions = [...actionBarItems];
this.detectChanges();
}
private async handleChartUpdate() {
//
if (
@@ -261,6 +1016,10 @@ export class XChartComponent extends XChartContainerComponent {
this.CHART_OPTIONS = {
...options,
...this.CHART_OPTIONS,
chart: {
...this.CHART_OPTIONS.chart,
type: type as any,
},
};
//
projects/x-framework-components/src/lib/x-chart/x-chart.module.ts
+3
View File
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
import { XCardModule } from '../x-card/x-card.module';
import { XIconModule } from '../x-icon/x-icon.module';
import { XChartComponent } from './x-chart.component';
import { XActionBarModule } from 'x-framework-components';
import { XSlotterModule } from '../x-slotter/x-slotter.module';
import { XBaseComponentModule } from '../modules/x-base-component.module';
@@ -15,6 +16,7 @@ import { XBaseComponentModule } from '../modules/x-base-component.module';
XIconModule,
CommonModule,
XSlotterModule,
XActionBarModule,
XBaseComponentModule,
],
exports: [
@@ -23,6 +25,7 @@ import { XBaseComponentModule } from '../modules/x-base-component.module';
CommonModule,
XSlotterModule,
XChartComponent,
XActionBarModule,
XBaseComponentModule,
],
})
projects/x-framework-components/src/lib/x-chart/x-chart.typings.ts
+277 -44
View File
@@ -16,6 +16,7 @@ import {
XOneOrManyType,
XColorIdentifier,
XResourceIdentifier,
XColorWithBrightness,
} from 'x-framework-core';
import {
XCardActionModel,
@@ -30,6 +31,18 @@ import { XManagerService } from 'x-framework-services';
import { XBaseActionModel } from '../classes/x-base-action.model';
import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens';
import { XFrameworkComponentsConfig } from '../config/x-framework-components.config';
import {
IXComponentActionBarContainer,
XActionBarActionFiredModel,
XActionBarActionModel,
XActionBarItem,
XComponentActionBarContainer,
} from '../x-action-bar/x-action-bar.typings';
import { XPopoverPresentOptions } from '../dialogs/x-popover/x-popover.typings';
import {
XBaseContainer,
XBaseContainerComponent,
} from '../classes/i-x-base.container';
//
//#region Chart ...
@@ -3216,7 +3229,67 @@ export type XChartActionIdentifier = XChartAction | string;
export interface XChartActionModel extends XBaseActionModel<XChartActionIdentifier> {}
export type XChartSeriesType = XChartAxisChartSeries | XChartNonAxisChartSeries;
export interface IXChartContainer extends IXComponentCardContainer {
export enum XChartActionBarItem {
// TODO: Implement this ...
//
//#region Exports ...
ExportAsPNG = 'export_as_png',
ExportAsSVG = 'export_as_svg',
ExportAsCSV = 'export_as_csv',
Print = 'print_chart',
//#endregion
//
//#region Zoom ...
ZoomIn = 'zoom_in',
ZoomOut = 'zoom_out',
ZoomSelection = 'zoom_selection',
//#endregion
//
//#region Selection ...
XSelection = 'x-axis-selection',
YSelection = 'y-axis-selection',
XYSelection = 'xy-axis-selection',
//#endregion
//
Pan = 'pan',
ResetChart = 'reset_chart',
ToggleFullScreen = 'toggle_fullscreen_chart',
}
export type XChartActionBarItemIdentifier = XChartActionBarItem | string;
export function isChartActionBar(value: string) {
return isValueInEnum(value, Object.assign({}, XChartActionBarItem));
}
export type XChartActionBarItemDescriptor = Partial<
Pick<
XActionBarItem,
| 'slot'
| 'icon'
| 'title'
| 'color'
| 'onlyIcon'
| 'iconColor'
| 'titleColor'
>
>;
export interface XChartAvailableActionBarItem {
itemsColor?: XColorIdentifier;
actionId: XChartActionBarItemIdentifier;
descriptor?: XChartActionBarItemDescriptor;
popoverPresentOptions?: XPopoverPresentOptions;
}
type TXChartContainer = IXComponentCardContainer &
IXComponentActionBarContainer;
export interface IXChartContainer extends TXChartContainer {
//
// Commons ...
actionProvider: Subject<XChartActionModel>;
@@ -3231,6 +3304,14 @@ export interface IXChartContainer extends IXComponentCardContainer {
//
type: XStandardType<XChartTypeIdentifier>;
//
//#region ActionBar ...
defaultActionBarItemColor: XStandardType<XColorIdentifier>;
availableActionBarItems: XStandardType<
XOneOrManyType<XChartAvailableActionBarItem>
>;
//#endregion
//
// Events ...
chartRendered: EventEmitter<void>;
@@ -3242,7 +3323,7 @@ export interface IXChartContainer extends IXComponentCardContainer {
providedIn: 'root',
})
export class XChartContainer
extends XComponentCardContainer
extends XBaseContainer
implements Readonly<IXChartContainer>
{
//
@@ -3253,16 +3334,75 @@ export class XChartContainer
readonly actionProvider = new Subject<XChartActionModel>();
readonly type: XStandardType<XChartTypeIdentifier> = XChartType.Line;
//
readonly availableActionBarItems: XStandardType<
XOneOrManyType<XChartAvailableActionBarItem>
> = [];
readonly defaultActionBarItemColor: XStandardType<XColorIdentifier> =
XColorWithBrightness.Dark;
//
readonly zoomed = new EventEmitter<any>();
readonly chartRendered = new EventEmitter<void>();
readonly dataPointSelected = new EventEmitter<any>();
//
//#region ComponentActionBar Props ...
readonly showActionBar: XStandardType<boolean> =
this.actionBarPropertyProvider.showActionBar;
readonly actionBarActionProvider: Subject<XActionBarActionModel> =
this.actionBarPropertyProvider.actionBarActionProvider;
readonly actionBarCssClass: XStandardType<XOneOrManyType<string>> =
this.actionBarPropertyProvider.actionBarCssClass;
readonly actionBarColor: XStandardType<XColorIdentifier> =
this.actionBarPropertyProvider.actionBarColor;
readonly actionBarForegroundColor: XStandardType<boolean> =
this.actionBarPropertyProvider.actionBarForegroundColor;
readonly actionBarActions: XStandardType<XOneOrManyType<XActionBarItem>> =
this.actionBarPropertyProvider.actionBarActions;
readonly actionBarActionFired: EventEmitter<XActionBarActionFiredModel> =
this.actionBarPropertyProvider.actionBarActionFired;
//#endregion
//
//#region ComponentCard Props ...
readonly isInPage: XStandardType<boolean> =
this.cardPropertyProvider.isInPage;
readonly wrapWithCard: XStandardType<boolean> =
this.cardPropertyProvider.wrapWithCard;
readonly cardActionProvider: Subject<XCardActionModel> =
this.cardPropertyProvider.cardActionProvider;
readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
this.cardPropertyProvider.cardCssClass;
readonly cardColor: XStandardType<XColorIdentifier> =
this.cardPropertyProvider.cardColor;
readonly cardForegroundColor: XStandardType<boolean> =
this.cardPropertyProvider.cardForegroundColor;
readonly cardTitle: XStandardType<XResourceIdentifier> =
this.cardPropertyProvider.cardTitle;
readonly cardSubTitle: XStandardType<XResourceIdentifier> =
this.cardPropertyProvider.cardSubTitle;
readonly cardShowFooter: XStandardType<boolean> =
this.cardPropertyProvider.cardShowFooter;
readonly cardShowActions: XStandardType<boolean> =
this.cardPropertyProvider.cardShowActions;
//#endregion
//
//#region Constructor ...
constructor(
protected cardPropertyProvider: XComponentCardContainer,
protected actionBarPropertyProvider: XComponentActionBarContainer,
) {
super();
}
//#endregion
}
@Injectable()
@Component({ template: `` })
export abstract class XChartContainerComponent
extends XComponentCardContainerComponent
extends XBaseContainerComponent
implements IXChartContainer
{
//
@@ -3290,6 +3430,15 @@ export abstract class XChartContainerComponent
@Input()
autoUpdate: XStandardType<boolean> = this.propertyProvider.autoUpdate;
@Input()
defaultActionBarItemColor: XStandardType<XColorIdentifier> =
this.propertyProvider.defaultActionBarItemColor;
@Input()
availableActionBarItems: XStandardType<
XOneOrManyType<XChartAvailableActionBarItem>
> = this.propertyProvider.availableActionBarItems;
//
// Events ...
@Output()
@@ -3339,6 +3488,35 @@ export abstract class XChartContainerComponent
cardActionProvider: Subject<XCardActionModel> =
this.propertyProvider.cardActionProvider;
//#endregion
//
//#region ComponentActionBar Props ...
@Input()
showActionBar: XStandardType<boolean> = this.propertyProvider.showActionBar;
@Input()
actionBarCssClass: XStandardType<XOneOrManyType<string>> =
this.propertyProvider.actionBarCssClass;
@Input()
actionBarColor: XStandardType<XColorIdentifier> =
this.propertyProvider.actionBarColor;
@Input()
actionBarForegroundColor: XStandardType<boolean> =
this.propertyProvider.actionBarForegroundColor;
@Input()
actionBarActionProvider: Subject<XActionBarActionModel> =
this.propertyProvider.actionBarActionProvider;
@Output()
actionBarActionFired: EventEmitter<XActionBarActionFiredModel> =
this.propertyProvider.actionBarActionFired;
actionBarActions: XStandardType<XOneOrManyType<XActionBarItem>> =
this.propertyProvider.actionBarActions;
//#endregion
//#endregion
//
@@ -3362,7 +3540,6 @@ export abstract class XChartContainerComponent
ruler,
zone,
changeDetector,
propertyProvider,
);
}
//#endregionّ
@@ -3372,47 +3549,103 @@ export abstract class XChartContainerComponent
public extractProps(
container?: IXChartContainer,
): Observable<IXChartContainer> {
return super
.extractProps(container ? container : this)
.pipe(
concatMap((superData) => {
return forkJoin({
//
cssClass: this.getArrayValue(
container ? container.cssClass : this.cssClass,
),
//
return forkJoin({
//
cssClass: this.getArrayValue(
container ? container.cssClass : this.cssClass,
),
//
type: this.getValue(container ? container.type : this.type),
options: this.getValue(
container ? container.options : this.options,
),
series: this.getValue(container ? container.series : this.series),
autoUpdate: this.getValue(
container ? container.autoUpdate : this.autoUpdate,
),
}).pipe(
map((data) => {
return {
superData,
data,
};
}),
);
}),
)
.pipe(
map((info) => ({
...info.data,
...info.superData,
actionProvider: container
? container.actionProvider
: this.actionProvider,
chartRendered: this.chartRendered,
dataPointSelected: this.dataPointSelected,
zoomed: this.zoomed,
})),
);
//
type: this.getValue(container ? container.type : this.type),
options: this.getValue(container ? container.options : this.options),
series: this.getValue(container ? container.series : this.series),
autoUpdate: this.getValue(
container ? container.autoUpdate : this.autoUpdate,
),
//
// ActionBar ...
defaultActionBarItemColor: this.getValue(
container
? container.defaultActionBarItemColor
: this.defaultActionBarItemColor,
),
availableActionBarItems: this.getArrayValue(
container
? container.availableActionBarItems
: this.availableActionBarItems,
),
//
//#region XComponentCard ...
cardCssClass: this.getArrayValue(
container ? container.cardCssClass : this.cardCssClass,
),
isInPage: this.getValue(container ? container.isInPage : this.isInPage),
wrapWithCard: this.getValue(
container ? container.wrapWithCard : this.wrapWithCard,
),
cardShowFooter: this.getValue(
container ? container.cardShowFooter : this.cardShowFooter,
),
cardShowActions: this.getValue(
container ? container.cardShowActions : this.cardShowActions,
),
cardColor: this.getValue(
container ? container.cardColor : this.cardColor,
),
cardForegroundColor: this.getValue(
container ? container.cardForegroundColor : this.cardForegroundColor,
),
cardTitle: this.getValue(
container ? container.cardTitle : this.cardTitle,
),
cardSubTitle: this.getValue(
container ? container.cardSubTitle : this.cardSubTitle,
),
//#endregion
//
//#region XComponentActionBar ...
showActionBar: this.getValue(
container ? container.showActionBar : this.showActionBar,
),
actionBarCssClass: this.getValue(
container ? container.actionBarCssClass : this.actionBarCssClass,
),
actionBarColor: this.getValue(
container ? container.actionBarColor : this.actionBarColor,
),
actionBarForegroundColor: this.getValue(
container
? container.actionBarForegroundColor
: this.actionBarForegroundColor,
),
actionBarActions: this.getValue(
container ? container.actionBarActions : this.actionBarActions,
),
//#endregion
}).pipe(
map((info) => ({
...info,
//
actionProvider: container
? container.actionProvider
: this.actionProvider,
cardActionProvider: container
? container.cardActionProvider
: this.cardActionProvider,
actionBarActionProvider: container
? container.actionBarActionProvider
: this.actionBarActionProvider,
//
zoomed: this.zoomed,
chartRendered: this.chartRendered,
dataPointSelected: this.dataPointSelected,
actionBarActionFired: this.actionBarActionFired,
})),
);
}
//#endregion
}