DataWiz

DataWiz-UI

Project's User Scenarios:

The following showcases the general workflows the user performs using our application:

• User can sign up.
• User can sign in after they have signed up, or if they have an existing account.
• User can add a database connection configuration from the "Config Database" page.
• While adding a dashboard configuration, the user can test whether they can connect to that database using the supplied credentials.
• User can also test the connection of an existing database configuration once they have saved it.
• User can delete an existing database connection configuration from the "Config Database" page.
• User can edit an existing database connection configuration in that page, and test its connection again.
• User can then click on an existing database connection to access that database's visualizations page, where user can create, edit, or delete that database's visualizations.
• When creating a visualization, the user:
1. Provides a name for the visualization.
2. Chooses one of the database's schemas.
3. Chooses the visualization's chart type (bar, line, pie).
4. Selects a table from that schema to be the x-table.
5. Select an attribute from x-table to be mapped to the x-axis.
6. Selects a table from that schema to be the y-table.
7. Select an attribute from x-table to be mapped to the y-axis. However, the y-axis attribute an only be integer, float, or double.
8. Chooses an aggregate calculation to be performed (sum, count, avg), but this is only applicable when the x-axis's data has more than one data point.
9. Before saving the visualization, the user can preview it by clicking the "preview" button.
10. The user can then save the visualization, which will redirect them to the database's visualizations page (where the new visualization is displayed).

• User can edit an existing visualization where they can modify its name, schema, x-table, x-attribute, y-table, and y-attribute.
• In this visualization edit page, the visualization's data is displayed in tabular format alongside the generated graph.
• User can delete an existing visualization from the database's visualization page.
• A database's visualization page displays that database's existing visualization in a paginated format, where each page contains up to six of that database's visualizations.
• User can create multiple custom dashboards to house up to four of their existing visualizations so that they may compare them side-by-side. This can be done by clicking the "add" button on the custom dashboard page, where they would provide a name for this custom dashboard then save it to create it.
• The all custom dashboards page displays to the user all their existing dashboards in a paginated format, where each page contains up to six of their existing dashboards.
• In this all custom dashboards page, users can delete any of their existing dashboards.
• The user can click on one of their custom dashboards from this page, which will redirect them to that custom dashboard.
• Inside a custom dashboard, the user can edit the dashboard's name.
• Inside a custom dashboard, the user can add visualization by selecting a schema which will display the visualizations that are associated with that schema (only schemas that have at least one visualization will be shown to the user as options). The user can then choose one of these visualizations and it will be added to their custom dashboard.
• Note that users can choose visualizations from different schemas as well as from the same schema in a single custom dashboard.
• Inside a custom dashboard, the user can click the "refresh" button at the top that will refresh the data of all the visualizations in that dashboard (i.e., update all visualizations by fetching their data).
• Inside a custom dashboard, the user can delete visualizations from the custom dashboard.
• User can log out by choosing "logout" from the drop-down at the top right of the page.

Back-End Dependencies:

The pom.xml file included in the back-end (datawiz-api) folder contains all the back-end's necessary external dependencies. So, running the pom file (through some like mvn compile or mvn build) should install and configure the dependencies, which include the following libraries:

• Spring Boot JDBC
• Spring Boot Data JPA
• Spring Boot Data JDBC
• Spring Boot OAuth2 Resource Server
• Spring Boot Starter Web
• MySQL Connector J
• Spring Boot Configuration Processor
• Spring Boot Starter Test
• MySQL Connector Java

Note that this project's back-end uses Java Version 17.

Back-End Build Instructions/Commands:

• mvn build

Front-End Dependencies:

• The front-end is developed using React.JS
• Node version v18.13.0
• Use yarn for the project with yarn version 1.22.4
• The dependencies are mentioned inside the package.json file inside the Front-End folder
• To install all the dependencies execute yarn command
• To start the project run yarn dev command
• To refactor the code ESLint is used

CI/CD stages for Front-End:

Build Stage

• First I have used docker image of node with the version v18.13.0
• Now as the project requirement if to use yarn but this image doesnot have yarn
• So, to install all the dependencies execute npx yarn command
• And finally to create build folder run npx yarn build command

Deploy Stage

• First I have used docker image of node with the version v18.13.0
• Now as the project requirement if to use yarn but this image doesnot have yarn
• So, to install all the dependencies execute npx yarn command
• Now, to create build folder run npx yarn build command
• Then ssh key for the vm has been stored in the varibale with the name FRONTEND_PRIVATE_KEY
• Once, the build folder is created, then it is pushed onto the VM using scp command

Front-End Build Instructions/Commands:

• To deploy the front-end we first need to create the build folder
• To create build folder yarn build command is used