Search results

Header and Content in React 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.tsx
index.tsx
index.html
App.css
App.jsx
index.jsx
import {  DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';

export default class App extends React.Component<{}, {}> {
  private cellSpacing: number[] = [10, 10];
  private panels: object[] =    [
    {'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>'}
  ];

  public render() {
    return (
      <div>
     <div className="control-section">
        <DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing}  panels={this.panels} columns={5} />
      </div>
    </div>
    );
  }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Dashboard Layout Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="App.css">
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";

.control-section {
    margin: 0 auto;
    width: 500px;
  }

  #loader {
    color: #008cff;
    font-family: 'Helvetica Neue','calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }
  
  #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;
    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);
  }
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.cellSpacing = [10, 10];
        this.panels = [
            { '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>' }
        ];
    }
    render() {
        return (<div>
     <div className="control-section">
        <DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing} panels={this.panels} columns={5}/>
      </div>
    </div>);
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

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.tsx
index.tsx
index.html
App.css
App.jsx
index.jsx
import {
    AccumulationChartComponent, AccumulationSeriesCollectionDirective,
    AccumulationSeriesDirective, AccumulationTooltip, Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LineSeries,
    SeriesCollectionDirective, SeriesDirective, Tooltip
  } from "@syncfusion/ej2-react-charts";
import {  DashboardLayoutComponent, PanelDirective , PanelsDirective } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';

export default class App extends React.Component<{},{}> {
    private cellSpacing: number[] = [10, 10];

    // Template for line Chart 
    public lineTemplate(): JSX.Element {
        const lineData: object[] = [
            { x: 2013, y: 28 }, { x: 2014, y: 25 },{ x: 2015, y: 26 }, { x: 2016, y: 27 },
            { x: 2017, y: 32 }, { x: 2018, y: 35 },
        ];

        return(
            <div className="template" >
                <ChartComponent style={{ "height":"162px" }}><Inject services={[LineSeries]} />
                    <SeriesCollectionDirective>
                        <SeriesDirective dataSource={lineData} xName='x' yName='y' type='Line'/>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>
        );
    }

    // Template for Pie Chart
    public pieTemplate(): JSX.Element {
        const pieData: object[] = [
            { x: 'TypeScript', y: 13, text: 'TS 13%' }, 
            { x: 'React', y: 12.5, text: 'React 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%' }
        ];
        return(
        <div className="template" >
            <AccumulationChartComponent style={{"height":"162px"}} tooltip={{enable: true}}><Inject services={[ AccumulationTooltip]} />
                <AccumulationSeriesCollectionDirective>
                    <AccumulationSeriesDirective dataSource={pieData} xName='x' yName='y' innerRadius="40%" />
                </AccumulationSeriesCollectionDirective>
            </AccumulationChartComponent>
        </div>
        );
    }

    // Template for Pie Chart 1
    public pieTemplate1(): JSX.Element {
        const pieData: object[] = [
            { '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%' }
        ];
        const dataLabel: object = { visible: true, position: 'Inside', name: 'text', font: { fontWeight: '600' }};
        return(
        <div className="template" >
            <AccumulationChartComponent style={{"height":"162px"}} tooltip={{enable: true}}>
                <Inject services={[ AccumulationTooltip]} />
                <AccumulationSeriesCollectionDirective>
                    <AccumulationSeriesDirective dataSource={pieData} dataLabel={dataLabel} xName='x' yName='y' radius="70%" name = 'Browser'/>
                </AccumulationSeriesCollectionDirective>
            </AccumulationChartComponent>
        </div>
        );
    }

