Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d9b5f2b

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

File tree

9 files changed

+347
-0
lines changed

9 files changed

+347
-0
lines changed

‎src/app/app.component.css

Whitespace-only changes.

‎src/app/app.component.html

Lines changed: 138 additions & 0 deletions
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>

‎src/app/app.component.spec.ts

Lines changed: 29 additions & 0 deletions
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+
});

‎src/app/app.component.ts

Lines changed: 71 additions & 0 deletions
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+
}

‎src/app/app.config.ts

Lines changed: 8 additions & 0 deletions
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+
};

‎src/app/app.routes.ts

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

‎src/index.html

Lines changed: 13 additions & 0 deletions
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>

‎src/main.ts

Lines changed: 11 additions & 0 deletions
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));

‎src/styles.css

Lines changed: 74 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /