Visualizing PostgreSQL Data With Angular To Analyze What Passengers Find Rude to Do During a Flight

The Angular framework has recently undergone significant updates, including a brand-new website. Motivated by these enhancements, I embarked on a journey to refresh my Angular skills through the development of a small project. With my background in data analysis, I chose to create a data visualization dashboard utilizing a compelling dataset.

Project Overview

For this endeavor, I delved into data from the “41 Percent of Fliers Say It’s Rude To Recline Your Airplane Seat” article. This dataset offered a light-hearted yet insightful foundation for my dashboard.

Development Stack

As a small pet project aimed at honing my skills with the new Angular version, I opted for a combination of tools that were new to me, adding an element of intrigue. The final stack comprised:

• Angular for the front-end framework.
• PostgreSQL for the database management.
• Flexmonster for data visualization.

Among the various data visualization tools considered, Flexmonster emerged as the standout choice due to its efficient handling of data volume and seamless integration into my stack. It also provides both charting and pivot functionalities out-of-the-box.

Implementation Steps

1. Setting Up Angular: I initiated the project by setting up an Angular application using Angular CLI, which involved creating components, services, and routing modules.
2. Configuring PostgreSQL: A PostgreSQL database was established on ElephantSQL, ensuring the data was structured and optimized for querying.
3. Integrating Flexmonster: Utilizing Flexmonster’s API, I integrated the pivot table and charts into my Angular application, customizing the visualizations to align with the dataset and enhance user interactivity.

Creating the Project

To create a basic Angular project, the following commands were executed:

ng new flying-etiquette --no-standalone --ssr=false --style=css
cd flying-etiquette

Next, I proceeded with the data source configuration.

Creating a PostgreSQL Database

A PostgreSQL database was created, populated with data from a CSV file to analyze passengers’ sentiments regarding specific behaviors. I utilized the ElephantSQL service to establish a remote PostgreSQL instance for free. However, as the service is shutting down and new accounts cannot be created, alternatives such as Render, Neon, or Amazon RDS can be considered.

For database management, I employed DBeaver, a free cross-platform solution offering numerous features for working with various SQL databases. To connect DBeaver to the remote database, follow these steps:

1. Click the New Database Connection button in the top left corner.
2. Select the PostgreSQL database option in the popup window and click Next.
3. Fill in the connection details and click Finish.

Upon establishing the connection, the database instance will appear in the Database Navigator list.

After downloading the CSV file with data, it can be imported into the PostgreSQL database as follows:

1. Navigate to your database connection in the Database Navigator.
2. Right-click the schema name where you want to import the data and select Import Data.
3. Choose the CSV import source and click Next.
4. Locate the CSV data file on your computer and ensure the Importer settings are configured correctly before clicking Next.
5. Configure the Tables mapping and click Next.
6. To avoid errors, check the Disable batches and Ignore duplicate rows options, then click Proceed.

Once the data is imported, verify that all columns and data were exported correctly.

Installing Flexmonster

To install and configure Flexmonster for the project, the Flexmonster CLI was installed using:

npm install -g flexmonster-cli

This CLI provides quick access to all Flexmonster tools. After installation, I opened the project in my preferred IDE, Visual Studio Code. The Flexmonster Angular wrapper was added using:

flexmonster add ngx-flexmonster

Next, I imported FlexmonsterPivotModule into the src/app/app.module.ts file:

import { FlexmonsterPivotModule } from 'ngx-flexmonster';

@NgModule({
    imports: [
        FlexmonsterPivotModule,
        // Other imports
    ],
})

Additionally, Flexmonster styles were imported into the src/styles.css file:

@import "flexmonster/flexmonster.min.css";

Lastly, the directive was inserted into the src/app/app.component.html file:

At this stage, running the project would display an empty pivot table, prompting the need to connect the PostgreSQL database to Flexmonster.

Connecting to the PostgreSQL Database

With Flexmonster added to the Angular project and the database created, the next step was to connect Flexmonster to the database using the Flexmonster Data Server. This tool functions by:

• Connecting to various data sources.
• Aggregating data on a server.
• Sending the aggregated data to Flexmonster.

The Data Server can be installed with:

flexmonster add fds -r

After installation, a connection between the Data Server and the database was established. The process involved:

Step 1. Clicking the “Add New Index” button.
Step 2. Filling in the index information and clicking “Create”. An example connection string for the PostgreSQL database is as follows:

Server=stampy.db.elephantsql.com;Port=5432;Database=jvdheadr;User Id=jvdheadr;Password=4O7qgJ2C9VONkyn0Bp57V1I2EFggBhXd;

Next, I connected Flexmonster Pivot to the Data Server by specifying the [report] attribute for the directive:

To visualize data immediately upon loading the page, I preset the fields displayed in the pivot table:

With these configurations complete, the project was ready to be launched using:

npm start

Upon building the project, the pivot table would be visible, allowing for data analysis.

The finished version of this project is available on my GitHub, serving as a useful starting point for developing your own application or exploring the dataset.