This guide will help you migrate from WebDataRocks to Flexmonster in your Vue 3 project.
The migration process is simple: Flexmonster is embedded in a Vue 3 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 Vue by running the following command inside your project:
flexmonster add vue-flexmonster
This command downloads the vue-flexmonster wrapper to node_modules/ and adds it as a dependency to package.json.
In every component where WebDataRocks is imported (e.g., src/App.vue), replace WebDataRocks imports with Flexmonster imports:
import Pivot from "./components/Pivot";
import "@webdatarocks/webdatarocks/webdatarocks.css";
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";
Note If you were using one of WebDataRocks’ predefined themes, replace it with a corresponding Flexmonster theme:
import "@webdatarocks/webdatarocks/theme/green/webdatarocks.css";
import "flexmonster/theme/green/flexmonster.min.css";
WebDataRocks and Flexmonster Vue wrappers both provide the same <Pivot> component, so you don’t have to update your Vue templates.
However, the Flexmonster <Pivot> component has more props than the WebDataRocks component. Learn more about the <Pivot> component and its props.
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:
pivot.value.webdatarocks.setReport(report);
pivot.value.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.
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.
If you integrated with a 3rd party charting library, replace WebDataRocks Connector with the corresponding Flexmonster Connector. You can find the needed Connector in the integration guide for your charting library. For example:
import "@webdatarocks/webdatarocks/webdatarocks.amcharts.js";
import "flexmonster/lib/flexmonster.amcharts.js";
If you are evaluating Flexmonster, you need a special trial license key to integrate with a 3rd party charting library. Contact our team to request the trial key.
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
}Step 9.1. Uninstall WebDataRocks by running the following command inside your project:
npm uninstall @webdatarocks/webdatarocks
Step 9.2. Delete the Pivot.vue wrapper file from the src/components/ folder.
Run your application from the console:
npm run serve
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: