angular

Author: flagmanAndrew

Angular/src/app/app-routing.module.ts

@@ -1,3 +1,25 @@
-<div class="default-style">
-  <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
+<div class="long-title"><h3>Conditional Summary Calculation</h3></div>
+<dx-pivot-grid
+  #sales
+  [allowSortingBySummary]="true"
+  [allowSorting]="true"
+  [allowFiltering]="true"
+  [allowExpandAll]="true"
+  [height]="440"
+  [showBorders]="true"
+  [dataSource]="dataSource"
+>
+  <dxo-field-chooser [enabled]="false"></dxo-field-chooser>
+</dx-pivot-grid>
+
+<div class="options">
+  <div class="caption">Options</div>
+  <div class="option">
+    <dx-check-box
+      [(value)]="isConditional"
+      text="Toggle Conditional Summary Calculation"
+      (onValueChanged)="toggleConditionalChanged()"
+    >
+    </dx-check-box>
+  </div>
 </div>

Angular/src/app/app.component.html

@@ -2,3 +2,42 @@
   margin: 50px;
   width: 90vw;
 }
+
+#sales {
+    margin-top: 80px;
+}
+
+.long-title h3 {
+    font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
+    font-weight: 200;
+    font-size: 28px;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.options {
+    margin-top: 20px;
+    padding: 20px;
+    background: #f5f5f5;
+}
+
+.options .caption {
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.option {
+    margin-top: 10px;
+}
+
+.option > span {
+    width: 120px;
+    display: inline-block;
+}
+
+.option > .dx-widget {
+    display: inline-block;
+    vertical-align: middle;
+    width: 100%;
+    max-width: 350px;
+}

Angular/src/app/app.component.scss

@@ -1,20 +1,100 @@
-import { Component } from '@angular/core';
-import { ClickEvent } from 'devextreme/ui/button';
+import { Component, ViewChild } from '@angular/core';
+import { DxCheckBoxModule, DxPivotGridComponent, DxPivotGridModule } from 'devextreme-angular';
+import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import { Sale, Service } from './app.service';
+
+interface CustomSummaryValue {
+  summaryProcess?: string;
+  value?: any;
+  totalValue?: any;
+}
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [DxPivotGridModule, DxCheckBoxModule],
+  providers: [Service],
 })
 export class AppComponent {
-  title = 'Angular';
+  @ViewChild('sales') pivotGrid!: DxPivotGridComponent;
+
+  sales: Sale[];
+
+  dataSource: PivotGridDataSource;
+
+  isConditional = true;
 
-  counter = 0;
+  constructor(service: Service) {
+    let tempSales: any = service.getSales();
+
+    tempSales.forEach((sale: Sale, index: number) => {
+      sale.isApproved = index % 2 !== 0;
+    });
+
+    this.sales = tempSales;
+
+    this.dataSource = new PivotGridDataSource({
+      fields: [{
+        caption: 'Region',
+        width: 120,
+        dataField: 'region',
+        area: 'row',
+        expanded: true,
+      }, {
+        caption: 'City',
+        dataField: 'city',
+        width: 150,
+        area: 'row',
+        selector: (data: Sale): string => `${data.city} (${data.country})`,
+      }, {
+        dataField: 'date',
+        dataType: 'date',
+        area: 'column',
+        expanded: true,
+      }, {
+        caption: 'Sales',
+        dataType: 'number',
+        summaryType: 'custom',
+        format: 'currency',
+        area: 'data',
+        calculateCustomSummary: this.calculateCustomSummary,
+      },
+      {
+        caption: 'Approved',
+        dataField: 'isApproved',
+        summaryType: 'sum',
+        area: 'data',
+      }],
+      store: this.sales,
+    });
+  }
 
-  buttonText = 'Click count: 0';
+  calculateCustomSummary = (options: CustomSummaryValue): void => {
+    switch (options.summaryProcess) {
+      case 'start':
+        options.totalValue = { conditionalVal: 0, rawVal: 0, count: 0 };
+        break;
+      case 'calculate':
+        options.totalValue.count += 1;
+        options.totalValue.rawVal += options.value.amount;
+        if (options.value.isApproved) {
+          options.totalValue.conditionalVal += options.value.amount;
+        }
+        break;
+      case 'finalize':
+        if (options.totalValue.count === 1 || !this.isConditional) {
+          options.totalValue = options.totalValue.rawVal;
+        } else {
+          options.totalValue = options.totalValue.conditionalVal;
+        }
+        break;
+      default: break;
+    }
+  };
 
-  onClick(e: ClickEvent): void {
-    this.counter++;
-    this.buttonText = `Click count: ${this.counter}`;
+  toggleConditionalChanged(): void {
+    this.pivotGrid.instance.getDataSource().reload().catch(() => {});
   }
 }