Updated source files

src/app/app.component.html

@@ -0,0 +1,138 @@
+<ejs-dashboardlayout [columns]="8" [cellSpacing]="cellSpacing" [allowFloating]="true">
+  <e-panels>
+    <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="0">
+      <ng-template #header>
+        <div>Income</div>
+      </ng-template>
+      <ng-template #content>
+        <div class="card">
+          <table>
+            <tr>
+              <td>
+                <p class="income-container">$43,300</p>
+              </td>
+              <td>
+                <img src="../income.jpg" style="margin-left:138px;" />
+              </td>
+            </tr>
+          </table>
+        </div>
+      </ng-template>
+    </e-panel>
+    <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="2">
+      <ng-template #header>
+        <div>Expenses</div>
+      </ng-template>
+      <ng-template #content>
+        <div class="card">
+          <table>
+            <tr>
+              <td>
+                <p class="expense-container">$38,060</p>
+              </td>
+              <td>
+                <img src="../expense.jpg" style="margin-Left:135px" />
+              </td>
+            </tr>
+          </table>
+        </div>
+      </ng-template>
+    </e-panel>
+    <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="4">
+      <ng-template #header>
+        <div>Balance</div>
+      </ng-template>
+      <ng-template #content>
+        <div class="card">
+          <table>
+            <tr>
+              <td>
+                <p class="balance-container">$38,060</p>
+              </td>
+              <td>
+                <img src="../balance.png" style="margin-Left:125px ;margin-Bottom:15px" />
+              </td>
+            </tr>
+          </table>
+        </div>
+      </ng-template>
+    </e-panel>
+    <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="6">
+      <ng-template #header>
+        <div>Transactions</div>
+      </ng-template>
+      <ng-template #content>
+        <div class="card">
+          <table>
+            <tr>
+              <td>
+                <p class="transaction-container">$38,060</p>
+              </td>
+              <td>
+                <img src="../trans.jpg" style="margin-Left:118px;margin-Bottom:15px" />
+              </td>
+            </tr>
+          </table>
+        </div>
+      </ng-template>
+    </e-panel>
+    <e-panel [sizeX]="4" [sizeY]="3" [row]="1" [col]="0">
+      <ng-template #header>
+        <div>Income Expenses</div>
+      </ng-template>
+      <ng-template #content>
+        <ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'>
+          <e-series-collection>
+            <e-series [dataSource]='incomeExpenseData' type='SplineArea' xName='period' yName='income' name='income'
+              width=2 fill='#00BCD7'></e-series>
+            <e-series [dataSource]='incomeExpenseData' type='SplineArea' xName='period' yName='expense' name='expense'
+              width=2 fill='#CDDE1F'></e-series>
+          </e-series-collection>
+        </ejs-chart>
+      </ng-template>
+    </e-panel>
+    <e-panel [sizeX]="4" [sizeY]="3" [row]="1" [col]="4">
+      <ng-template #header>
+        <div>Total Expenses</div>
+      </ng-template>
+      <ng-template #content>
+        <ejs-accumulationchart id="pieChart" #piechart width="100%" height="100%">
+          <e-accumulation-series-collection>
+            <e-accumulation-series name='Usage' [dataSource]='PieRenderingData' xName='text' yName='y'
+              [startAngle]="startAngle" [endAngle]="endAngle" innerRadius="50%" radius="83%" [dataLabel]="piedataLabel">
+            </e-accumulation-series>
+          </e-accumulation-series-collection>
+        </ejs-accumulationchart>
+      </ng-template>
+    </e-panel>
+    <e-panel [sizeX]="8" [sizeY]="3" [row]="4" [col]="0">
+      <ng-template #header>
+        <div>Recent Transactions</div>
+      </ng-template>
+      <ng-template #content>
+        <ejs-grid [dataSource]='transactionData'>
+          <e-columns>
+            <e-column field='transactoinId' headerText='Transaction ID' textAlign='Center' width=120></e-column>
+            <e-column field='category' headerText='Category' width=120>
+              <ng-template #template let-data>
+                <div className='image'>
+                  <img class='category-icon' [src]='data.image' alt='{{data.category}}' />
+                  <div className='category-text'>{{data.category}}</div>
+                </div>
+              </ng-template>
+            </e-column>
+            <e-column field='paymentMode' headerText='PaymentMode' textAlign='Center'></e-column>
+            <e-column field='description' headerText='Description' textAlign='Center'></e-column>
+            <e-column field='amount' headerText='Amount' width=160 textAlign='Center'>
+              <ng-template #template let-data>
+                <div className='image'>
+                  <span>$</span><span>{{data.amount}}</span>
+                </div>
+              </ng-template>
+            </e-column>
+          </e-columns>
+        </ejs-grid>
+      </ng-template>
+    </e-panel>
+  </e-panels>
+</ejs-dashboardlayout>

