Skip to content

Commit d9b5f2b

Browse files
VenkateshwaranSaravanakumarVenkateshwaranSaravanakumar
authored
Merge pull request #3 from SyncfusionExamples/888848-AngDashUiComp
Updated source files
2 parents f0d8f44 + 394cc1f commit d9b5f2b

9 files changed

+347
-0
lines changed

Diff for: ‎src/app/app.component.css

Whitespace-only changes.

Diff for: ‎src/app/app.component.html

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<ejs-dashboardlayout [columns]="8" [cellSpacing]="cellSpacing" [allowFloating]="true">
2+
<e-panels>
3+
<e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="0">
4+
<ng-template #header>
5+
<div>Income</div>
6+
</ng-template>
7+
<ng-template #content>
8+
<div class="card">
9+
<table>
10+
<tr>
11+
<td>
12+
<p class="income-container">$43,300</p>
13+
</td>
14+
<td>
15+
<img src="../income.jpg" style="margin-left:138px;" />
16+
</td>
17+
</tr>
18+
</table>
19+
</div>
20+
</ng-template>
21+
</e-panel>
22+
<e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="2">
23+
<ng-template #header>
24+
<div>Expenses</div>
25+
</ng-template>
26+
<ng-template #content>
27+
<div class="card">
28+
<table>
29+
<tr>
30+
<td>
31+
<p class="expense-container">$38,060</p>
32+
</td>
33+
<td>
34+
<img src="../expense.jpg" style="margin-Left:135px" />
35+
</td>
36+
</tr>
37+
</table>
38+
</div>
39+
</ng-template>
40+
</e-panel>
41+
<e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="4">
42+
<ng-template #header>
43+
<div>Balance</div>
44+
</ng-template>
45+
<ng-template #content>
46+
<div class="card">
47+
<table>
48+
<tr>
49+
<td>
50+
<p class="balance-container">$38,060</p>
51+
</td>
52+
<td>
53+
<img src="../balance.png" style="margin-Left:125px ;margin-Bottom:15px" />
54+
</td>
55+
</tr>
56+
</table>
57+
</div>
58+
</ng-template>
59+
</e-panel>
60+
<e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="6">
61+
<ng-template #header>
62+
<div>Transactions</div>
63+
</ng-template>
64+
<ng-template #content>
65+
<div class="card">
66+
<table>
67+
<tr>
68+
<td>
69+
<p class="transaction-container">$38,060</p>
70+
</td>
71+
<td>
72+
<img src="../trans.jpg" style="margin-Left:118px;margin-Bottom:15px" />
73+
</td>
74+
</tr>
75+
</table>
76+
</div>
77+
</ng-template>
78+
</e-panel>
79+
<e-panel [sizeX]="4" [sizeY]="3" [row]="1" [col]="0">
80+
<ng-template #header>
81+
<div>Income Expenses</div>
82+
</ng-template>
83+
<ng-template #content>
84+
<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'>
85+
<e-series-collection>
86+
<e-series [dataSource]='incomeExpenseData' type='SplineArea' xName='period' yName='income' name='income'
87+
width=2 fill='#00BCD7'></e-series>
88+
<e-series [dataSource]='incomeExpenseData' type='SplineArea' xName='period' yName='expense' name='expense'
89+
width=2 fill='#CDDE1F'></e-series>
90+
</e-series-collection>
91+
</ejs-chart>
92+
</ng-template>
93+
</e-panel>
94+
<e-panel [sizeX]="4" [sizeY]="3" [row]="1" [col]="4">
95+
<ng-template #header>
96+
<div>Total Expenses</div>
97+
</ng-template>
98+
<ng-template #content>
99+
<ejs-accumulationchart id="pieChart" #piechart width="100%" height="100%">
100+
<e-accumulation-series-collection>
101+
<e-accumulation-series name='Usage' [dataSource]='PieRenderingData' xName='text' yName='y'
102+
[startAngle]="startAngle" [endAngle]="endAngle" innerRadius="50%" radius="83%" [dataLabel]="piedataLabel">
103+
</e-accumulation-series>
104+
</e-accumulation-series-collection>
105+
</ejs-accumulationchart>
106+
</ng-template>
107+
</e-panel>
108+
<e-panel [sizeX]="8" [sizeY]="3" [row]="4" [col]="0">
109+
<ng-template #header>
110+
<div>Recent Transactions</div>
111+
</ng-template>
112+
<ng-template #content>
113+
<ejs-grid [dataSource]='transactionData'>
114+
<e-columns>
115+
<e-column field='transactoinId' headerText='Transaction ID' textAlign='Center' width=120></e-column>
116+
<e-column field='category' headerText='Category' width=120>
117+
<ng-template #template let-data>
118+
<div className='image'>
119+
<img class='category-icon' [src]='data.image' alt='{{data.category}}' />
120+
<div className='category-text'>{{data.category}}</div>
121+
</div>
122+
</ng-template>
123+
</e-column>
124+
<e-column field='paymentMode' headerText='PaymentMode' textAlign='Center'></e-column>
125+
<e-column field='description' headerText='Description' textAlign='Center'></e-column>
126+
<e-column field='amount' headerText='Amount' width=160 textAlign='Center'>
127+
<ng-template #template let-data>
128+
<div className='image'>
129+
<span>$</span><span>{{data.amount}}</span>
130+
</div>
131+
</ng-template>
132+
</e-column>
133+
</e-columns>
134+
</ejs-grid>
135+
</ng-template>
136+
</e-panel>
137+
</e-panels>
138+
</ejs-dashboardlayout>