    public columnTemplate(): JSX.Element {
        const chartData: any[] = [
          { 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 }
        ];
        return(
            <div className="template" >
                <ChartComponent style={{"height":"162px"}} primaryXAxis={{ valueType: 'Category'  }}>
                    <Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                        <SeriesDirective dataSource={chartData} xName='month' yName='sales' type='Column' />
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>
        );
    }
    public render() {
        return (
        <div>
            <div className="container">
                <div>
                    <DashboardLayoutComponent id="dashboard_default" columns={6} cellSpacing={this.cellSpacing} allowResizing={true}>
                        <PanelsDirective>
                            <PanelDirective sizeX={3} sizeY={2} row={0} col={0} content={this.pieTemplate as any} header="<div>Product usage ratio</div>" />
                            <PanelDirective sizeX={3} sizeY={2} row={0} col={3} content={this.columnTemplate as any} header="<div>Last year Sales Comparison</div>" />
                            <PanelDirective sizeX={3} sizeY={2} row={0} col={3} content={this.pieTemplate1 as any} header="<div>Mobile browsers usage</div>"/>
                            <PanelDirective sizeX={3} sizeY={2} row={1} col={0} content={this.lineTemplate as any} header="<div>Sales increase percentage</div>"/>
                        </PanelsDirective>
                    </DashboardLayoutComponent>
                </div>
            </div>
        </div>
        );
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Dashboard Layout Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="App.css">
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>  
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";

.container {
  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;
}

.e-panel-content{
  height: 162px;
}
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationTooltip, Category, ChartComponent, ColumnSeries, DataLabel, Inject, Legend, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from "@syncfusion/ej2-react-charts";
import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.cellSpacing = [10, 10];
    }
    // Template for line Chart 
    lineTemplate() {
        const lineData = [
            { x: 2013, y: 28 }, { x: 2014, y: 25 }, { x: 2015, y: 26 }, { x: 2016, y: 27 },
            { x: 2017, y: 32 }, { x: 2018, y: 35 },
        ];
        return (<div className="template">
                <ChartComponent style={{ "height": "162px" }}><Inject services={[LineSeries]}/>
                    <SeriesCollectionDirective>
                        <SeriesDirective dataSource={lineData} xName='x' yName='y' type='Line'/>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>);
    }
    // Template for Pie Chart
    pieTemplate() {
        const pieData = [
            { x: 'TypeScript', y: 13, text: 'TS 13%' },
            { x: 'React', y: 12.5, text: 'React 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%' }
        ];
        return (<div className="template">
            <AccumulationChartComponent style={{ "height": "162px" }} tooltip={{ enable: true }}><Inject services={[AccumulationTooltip]}/>
                <AccumulationSeriesCollectionDirective>
                    <AccumulationSeriesDirective dataSource={pieData} xName='x' yName='y' innerRadius="40%"/>
                </AccumulationSeriesCollectionDirective>
            </AccumulationChartComponent>
        </div>);
    }
    // Template for Pie Chart 1
    pieTemplate1() {
        const pieData = [
            { '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%' }
        ];
        const dataLabel = { visible: true, position: 'Inside', name: 'text', font: { fontWeight: '600' } };
        return (<div className="template">
            <AccumulationChartComponent style={{ "height": "162px" }} tooltip={{ enable: true }}>
                <Inject services={[AccumulationTooltip]}/>
                <AccumulationSeriesCollectionDirective>
                    <AccumulationSeriesDirective dataSource={pieData} dataLabel={dataLabel} xName='x' yName='y' radius="70%" name='Browser'/>
                </AccumulationSeriesCollectionDirective>
            </AccumulationChartComponent>
        </div>);
    }
    columnTemplate() {
        const chartData = [
            { 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 }
        ];
        return (<div className="template">
                <ChartComponent style={{ "height": "162px" }} primaryXAxis={{ valueType: 'Category' }}>
                    <Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                        <SeriesDirective dataSource={chartData} xName='month' yName='sales' type='Column'/>
                    </SeriesCollectionDirective>
                </ChartComponent>
            </div>);
    }
    render() {
        return (<div>
            <div className="container">
                <div>
                    <DashboardLayoutComponent id="dashboard_default" columns={6} cellSpacing={this.cellSpacing} allowResizing={true}>
                        <PanelsDirective>
                            <PanelDirective sizeX={3} sizeY={2} row={0} col={0} content={this.pieTemplate} header="<div>Product usage ratio</div>"/>
                            <PanelDirective sizeX={3} sizeY={2} row={0} col={3} content={this.columnTemplate} header="<div>Last year Sales Comparison</div>"/>
                            <PanelDirective sizeX={3} sizeY={2} row={0} col={3} content={this.pieTemplate1} header="<div>Mobile browsers usage</div>"/>
                            <PanelDirective sizeX={3} sizeY={2} row={1} col={0} content={this.lineTemplate} header="<div>Sales increase percentage</div>"/>
                        </PanelsDirective>
                    </DashboardLayoutComponent>
                </div>
            </div>
        </div>);
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));