stimulsoft-dashboards-js-angular

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 { Component } from '@angular/core';
import { Designer, Stimulsoft } from "stimulsoft-dashboards-js-angular/designer";

@Component({
  selector: 'app-root',
  template: `
    <sti-designer
      [report]="report"
      [visible]="true"
      [options]="options"
      [id]="'designer1'"
      (onSaveReport)="handleSaveDashboard($event)"
    ></sti-designer>
  `,
})
export class AppComponent {
  report = new Stimulsoft.Report.StiReport();
  options = new Stimulsoft.Designer.StiDesignerOptions();

  handleSaveDashboard(args: any): void {
    console.log('Saving dashboard:', args);
  }
}

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 { Component } from '@angular/core';
import { Viewer, Stimulsoft } from "stimulsoft-dashboards-js-angular/viewer";

@Component({
  selector: 'app-root',
  template: `
    <sti-viewer
      [report]="report"
      [visible]="true"
      [options]="options"
      [id]="'viewer1'"
      (onPrintReport)="handlePrintDashboard($event)"
    ></sti-viewer>
  `,
})
export class AppComponent {
  report = new Stimulsoft.Report.StiReport();
  options = new Stimulsoft.Viewer.StiViewerOptions();

  handlePrintDashboard(args: any): void {
    console.log('Printing dashboard:', args);
  }
}

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