Diff for: ‎src/app/app.component.spec.ts

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { AppComponent } from './app.component';
3+
4+
describe('AppComponent', () => {
5+
beforeEach(async () => {
6+
await TestBed.configureTestingModule({
7+
imports: [AppComponent],
8+
}).compileComponents();
9+
});
10+
11+
it('should create the app', () => {
12+
const fixture = TestBed.createComponent(AppComponent);
13+
const app = fixture.componentInstance;
14+
expect(app).toBeTruthy();
15+
});
16+
17+
it(`should have the 'dashBoardLayoutUiComponents' title`, () => {
18+
const fixture = TestBed.createComponent(AppComponent);
19+
const app = fixture.componentInstance;
20+
expect(app.title).toEqual('dashBoardLayoutUiComponents');
21+
});
22+
23+
it('should render title', () => {
24+
const fixture = TestBed.createComponent(AppComponent);
25+
fixture.detectChanges();
26+
const compiled = fixture.nativeElement as HTMLElement;
27+
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, dashBoardLayoutUiComponents');
28+
});
29+
});

Diff for: ‎src/app/app.component.ts

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { Component } from '@angular/core';
2+
import { RouterOutlet } from '@angular/router';
3+
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
4+
import { ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts';
5+
import { GridModule } from '@syncfusion/ej2-angular-grids';
6+
7+
@Component({
8+
selector: 'app-root',
9+
standalone: true,
10+
imports: [RouterOutlet, DashboardLayoutModule, ChartAllModule, AccumulationChartAllModule, GridModule],
11+
templateUrl: './app.component.html',
12+
styleUrl: './app.component.css'
13+
})
14+
export class AppComponent {
15+
16+
public transactionData = [
17+
{ category: "Food", image: "../food.png", amount: 6, paymentMode: "Debit Card", iconCss: "food", isExpense: true, isIncome: false, transactoinId: "#131614678", description: "Palmetto Cheese, Mint julep" },
18+
{ category: "Transportation", image: "../travel.png", amount: 7, paymentMode: "Debit Card", iconCss: "travel", isExpense: true, isIncome: false, transactoinId: "#131416876", description: "Other vehicle expenses" },
19+
{ category: "Housing", image: "../housing.png", amount: 20, paymentMode: "Credit Card", iconCss: "housing", isExpense: true, isIncome: false, transactoinId: "#1711148579", description: "Laundry and cleaning supplies" },
20+
{ category: "Extra Income", image: "../extra-income.png", amount: 110, paymentMode: "Cash", iconCss: "extra-income", isExpense: false, isIncome: true, transactoinId: "#1922419785", description: "Income from Sale" },
21+
{ category: "Food", image: "../food.png", amount: 10, paymentMode: "Credit Card", iconCss: "food", isExpense: true, isIncome: false, transactoinId: "#2744145880", description: "Muffuletta sandwich, Mint julep" }];
22+
23+
public PieRenderingData = [
24+
{ x: "Mortgage / Rent", text: "15.76%", y: 6000 },
25+
{ x: "Food", text: "12.79%", y: 4866 },
26+
{ x: "Utilities", text: "10.93%", y: 4160 },
27+
{ x: "Bills", text: "10.4%", y: 3960 },
28+
{ x: "Shopping", text: "8.87%", y: 3375 },
29+
{ x: "Transportation", text: "8.49%", y: 3230 },
30+
{ x: "Insurance", text: "7.59%", y: 2890 },
31+
{ x: "Health Care", text: "6.52%", y: 2480 },
32+
{ x: "Clothing", text: "5.92%", y: 2255 },
33+
{ x: "Others", text: "12.73%", y: 4844 }
34+
];
35+
36+
public startAngle: number = 0;
37+
38+
public endAngle: number = 360;
39+
40+
piedataLabel: object = {
41+
visible: true, position: 'Outside', name: 'x',
42+
};
43+
44+
public primaryXAxis = {
45+
valueType: 'DateTimeCategory',
46+
intervalType: 'Months',
47+
labelFormat: 'MMM'
48+
};
49+
public primaryYAxis: Object = {
50+
minimum: 1000,
51+
maximum: 9000,
52+
interval: 2000
53+
};
54+
55+
56+
public incomeExpenseData = [
57+
{ period: new Date('2017-01-01'), income: 7490, expense: 6973 },
58+
{ period: new Date('2021-02-01'), income: 6840, expense: 6060 },
59+
{ period: new Date('2021-03-01'), income: 6060, expense: 5500 },
60+
{ period: new Date('2012-04-01'), income: 8190, expense: 7059 },
61+
{ period: new Date('2021-05-01'), income: 7320, expense: 6333 },
62+
{ period: new Date('2021-06-01'), income: 7380, expense: 6135 }
63+
];
64+
65+
66+
public chartData: Object[] = [
67+
{ x: new Date(2023, 0, 1), y: 5000 },
68+
{ x: new Date(2023, 1, 1), y: 7000 },
69+
{ x: new Date(2023, 2, 1), y: 8000 },
70+
];
71+
}

Diff for: ‎src/app/app.config.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
4+
import { routes } from './app.routes';
5+
6+
export const appConfig: ApplicationConfig = {
7+
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
8+
};

Diff for: ‎src/app/app.routes.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { Routes } from '@angular/router';
2+
3+
export const routes: Routes = [];

Diff for: ‎src/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>DashBoardLayoutUiComponents</title>
6+
<base href="/">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="icon" type="image/x-icon" href="favicon.ico">
9+
</head>
10+
<body>
11+
<app-root></app-root>
12+
</body>
13+
</html>

Diff for: ‎src/main.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { bootstrapApplication } from '@angular/platform-browser';
2+
import { appConfig } from './app/app.config';
3+
import { AppComponent } from './app/app.component';
4+
registerLicense('ORg4AjUWIQA/Gnt2U1hhQlJBfVddXHxLflFyVWtTfl16d1FWESFaRnZdRl1kSXtTfkdjW3dZdndV')
5+
6+
7+
import { registerLicense } from '@syncfusion/ej2-base';
8+
9+
10+
bootstrapApplication(AppComponent, appConfig)
11+
.catch((err) => console.error(err));

Diff for: ‎src/styles.css

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/* You can add global styles to this file, and also import other style files */
2+
3+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
4+
@import "../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css";
5+
6+
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
7+
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
8+
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
9+
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
10+
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
11+
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
12+
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
13+
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
14+
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
15+
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
16+
17+
body > :nth-child(3) {
18+
display: none;
19+
}
20+
21+
.e-panel-header {
22+
text-align: center;
23+
padding: 10px;
24+
}
25+
.e-panel-content {
26+
text-align: center;
27+
margin-top: 10px;
28+
}
29+
.e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
30+
color: #754131;
31+
background-color: #c9e2f7;
32+
33+
}
34+
35+
.e-dashboardlayout.e-control .e-panel .e-panel-header div{
36+
padding: 3px;
37+
}
38+
.income-container {
39+
font-size: x-large;
40+
color: #17a00e;
41+
margin-top: 14px;
42+
padding-left: 14px;
43+
}
44+
.expense-container {
45+
color: #ca765a;
46+
font-size: x-large;
47+
margin-top: 14px;
48+
padding-left: 15px;
49+
}
50+
.balance-container {
51+
font-size: x-large;
52+
color: #17a00e;
53+
margin-top: 0px;
54+
padding: 15px;
55+
}
56+
.transaction-container {
57+
color: #ca765a;
58+
font-size: x-large;
59+
margin-top: 0px;
60+
padding: 15px;
61+
}
62+
.category-icon {
63+
/* float: left; */
64+
background-repeat: no-repeat;
65+
background-position-x: center;
66+
background-size: 100%;
67+
height: 30px;
68+
width: 30px;
69+
display: inline-block;
70+
margin-right: 10px;
71+
}
72+
.category-text {
73+
float: left;
74+
}

0 commit comments

Comments
 (0)