Getting Started with Data Viz

DATA VIZ provides a generic UI which utilizes the react-wp-lib library, which allows React components to be embedded into WordPress Gutenberg blocks, enabling dynamic content visualization.

The data-viz-front submodule offers a set of embeddable React components that can be used in WordPress during the page editing mode. Each component is available as a separate WordPress plugin, making it easy for users to embed and configure these React components within the Gutenberg editor. React-wp-lib ensures seamless integration of these components during the UI render process, connecting them with the Redux store to manage state and data flow across the application.

Requirements

• Docker
• Docker Compose v2
• Java 21
• NodeJS v20+
• Intellij IDEA

Installation

In order to start a new data visualization-based project, this repo can be used as a template project. This example project includes all the related submodules necessary for a complete data visualization setup

Setup

1. Clone your repo together with the submodules

Run

git clone --recurse-submodules your-repo-url

# SSH
git clone --recurse-submodules git@github.com:devgateway/data-viz-example.git

# HTTPS
git clone --recurse-submodules https://github.com/devgateway/data-viz-example.git

2. Add Maven Services in Intellij IDEA

3. Execute dev_services.sh script

• This script will start the required docker services for the project to run

# Change permissions
chmod +x dev_services.sh

# Run the script
./dev_services.sh

4. Start the Microservices

• Select one of the microservices located in the services folder.
• Set the active profile to dev by clicking on the Edit Configurations option in the top right corner of the Intellij IDEA window as shown below:

Step	Image
Edit Configurations
Set Active Profile

• Run the microservice by clicking the green play button in the top right corner of the Intellij IDEA window.