Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    Migrating from WebDataRocks to Flexmonster

    This guide will help you migrate from WebDataRocks to Flexmonster.

    The migration process is simple. Flexmonster is similar to WebDataRocks, so the code you’ve created around the WebDataRocks component will require only minor changes.

    Step 1. Install Flexmonster CLI

    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 in our documentation: CLI overview.

    Step 2. Install Flexmonster Pivot

    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.

    Step 3. Replace WebDataRocks in app.module.ts

    In the src/app/app.module.ts file, import FlexmonsterPivotModule instead of WebDataRocksPivotModule:

    WebDataRocks

    import { WebdatarocksPivotModule } from 'ng-webdatarocks';
     
    @NgModule({
    	...
    	imports: [
    		WebdatarocksPivotModule
    		// other imports
    	],
    	...
    })

    Flexmonster

    import { FlexmonsterPivotModule } from 'ng-flexmonster';
     
    @NgModule({
    	...
    	imports: [
    		FlexmonsterPivotModule
    		// other imports
    	],
    	...
    })

    Step 4. Replace WebDataRocks styles

    Open src/styles.css and replace WebDataRocks styles with Flexmonster styles:

    WebDataRocks

    @import 'webdatarocks/webdatarocks.min.css';

    Flexmonster

    @import "flexmonster/flexmonster.min.css";

    Step 5. Replace the <app-wbr-pivot> directive

    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:

    WebDataRocks

    <app-wbr-pivot
    	[report]="report">
    </app-wbr-pivot>

    Flexmonster

    <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.

    Step 6. Replace WebDataRocks API with Flexmonster API

    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).

    Step 6.1. Replace WebdatarocksComponent with FlexmonsterPivot

    In every .component.ts file with code for WebDataRocks (e.g., app.component.ts), import FlexmonsterPivot instead of WebdatarocksComponent:

    WebDataRocks

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { WebdatarocksComponent } from 'ng-webdatarocks';

    Flexmonster

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { FlexmonsterPivot } from 'ng-flexmonster';

    Step 6.2. Update references injected using the @ViewChild decorator

    The reference injected with @ViewChild is needed to use Flexmonster methods and events. 

    To update the reference, change WebdatarocksComponent to FlexmonsterPivot:

    WebDataRocks

    @ViewChild('pivot') pivot: WebdatarocksComponent;

    Flexmonster

    @ViewChild('pivot') pivot: FlexmonsterPivot;

    Step 6.3. Update methods

    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:

    1. Change the WebDataRocks instance to the Flexmonster instance in method calls:

      WebDataRocks

      this.pivot.webDataRocks.setReport(this.report);

      Flexmonster

      this.pivot.flexmonster.setReport(this.report);
    2. Update methods themselves if needed.
      Since all WebDataRocks methods are available in Flexmonster, there is no need to update method names.
      However, some Flexmonster methods have slightly different signatures. Check them in Flexmonster documentation.

    Step 6.4. Update events

    Flexmonster supports all events available in WebDataRocks and provides additional ones. See the full list of Flexmonster events.

    To start using Flexmonster events, follow the steps below:

    1. If you are subscribed to events via the directive’s attributes, no actions are required at this step.
      If you handle events via the on() and off() methods, change the WebDataRocks instance to the Flexmonster instance when calling these methods:

      WebDataRocks

      this.pivot.webDataRocks.on('reportcomplete', onReportComplete);

      Flexmonster

      this.pivot.flexmonster.on('reportcomplete', onReportComplete);
    2. Update events themselves if needed.
      Since all WebDataRocks events are available in Flexmonster, there is no need to update event names.
      However, some Flexmonster events have slightly different signatures. Check them in Flexmonster documentation.

    Step 6.5. Update objects

    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:

    1. Change their namespace from WebDataRocks to Flexmonster:

      WebDataRocks

      customizeCellFunction(cell: WebDataRocks.CellBuilder,
      data: WebDataRocks.CellData) {
      // function body
      }

      Flexmonster

      customizeCellFunction(cell: Flexmonster.CellBuilder,
      data: Flexmonster.CellData) {
      // function body
      }
    2. Update objects themselves if needed.
      Since all WebDataRocks objects are available in Flexmonster, there is no need to update object names.
      However, some Flexmonster objects have slightly different properties. Check them in Flexmonster documentation.

    Step 7. Update your reports

    WebDataRocks and Flexmonster reports have a similar structure, but some of the properties are slightly different. Flexmonster migrates most of these properties automatically except for one, which should be updated manually.

    In Flexmonster, measures in rows or columns are specified in square brackets. To update your report, change "uniqueName": "Measures" to "uniqueName": "[Measures]":

    WebDataRocks

    "slice": {
    	"rows": [
    		{
    			...
    		},
    		{
    			"uniqueName": "Measures"
    		}
    	],
    	// other properties
    }
    

    Flexmonster

    "slice": {
    	"rows": [
    		{
    			...
    		},
    		{
    			"uniqueName": "[Measures]"
    		}
    	],
    	// other properties
    }

    Step 8. Uninstall WebDataRocks

    Uninstall WebDataRocks by running the following command from the folder with package.json:

    npm uninstall ng-webdatarocks

    Step 9. Run the application

    Run your application from the console:

    ng serve --open

    Open your application in the browser and see that Flexmonster is used instead of WebDataRocks.

    The migration is complete.

    Learn more about Flexmonster

    With Flexmonster, you can connect to such data sources as 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:

    Explore our documentation and adjust Flexmonster to your business needs: