...
Code Block |
---|
breakoutMode | wide |
---|
language | js |
---|
|
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[];
};
methodType: methodType;
paramsparams?: {
[param: string]: string | string[];
};
responseresponseType?: {'arraybuffer' | 'blob' | 'json' | 'text';
pathreportProgress?: stringboolean;
response: {
//Gets the value at path: ofstring;
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<TIData extends{
object> {
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;) => 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();
getCurrentSelectionexportAs(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 |
---|
breakoutMode | wide |
---|
language | html |
---|
|
<sb-dashlet [type]="string" [config]="config" [data]="data | IDataLocation" , [id?]="string | uuid" [height]="string"
[width]="string" (...anyOtherEventevents)="eventListener($event)">
</sb-dashlet> |
...
Code Block |
---|
breakoutMode | wide |
---|
language | html |
---|
|
<sb-dashlet [type]="'map'" [data]="data" [config]="config" (featureClicked)="eventListener($event)">
</sb-dashlet>
<script>
let config = {
state: 'Tamil Nadu',
districts: ['Ariyalur', 'Chennai', 'Coimbatore', 'Cuddalore', 'Dharmapuri'],
metrics: ['Unique Devices on app', Unique Devices on portal],
title: 'Tamil Nadu Weekly Usage'
// country: 'India', // Optional - to show india map with states
// states: ['Karnataka'], // Optional - list of states to show on the map
// other Options
}
// default config can be overridden with new configurations...
let otherOptions = {
initialCoordinate: [20, 78],
latBounds: [6.4626999, 68.1097],
lonBounds: [35.513327, 97.39535869999999],
initialZoomLevel: 5,
controlTitle: 'Tamil Nadu Weekly Usage',
tileLayer: {
urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
options: {
attributions: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
},
rootStyle: {
fillColor: '#007cbe'
},
otherOptions: any
};
</script> |
Other Examples of using India map are as follows:-
Image Added | Image Added |
...
Table Example using Dashlet Component
...
Code Block |
---|
breakoutMode | wide |
---|
language | html |
---|
|
<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> |
...