Drag and Drop Widgets with Dashboard
Drag and Drop Widgets with Dashboards
Dashboards play a key role in representing the business metrics or KPI’s for managing or monitoring a process. These data can be mostly represented using data visualizing interacting widgets like charts, maps, gauges, grids, and more. EJ2 Dashboard layout component will meet all the requirements to create any expected layout quickly and place the widgets in the required position.
However dynamic arrangement of these widgets within the dashboards for flexible arrangement as you desired is also possible with our EJ2 Dashboard layout component since the panels within the layout can be dynamically arranged by using the drag and drop functionality of the component.
Installation and application creation
- Clone the Essential JS 2 quick start application by running the following command.
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
- Install the necessary packages by running the following command in the cloned application.
npm install @syncfusion/ej2-layouts
Initializing Dashboard layout component
Import the Dashboard layout component from the @syncfusion/ej2-layouts in the index.ts file and configure the panels to be placed within the dashboard layout as shown in the following code snippet.
[index.html] <!-- dashboard layout element --> <div id="editLayout"></div>
[index.ts]
import { DashboardLayout } from '@syncfusion/ej2-layouts'
// initializing DashboardLayout component
let dashboard: DashboardLayout = new DashboardLayout({
//splits the entire width of the component into 6 equal columns.
columns: 6,
//defines the width/height ratio of each panel, here panel height will be 10/8 of its width value.
cellAspectRatio: 100 / 80,
//defines the spacing between each panel within the layout.
cellSpacing: [25, 25],
panels: [
{
'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 0
},
{
'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 2
},
{
'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 4
},
{
'sizeX': 3, 'sizeY': 2, 'row': 1, 'col': 0
},
{
'sizeX': 3, 'sizeY': 2, 'row': 1, 'col': 3
},
{
'sizeX': 3, 'sizeY': 2, 'row': 4, 'col': 0
},
{
'sizeX': 3, 'sizeY': 2, 'row': 4, 'col': 3
},
]
});
dashboard.appendTo('#editLayout');
Adding widgets to panels
In Dashboard layout component, panels can hold any data or event data visualizing widgets like chart, grid, gauges, or maps. Refer to the following code snippet for adding widgets as panels content with header for each panel.
import { DashboardLayout } from '@syncfusion/ej2-layouts';
import { CircularGauge } from '@syncfusion/ej2-circulargauge';
import { gauge1, gauge2, gauge3 } from './gauge-component';
import { Grid } from '@syncfusion/ej2-grids';
import { gridComponent } from './grid-component';// importing grid component model
import { Maps} from '@syncfusion/ej2-maps';
import { mapsComponent } from './map-component'; // importing map component initialization
import { Chart, Legend, Tooltip, ColumnSeries, Category, DataLabel } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, DataLabel, Category, Legend, Tooltip);
import { columnChartComponent } from './chart-component';// importing column chart model
// initializing DashboardLayout component
let dashboard: DashboardLayout = new DashboardLayout({
//splits the entire width of the component into 6 equal columns.
columns: 6,
//defines the width/height ratio of each panel, here panel height will be 10/8 of its width value.
cellAspectRatio: 100 / 80,
//defines the spacing between each panel within the layout.
cellSpacing: [25, 25],
panels: [
{
'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 0, cssClass: 'card-template', content: '#card1'
},
{
'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 2, cssClass: 'card-template', content: '#card2'
},
{
'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 4, cssClass: 'card-template', content: '#card3'
},
{
'sizeX': 3, 'sizeY': 2, 'row': 1, 'col': 0, 'minSizeY': 2, 'minSizeX': 2,
header: '<div> Customer details</div>', content: '<div style="height:100%; width:100%" id="Grid"></div>'
},
{
'sizeX': 3, 'sizeY': 2, 'row': 1, 'col': 3,
header: '<div>Regional Map</div>', content: '<div style="height:100%; width:100%" id="map"></div>'
},
{
'sizeX': 3, 'sizeY': 2, 'row': 4, 'col': 0,
header: '<div>Sales in 2018 </div>', content: '<div style="height:100%; width:100%" id="colChart"></div>'
},
{
'sizeX': 3, 'sizeY': 2, 'row': 4, 'col': 3, 'minSizeY': 2, 'minSizeX': 2,
header: '<div> Sales Comparison </div>', content: '#card4'
},
]
});
dashboard.appendTo('#editLayout');
let chart: Chart = new Chart(columnChartComponent(), '#colChart')// initializing chart component
let grid: Grid = new Grid(gridComponent(), '#Grid'); // initializing grid component
let map: Maps = new Maps(mapsComponent(), "#map"); // intitalizing map component
let germany: CircularGauge = new CircularGauge(gauge1(), '#container1'); // intitalizing gauge components
let usa: CircularGauge = new CircularGauge(gauge2(), '#container2');
let uk: CircularGauge = new CircularGauge(gauge3(), '#container3');
Here, the first row of panel contains the HTML template cards. Then the grid component is initialized and rendered by obtaining the model values from the grid-component.ts file.
Similarly, the other components like charts, maps, and gauges are also imported from the chart-component.ts, map-component.ts, and gauge-component.ts files, respectively.
Now, you will get the editable dashboard with drag and drop widgets as follows.
Sample Link: https://github.com/SyncfusionExamples/How-to-create-a-dynamic-dashboard-with-responsive-and-adaptive-layout
Also, refer to the documentation and online samples for more details on Dashboard layout control.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac.
