Search results

Header and Content in Angular Dashboard Layout component

The dashboard layout component is mostly used to represent the data used for monitoring or managing a process. These data or any HTML template can be placed as the content of a panel using the content property. Also, word or phrase that summarize the panel’s content can be added as the header on the top of each panel using the header property of the panel.

The following sample demonstrates how to add content for each panel using the header and content properties of the panels.

Source
Preview
app.component.ts
app.template.html
app.module.ts
main.ts
default-style.css
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-root',
    styleUrls: ['app/default-style.css'],
    templateUrl: 'app/app.template.html',
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public cellSpacing: number[] = [10, 10];
    public columns: number = 6;
    public panels: any = [{'id':'Panel0', 'sizeX': 1, 'sizeY': 1,'row': 0, 'col': 0, header:'<div>Panel 0</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel1', 'sizeX': 3, 'sizeY': 2,'row': 0, 'col': 1, header:'<div>Panel 1</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel2', 'sizeX': 1, 'sizeY': 3,'row': 0, 'col': 4, header:'<div>Panel 2</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel3', 'sizeX': 1, 'sizeY': 1,'row': 1, 'col': 0, header:'<div>Panel 3</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel4', 'sizeX': 2, 'sizeY': 1,'row': 2, 'col': 0, header:'<div>Panel 4</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel5', 'sizeX': 1, 'sizeY': 1,'row': 2, 'col': 2, header:'<div>Panel 5</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel6','sizeX': 1, 'sizeY': 1,'row': 2, 'col': 3, header:'<div>Panel 6</div>', content:'<div class="content">Panel Content<div>'}
    ]
}
<div class="control-section">
    <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]='columns' [cellSpacing]='cellSpacing' [panels]='panels'>
    </ejs-dashboardlayout>
</div>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the DashboardLayoutModule for the Dashboard Layout component
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    //declaration of ej2-angular-layouts module into NgModule
    imports: [BrowserModule, DashboardLayoutModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
.control-section {
    margin: 0 auto;
    width: 500px;
}

#defaultLayout {
    padding: 10px;
}

  #defaultLayout .e-panel .e-panel-container .content {
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
    line-height: 100%;
  }
  
  .e-dashboard-layout.e-control .e-panel .e-panel-container .e-panel-header {
    color: rgba(0, 0, 0, 0.61);
  }
  
  .e-panel .e-header-text {
    padding: 12px 0 12px 0;
  }
  
  .e-dashboard-layout.e-control .e-panel:hover {
    border: 0px;
  }
  
  .e-dashboard-layout.e-control .e-panel .e-panel-header {
    font-size: 15px;
    font-weight: 500;
    height: 37px;
    padding: 10px;
    vertical-align: middle;
    /* text-align: left; */
    border-bottom: 0.5px solid rgba(0, 0, 0, .125);
  }
  
  .e-panel-header {
    padding: 10px;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .03);
  }

Placing components as content of panels

In a dashboard, components like the chart, grids, maps, gauge and more . can be used to present a complex data. Such components can be placed as the panel content by assigning the corresponding component element as the content of the panel.

The following sample demonstrates how to add ej2-chart components as the content for each panel in the dashboard layout component.

