Stimulsoft Dashboards.JS for React

Stimulsoft Dashboards.JS is a full-featured tool used to create dashboards and reports for the JavaScript platform. To generate and view dashboards and reports, you need any web browser that supports HTML and JavaScript. It can work as Client-Side when no server side is required, as well as Server-Side that can be used on the server side.

How to install

Create a project folder and install Dashboards.JS module using the specified command:

npm install stimulsoft-dashboards-js-react

Designer Component

The Designer component is a React component for integrating Stimulsoft Dashboards Designer into your React applications. It provides a wide range of properties and event handlers to customize the behavior and appearance of the designer.

Usage

Here is an example of how to use the Designer component in your React application:

import React from 'react';
import { Designer, Stimulsoft } from 'stimulsoft-dashboards-js-react';

const App = () => {
    const handleSaveDashboard = (args, callback) => {
        console.log('Saving dashboard:', args);
    };

    return (
        <Designer
            report={new Stimulsoft.Report.StiReport()}
            visible={true}
            options={new Stimulsoft.Designer.StiDesignerOptions()}
            id="designer1"
            onSaveReport={handleSaveDashboard}
        />
    );
};

export default App;

Properties

The Designer component accepts the following properties:

| Property | Description | |-----------------------|--------------------------------------------------------------------------| | report | The dashboard object to be edited in the designer. | | visible | Determines whether the designer is visible. | | options | Configuration options for the designer. | | id | Unique identifier for the designer instance. |

Events

The Designer component provides the following event handlers:

| Event | Description | |-----------------------|--------------------------------------------------------------------------| | onPrepareVariables | Triggered to prepare variables. | | onBeginProcessData | Triggered at the beginning of data processing. | | onEndProcessData | Triggered at the end of data processing. | | onCreateReport | Triggered when a new dashboard is created. | | onCloseReport | Triggered when a dashboard is closed. | | onOpenReport | Triggered when a dashboard is opened. | | onOpenedReport | Triggered after a dashboard is opened. | | onSaveReport | Triggered when a dashboard is saved. | | onSaveAsReport | Triggered when a dashboard is saved as a new file. | | onPreviewReport | Triggered when a dashboard is previewed. | | onExit | Triggered when the designer is exited. | | onAssignedReport | Triggered when a dashboard is assigned to the designer. |

Viewer Component

The Viewer component is a React component for integrating Stimulsoft Dashboards Viewer into your React applications. It allows you to display and interact with dashboards.

Usage

Here is an example of how to use the Viewer component in your React application:

import React from 'react';
import { Viewer, Stimulsoft } from 'stimulsoft-dashboards-js-react';

const App = () => {
    const handlePrintDashboard = (args, callback) => {
        console.log('Printing dashboard:', args);
    };

    return (
        <Viewer
            report={new Stimulsoft.Report.StiReport()}
            visible={true}
            options={new Stimulsoft.Viewer.StiViewerOptions()}
            id="viewer1"
            onPrintReport={handlePrintDashboard}
        />
    );
};

export default App;

Properties

The Viewer component accepts the following properties:

| Property | Description | |-----------------------|--------------------------------------------------------------------------| | report | The dashboard object to be displayed in the viewer. | | visible | Determines whether the viewer is visible. | | options | Configuration options for the viewer. | | id | Unique identifier for the viewer instance. |

Events

The Viewer component provides the following event handlers:

| Event | Description | |-----------------------|--------------------------------------------------------------------------| | onPrepareVariables | Triggered to prepare variables. | | onBeginProcessData | Triggered at the beginning of data processing. | | onEndProcessData | Triggered at the end of data processing. | | onPrintReport | Triggered when a dashboard is printed. | | onBeginExportReport | Triggered at the beginning of dashboard export. | | onEndExportReport | Triggered at the end of dashboard export. | | onInteraction | Triggered during dashboard interaction. | | onEmailReport | Triggered when a dashboard is emailed. | | onDesignReport | Triggered when a dashboard is sent to the designer. | | onShowReport | Triggered when a dashboard is shown. | | onOpenReport | Triggered when a dashboard is opened. | | onOpenedReport | Triggered after a dashboard is opened. |

Integration

Our dashboards and report generator is excellent for working in any JavaScript application. Components are optimized to work with most popular platforms such as Node.js, Angular, React, Vue.js, and others. For integration you need to install only one package from the NPM repository, or download the package from our website to a computer and add several scripts and css-styles to the project. All other things you can find in our, on pure JavaScript developed dashboards and report builder.

Live Demo

We prepared many templates of dashboards and reports that you can explore and edit in our online demo. Choose the template you need, connect your data, and create rich reports and analytical dashboards – the solution is ready. Try the Live Demo

More about product

In Stimulsoft Dashboards.JS, we have included a complete set of tools and components to design simple and complex dashboards and reports. Texts, images, charts, barcodes, many preset styles, grouping and filtering, interactive dashboards and reports, and much more. You can work with dashboards and reports and their components directly from the JavaScript code. Read more about Stimulsoft Dashboards.JS.

Video and Documentation

We provide User Manuals and Class References intended to give technical assistance to users of our dashboards and reporting tool. Find more information in the Online Documentation.

Also, we prepared many videos about the working of our software. Watch videos on our YouTube channel.

Download

License Info

Online Store