The requested page is not available for the requested platform. You are viewing the content for Default platform.
All docs
V18.2
19.1 (preview)
18.2
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Client-Side Configuration (React)

This approach is based on the client-server model. This requires a server (backend) project and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

The modular approach allows you to integrate the HTML JavaScript Dashboard control into web applications. This topic describes how to add the HTML JavaScript Dashboard control to a React application.

Prerequisites

Make sure you have Node.js 6+ and npm 5.2+ installed on your machine.

Create React Application

In the command prompt, create a React application and navigate to the created folder:

npx create-react-app dashboard-react-app
cd dashboard-react-app

Install Dashboard Package

Install a dashboard package:

npm install devexpress-dashboard --save

Create Dashboard Component

In the src folder, create a DashboardComponent.js file and add the content below:

import React from 'react';
import { DashboardControl, ResourceManager, DashboardPanelExtension } from 'devexpress-dashboard';
import Globalize from 'globalize'

class DashboardComponent extends React.Component {
    constructor(props) {
        super(props);

        this.initGlobalize();
        ResourceManager.embedBundledResources();
    }

    componentDidMount() {
        this.dashboardControl = new DashboardControl(this.refs.dashboardcontainer,  {          
            endpoint: "https://demos.devexpress.com/services/dashboard/api",
            workingMode: "Designer",
        });
        this.dashboardControl.registerExtension(new DashboardPanelExtension(this.dashboardControl));
        this.dashboardControl.render();
    }

    componentWillUnmount() {
        this.dashboardControl.dispose();
    }

    render() {
        return (
            <div ref="dashboardcontainer" style={{ width: '100%', height: '100%' }}></div>
        );
    }

    initGlobalize() {
    Globalize.load(
        require('devextreme-cldr-data/en.json'),
        // require('devextreme-cldr-data/de.json'), 
        require('devextreme-cldr-data/supplemental.json')
    );
    Globalize.locale('en');
    }
}

export default DashboardComponent;

The DashboardControlOptions.endpoint property value consists of the URL where the Web Dashboard's server side is hosted and the route prefix from the server side. Web Dashboard uses the globalize library to display culture-specific data.

Modify App Content

Modify the App.js file as shown below to display a dashboard component on the page:

import React, { Component } from 'react';
import DashboardComponent from './DashboardComponent';

class App extends Component {
    render() {
        return (
        <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
            <DashboardComponent />
        </div>
        );
    }
}

export default App;

Add Global Styles

Replace the index.css file content with the following global styles:

@import url("../node_modules/jquery-ui/themes/base/all.css");
@import url("../node_modules/devextreme/dist/css/dx.common.css");
@import url("../node_modules/devextreme/dist/css/dx.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
@import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css");

Add Rewired Config

  1. Install the react-app-rewired library to customize CRA and its Webpack config without ejecting.
npm install react-app-rewired
  1. Create a config-overrides.js file at the root of your application and add the following content:
var path = require('path');

module.exports = function override(config, env) {
    config.resolve.alias = {
    globalize$: path.resolve(__dirname, 'node_modules/globalize/dist/globalize.js'),
    globalize: path.resolve(__dirname, 'node_modules/globalize/dist/globalize'),
    cldr$: path.resolve(__dirname, 'node_modules/cldrjs/dist/cldr.js'),
    cldr: path.resolve(__dirname, 'node_modules/cldrjs/dist/cldr')
    };
    return config;
}
  1. Open package.json and modify the scripts section as shown below:
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

Run the Application

Run the application.

npm start

Open http://localhost:3000/ in your browser to see the result. The HTML JavaScript Dashboard displays the dashboard stored on the preconfigured server (https://demos.devexpress.com/services/dashboard/api).

See Also