Skip to content

Commit 71d373d

Browse files
NilubaNiluba
authored
Add files via upload
1 parent bd2a350 commit 71d373d

20 files changed

+5960
-2
lines changed

‎README.md‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,15 @@
1-
# customize-the-appearance-of-the-angular-pivot-table-using-templates
2-
A quick-start project that contains code to customize a Syncfusion Angular Pivot Table component. This sample includes a code snippet to customize the appearance of Pivot Table cells using a cell template and apply conditional formatting to value fields programmatically.
1+
# Customize the Appearance of the Angular Pivot Table Using Templates
2+
3+
A quick-start project that contains code to customize a Syncfusion Angular Pivot Table component. This sample includes a code snippet to customize the appearance of Pivot Table cells using a cell template and apply conditional formatting to value fields programmatically.
4+
5+
Refer to the following documentation to learn about the Angular Pivot Table component:
6+
https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column#cell-template
7+
8+
Check out this online example of the Angular Pivot Table component:
9+
https://ej2.syncfusion.com/angular/demos/#/material/pivot-table/cell-template
10+
11+
## Project prerequisites
12+
Make sure that you have the compatible versions of [Visual Studio Code](https://code.visualstudio.com/download ) and [NodeJS](https://nodejs.org/en/download) or later version in your machine before starting to work on this project.
13+
14+
## How to run this application
15+
To run this application, you need to first clone the `customize-the-appearance-of-the-angular-pivot-table-using-templates` repository and then open it in Visual Studio Code. Now, simply build and run your project to view the output.

‎angular.json‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"myapp": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:application",
15+
"options": {
16+
"outputPath": "dist/myapp",
17+
"index": "src/index.html",
18+
"browser": "src/main.ts",
19+
"polyfills": [
20+
"zone.js"
21+
],
22+
"tsConfig": "tsconfig.app.json",
23+
"assets": [
24+
"src/favicon.ico",
25+
"src/assets"
26+
],
27+
"styles": [
28+
"src/styles.css"
29+
],
30+
"scripts": []
31+
},
32+
"configurations": {
33+
"production": {
34+
"budgets": [
35+
{
36+
"type": "initial",
37+
"maximumWarning": "500kb",
38+
"maximumError": "1mb"
39+
},
40+
{
41+
"type": "anyComponentStyle",
42+
"maximumWarning": "2kb",
43+
"maximumError": "4kb"
44+
}
45+
],
46+
"outputHashing": "all"
47+
},
48+
"development": {
49+
"optimization": false,
50+
"extractLicenses": false,
51+
"sourceMap": true
52+
}
53+
},
54+
"defaultConfiguration": "production"
55+
},
56+
"serve": {
57+
"builder": "@angular-devkit/build-angular:dev-server",
58+
"configurations": {
59+
"production": {
60+
"buildTarget": "myapp:build:production"
61+
},
62+
"development": {
63+
"buildTarget": "myapp:build:development"
64+
}
65+
},
66+
"defaultConfiguration": "development"
67+
},
68+
"extract-i18n": {
69+
"builder": "@angular-devkit/build-angular:extract-i18n",
70+
"options": {
71+
"buildTarget": "myapp:build"
72+
}
73+
},
74+
"test": {
75+
"builder": "@angular-devkit/build-angular:karma",
76+
"options": {
77+
"polyfills": [
78+
"zone.js",
79+
"zone.js/testing"
80+
],
81+
"tsConfig": "tsconfig.spec.json",
82+
"assets": [
83+
"src/favicon.ico",
84+
"src/assets"
85+
],
86+
"styles": [
87+
"src/styles.css"
88+
],
89+
"scripts": []
90+
}
91+
}
92+
}
93+
}
94+
}
95+
}

‎package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "myapp",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "^17.1.0",
14+
"@angular/common": "^17.1.0",
15+
"@angular/compiler": "^17.1.0",
16+
"@angular/core": "^17.1.0",
17+
"@angular/forms": "^17.1.0",
18+
"@angular/platform-browser": "^17.1.0",
19+
"@angular/platform-browser-dynamic": "^17.1.0",
20+
"@angular/router": "^17.1.0",
21+
"@syncfusion/ej2-angular-pivotview": "^24.1.46",
22+
"rxjs": "~7.8.0",
23+
"tslib": "^2.3.0",
24+
"zone.js": "~0.14.3"
25+
},
26+
"devDependencies": {
27+
"@angular-devkit/build-angular": "^17.1.0",
28+
"@angular/cli": "^17.1.0",
29+
"@angular/compiler-cli": "^17.1.0",
30+
"@types/jasmine": "~5.1.0",
31+
"jasmine-core": "~5.1.0",
32+
"karma": "~6.4.0",
33+
"karma-chrome-launcher": "~3.2.0",
34+
"karma-coverage": "~2.2.0",
35+
"karma-jasmine": "~5.1.0",
36+
"karma-jasmine-html-reporter": "~2.1.0",
37+
"typescript": "~5.3.2"
38+
}
39+
}

