Need a special offer?Find out if your project fits.
+
  1. API reference
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • Table of contents

    Migrating from WebDataRocks to Flexmonster

    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. In addition, 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. Install Flexmonster Pivot

    To add Flexmonster to your project, run the following command inside your project:

    flexmonster add vue-flexmonster

    This command downloads the vue-flexmonster module to node_modules/ and adds it as a dependency to the package.json file.

    Step 3. Replace WebDataRocks imports

    In the component where WebDataRocks is imported (e.g., src/App.vue), replace WebDataRocks imports with Flexmonster imports:

    WebDataRocks

    <script>
    import Pivot from "./components/Pivot";
    import "webdatarocks/webdatarocks.css";
    
    // Other code
    </script>

    Flexmonster

    <script>
    import Pivot from "vue-flexmonster/vue3";
    import "flexmonster/flexmonster.css";
    
    // Other code
    </script>

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

    Step 4. Check out available <Pivot> props

    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.

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

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

      WebDataRocks

      this.$refs.pivot.webdatarocks.setReport(this.report);

      Flexmonster

      this.$refs.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 API Reference.

    Step 5.2. Update events

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

    Note If you subscribe to events through the on() and off() methods, don't forget to change the WebDataRocks instance to the Flexmonster instance when calling these methods.

    Step 6. Update your reports

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

    Step 7.1. Uninstall WebDataRocks by running the following command inside your project:

    npm uninstall webdatarocks

    Step 7.2. Delete the Pivot.vue wrapper file from the src/components/ folder.

    Step 8. Run the application

    Run your application from the console:

    npm run serve

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

    The migration is complete.

    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: Supported data sources.

    Flexmonster also offers features that are not available in WebDataRocks: