Flexmonster Software License Agreement (“Agreement”) has been significantly revised and is effective as of September 30, 2024.
The following modifications were made:
The modified version of Flexmonster Software License Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after September 30, 2024, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Flexmonster Software License Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license under License Model or Maintenance after the effective date of any modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
This guide will help you migrate from WebDataRocks to Flexmonster in your React project.
The migration process is simple: Flexmonster is embedded in a React application similarly to WebDataRocks, so 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.
Get Flexmonster for React by running the following command inside your project:
flexmonster add react-flexmonster
This command downloads the react-flexmonster wrapper to node_modules/
and adds it as a dependency to package.json
.
In every component where WebDataRocks is used (e.g., src/App.jsx
or src/App.tsx
), import the Flexmonster React wrapper instead of the WebDataRocks React wrapper:
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import * as FlexmonsterReact from "react-flexmonster";
In every component where WebDataRocks is used (e.g., src/App.jsx
or src/App.tsx
), replace the WebDataRocksReact.Pivot
component with FlexmonsterReact.Pivot
:
<WebDataRocksReact.Pivot report={report} />
<FlexmonsterReact.Pivot report={report} />
Note You need to change only the component’s name. Its props may stay the same.
FlexmonsterReact.Pivot
has more props than WebDataRocksReact.Pivot
. Learn more about the FlexmonsterReact.Pivot component and its props.
Open the CSS file with WebDataRocks styles (e.g., src/index.css
) and replace them with Flexmonster styles:
@import "@webdatarocks/webdatarocks/webdatarocks.css";
@import "flexmonster/flexmonster.css";
Note If you were using one of WebDataRocks’ predefined themes, replace it with a corresponding Flexmonster theme.
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.
Flexmonster supports all WebDataRocks methods and provides additional ones. See the full list of Flexmonster methods.
To start using Flexmonster methods, you need to:
pivotRef.current.webdatarocks.setReport(report);
pivotRef.current.flexmonster.setReport(report);
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.
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:
import "@webdatarocks/webdatarocks";
import "flexmonster";
A reference is needed to use Flexmonster methods and events. Update all the references by changing WebDataRocksReact.Pivot
to FlexmonsterReact.Pivot
:
const ref: React.RefObject<WebDataRocksReact.Pivot> =
useRef<WebDataRocksReact.Pivot>(null);
const ref: React.RefObject<FlexmonsterReact.Pivot> =
useRef<FlexmonsterReact.Pivot>(null);
Flexmonster supports all WebDataRocks methods and provides additional ones. See the full list of Flexmonster methods.
To start using Flexmonster methods, you need to:
pivotRef.current?.webdatarocks.setReport(report);
pivotRef.current?.flexmonster.setReport(report);
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.
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:
function customizeCellFunction(cell: WebDataRocks.CellBuilder,
data: WebDataRocks.CellData) {
// Function body
}
function customizeCellFunction(cell: Flexmonster.CellBuilder,
data: Flexmonster.CellData) {
// Function body
}
If your WebDataRocks component was translated into a different language, replace the WebDataRocks localization file with the corresponding Flexmonster file:
report: { // Other report configurations localization: "https://cdn.webdatarocks.com/loc/es.json" }
report: { // Other report configurations localization: "https://cdn.flexmonster.com/loc/es.json" }
Learn more about localizing Flexmonster.
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:
"slice": { "rows": [ { // ... }, { "uniqueName": "Measures" } ], // Other properties }
"slice": { "rows": [ { // ... }, { "uniqueName": "[Measures]" } ], // Other properties }
Uninstall WebDataRocks by running the following command inside your project:
npm uninstall @webdatarocks/react-webdatarocks
Run your application from the console:
npm start
Open your application in the browser and 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.
If you run into any issues during the migration, visit our troubleshooting page.
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: