UNPKG

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
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 };