This library was generated with Angular CLI version 16.1.0
use this library in Angular 16+ or above versions.
lib-ngx-super-dashboard is a combination of search form fields and angular-google-charts module
various filters like dropdown filters , date picker can be configured with dynamicFormFieldData input prop
onSelect and onSbmit eventemitters are provided to return the selected value of dropdown and form object
eg : when zone dropdown selected onSelect event emitter will return object of type SelectedFieldValueEmit
onSelect(a:SelectedFieldValueEmit){
}
onSubmit(e:Record<string, string | number){
}
Usage of the component.
<lib-ngx-super-dashboard
[dynamicFormFieldData]="searchFormFields"
(onSelect)="onSelected($event)"
(onSubmit)="onSearchSubmit($event)"
[cardConfig]="testCardData"
[chartsConfig]="testChartsData"
(onSelectChart)="selectedChart($event)"
[gridOneConfig]="testCardTable"
[gridTwoConfig]="testGridTable"
[noteText]="searchBarText"
>
</lib-ngx-super-dashboard>
In module, define ScriptLoaderService provider in providers.
example: providers: [ScriptLoaderService]
Input Properties
searchFormFields: DynamicFieldsData[] = [
{
label: "Zone",
formControlKey: "zone",
lovDataList: [
{ name: 'Chennai', value: 1 },
{ name: 'Trichy', value: 2 }
]
},
{
label: "Branch",
formControlKey: "branch",
lovDataList: []
},
{
label: "Teams",
formControlKey: "teams",
lovDataList: []
},
{
label: "Team Members",
formControlKey: "teamMembers",
lovDataList: []
},
{
label: "Start Date",
formControlKey: "startdate",
type: "date",
className: 'fieldstyle'
}
];
Cards are configured using cardConfig input property . cardConfig takes array of DynamicCardData type
sample data
testCardData: DynamicCardsData[] = [
{
title: 'Total Proposals',
value: 700
},
{
title: 'On Process',
value: 230
},
{
title: 'Sanctioned',
value: 300
},
{
title: 'Rejected',
value: 254
},
{
title: 'Opened Pending for > 30 days',
value: 143
},
{
title: 'Disbursed',
value: 120
}
];Charts are configured using chartsConfig input property . chartsConfig takes array of DashardCardConfig type
Sample chartConfig Data below
export const testChartsData: DashboardCardConfig[] = [
{
type: ChartType.ComboChart,
cardTitle: 'Monthly Wise',
chartOptionData: {
myColumns: [
'Year',
'Retail',
'Agri',
'MSME',
'Gold',
'Corp'
],
chartOptions: {
title: `Monthly Wise`,
chartArea: { width: '50%' },
hAxis: {
title: `Modules`,
minValue: 0
},
vAxis: {
title: 'No. Of Amount'
},
seriesType: 'bars'
// series: { 4: { type: "line" } }
}
},
chartData: [
['2023/05', 50, 33, 24.5, 33, 22],
['2024/05', 23, 41, 22.5, 22, 2],
['2021/05', 44, 82, 13, 43, 12],
['2023/05', 19, 33, 23, 21, 89],
['2022/05', 30, 20, 12, 34, 22]
],
className: ''
},
{
type: ChartType.PieChart,
cardTitle: 'Total Sanctioned',
chartOptionData: {
myColumns: [
['Retail', 'Agri', 'MSME', 'GOLD', 'CORP'],
'Leads Count',
{ role: 'style' }
],
chartOptions: {
title: `Sanctioned Amount`,
chartArea: { width: '50%' },
slices: {
0: { color: '#622248' },
1: { color: '#109618' },
2: { color: '#3366cc' },
3: { color: 'red' },
4: { color: '#ff9900' }
}
}
},
chartData: [
['Retail', 3445, 'red'],
['Agri', 3445, 'red'],
['MSME', 3445, 'red'],
['Gold', 3445, 'red']
],
className: ''
}
];
design dynamic grid component using gridOneConfig and gridTwoConfig input properties
gridOneConfig: it is a input for small card table array data
example:
export const testCardTable = {
cardTitle: 'Top 5 Branches',
tableColumnHeadings: ['', 'Retail', 'Agri', 'MSME', 'Gold'],
tableDataKey: ['orgName', 'retail', 'agri', 'msme', 'gold'],
tableData: [
{
orgName: 'Chennai',
retail: '849',
agri: '599',
msme: '500',
gold: '200',
},
{
orgName: 'Delhi',
retail: '200',
agri: '300',
msme: '400',
gold: '150',
},
{
orgName: 'Tnagar',
retail: '849',
agri: '480',
msme: '250',
gold: '600',
},
{
orgName: 'Poonamale',
retail: '940',
agri: '234',
msme: '700',
gold: '400',
},
],
};
gridTwoConfig: it is a input for large card table array data
example:
export const testGridTable: GridTableConfigData = {
title: 'Scheme Wise',
tableHeading: [
'Loan Type',
'Scheme',
'No of Acc #',
'Limit in (Lakhs)',
'OS amt in(Lakhs)',
],
tableData: [
{
parentName: 'Chennai',
childData: [
{
tpmSeqId: 62685,
tpmCode: '2',
tpmModifiedDate: '2024-04-24T07:49:20.879+0000',
tpmPrdCode: 'Car Loan',
schemeType: 'Car Dealer',
noOfAcc: 'S14',
limit: '344',
Sanctioned: '20302',
},
],
},
{
parentName: 'Hyderabad',
childData: [
{
tpmSeqId: 62686,
tpmCode: '2',
tpmModifiedDate: '2024-04-24T07:49:20.880+0000',
tpmPrdCode: 'Cash Loan',
schemeType: 'Property Loan',
noOfAcc: 'S34',
limit: '676',
Sanctioned: '23',
},
],
},
],
tableDataKey: ['schemeType', 'noOfAcc', 'limit', 'Sanctioned'],
};
it is displaying some hint or note text on search fields bar end
noteText = '*Amount in lakhs'
onSelect --- Selected Search Field Data emit with field form control name onSubmit --- On Submit Form Data onSelectChart -- Click on chart, it emit events and chartType
export interface AppLOVData {
name: string | number;
value: string | number;
}
export interface DynamicFieldsData {
lable: string;
formControlKey: string;
lovDataList?: AppLOVData[];
type?: string;
className?: string;
}
export interface SelectedFieldValueEmit {
selectedValue: string | number;
fieldControlName: string;
}
export interface SetDataOption {
fetchLovData: Record<string, string | number>[];
value: string | number;
name: string;
name2?: string;
}
// interfaces for grid cardsList:
// Dynamic Card Data Interface
export interface DynamicCardsData {
title: string;
value: number | string;
className?: string;
}
// Dashboard Card Configuration Interface
export interface DashboardCardConfig {
type: any;
chartOptionData: ChartOptionsConfig;
chartData: Array<ChartDataType[]>;
cardTitle?: string;
className?: string;
}
// Chart Data Type
export type ChartDataType = string | number;
// Chart Options Configuration Interface
export interface ChartOptionsConfig {
myColumns: any;
chartOptions: ChartAxisData;
}
// Columns Data Type
export type ColumnsType = string | number;
// Chart Axis Data Interface
export interface ChartAxisData {
title: string;
chartArea: {
width?: string | number;
height?: string | number;
};
slices?: object;
hAxis?: AxisValues;
vAxis?: AxisValues;
seriesType?: string;
series?: object;
}
// Axis Values Interface
export interface AxisValues {
title?: string;
minValue?: number;
}
// Chart Event Emit On Select Interface
export interface ChartEventEmitOnSelect {
ev: ChartSelectionChangedEvent;
chartType: string;
}
// Card Table Data Configuration Interface
export interface CardTableDataConfig {
cardTitle?: string;
tableColumnHeadings: string[];
tableDataKey: string[];
tableData: Array<Record<string, string | number>>;
className?: string;
}
// Grid Table Configuration Data Interface
export interface GridTableConfigData {
title?: string;
tableHeading: string[];
tableDataKey: string[];
tableData: any;
className?: string;
}
// Child Data Type
export type ChildDataType = string | number;
- Data Bind to form fields in two ways
a. Default bind data on creation of Form Fields by using selected property
export interface DynamicFieldsData {
lable: string;
formControlKey: string;
lovDataList?: AppLOVData[];
type?: string;
className?: string;
selected?: string | number;
}
b. Based on requirment, bind array of data to multiple fileds by using service method is setDataBindToFie(aurg) Inject NgxSuperDashboardService service in constructor, then call setDataBindToField()
- Set initial value to Dropdown / Date fields of form by using getFormGroup setter in service. getFormGroup: is providing form controls to perform opration on form fields directly from your component. Inject NgxSuperDashboardService service in constructor in ts file.
Example:
constructor(
private ngxData: NgxSuperDashboardService
){}
export interface SelectedFieldValueEmit {
selectedValue: string | number;
fieldControlName: string;
}
this.ngxData.formGroupSetting.get('zone').setValue(1);
-
Changed background color of Count Cards
-
Swap the cards and charts position
-
Removed Selected template option and fixed horizontal ui