ngx-t-reports
Version:
Angular module for creating dynamic reports and dashboards. Supports various data sources, custom templates, and real-time updates.
529 lines (508 loc) • 24.1 kB
TypeScript
import * as i0 from '@angular/core';
import { EventEmitter, ElementRef, OnDestroy, OnInit, InjectionToken } from '@angular/core';
import { EChartsOption } from 'echarts';
import * as rxjs from 'rxjs';
import { Observable, BehaviorSubject, Subscription } from 'rxjs';
import * as ngx_t_forms_types from 'ngx-t-forms-types';
import { DocumentLitsLabelConfigInterface as DocumentLitsLabelConfigInterface$1, ElementEditorConfigSectionInterface, IReportDataSources, NgxTFormsConfig, InClassFormUtilsInterface, MongoDbPipeLineConfigInterface, APIDataFetchingConfigurationInterface } from 'ngx-t-forms-types';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { MatDialog } from '@angular/material/dialog';
import * as _angular_cdk_types_drag_drop from '@angular/cdk/types/drag-drop';
import { ComponentStore } from '@ngrx/component-store';
import * as ngx_t_reports from 'ngx-t-reports';
import { FormGroup } from '@angular/forms';
import moment from 'moment';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import moment$1 from 'moment-timezone';
declare class EChartsComponent {
loading: boolean;
_options: EChartsOption | undefined;
get options(): EChartsOption | undefined;
/**
* Held by reference: `options` is a signal input on the ngx-echarts directive,
* so an equal-but-new object would still force a full chart re-render.
*/
set options(value: EChartsOption | undefined);
/** Accepts a bare number (px) or any CSS length — `320`, `'320px'`, `'50vh'`. */
height: string | number | undefined;
get resolvedHeight(): string;
chartClick: EventEmitter<any>;
onChartClick(event: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<EChartsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<EChartsComponent, "app-e-charts", never, { "loading": { "alias": "loading"; "required": false; }; "options": { "alias": "options"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, { "chartClick": "chartClick"; }, never, never, true, never>;
}
declare enum DocumentLitsLabelConfigInterfaceValueType {
currency = "currency",
number = "number",
string = "string",
date = "date",
daysAgo = "daysAgo",
systemReference = "systemReference",
boolean = "boolean"
}
interface DocumentLitsLabelConfigInterface {
label: string;
formControlName: string;
isHidden?: boolean;
stepName: string | null;
valueType: DocumentLitsLabelConfigInterfaceValueType;
}
interface GroupConfig {
name: string;
propertyLabel: string;
IS_GROUP_CONFIG: boolean;
LEVELS_BEFORE: number[];
IS_CLOSED: boolean;
level: number;
totals?: {
[key: string]: number;
};
realTotal?: {
[key: string]: number;
};
}
interface GroupSettingsModel {
/**
* Specifies the column names to group at initial rendering of the Grid.
* You can also get the currently grouped columns.
*
* @default []
*/
hiddenColumns?: string[];
columns?: string[];
}
interface IDocumentListConfigLocal extends DocumentLitsLabelConfigInterface$1 {
INCLUDED_IN_GROUP?: boolean;
}
interface IMatrixTableState {
reportName: string | null;
list: any[] | null;
listConfig: IDocumentListConfigLocal[] | null | undefined;
aggregates: IDocumentListConfigLocal[] | null;
groupOptions: GroupSettingsModel | null;
closedGroups: string[];
isOpen: any;
groupChart: GroupChartConfig | null;
draggedGroup: string;
scrollIndex: number;
}
declare class NgxTMatrixTableStoreService extends ComponentStore<IMatrixTableState> {
constructor();
readonly selectors: {
state$: rxjs.Observable<IMatrixTableState>;
reportName$: rxjs.Observable<string | null>;
list$: rxjs.Observable<any[] | null>;
listConfig$: rxjs.Observable<IDocumentListConfigLocal[] | null | undefined>;
closedGroups$: rxjs.Observable<string[]>;
isOpen$: rxjs.Observable<any>;
aggregates$: rxjs.Observable<IDocumentListConfigLocal[] | null>;
groupOptions$: rxjs.Observable<GroupSettingsModel | null>;
tableColumns$: rxjs.Observable<IDocumentListConfigLocal[] | null | undefined>;
displayedColumns$: rxjs.Observable<any[]>;
groupLabelConfig$: rxjs.Observable<{
level: number;
formControlName: string;
label: string;
}[]>;
getGroupedData$: rxjs.Observable<(GroupConfig | {
[key: string]: any;
})[]>;
groupedColumns$: rxjs.Observable<{
formControlName: string;
label: string;
}[]>;
groupChart$: rxjs.Observable<GroupChartConfig | null>;
draggedGroup$: rxjs.Observable<string>;
scrollIndex$: rxjs.Observable<number>;
};
readonly actions: {
setReportName: (observableOrValue: string | rxjs.Observable<string | null> | null) => rxjs.Subscription;
setList: (observableOrValue: any[] | rxjs.Observable<any[] | null> | null) => rxjs.Subscription;
setListConfig: (() => void) | ((observableOrValue: ngx_t_forms_types.DocumentLitsLabelConfigInterface[] | rxjs.Observable<ngx_t_forms_types.DocumentLitsLabelConfigInterface[] | null | undefined> | null | undefined) => rxjs.Subscription);
setAggregates: (observableOrValue: ngx_t_forms_types.DocumentLitsLabelConfigInterface[] | rxjs.Observable<ngx_t_forms_types.DocumentLitsLabelConfigInterface[] | null> | null) => rxjs.Subscription;
setGroupOptions: (observableOrValue: GroupSettingsModel | rxjs.Observable<GroupSettingsModel | null> | null) => rxjs.Subscription;
toggleMenu: (() => void) | ((observableOrValue: any) => rxjs.Subscription);
setGroupChart: (observableOrValue: GroupChartConfig | rxjs.Observable<GroupChartConfig | null> | null) => rxjs.Subscription;
setDraggedGroup: (observableOrValue: string | rxjs.Observable<string>) => rxjs.Subscription;
setScrollIndex: (observableOrValue: number | rxjs.Observable<number>) => rxjs.Subscription;
toggleCloseGroup: (() => void) | ((observableOrValue: any) => rxjs.Subscription);
removeGroupColumn: (observableOrValue: string | rxjs.Observable<string>) => rxjs.Subscription;
dropGroupColumn: () => void;
dropGroupingToSortGroups: (observableOrValue: _angular_cdk_types_drag_drop.CdkDragDrop<string[], string[], any> | rxjs.Observable<_angular_cdk_types_drag_drop.CdkDragDrop<string[], string[], any>>) => rxjs.Subscription;
addToGrouping: (observableOrValue: string | rxjs.Observable<string>) => rxjs.Subscription;
};
readonly effects: {
exportData: (observableOrValue?: void | rxjs.Observable<void> | undefined) => rxjs.Subscription;
mainShowChart: (observableOrValue?: void | rxjs.Observable<void> | undefined) => rxjs.Subscription;
foldUnFoldGroup: ((observableOrValue?: any) => rxjs.Subscription) | ((observableOrValue: any) => rxjs.Subscription);
showReport: ((observableOrValue?: any) => rxjs.Subscription) | ((observableOrValue: any) => rxjs.Subscription);
};
static ɵfac: i0.ɵɵFactoryDeclaration<NgxTMatrixTableStoreService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgxTMatrixTableStoreService>;
}
declare class NgxTMatrixTableComponent {
dialog: MatDialog;
scrollContainer: ElementRef<HTMLElement>;
get tableContainerHeight(): number;
store: NgxTMatrixTableStoreService;
set list(value: any[] | null);
set reportName(value: string | null);
set listConfig(value: DocumentLitsLabelConfigInterface[] | null | undefined);
set aggregates(value: DocumentLitsLabelConfigInterface[] | null);
set groupOptions(value: GroupSettingsModel);
tableColumns$: rxjs.Observable<IDocumentListConfigLocal[] | null | undefined>;
displayedColumns$: rxjs.Observable<any[]>;
groupLabelConfig$: rxjs.Observable<{
level: number;
formControlName: string;
label: string;
}[]>;
groupOptions$: rxjs.Observable<GroupSettingsModel | null>;
getGroupedData$: rxjs.Observable<(GroupConfig | {
[key: string]: any;
})[]>;
groupedColumns$: rxjs.Observable<{
formControlName: string;
label: string;
}[]>;
isOpen$: rxjs.Observable<any>;
groupChart$: rxjs.Observable<GroupChartConfig | null>;
closedGroups$: rxjs.Observable<string[]>;
draggedGroup$: rxjs.Observable<string>;
vm$: rxjs.Observable<{
groupOptions: GroupSettingsModel | null;
tableColumns: IDocumentListConfigLocal[] | null | undefined;
displayedColumns: any[];
groupLabelConfig: {
level: number;
formControlName: string;
label: string;
}[];
getGroupedData: (GroupConfig | {
[key: string]: any;
})[];
groupedColumns: {
formControlName: string;
label: string;
}[];
isOpen: any;
closedGroups: string[];
groupChart: GroupChartConfig | null;
draggedGroup: string;
}>;
ValueTypes: typeof DocumentLitsLabelConfigInterfaceValueType;
/**
* Relative strings ("1 month ago") read inconsistently next to the sheet's own
* date range, so `daysAgo` columns render as calendar dates and keep the
* relative wording in the cell tooltip instead.
*/
displayValueType(valueType: DocumentLitsLabelConfigInterfaceValueType): DocumentLitsLabelConfigInterfaceValueType.currency | DocumentLitsLabelConfigInterfaceValueType.number | DocumentLitsLabelConfigInterfaceValueType.string | DocumentLitsLabelConfigInterfaceValueType.date | DocumentLitsLabelConfigInterfaceValueType.systemReference | DocumentLitsLabelConfigInterfaceValueType.boolean;
constructor(dialog: MatDialog);
toggleMenu(row: any): void;
remove(groupCol: String): void;
drop(event: CdkDragDrop<TemplateStringsArray, any>): void;
export(): void;
dropChip(event: CdkDragDrop<string[]>): void;
addToGrouping(formControlName: string): void;
toggleCloseGroup(name: string): void;
mainShowChart(): void;
closeGroupChart(): void;
foldUnFoldGroup(row: any): void;
setDraggedGroup(col: string): void;
showReport(row: any): void;
private readonly rowItemSize;
onScroll(event: Event): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxTMatrixTableComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgxTMatrixTableComponent, "app-ngx-t-matrix-table", never, { "list": { "alias": "list"; "required": false; }; "reportName": { "alias": "reportName"; "required": false; }; "listConfig": { "alias": "listConfig"; "required": false; }; "aggregates": { "alias": "aggregates"; "required": false; }; "groupOptions": { "alias": "groupOptions"; "required": false; }; }, {}, never, never, true, never>;
}
interface GroupChartConfig {
groups: any[];
numberProperties: DocumentLitsLabelConfigInterface[];
mainTitle: string;
}
interface DashboardChart extends EChartsOption {
id: string;
col: number;
errors: string[] | undefined;
}
declare enum ConfigTypes {
SheetConfig = "SheetConfig"
}
interface ElementEditorConfig {
label: string;
subTitle: string;
saveButtonLabel: string;
editorSections: ElementEditorConfigSectionInterface[];
}
declare enum DashboardConfigTypes {
DataSourcesConfig = "DataSourcesConfig",
ReportInputsConfig = "ReportInputsConfig",
SheetConfig = "SheetConfig",
AddChart = "AddChart"
}
interface LocalReportDataSource extends IReportDataSources {
data: any;
}
interface ReportDashboardState {
reportName: string | null;
id: string | null;
chartOptions: DashboardChart[];
editMode: boolean;
dataSources: LocalReportDataSource[];
loadingDataSources?: boolean;
error: string | null;
showSidePanel: boolean;
dashboardConfigTypes: DashboardConfigTypes | null;
activeSideMenuConfig: ElementEditorConfig | null;
chartInEdit: string | null;
}
declare class ReportDashboardStoreService extends ComponentStore<ReportDashboardState> {
readonly NGX_T_FORMS_CONFIG: NgxTFormsConfig;
constructor(NGX_T_FORMS_CONFIG: NgxTFormsConfig);
NGX_T_REPORTS_CONFIG_TOKEN: ngx_t_reports.NgxTReportsConfig;
EXTERNAL_DATA_INTEGRATION: () => rxjs.Observable<Record<string, any>>;
externalDataIntegration$: rxjs.Observable<Record<string, any>>;
readonly selectors: {
state$: rxjs.Observable<ReportDashboardState>;
loadingDataSources$: rxjs.Observable<boolean | undefined>;
chartOptions$: rxjs.Observable<DashboardChart[]>;
showSidePanel$: rxjs.Observable<boolean>;
editMode$: rxjs.Observable<boolean>;
activeSideMenuConfig$: rxjs.Observable<ElementEditorConfig | null>;
dashboardConfigTypes$: rxjs.Observable<DashboardConfigTypes | null>;
dataSources$: rxjs.Observable<LocalReportDataSource[]>;
chartEditorSectionsConfig$: rxjs.Observable<ElementEditorConfig | null | undefined>;
chartInEdit$: rxjs.Observable<string | null>;
};
readonly actions: {
setId: (observableOrValue: string | rxjs.Observable<string>) => rxjs.Subscription;
setActiveSideMenuConfig: (observableOrValue: ElementEditorConfig | rxjs.Observable<ElementEditorConfig | null> | null) => rxjs.Subscription;
setChartOptions: (observableOrValue: any[] | rxjs.Observable<any[]>) => rxjs.Subscription;
setReportName: (observableOrValue: string | rxjs.Observable<string | null> | null) => rxjs.Subscription;
setEditMode: (observableOrValue: boolean | rxjs.Observable<boolean>) => rxjs.Subscription;
setDataSources: (observableOrValue: LocalReportDataSource[] | rxjs.Observable<LocalReportDataSource[]>) => rxjs.Subscription;
setLoadingDataSources: (observableOrValue: boolean | rxjs.Observable<boolean>) => rxjs.Subscription;
setShowSidePanel: () => void;
setError: (observableOrValue: string | rxjs.Observable<string | null> | null) => rxjs.Subscription;
setDashboardConfigTypes: (observableOrValue: DashboardConfigTypes | rxjs.Observable<DashboardConfigTypes | null> | null) => rxjs.Subscription;
setChartInEdit: (observableOrValue: string | rxjs.Observable<string | null> | null) => rxjs.Subscription;
};
readonly effects: {
dataSourcesChangedLoadData$: (observableOrValue: ngx_t_forms_types.IReportDataSources[] | rxjs.Observable<ngx_t_forms_types.IReportDataSources[]>) => rxjs.Subscription;
setConfig: (observableOrValue: ngx_t_reports.IReportSheet | rxjs.Observable<ngx_t_reports.IReportSheet | null> | null) => rxjs.Subscription;
onChartListChange: (observableOrValue: DashboardChart[] | rxjs.Observable<DashboardChart[]>) => rxjs.Subscription;
};
static ɵfac: i0.ɵɵFactoryDeclaration<ReportDashboardStoreService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<ReportDashboardStoreService>;
}
interface IAppReport {
id: string;
name: string;
description: string;
reportSheets: IReportSheet[];
}
interface IReportSheet {
id: string;
name: string;
icon: string;
description: string;
type: ReportType;
listConfig?: DocumentLitsLabelConfigInterface[];
chartOptions?: DashboardChart[];
groupOptions?: GroupSettingsModel;
dataSources: IReportDataSources[];
dateRangeMin?: string;
dateRangeMax?: string;
dateRangeComparisonStart?: string;
dateRangeComparisonEnd?: string;
}
declare enum ReportType {
ReportSheet = "ReportSheet",
Dashboard = "Dashboard"
}
declare class ReportDashboardComponent {
protected sideMenuOptions: {
title: string;
subTitle: string;
config: DashboardConfigTypes;
icon: string;
color: string;
}[];
protected report_inputs: ngx_t_forms_types.FormColumnInputs[];
NGX_T_FORMS_CONFIG: NgxTFormsConfig;
store: ReportDashboardStoreService;
set reportName(report: string | null);
topOffset: number;
set config(config: IReportSheet | null);
set editMode(edit: boolean);
configChange: EventEmitter<IReportSheet | null>;
loadingDataSources$: Observable<boolean | undefined>;
showSidePanel$: Observable<boolean>;
editMode$: Observable<boolean>;
activeSideMenuConfig$: Observable<ElementEditorConfig | null>;
state$: Observable<ReportDashboardState>;
savingChanges$: BehaviorSubject<boolean>;
chartOptions$: Observable<DashboardChart[]>;
chartEditorSectionsConfig$: Observable<ElementEditorConfig | null | undefined>;
chartInEdit$: Observable<string | null>;
actionMenuOptions(config: DashboardConfigTypes): void;
onChartListChange(charts: DashboardChart[]): void;
setChartInEdit(chartId: string | null): void;
formsUtils: InClassFormUtilsInterface;
closeEditor: () => void;
saveElement(value: any): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ReportDashboardComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ReportDashboardComponent, "lib-report-dashboard", never, { "reportName": { "alias": "reportName"; "required": false; }; "topOffset": { "alias": "topOffset"; "required": false; }; "config": { "alias": "config"; "required": false; }; "editMode": { "alias": "editMode"; "required": false; }; }, { "configChange": "configChange"; }, never, ["*"], true, never>;
}
type DatePresetKey = '7d' | '1m' | '3m' | '1y' | 'FY';
declare class ReportSheetComponent implements OnDestroy, OnInit {
_config: IReportSheet | null;
NGX_T_REPORTS_CONFIG_TOKEN: ngx_t_reports.NgxTReportsConfig;
readonly NGX_T_FORMS_CONFIG: NgxTFormsConfig;
EXTERNAL_DATA_INTEGRATION: () => Observable<Record<string, any>>;
externalDataIntegration$: Observable<Record<string, any>>;
reportName: string | null;
editMode: boolean;
set config(config: IReportSheet | null);
get config(): IReportSheet | null;
sideMenuOptions: {
title: string;
subTitle: string;
config: ConfigTypes;
icon: string;
color: string;
}[];
configChange: EventEmitter<IReportSheet | null>;
error$: BehaviorSubject<string | undefined>;
dataList$: BehaviorSubject<any[]>;
loading$: BehaviorSubject<boolean>;
private loadDataDebounceTimer;
loadData(): void;
/**
* A failed load discards whatever the last successful one returned. Leaving the
* rows up next to an error implies they still answer the current filters, which
* they do not — the date range or pipeline that produced them is gone.
*/
private failLoad;
/** Pulls a human-readable message off an HttpErrorResponse, Error, or anything else. */
private toErrorMessage;
loadMongoData(config: MongoDbPipeLineConfigInterface): void;
loadApiData(config: APIDataFetchingConfigurationInterface): void;
get listConfig(): any;
set listConfig(value: any);
get groupingConfig(): any;
set groupingConfig(value: any);
configInEdit: string | null;
setConfigInEdit(type: ConfigTypes): void;
showSidePanel: boolean;
setShowSidePanel(): void;
private _configActiveConfig;
private buildActiveConfig;
get configActiveConfig(): ElementEditorConfig | null;
saveElement(value: any): void;
set configActiveConfig(config: ElementEditorConfig | null);
formsUtils: InClassFormUtilsInterface;
range: FormGroup;
report_inputs: ngx_t_forms_types.FormColumnInputs[];
ngOnInit(): void;
subscription: Subscription;
ngOnDestroy(): void;
config$: Observable<any>;
/**
* A field, not a getter. As a getter this handed every `| async` in the
* template a brand-new observable on each change-detection pass, so the four
* bindings tore down and rebuilt their `combineLatest` chains continuously.
* `shareReplay` then lets those bindings and `ngOnInit` share one chain.
*/
minMaxDateAndComp$: Observable<{
minDate: moment.Moment | null;
maxDate: moment.Moment | null;
compStartDate: moment.Moment | null;
compEndDate: moment.Moment | null;
financialCycleStart: moment.Moment | null;
financialCycleEnd: moment.Moment | null;
}>;
dateChanged: null | Record<string, any>;
activePreset: DatePresetKey | null;
/**
* The range controls are only shown when the request actually carries the
* range. `loadApiData` maps `minimumInputRequired` entries of type `mapto`
* onto `range.value[name]`, so unless something is bound to `startDate` or
* `endDate` the picker and presets change nothing — a Mongo pipeline source
* never receives them at all.
*/
showDateControls: boolean;
private resolveDateRangeBinding;
/**
* Latest value seen from the host's integration feed.
*
* The FY preset used to `take(1)` a fresh subscription at click time. That only
* works if the host's `dataIntegration()` observable replays its last value —
* against a plain Subject the subscription waits for the *next* emission, which
* may never come, so the click resolved nothing. Every other preset is computed
* from `moment()` and so was unaffected, which is why FY alone appeared dead.
*/
private dataIntegrationCache$;
/**
* The financial-year preset reads two fixed keys off that feed. Hosts that do
* not publish a financial cycle get no FY button, rather than a button that
* lights up and does nothing.
*/
financialYearAvailable$: Observable<boolean>;
/**
* Set once the user picks a preset or a date. The integration feed seeds the
* initial range on load, but must not keep overwriting a choice made since.
*/
private userAdjustedRange;
/**
* Abbreviated in the segmented control so the whole range picker fits on one
* compact row; the tooltip carries the full wording.
*/
readonly datePresets: {
key: DatePresetKey;
label: string;
tooltip: string;
}[];
get dateRangeFormatted(): string;
dateRangeChanged(event: any, control: string): void;
applyDatePreset(preset: DatePresetKey): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ReportSheetComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ReportSheetComponent, "app-report-sheet", never, { "reportName": { "alias": "reportName"; "required": false; }; "editMode": { "alias": "editMode"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "configChange": "configChange"; }, never, ["*"], true, never>;
}
declare class TimeZoneAdapterService extends MomentDateAdapter {
private userTimezone;
constructor(dateLocale: string);
parse(value: any, parseFormat: string): moment$1.Moment | null;
format(date: moment$1.Moment, displayFormat: string): string;
createDate(year: number, month: number, date: number): moment$1.Moment;
today(): moment$1.Moment;
deserialize(value: any): moment$1.Moment | null;
static ɵfac: i0.ɵɵFactoryDeclaration<TimeZoneAdapterService, [{ optional: true; }]>;
static ɵprov: i0.ɵɵInjectableDeclaration<TimeZoneAdapterService>;
}
interface NgxTReportsConfig {
runPipeLine: ((pipeline: any[], workflowId: string) => Observable<any>);
postToServer: ((url: string, data: any, options?: any) => Observable<any>);
dataIntegration: () => Observable<Record<string, any>>;
}
declare const NGX_T_REPORTS_CONFIG_TOKEN: InjectionToken<NgxTReportsConfig>;
interface labelConfigurationInterface {
label: string;
formControlName: string;
stepName: string | null;
badge?: {
true: {
color: string;
label: string;
};
false: {
color: string;
label: string;
};
};
valueType?: string;
pipe?: string;
type?: string;
}
export { EChartsComponent, NGX_T_REPORTS_CONFIG_TOKEN, NgxTMatrixTableComponent, ReportDashboardComponent, ReportSheetComponent, TimeZoneAdapterService };
export type { IAppReport, IReportSheet, NgxTReportsConfig, labelConfigurationInterface };