Scribd
Upload
2 views

Assignment Task (1)

The assignment involves creating a data pipeline that ingests CSV data into a PostgreSQL database, utilizes Cube.js for data modeling and visualization, and displays the results in a React application. Key tasks include setting up PostgreSQL, configuring Cube.js for chart generation, and developing a React app with components for visualizing data. Deliverables include a functional pipeline, documentation, and the necessary code and configuration files.

Uploaded by

lastnamefirstnamedateofbirth
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Assignment Task (1)

The assignment involves creating a data pipeline that ingests CSV data into a PostgreSQL database, utilizes Cube.js for data modeling and visualization, and displays the results in a React application. Key tasks include setting up PostgreSQL, configuring Cube.js for chart generation, and developing a React app with components for visualizing data. Deliverables include a functional pipeline, documentation, and the necessary code and configuration files.

Uploaded by

lastnamefirstnamedateofbirth
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Assignment Task: Data Ingestion, Visualization, and React Integration

with Cube.js

Objective:

To create a data pipeline that ingests data from a CSV source into a PostgreSQL database
and then uses Cube.js to create different charts and models based on the data. The charts
will be displayed in a React application. This assignment will involve setting up PostgreSQL,
Cube.js, and a React application, ensuring they are all free and open-source versions.
Additionally, a mock database containing a single table will be created for demonstration
purposes.

Task Breakdown:

1. Set Up PostgreSQL Database:


○ Overview of PostgreSQL: PostgreSQL is a powerful, open-source
object-relational database system with over 30 years of active development.
○ Task:
■ Install PostgreSQL on your local machine or a cloud instance.
■ Create a new database for this project.
■ Create a mock database schema with one table to be used for
demonstration. The table should have at least the following columns:
■ id (Primary Key)
■ name (String)
■ value (Numeric)
■ timestamp (DateTime)
■ Populate the table with sample data by manually inserting data or
using a script to simulate the CSV ingestion process.
2. Set Up Cube.js for Data Modeling and Visualization:
○ Overview of Cube.js: Cube.js is an open-source analytical API platform
allowing you to create and visualize data models. It is designed to work with
modern data stacks and can be integrated with various BI tools and data
visualization libraries.
○ Task:
■ Install Cube.js on your local machine or a cloud instance.
■ Configure Cube.js to connect to the PostgreSQL database.
■ Create data models in Cube.js based on the table in the PostgreSQL
database.
■ Set up Cube.js to generate different charts based on the data in the
PostgreSQL database. At a minimum, create the following charts:
■ A line chart showing the trend of value over timestamp.
■ A bar chart showing the distribution of value for different
name entries.
■ A pie chart showing the percentage distribution of value for
different name entries.
■Create custom measures and dimensions in Cube.js to enhance data
analysis and visualization.
3. Set Up a Basic React Application:
○ Overview of React: React is a popular open-source JavaScript library for
building user interfaces, particularly for single-page applications.
○ Task:
■ Create a new React application using Create React App or a similar
setup tool.
■ Install necessary dependencies to integrate Cube.js with the React
application, such as @cubejs-client/core and
@cubejs-client/react.
■ Create components in the React application to fetch and display the
charts generated by Cube.js.
■ Ensure the charts are displayed correctly in the React application.
■ At a minimum, create the following components:
■ A component to display the line chart.
■ A component to display the bar chart.
■ A component to display the pie chart.
■ Implement routing in the React application to navigate between
different chart views.
■ Add a navbar to facilitate navigation between different chart views.
4. Enhance React Application with Additional Features: (Good to have)
○ Task:
■ Add filters to the charts to allow users to dynamically filter data based
on different criteria (e.g., date range, name).
■ Implement a dashboard view that displays multiple charts
simultaneously.
■ Add a loading state and error handling for data fetching.

Deliverables:

1. A fully functional data pipeline that:


○ Ingests data into a PostgreSQL database.
○ Connects Cube.js to the PostgreSQL database and generates specified
charts.
○ Displays the charts in a React application with additional features like filters
and a dashboard view.
2. Documentation of the setup and configuration process, including screenshots.
3. Configuration files, sample data, and React application code.

Notes:

● Ensure all tools used (PostgreSQL, Cube.js, React) are free and open-source
versions.
● The mock database and sample data should be simplistic for demonstration
purposes.
● Focus on the setup, configuration, and enhanced functionality rather than complex
data modeling or visualization.
Good luck, and feel free to reach out if you have any questions or need further clarification!

You might also like