‎src/app/app.component.css‎

Lines changed: 59 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/app.component.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<ejs-pivotview #pivotview
2+
[dataSourceSettings]=dataSourceSettings width='1000' height='400'
3+
[cellTemplate]='cellTemplate' (dataBound)='trend()'
4+
allowConditionalFormatting="true" showToolbar='true' [toolbar]='toolbarOptions' >
5+
</ejs-pivotview>

‎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 'myapp' title`, () => {
18+
const fixture = TestBed.createComponent(AppComponent);
19+
const app = fixture.componentInstance;
20+
expect(app.title).toEqual('myapp');
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, myapp');
28+
});
29+
});

‎src/app/app.component.ts‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
2+
import { Component, ViewChild } from '@angular/core';
3+
import { RouterOutlet } from '@angular/router';
4+
import { PivotViewModule } from '@syncfusion/ej2-angular-pivotview';
5+
import { PivotFieldListModule,ConditionalFormattingService,ToolbarService } from '@syncfusion/ej2-angular-pivotview';
6+
import { IDataOptions, PivotView, IAxisSet, IDataSet,ToolbarItems } from '@syncfusion/ej2-angular-pivotview';
7+
import { renewableEnergy } from './data';
8+
9+
@Component({
10+
standalone: true,
11+
imports: [RouterOutlet, PivotViewModule, PivotFieldListModule],
12+
providers: [ConditionalFormattingService,ToolbarService],
13+
selector: 'app-root',
14+
styleUrls: ['app.component.css'],
15+
templateUrl: 'app.component.html',
16+
})
17+
export class AppComponent {
18+
public dataSourceSettings?: IDataOptions ;
19+
public cellTemplate?: string ;
20+
public toolbarOptions?: ToolbarItems[];
21+
@ViewChild('pivotview')
22+
public pivotObj?: PivotView;
23+
24+
trend(): void {
25+
let cTable: HTMLElement[] = [].slice.call(document.getElementsByClassName("e-table"));
26+
Array.from(cTable[1].children[1].children).forEach((row: Element) => {
27+
Array.from(row.childNodes).forEach((node: Node, j: number) => {
28+
let ri: any = (node as HTMLElement).getAttribute("index");
29+
let currentValue: number = ((this.pivotObj?.pivotValues[ri][j] as IAxisSet) as any).value;
30+
if ((node as HTMLElement).querySelector('.tempwrap')) {
31+
let trendElement: HTMLElement | any = (node as HTMLElement).querySelector('.tempwrap');
32+
trendElement.className = 'tempwrap pv-icons';
33+
trendElement.className += (currentValue > 175) ? ' sb-icon-profit' :
34+
(currentValue > 100) ? ' sb-icon-neutral' :
35+
(currentValue > 0) ? ' sb-icon-loss' : '';
36+
}
37+
})
38+
});
39+
}
40+
41+
42+
ngOnInit(): void {
43+
this.toolbarOptions = ['ConditionalFormatting'] as ToolbarItems[];
44+
this.cellTemplate = '<span class="tempwrap sb-icon-neutral pv-icons"></span>';
45+
46+
this.dataSourceSettings = {
47+
dataSource: renewableEnergy as IDataSet[],
48+
expandAll: true,
49+
formatSettings: [{ name: 'ProCost', format: 'C0' }],
50+
rows: [
51+
{ name: 'Year', caption: 'Production Year' },
52+
{ name: 'HalfYear', caption: 'Half Year' }
53+
],
54+
columns: [
55+
{ name: 'EnerType', caption: 'Energy Type' },
56+
{ name: 'EneSource', caption: 'Energy Source' }
57+
],
58+
values: [
59+
{ name: 'PowUnits', caption: 'Power Units'},
60+
{ name: 'ProCost', caption: 'Revenue Growth' }
61+
],
62+
63+
conditionalFormatSettings: [
64+
{
65+
//measure: 'ProCost',
66+
value1: 100,
67+
conditions: 'LessThan',
68+
style: {
69+
backgroundColor: 'yellow',
70+
color: 'red',
71+
fontFamily: 'Tahoma',
72+
fontSize: '12px'
73+
}
74+
},
75+
76+
]
77+
78+
};
79+
}
80+
}

‎src/app/app.component.zip‎

1.27 KB
Binary file not shown.

‎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 } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
4+
import { routes } from './app.routes';
5+
6+
export const appConfig: ApplicationConfig = {
7+
providers: [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 = [];

0 commit comments

Comments
 (0)