This repository contains dashboard extensions that allow you to add the additional functionality to the Web Dashboard.
The following extensions are available:
-
A custom FunnelD3 item renders a funnel chart using the D3Funnel JS library.
-
A custom Online Map item allows you to place callouts on Google or Bing maps using geographical coordinates.
-
A custom Web Page item displays a single web page or a set of pages.
-
A custom Parameter item renders dashboard parameter dialog content inside the dashboard layout and allows you to edit and submit parameter values.
-
A custom Simple Table item renders data from the measure / dimensions as an HTML table.
-
The Dashboard Panel is an extension that displays a list of available dashboards and lets you switch between the designer and viewer modes.
You can use these extensions as a base for your own dashboard item extension development.
- Install a dashboard extension package
- Integrate dashboard extensions in the application
- Development
- License
- Support & Feedback
You can install the required scripts with npm or download them from the repository:
Open a folder with the Web Dashboard application and run the following command:
npm install git+https://git@github.com/DevExpress/dashboard-extensions.gitMake sure that the devexpress-dashboard package is installed.
- Download the latest version of scripts from GitHub.
- Copy the dist folder with scripts to your project with the Web Dashboard application.
You can now integrate the extensions to the Web Dashboard. Use one of the approaches: modular approach or global namespaces approach.
Import the required modules and register extensions in code before the control is rendered:
import { FunnelD3ItemExtension } from 'dashboard-extensions/dist/funnel-d3-item';
import { OnlineMapItemExtension } from 'dashboard-extensions/dist/online-map-item';
import { ParameterItemExtension } from 'dashboard-extensions/dist/parameter-item';
import { WebPageItemExtension } from 'dashboard-extensions/dist/webpage-item';
import { SimpleTableItemExtension } from 'dashboard-extensions/dist/simple-table-item';
// ...
export class DashboardComponent implements AfterViewInit {
ngAfterViewInit(): void {
// ...
dashboardControl.registerExtension(new OnlineMapItemExtension(dashboardControl));
dashboardControl.registerExtension(new FunnelD3ItemExtension(dashboardControl));
dashboardControl.registerExtension(new WebPageItemExtension(dashboardControl));
dashboardControl.registerExtension(new ParameterItemExtension(dashboardControl));
dashboardControl.registerExtension(new SimpleTableItemExtension(dashboardControl));
dashboardControl.render();
}
}Note that the Dashboard Panel extension consists of HTML, JavaScript, and CSS files and requires additional steps to integrate into the Web Dashboard. See a Dashboard Panel instruction to learn details.
See Client-Side Configuration (Modular Approach) for more information on how to configure a client part of the Web Dashboard application for a modular approach.
- Attach the downloaded scripts to the project inside the
<body>section before the end tag onto the page containing Web Dashboard.
<body>
<!-- ... -->
<script src="node_modules/d3/dist/d3.min.js"></script>
<script src="node_modules/d3-funnel/dist/d3-funnel.min.js"></script>
<script src="node_modules/dashboard-extensions/dist/funnel-d3-item.js"></script>
<script src="node_modules/dashboard-extensions/dist/online-map-item.js"></script>
<script src="node_modules/dashboard-extensions/dist/parameter-item.js"></script>
<script src="node_modules/dashboard-extensions/dist/webpage-item.js"></script>
<script src="node_modules/dashboard-extensions/dist/simple-table-item.js"></script>
</body>- Register extensions in code before the control is rendered:
DevExpress.Dashboard.ResourceManager.embedBundledResources();
var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
// ...
});
// ...
dashboardControl.registerExtension(new OnlineMapItemExtension(dashboardControl));
dashboardControl.registerExtension(new FunnelD3ItemExtension(dashboardControl));
dashboardControl.registerExtension(new WebPageItemExtension(dashboardControl));
dashboardControl.registerExtension(new ParameterItemExtension(dashboardControl));
dashboardControl.registerExtension(new SimpleTableItemExtension(dashboardControl));
dashboardControl.render();Note that the Dashboard Panel extension consists of HTML, JavaScript, and CSS files and requires additional steps to integrate into the Web Dashboard. See a Dashboard Panel instruction to learn details.
See Client-Side Configuration (Global Namespaces) for more information on how to configure a client part of the Web Dashboard application using the approach with global namespaces.
You can use a code of these extensions as a base for your own dashboard item extension development.
-
Fork your own copy of DevExpress/dashboard-extensions to your account.
-
Clone this repository to get a local copy of the repository and navigate to the folder.
git clone https://github.com/{your-GitHub-account-name}/dashboard-extensions.git cd dashboard-extensions -
Install webpack and webpack-cli globally if required.
npm install webpack webpack-cli -g
-
Install npm.
npm install
-
Install the devexpress-dashboard package.
npm install devexpress-dashboard
-
Edit extension's code in the src folder and save your changes.
-
Run webpack to bundle script files. See webpack.config.js for build configuration.
webpack
As a result, you can find the extension's script files in the repository's dist folder.
These extensions are distributed under the MIT license (free and open-source), but can only be used with a commercial DevExpress Dashboard software product. You can review the license terms or download a free trial version of the Dashboard suite at DevExpress.com.
- Follow this article for general information about custom extensions.
- To learn how to create a custom item, see the Creating a Custom Item article.
- To address questions regarding the Web Dashboard and JavaScript API, use DevExpress Support Center.