We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Migrating from WebDataRocks to Flexmonster

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

    Step 2. Get Flexmonster Pivot

    There are two Flexmonster wrappers for Angular:

    Run one of the following commands inside your project to get the chosen wrapper. If your Angular version is compatible with both wrappers, we recommend choosing the ngx-flexmonster:

    ngx-flexmonster

    flexmonster add ngx-flexmonster

    This command downloads the ngx-flexmonster wrapper to node_modules/ and adds it as a dependency to package.json.

    The ngx-flexmonster wrapper is compatible with Angular versions 14 and later.

    ng-flexmonster

    flexmonster add ng-flexmonster

    This command downloads the ng-flexmonster wrapper to node_modules/ and adds it as a dependency to package.json.

    The ng-flexmonster wrapper is compatible with Angular versions 5 through 15.

    In this guide, we will use the ngx‑flexmonster wrapper, but all the instructions apply to ng‑flexmonster as well.

    Step 3. Replace WebDataRocks in the NgModule

    In the NgModule where WebdatarocksPivotModule is imported (e.g., src/app/app.module.ts), import FlexmonsterPivotModule instead:

    WebDataRocks

    import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";
     
    @NgModule({
      // ...
      imports: [
        WebdatarocksPivotModule,
        // Other imports
      ],
      // ...
    })

    Flexmonster

    import { FlexmonsterPivotModule } from "ngx-flexmonster";
     
    @NgModule({
      // ...
      imports: [
        FlexmonsterPivotModule,
        // Other imports
      ],
      // ...
    })

    Step 4. Replace WebDataRocks styles

    Open the CSS file with WebDataRocks styles (e.g., src/styles.css) and replace them with Flexmonster styles:

    WebDataRocks

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

    Flexmonster

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

    Note If you were using one of WebDataRocks’ predefined themes, replace it with a corresponding Flexmonster theme.

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

    In every HTML file containing the pivot table (e.g., src/app/app.component.html), replace the <app-wbr-pivot> tag with the <fm-pivot> tag, which creates the FlexmonsterPivot component instance:

    WebDataRocks

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

    Flexmonster

    <fm-pivot
      [report]="report">
    </fm-pivot>

    Note You need to change only the tag. Its attributes may stay the same.

    FlexmonsterPivot has more input properties than WebdatarocksComponent. Learn more about the FlexmonsterPivot component and its properties.

    Step 6. Replace WebDataRocks API with Flexmonster API

    WebDataRocks API is supported in Flexmonster, so you can continue using the methods and events you’ve used in your project. Follow the steps below to migrate to Flexmonster API.

    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 "@webdatarocks/ngx-webdatarocks";

    Flexmonster

    import { Component, OnInit, ViewChild } from "@angular/core";
    import { FlexmonsterPivot } from "ngx-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 WebDataRocks methods 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. For example:

      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 out in the API Reference.

    Step 6.4. Update events

    Flexmonster supports all WebDataRocks events 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 the API Reference.

    Note If you subscribe to events through the on() and off() methods, ensure you have changed the WebDataRocks instance to the Flexmonster instance when calling these methods.

    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. For example:

      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 out in the API Reference.

    Step 7. Replace the localization file

    If your WebDataRocks component was translated into a different language, replace the WebDataRocks localization file with the corresponding Flexmonster file:

    WebDataRocks

    report: {
      // Other report configurations
      localization: "https://cdn.webdatarocks.com/loc/es.json"
    }

    Flexmonster

    report: {
      // Other report configurations
      localization: "https://cdn.flexmonster.com/loc/es.json"
    }

    Learn more about localizing Flexmonster.

    Step 8. Update your reports

    To use a WebDataRocks report in Flexmonster, you need to make one minor change. 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:

    WebDataRocks

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

    Flexmonster

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

    Step 9. Uninstall WebDataRocks

    Uninstall WebDataRocks by running the following command inside your project:

    npm uninstall @webdatarocks/ngx-webdatarocks

    Step 10. Run the application

    Run your application from the console:

    ng serve --open

    Go to the page with the pivot table, then click on the grid and press Ctrl + Alt + i (Option + Control + i on macOS). You should see Flexmonster's licensing pop-up window; this would mean that WebDataRocks is successfully replaced by Flexmonster.

    The migration is complete.

    Troubleshooting

    If you run into any issues during the migration, visit our troubleshooting page.

    What's next?

    With Flexmonster, you can connect to JSON/CSV files, SQL and MongoDB databases, Elasticsearch, and Microsoft Analysis Services. See the full list of supported data sources.

    Flexmonster also offers features that are not available in WebDataRocks: