Ng2-Visualizejs

A simple demonstration that draws a Jaspersoft report/dashboard resource with the Visualize.js library using the Angular Framework (initial commit uses Angular 2.0.0-beta.17)

Interested in implementing a Visualize.js solution using the very popular ng2-bootstrap library? Check out this related project instead.

Based on Angular 2 QuickStart

This repository is based on a great learning resource, the Angular 2 QuickStart, which is the companion source code for the Angular 2 tutorial called the "5 Min Quickstart."

Note that this project has not been forked from the Angular 2 QuickStart project, so no updates made to that project will be reflected in this project.

Prerequisites

Two sets of requirements are needed:

• Jaspersoft resources
• Angular Framework (aka, Angular 2) resources

Jaspersoft

Required software and servers are well described on the Jaspersoft website.

Angular Framework

Node.js and npm are essential to Angular 2 development. Get them now if they're not already installed on your machine.

Verify that you are running at least node v5.x.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors.

This project was originally developed using Angular 2.0.0-beta.17.

Getting Started

Clone this repo into new project folder (e.g., my-proj).

git clone  https://github.com/richbl/ng2-visualizejs  my-proj
cd my-proj

Install npm Packages

See npm and nvm version notes above

Install the npm packages described in the package.json and verify that it works:

Attention Windows developers: you must run all of these commands in administrator mode.

npm install

Install Typings (TypeScript Definition Manager)

typings install

This will create a typings folder.

Edit Visualize.js Configuration

Configuration details for the Visualize.js library are currently managed in two files:

-index.html: set the library include for the Visualize.js library script (e.g., <script src="http://visualizejsdemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>) -app/vjs.config.service.ts: set user and resource details (i.e., reports and dashboards)

It's expected that future releases of this demonstration should permit for the dynamic loading of the Visualize.js library in the vjs.config.service.ts component.

Note that this demonstration is not designed to be production-ready: including username and password in any local script is a serious security risk.

Edit HTML Content Files

The file app/app.component.html is where the Visualize.js resources are embedded, using a custom HTML tag: <vjs-component id="dashboard_one"></vjs-component>, where the id attribute represents the id of the resource defined in the configuration component, vjs.config.service.ts.

Start the Server

The npm start command first compiles the application, then simultaneously re-compiles and runs the lite-server. Both the compiler and the server watch for file changes.

npm start

By default, the server will be running on http://localhost:3000. Open a browser page on this URL and you should see the application running.

Shut it down manually with Ctrl-C.

You're ready to go!