Source
Preview
app.component.ts
app.template.html
app.module.ts
main.ts
default-style.css
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-root',
    styleUrls: ['app/default-style.css'],
    templateUrl: 'app/app.template.html',
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public cellSpacing: number[] = [10, 10];
    public chartData: Object[] = [
      { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
      { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
      { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
      { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
      { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
      { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
    ];
    public primaryXAxis: Object = {
        valueType: 'Category'
    }
    public lineData: any[] = [
     { x: 2013, y: 28 }, { x: 2014, y: 25 },{ x: 2015, y: 26 }, { x: 2016, y: 27 },
    { x: 2017, y: 32 }, { x: 2018, y: 35 }
    ];
    public piechart: any[] = [{ x: 'TypeScript', y: 13, text: 'TS 13%' }, { x: 'React', y: 12.5, text: 'Reat 12.5%' },{ x: 'MVC', y: 12, text: 'MVC 12%' },{ x: 'Core', y: 12.5, text: 'Core 12.5%' },{ x: 'Vue', y: 10, text: 'Vue 10%' },{ x: 'Angular', y: 40, text: 'Angular 40%' }];
    public piechart1: any[] = [
     { 'x': 'Chrome', y: 37, text: '37%' },
     { 'x': 'UC Browser', y: 17, text: '17%' },
     { 'x': 'iPhone', y: 19, text: '19%' },
     { 'x': 'Others', y: 4, text: '4%' },
     { 'x': 'Opera', y: 11, text: '11%' },
     { 'x': 'Android', y: 12, text: '12%' }
     ];
     public legendSettings: Object = {
        visible: false
    };
}
<div class="control-section">
    <ejs-dashboardlayout [columns]="6" #editLayout [cellSpacing]='cellSpacing'>
        <e-panels>
            <e-panel [sizeX]="3" [sizeY]="2" [row]="0" [col]="0">
                <ng-template #header>
                    <div>Product usage ratio</div>
                </ng-template>
                <ng-template #content>
                    <div id="column">
                        <ejs-chart id="columnChart" height="162px" [primaryXAxis]='primaryXAxis'>
                            <e-series-collection>
                                <e-series [dataSource]="chartData" type='Column' xName='month' yName='sales'>
                                </e-series>
                            </e-series-collection>
                        </ejs-chart>
                    </div>
                </ng-template>
            </e-panel>
            <e-panel [sizeX]="3" [sizeY]="2" [row]="0" [col]="3">
                <ng-template #header>
                    <div>Last year Sales Comparison</div>
                </ng-template>
                <ng-template #content>
                    <div id="line">
                        <ejs-chart id="lineChart" height="162px" [primaryXAxis]='primaryXAxis'>
                            <e-series-collection>
                                <e-series [dataSource]="lineData" xName='x' yName='y' type="Line">
                                </e-series>
                            </e-series-collection>
                        </ejs-chart>
                    </div>
                </ng-template>
            </e-panel>
            <e-panel [sizeX]="3" [sizeY]="2" [row]="0" [col]="3">
                <ng-template #header>
                    <div>Sales increase percentage 1</div>
                </ng-template>
                <ng-template #content>
                    <div id="pie">
                        <ejs-accumulationchart id="pieChart" height="162px" [legendSettings]="legendSettings" [tooltip]='tooltip'>
                            <e-accumulation-series-collection>
                                <e-accumulation-series [dataSource]="piechart" xName="x" yName="y" innerRadius="20%"
                                    name="Browser" [dataLabel]='datalabel'>
                                </e-accumulation-series>
                            </e-accumulation-series-collection>
                        </ejs-accumulationchart>
                    </div>
                </ng-template>
            </e-panel>
            <e-panel [sizeX]="3" [sizeY]="2" [row]="1" [col]="0">
                <ng-template #header>
                    <div>Sales increase percentage 2</div>
                </ng-template>
                <ng-template #content>
                    <div id="pie1">
                        <ejs-accumulationchart id="pieChart1" [enableAnimation]="false" height="162px"
                            [tooltip]='tooltip' [legendSettings]='legendSettings'>
                            <e-accumulation-series-collection>
                                <e-accumulation-series [dataSource]="piechart1" xName="x" yName="y" radius="70%"
                                    name="Browser" [dataLabel]='datalabel'>
                                </e-accumulation-series>
                            </e-accumulation-series-collection>
                        </ejs-accumulationchart>
                    </div>
                </ng-template>
            </e-panel>
        </e-panels>
    </ejs-dashboardlayout>
</div>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the DashboardLayoutModule for the Dashboard Layout component
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
import { ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    //declaration of ej2-angular-layouts module into NgModule
    imports: [BrowserModule, DashboardLayoutModule, ChartAllModule, AccumulationChartAllModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
.control-section {
    margin: 0 auto;
    width: 600px;
  }

.e-dashboard-layout.e-control .e-panel .e-panel-container .e-panel-header {
    color: rgba(0, 0, 0, 0.61);
}

.e-panel .e-header-text {
    padding: 12px 0 12px 0;
}

.e-dashboard-layout.e-control .e-panel:hover {
    border: 0px;
}

.e-dashboard-layout.e-control .e-panel .e-panel-header {
    font-size: 15px;
    font-weight: 500;
    height: 37px;
    padding: 10px;
    vertical-align: middle;
    border-bottom: 0.5px solid rgba(0, 0, 0, .125);
}

.e-panel-header {
    padding: 10px;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .03);
}

.e-dashboard-layout.e-control .e-panel .e-panel-header {
    height: 30px
}

    .e-dashboard-layout.e-control .e-panel .e-panel-header div {
        text-align: center;
    }

.header {
    padding: 5px;
    display: inline-block;
}

.e-panel-content {
    height: 162px;
}