# 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:

```vue
<template>
  <Designer
    :report="report"
    :visible="true"
    :options="options"
    id="designer1"
    @saveReport="handleSaveDahboard"
  />
</template>

<script>
import { Designer, Stimulsoft } from 'stimulsoft-dahboards-js-vuejs';

export default {
  components: { Designer },
  data() {
    return {
      report: new Stimulsoft.Report.StiReport(),
      options: new Stimulsoft.Designer.StiDesignerOptions(),
    };
  },
  methods: {
    handleSaveDahboard(args, callback) {
      console.log('Saving dashboard:', args);
    },
  },
};
</script>
```

## 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:

```vue
<template>
  <Viewer
    :report="report"
    :visible="true"
    :options="options"
    id="viewer1"
    @printReport="handlePrintDashboard"
  />
</template>

<script>
import { Viewer, Stimulsoft } from 'stimulsoft-dashboards-js-vuejs';

export default {
  components: { Viewer },
  data() {
    return {
      report: new Stimulsoft.Report.StiReport(),
      options: new Stimulsoft.Viewer.StiViewerOptions(),
    };
  },
  methods: {
    handlePrintDashboard(args, callback) {
      console.log('Printing dahboard:', args);
    },
  },
};
</script>
```

## 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](http://demo.stimulsoft.com/#Js)

# 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](https://www.stimulsoft.com/en/products/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](https://www.stimulsoft.com/en/documentation/online/programming-manual/index.html?reports_js.htm).

Also, we prepared many videos about the working of our software. Watch videos on our [YouTube channel](https://www.youtube.com/c/StimulsoftVideos/videos).

[Download](https://www.stimulsoft.com/en/downloads)

[License Info](https://github.com/stimulsoft/Dashboards.JS/blob/HEAD/LICENSE.md)

[Online Store](https://www.stimulsoft.com/online-store#embedded/dashboards/js)