src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'dashBoardLayoutUiComponents' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('dashBoardLayoutUiComponents');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, dashBoardLayoutUiComponents');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,71 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
+import { ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts';
+import { GridModule } from '@syncfusion/ej2-angular-grids';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, DashboardLayoutModule, ChartAllModule, AccumulationChartAllModule, GridModule],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+
+  public transactionData = [
+    { category: "Food", image: "../food.png", amount: 6, paymentMode: "Debit Card", iconCss: "food", isExpense: true, isIncome: false, transactoinId: "#131614678", description: "Palmetto Cheese, Mint julep" },
+    { category: "Transportation", image: "../travel.png", amount: 7, paymentMode: "Debit Card", iconCss: "travel", isExpense: true, isIncome: false, transactoinId: "#131416876", description: "Other vehicle expenses" },
+    { category: "Housing", image: "../housing.png", amount: 20, paymentMode: "Credit Card", iconCss: "housing", isExpense: true, isIncome: false, transactoinId: "#1711148579", description: "Laundry and cleaning supplies" },
+    { category: "Extra Income", image: "../extra-income.png", amount: 110, paymentMode: "Cash", iconCss: "extra-income", isExpense: false, isIncome: true, transactoinId: "#1922419785", description: "Income from Sale" },
+    { category: "Food", image: "../food.png", amount: 10, paymentMode: "Credit Card", iconCss: "food", isExpense: true, isIncome: false, transactoinId: "#2744145880", description: "Muffuletta sandwich, Mint julep" }];
+
+  public PieRenderingData = [
+    { x: "Mortgage / Rent", text: "15.76%", y: 6000 },
+    { x: "Food", text: "12.79%", y: 4866 },
+    { x: "Utilities", text: "10.93%", y: 4160 },
+    { x: "Bills", text: "10.4%", y: 3960 },
+    { x: "Shopping", text: "8.87%", y: 3375 },
+    { x: "Transportation", text: "8.49%", y: 3230 },
+    { x: "Insurance", text: "7.59%", y: 2890 },
+    { x: "Health Care", text: "6.52%", y: 2480 },
+    { x: "Clothing", text: "5.92%", y: 2255 },
+    { x: "Others", text: "12.73%", y: 4844 }
+  ];
+
+  public startAngle: number = 0;
+
+  public endAngle: number = 360;
+
+  piedataLabel: object = {
+    visible: true, position: 'Outside', name: 'x',
+  };
+
+  public primaryXAxis = {
+    valueType: 'DateTimeCategory',
+    intervalType: 'Months',
+    labelFormat: 'MMM'
+  };
+  public primaryYAxis: Object = {
+    minimum: 1000,
+    maximum: 9000,
+    interval: 2000
+  };
+
+
+  public incomeExpenseData = [
+    { period: new Date('2017-01-01'), income: 7490, expense: 6973 },
+    { period: new Date('2021-02-01'), income: 6840, expense: 6060 },
+    { period: new Date('2021-03-01'), income: 6060, expense: 5500 },
+    { period: new Date('2012-04-01'), income: 8190, expense: 7059 },
+    { period: new Date('2021-05-01'), income: 7320, expense: 6333 },
+    { period: new Date('2021-06-01'), income: 7380, expense: 6135 }
+  ];
+
+
+  public chartData: Object[] = [
+    { x: new Date(2023, 0, 1), y: 5000 },
+    { x: new Date(2023, 1, 1), y: 7000 },
+    { x: new Date(2023, 2, 1), y: 8000 },
+  ];
+}

src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+};

src/app/app.routes.ts

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

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>DashBoardLayoutUiComponents</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

src/main.ts

@@ -0,0 +1,11 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+registerLicense('ORg4AjUWIQA/Gnt2U1hhQlJBfVddXHxLflFyVWtTfl16d1FWESFaRnZdRl1kSXtTfkdjW3dZdndV')
+
+
+import { registerLicense } from '@syncfusion/ej2-base';
+
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

src/styles.css

@@ -0,0 +1,74 @@
+/* You can add global styles to this file, and also import other style files */
+
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css";
+
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
+
+body > :nth-child(3) {
+    display: none;
+  }
+
+.e-panel-header {
+    text-align: center;
+    padding: 10px;
+}
+.e-panel-content {
+    text-align: center;
+    margin-top: 10px;
+}
+.e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
+    color: #754131;
+    background-color: #c9e2f7;
+
+}
+
+.e-dashboardlayout.e-control .e-panel .e-panel-header div{
+    padding: 3px;
+}
+.income-container {
+    font-size: x-large;
+    color: #17a00e;
+    margin-top: 14px;
+    padding-left: 14px;
+}
+.expense-container {
+    color: #ca765a;
+    font-size: x-large;
+    margin-top: 14px;
+    padding-left: 15px;
+}
+.balance-container {
+    font-size: x-large;
+    color: #17a00e;
+    margin-top: 0px;
+    padding: 15px;
+}
+.transaction-container {
+    color: #ca765a;
+    font-size: x-large;
+    margin-top: 0px;
+    padding: 15px;
+}
+.category-icon {
+    /* float: left; */
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-size: 100%;
+    height: 30px;
+    width: 30px;
+    display: inline-block;
+    margin-right: 10px;
+}
+.category-text {
+    float: left;
+}