Display sum total of a column data to dashboard layout

[Charles]

Hi,

My main aim is to display the total sum of a column from the database table (e.g. freight column) to the dashboard layout panel. And also total customers. Kindly assist.

https://stackblitz.com/edit/angular-d7kvhn-6ujxmg?file=src%2Fdashboard%2Fdashboard.component.ts,src%2Fdashboard%2Fdashboard.component.html

This is my dashboard laout panel

I want it to look something like this below:

Regards

Charles

[LeoLavanya Dhanaraj]

Hi Charles,

Greetings from Syncfusion support.

From your shared details, we understand that you want to show the total sum of column and customer value to the Dashboard Layout component. Based on your requirement, we have modified the shared sample. Check out the below mentioned code snippets and sample for further assistance.

Sample : https://stackblitz.com/edit/angular-d7kvhn-xewuak?file=src%2Findex.html

[dashboard.component.html]

<ejs-dashboardlayout id="editLayout"  ...  (created)="dashboardCreated($event)">

    <e-panels>

        <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="0">

            <ng-template #content>

            <div class="card"> ...

                <div class="card-content number">${{ count }}</div>

            </div>

            </ng-template>

        </e-panel>

        <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="2">

            <ng-template #content>

            <div class="card">...

                <div class="card-content number">{{ noOfCustomer }}</div>

            </div>

            </ng-template>

        </e-panel>

    </e-panels>

</ejs-dashboardlayout>

 

[dashboard.component.ts]

public count;

public noOfCustomer;

dashboardCreated(args) {

  this.count = (window as any).aggregateValue;

  this.noOfCustomer = (window as any).NoOfCustomers;

}

 

[customer.component.html]

<ejs-grid #grid (dataBound)="onLoad($event)" ... ></ejs-grid>

 

[customer.component.ts]

import { AggregateService, GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({

  ...

  providers: [AggregateService],

})

@ViewChild('grid')

public grid: GridComponent;

 

public onLoad(e) {

  var aggregate = (this.grid.aggregateModule as any).footerRenderer.aggregates

    .aggregates['Freight - sum'];

  (window as any).aggregateValue = aggregate;

  (window as any).NoOfCustomers = this.data.length;

}

Note : Due to sample-level customization, it has some limitations. The number of customers and the sum of freight columns display after you navigate to the Customer page (Dashboard-Customer-Dashboard). Because the Grid component is not rendered when you are in the Dashboard page.

Regards,

Leo Lavanya Dhanaraj

[Charles]

Hi Leo,

Thank you for your assistance. With regard to you statement below:

Note : Due to sample-level customization, it has some limitations. The number of customers and the sum of freight columns display after you navigate to the Customer page (Dashboard-Customer-Dashboard). Because the Grid component is not rendered when you are in the Dashboard page.

Can you show me another way to accomplish perhaps using angular service or any other option? I want the dashboard component panel to display the total value of freight column (or any column) from the database perhaps, using angular service as soon as it loads without navigating to the customer page?

Regards

Charles

[LeoLavanya Dhanaraj]

Hi Charles,

Thanks for your patience.

Based on your request, we have modified the shared Angular Dashboard Layout sample. Here, we have directly used the Grid data inside the Dashboard component page and manually calculated the sum of the freight columns & number of customers. Based on the calculated values, we applied them to the Dashboard panel using the Dashboard created event.

Check out the below mentioned code snippets and sample for your reference.

Sample : https://stackblitz.com/edit/angular-d7kvhn-pem8zg?file=src%2Fdashboard%2Fdashboard.component.html,src%2Fdashboard%2Fdashboard.component.ts

[dashboard.component.html]

<ejs-dashboardlayoutid="editLayout"...(created)="dashboardCreated($event)">

    <e-panels>

        <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="0">

            <ng-template #content>

            <div class="card"> ...

                <div class="card-content number">${{ count }}</div>

            </div>

            </ng-template>

        </e-panel>

        <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="2">

            <ng-template #content>

            <div class="card">...

                <div class="card-content number">{{ noOfCustomer }}</div>

            </div>

            </ng-template>

        </e-panel>

    </e-panels>

</ejs-dashboardlayout>

 

[dashboard.component.ts]

import { data } from '../data';

import { AggregateService, GridComponent } from '@syncfusion/ej2-angular-grids';

export class DashboardComponent implements OnInit {

  …

  public data: Object[];

  public count;

  public noOfCustomer;

  public ngOnInit(): void {

    this.data = data;

  }

  dashboardCreated(args) {

    var sum = 0;

    for (var i = 0; i < this.data.length; i++) {

      sum += (this.data[i] as any).Freight;

    }

    this.count = sum;

    this.noOfCustomer = this.data.length;

  }

}

[Charles]

Hi LeoLavanya,

Thank you for the updated solution. The count method was successful with local data binding. I tried it with remote server data binding but it didn't work. See my code below. Kindly assist.

[dashboard.component.html]
​
<ejs-dashboardlayoutid="editLayout"...(created)="dashboardCreated($event)">
    <e-panels>
        <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="0">
            <ng-template #content>
            <div class="card"> ...
                <div class="card-content number">${{ count }}</div>
            </div>
            </ng-template>
        </e-panel>
        <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="2">
            <ng-template #content>
            <div class="card">...
                <div class="card-content number">{{ noOfCustomer }}</div>
            </div>
            </ng-template>
        </e-panel>
    </e-panels>
</ejs-dashboardlayout>


[dashboard.component.ts]
​
import { data } from '../data';
import { AggregateService, GridComponent } from '@syncfusion/ej2-angular-grids';

export class DashboardComponent implements OnInit {
  public dataManager: DataManager = new DataManager({
      url: 'Customers/UrlDatasource',
      adaptor: new UrlAdaptor()
  });

  public data: Object[];
  public count;
  public noOfCustomer;

  public ngOnInit(): void {
    this.data = this.dataManager;
  }

  dashboardCreated(args) {
    var sum = 0;
    for (var i = 0; i < this.data.length; i++) {
      sum += (this.data[i] as any).Freight;
    }
    this.count = sum;
    this.noOfCustomer = this.data.length;
  }
}

Regards

Charles

[LeoLavanya Dhanaraj]

Charles, Based on your requirement, we have modified the Angular Dashboard Layout sample with the remote datasource. For your reference, we have included a sample. Refer to the below code snippet and sample.

Sample : https://stackblitz.com/edit/angular-d7kvhn-f2gzgl?file=src%2Fdashboard%2Fdashboard.component.ts

[dashboard.component.ts]

dashboardCreated(args) {

    new DataManager({

        url: 'https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders',

        adaptor: new ODataAdaptor(),

    })

    .executeQuery(new Query())

    .then((e: any) => {

        this.data = e['result'];

        var sum = 0;

        for (var i = 0; i < this.data.length; i++) {

            sum += parseInt((this.data[i] as any).Freight.toString(), 10);

        }

        this.count = sum;

        this.noOfCustomer = this.data.length;

    });

}