This guide will help you migrate from WebDataRocks to Flexmonster in your Angular project.
The migration process is simple. Flexmonster is embedded in an Angular application similarly to WebDataRocks. In addition, the code you’ve created around the WebDataRocks component will require only minor changes.
Flexmonster CLI is the most convenient way to work with Flexmonster Pivot. Install the CLI globally using npm:
npm install -g flexmonster-cli
As a result, a new flexmonster command will be available in the console. Learn more about Flexmonster CLI.
To add Flexmonster to your project, run the following command from the folder with package.json:
flexmonster add ng-flexmonster
This command downloads the Flexmonster Angular module to node_modules/ and adds it as a dependency to the package.json file.
In the NgModule where WebDataRocks is imported (e.g., src/app/app.module.ts), replace WebdatarocksPivotModule with FlexmonsterPivotModule:
import { WebdatarocksPivotModule } from "ng-webdatarocks";
@NgModule({
// ...
imports: [
WebdatarocksPivotModule,
// Other imports
],
// ...
})
import { FlexmonsterPivotModule } from "ng-flexmonster";
@NgModule({
// ...
imports: [
FlexmonsterPivotModule,
// Other imports
],
// ...
})
Open the CSS file with WebDataRocks styles (e.g., src/styles.css) and replace them with Flexmonster styles:
@import "webdatarocks/webdatarocks.min.css";
@import "flexmonster/flexmonster.min.css";
In every HTML file containing the pivot table (e.g., src/app/app.component.html), replace the <app-wbr-pivot> directive with the <fm-pivot> directive:
<app-wbr-pivot [report]="report"> </app-wbr-pivot>
<fm-pivot [report]="report"> </fm-pivot>
Note You need to change only the directive’s name. Its attributes may stay the same.
<fm-pivot> has more attributes than <app-wbr-pivot>. Learn more about the <fm-pivot> directive and its attributes.
Flexmonster includes WebDataRocks API, so you can continue using the methods and events you’ve used in your project. Follow the steps below to migrate to Flexmonster API.
Note You need to replace WebDataRocks API with Flexmonster API in every .component.ts file with code for WebDataRocks (e.g., app.component.ts).
In every .component.ts file with code for WebDataRocks (e.g., app.component.ts), import FlexmonsterPivot instead of WebdatarocksComponent:
import { Component, OnInit, ViewChild } from "@angular/core";
import { WebdatarocksComponent } from "ng-webdatarocks";
import { Component, OnInit, ViewChild } from "@angular/core";
import { FlexmonsterPivot } from "ng-flexmonster";
The reference injected with @ViewChild is needed to use Flexmonster methods and events.
To update the reference, change WebdatarocksComponent to FlexmonsterPivot:
@ViewChild('pivot') pivot: WebdatarocksComponent;
@ViewChild('pivot') pivot: FlexmonsterPivot;
Flexmonster supports all methods available in WebDataRocks and provides additional ones. See the full list of Flexmonster methods.
To start using Flexmonster methods, you need to:
this.pivot.webDataRocks.setReport(this.report);
this.pivot.flexmonster.setReport(this.report);
Flexmonster supports all events available in WebDataRocks and provides additional ones. See the full list of Flexmonster events.
Since all WebDataRocks events are available in Flexmonster, there is no need to update event names in your code.
However, some Flexmonster events have slightly different signatures. Check them out in API Reference.
Note If you subscribe to events through the on() and off() methods, don't forget to change the WebDataRocks instance to the Flexmonster instance when calling these methods.
Objects are passed as parameters to methods and event handlers. All WebDataRocks objects are available in Flexmonster.
To replace WebDataRocks objects with Flexmonster objects, you need to:
WebDataRocks to Flexmonster. For example:customizeCellFunction(cell: WebDataRocks.CellBuilder,
data: WebDataRocks.CellData) {
// Function body
}
customizeCellFunction(cell: Flexmonster.CellBuilder,
data: Flexmonster.CellData) {
// Function body
}
To use a WebDataRocks report in Flexmonster, you need to make one minor change manually. The rest of the report will be converted automatically upon loading it in Flexmonster.
To update your report, change "uniqueName": "Measures" to "uniqueName": "[Measures]" in the slice:
Run the following commands from the folder with Run your application from the console: Open your application in the browser and see that Flexmonster is used instead of WebDataRocks. The migration is complete. With Flexmonster, you can connect to JSON/CSV files, SQL and MongoDB databases, Elasticsearch, and Microsoft Analysis Services. See the full list of data sources: Supported data sources. Flexmonster also offers features that are not available in WebDataRocks:
WebDataRocks
"slice": {
"rows": [
{
// ...
},
{
"uniqueName": "Measures"
}
],
// Other properties
}
Flexmonster
"slice": {
"rows": [
{
// ...
},
{
"uniqueName": "[Measures]"
}
],
// Other properties
}
Step 8. Uninstall WebDataRocks
package.json to uninstall:
npm uninstall ng-webdatarocks
npm uninstall webdatarocks
Step 9. Run the application
ng serve --open
What's next?