...
Code Block | ||||
---|---|---|---|---|
| ||||
interface IBase <T extends object> { reportType: IReportType; readonly _defaultConfig: object; // default configurations as per the reportType height?: string; width?: string; id: string; config: object; // input configuration for the dashlets component. It should be as per the report type. Refer to next sections for more details as per the report Type data: IDataobejct[]; // input data either in JSON format, url or API configurationstate: EventEmitter<IReportState>; stateevents: EventEmitter<IReportState>EventEmitter<CustomEvent>; initialize(config: object, data: T[]InputParams); // Get the initialisation options used for rendering. reset(): void; // resets the component to initial view destroy(): void; // performs cleanup post the component is destroyed; update(config: UpdateInputParams); // updates and re renders the view fetchData<T>(config: IData): Promise<T[]> | Observable<T[]>; } /* genetic########################################################################## methods* for*. addition and removal of data; depenedent interfaces are as addData(); removeData */ } /* ########################################################################## * *. depenedent interfaces are as follows:- * ########################################################################## */ type IReportType = follows:- * ########################################################################## */ type IReportType = "chart" | "table" | "etc" type methodType = "GET" | "POST"; interface IApiConfig { body: object url:| stringnull; headers?: { [header: string]: string | string[]; }; methodTypeparams?: methodType;{ params[param: {string]: string | string[]; }; [param: string]: string | string[]responseType?: 'arraybuffer' | 'blob' | 'json' | 'text'; reportProgress?: }boolean; response: { path: string; //Gets the value at path of response object }; [key: string]: }any } interface IDataSchema { type: string, enum?: string[], default?: string, format?: string; //url, date etc items?: IDataSchema // if type is array } interface IData<T extends object>IData { values?: Tunknown[]; location?: { options?: Partial<IApiConfig>; apiConfigurl?: IApiConfigstring; urlmethod?: string; }, dataSchema?: { [key: string]: IDataSchema; } } type IReportState = "initialized" | "rendered" | "destroyed" | "etc"; // pending or done state; interface EventEmitter<T>{ emit(value? : T); subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription; } type InputParams = { type: string; config: object; data: IData } type UpdateInputParams = { type: string; config: object; data: object[] } |
...
IChart Interface - Base Interface for Chart Components. <ReportType = Chart>
...
Code Block | ||
---|---|---|
| ||
interface IChart extends IBase { readonly reportType: IReportType = "chart" readonly _defaultConfig: IChartConfig; // default config for tooltips colors legend etc. type: IChartType; config: IChartOptions; chartClick: EventEmitter<any>; chartHover: EventEmitter<any>; chartBuilderbuilder(config); // (prepares / converts) input chart config as per the underlying chart library used. update(input: Partial<UpdateInputParams>); refreshChart(); // refreshes and updates the chart either at specific interval or explicitly triggerd addData({ label, data, config }); //appends the label and data at the end; removeData(); //pops the last data and label removeData(label: string) // removes a specific label getTelemetry(); // mergeData(data1, data2, ...dataN): any[]; getCurrentSelection(); exportAs(format: string); getDatasetAtIndex(index: number); } /* ########################################################################## * *. depenedent interfaces are as follows:- * ########################################################################## */ type IChartType = "bar" | "line" | "pie" | "etc"; type IChartOptions = { labels? : string[], // if labels are passed explicitely labelExpr ? : string; // column name to use as x-axis labels; datasets: IDataset[]; // datasets - y axis data tooltip?: object; legend?: object animation?: object; colors?: object; title?: string | object; description?: string; subtitle?: string; caption?: object; filters?: IFilterConfig; scales?: { axes: any; [key: string]: any; }; [key: string]: any; }; type IDataset = { label: string; dataExpr?: string; data: any[]; } |
...
Code Block | ||||
---|---|---|---|---|
| ||||
<sb-dashlet [type]="string" [config]="config" [data]="data | IDataLocation" , [id?]="string | uuid" [height]="string" [width]="string" (...anyOtherEvent(events)="eventListener($event)"> </sb-dashlet> |
...
Code Block | ||||
---|---|---|---|---|
| ||||
<sb-dashlet type="'table'" [data]="data" [config]="config" (rowClickHandler)="eventListener($click)"> </sb-dashlet> <script> let columnsConfiguration = { columnsConfiguration = { paging: true, ...globalTableConfig, //optional to override info:certain true,config columnConfig: [ { title: "District", data: "District", searchable: true, orderable: true, autoWidth: true, visible: true }, { title: "Unique App Count", data: "Unique Devices on app", searchable: true, orderable: true, autoWidth: true, visible: true }, { title: "Unique Portal Count", data: "Unique Devices on portal", searchable: true, orderable: true, autoWidth: true, visible: true }, ] } </script> |
...