Skip to content

Commit b1dcd11

Browse files
ChronosSFChronosSF
authored
Merge pull request #16049 from IgniteUI/rkaraivanov/performance-measure-service
wip: Grid(s) performance improvements
2 parents e166d6b + c382c87 commit b1dcd11

File tree

440 files changed

+4121
-179
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

440 files changed

+4121
-179
lines changed

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,14 @@ All notable changes for each version of this project will be documented in this
8888
- The `hideDelay` input property now defaults to `300`.
8989
- The `showTooltip` and `hideTooltip` methods do not take `showDelay`/`hideDelay` into account.
9090

91+
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`, `IgxPivotGrid`
92+
- **Sorting improvements**
93+
- Improved sorting algorithm efficiency using Schwartzian transformation. This is a technique, also known as decorate-sort-undecorate, which avoids recomputing the sort keys by temporarily associating them with the original data records.
94+
- Refactored sorting algorithms from recursive to iterative.
95+
- **Groupby improvements**
96+
- Refactored grouping algorithm from recursive to iterative.
97+
- Optimized grouping operations.
98+
9199
## 20.0.6
92100
### General
93101
- `IgxSimpleCombo`

‎angular.json‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -478,6 +478,97 @@
478478
}
479479
}
480480
}
481+
},
482+
"igniteui-angular-performance": {
483+
"projectType": "application",
484+
"schematics": {
485+
"@schematics/angular:component": {
486+
"style": "scss"
487+
}
488+
},
489+
"root": "projects/igniteui-angular-performance",
490+
"sourceRoot": "projects/igniteui-angular-performance/src",
491+
"prefix": "app",
492+
"architect": {
493+
"build": {
494+
"builder": "@angular/build:application",
495+
"options": {
496+
"browser": "projects/igniteui-angular-performance/src/main.ts",
497+
"polyfills": [
498+
"zone.js"
499+
],
500+
"tsConfig": "projects/igniteui-angular-performance/tsconfig.app.json",
501+
"inlineStyleLanguage": "scss",
502+
"assets": [
503+
"projects/igniteui-angular-performance/src/assets"
504+
],
505+
"styles": [
506+
"projects/igniteui-angular-performance/src/styles.scss"
507+
],
508+
"stylePreprocessorOptions": {
509+
"includePaths": ["node_modules"]
510+
}
511+
},
512+
"configurations": {
513+
"production": {
514+
"budgets": [
515+
{
516+
"type": "initial",
517+
"maximumWarning": "500kB",
518+
"maximumError": "1MB"
519+
},
520+
{
521+
"type": "anyComponentStyle",
522+
"maximumWarning": "4kB",
523+
"maximumError": "8kB"
524+
}
525+
],
526+
"outputHashing": "all"
527+
},
528+
"development": {
529+
"optimization": false,
530+
"extractLicenses": false,
531+
"sourceMap": true
532+
}
533+
},
534+
"defaultConfiguration": "production"
535+
},
536+
"serve": {
537+
"builder": "@angular/build:dev-server",
538+
"configurations": {
539+
"production": {
540+
"buildTarget": "igniteui-angular-performance:build:production"
541+
},
542+
"development": {
543+
"buildTarget": "igniteui-angular-performance:build:development"
544+
}
545+
},
546+
"defaultConfiguration": "development"
547+
},
548+
"extract-i18n": {
549+
"builder": "@angular/build:extract-i18n"
550+
},
551+
"test": {
552+
"builder": "@angular/build:karma",
553+
"options": {
554+
"polyfills": [
555+
"zone.js",
556+
"zone.js/testing"
557+
],
558+
"tsConfig": "projects/igniteui-angular-performance/tsconfig.spec.json",
559+
"inlineStyleLanguage": "scss",
560+
"assets": [
561+
{
562+
"glob": "**/*",
563+
"input": "projects/igniteui-angular-performance/public"
564+
}
565+
],
566+
"styles": [
567+
"projects/igniteui-angular-performance/src/styles.scss"
568+
]
569+
}
570+
}
571+
}
481572
}
482573
},
483574
"cli": {

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"ng": "ng",
66
"start": "ng serve --open --hmr",
77
"start:elements": "ng serve --project igniteui-angular-elements",
8+
"start:performance": "ng serve --project igniteui-angular-performance",
89
"build": "ng build --configuration production",
910
"test": "ng test igniteui-angular",
1011
"lint": "ng lint",

‎projects/igniteui-angular-performance/public/favicon.ico‎

14.7 KB
Binary file not shown.

‎projects/igniteui-angular-performance/src/app/app.component.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<main class="wrapper">
2+
<div class="routes">
3+
@for (route of routes; track $index) {
4+
<button igxButton="contained" routerLink="/{{ route.path }}">
5+
{{ route.title }}
6+
</button>
7+
}
8+
</div>
9+
<router-outlet />
10+
</main>

‎projects/igniteui-angular-performance/src/app/app.component.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
:host {
2+
width: 100%;
3+
height: 100%;
4+
display: flex;
5+
}
6+
7+
.wrapper {
8+
width: 100%;
9+
height: 100%;
10+
display: flex;
11+
flex-direction: column;
12+
}
13+
14+
.routes {
15+
padding: 1rem;
16+
display: flex;
17+
gap: 1rem;
18+
}

‎projects/igniteui-angular-performance/src/app/app.component.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { AppComponent } from './app.component';
4+
5+
describe('AppComponent', () => {
6+
let component: AppComponent;
7+
let fixture: ComponentFixture<AppComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
imports: [AppComponent]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(AppComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

‎projects/igniteui-angular-performance/src/app/app.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Component } from '@angular/core';
2+
import { RouterLink, RouterOutlet, Routes } from '@angular/router';
3+
import { IgxButtonDirective } from 'igniteui-angular';
4+
import { routes } from './app.routes';
5+
6+
@Component({
7+
selector: 'app-root',
8+
imports: [RouterOutlet, IgxButtonDirective, RouterLink],
9+
templateUrl: './app.component.html',
10+
styleUrl: './app.component.scss'
11+
})
12+
export class AppComponent {
13+
protected routes: Routes = routes;
14+
}

‎projects/igniteui-angular-performance/src/app/app.config.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
import { provideAnimations } from '@angular/platform-browser/animations';
4+
5+
import { routes } from './app.routes';
6+
7+
export const appConfig: ApplicationConfig = {
8+
providers: [
9+
provideBrowserGlobalErrorListeners(),
10+
provideZoneChangeDetection({ eventCoalescing: true }),
11+
provideRouter(routes),
12+
provideAnimations()
13+
]
14+
};

‎projects/igniteui-angular-performance/src/app/app.routes.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Routes } from '@angular/router';
2+
import { GridComponent } from './grid/grid.component';
3+
import { TreeGridComponent } from './tree-grid/tree-grid.component';
4+
import { PivotGridComponent } from './pivot-grid/pivot-grid.component';
5+
6+
export const routes: Routes = [
7+
{
8+
path: "pivot-grid",
9+
title: "Pivot Grid",
10+
component: PivotGridComponent
11+
},
12+
{
13+
path: "tree-grid-1m",
14+
title: "Tree Grid 1M records",
15+
component: TreeGridComponent,
16+
data: { rows: 1_000_000 }
17+
},
18+
{
19+
path: "tree-grid-100k",
20+
title: "Tree Grid 100k records",
21+
component: TreeGridComponent,
22+
data: { rows: 100_000 }
23+
},
24+
{
25+
path: "tree-grid",
26+
title: "Tree Grid 1k records",
27+
component: TreeGridComponent,
28+
data: { rows: 1000 }
29+
},
30+
{
31+
path: "grid-1m",
32+
title: "Grid 1M records",
33+
component: GridComponent,
34+
data: { rows: 1_000_000 }
35+
},
36+
{
37+
path: "grid-100k",
38+
title: "Grid 100k records",
39+
component: GridComponent,
40+
data: { rows: 100_000 }
41+
},
42+
{
43+
path: "",
44+
title: "Grid 1k records",
45+
pathMatch: 'full',
46+
component: GridComponent,
47+
data: { rows: 1000 }
48+
}
49+
50+
];

0 commit comments

Comments
 (0)