Migrating from WebDataRocks to Flexmonster

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

import * as FlexmonsterReact from "react-flexmonster";

<WebDataRocksReact.Pivot
  toolbar={true}
/>

<FlexmonsterReact.Pivot
  toolbar={true}
/>

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

@import "flexmonster/flexmonster.css";

@import "@webdatarocks/webdatarocks/theme/green/webdatarocks.css";

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

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

     pivotRef.current.webdatarocks.setReport(report);

   • Flexmonster

     pivotRef.current.flexmonster.setReport(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.2. 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.1. Replace the WebDataRocks namespace with the Flexmonster namespace

The namespaces are needed for type definitions. Skip this step if you are not using WebDataRocks types (e.g., Slice or CellData).

In every .tsx file with code for WebDataRocks (e.g., App.tsx), import the Flexmonster namespace instead of the WebDataRocks namespace:

• WebDataRocks

  import "@webdatarocks/webdatarocks";

• Flexmonster

  import "flexmonster";

Step 6.2. Update references to the component instance

A reference is needed to use Flexmonster methods and events. Update all the references by changing WebDataRocksReact.Pivot to FlexmonsterReact.Pivot:

• WebDataRocks

  const ref: React.RefObject<WebDataRocksReact.Pivot> =
    useRef<WebDataRocksReact.Pivot>(null);

• Flexmonster

  const ref: React.RefObject<FlexmonsterReact.Pivot> =
    useRef<FlexmonsterReact.Pivot>(null);

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

     pivotRef.current?.webdatarocks.setReport(report);

   • Flexmonster

     pivotRef.current?.flexmonster.setReport(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

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

   • Flexmonster

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

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

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

import "@webdatarocks/webdatarocks/webdatarocks.amcharts.js";

import "flexmonster/lib/flexmonster.amcharts.js";

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

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