This project is a web-based application designed to visualize time series data related to pressure readings across different depths for Demo Company Oil and Gas. It aims to users with an intuitive and interactive tool to understand complex data through visual representations.
The primary goal is to develop an interactive web application that fetches time series data from a provided API and visualizes this data in a user-friendly manner. The focus is on tubing and casing pressures over depth, offering insights into pressure variations and anomalies in an accessible format.
- Data Fetching: Efficiently retrieves time series data from an external API, handling asynchronous operations with React Query for optimal performance and user experience.
- Interactive Charts: Utilizes Recharts to render responsive and interactive line charts, displaying tubing and casing pressures over depth.
- Responsive Design: Crafted with Material-UI, the application is fully responsive, ensuring usability across various devices and screen sizes.
- Customizable Themes: Incorporates Material-UI's theming capabilities to offer a consistent look and feel that aligns with Demo Company Oil and Gas's branding requirements.
- Accessibility: Designed with accessibility in mind, ensuring that the tool is usable by as wide an audience as possible.
- Vite: Used for setting up the React project, offering fast builds and an efficient development experience.
- React: Powers the user interface, adopting a component-based architecture for scalable and maintainable code.
- TypeScript: Enhances code quality and developer experience with static type checking.
- Recharts: Chosen for crafting interactive and responsive data visualizations.
- Material-UI: Provides a comprehensive suite of UI components and styling solutions.
- React Query: Manages asynchronous data fetching, caching, and synchronization.
To get a local copy up and running, follow these simple steps.
- npm
npm install npm@latest -g
Installation
Clone the repository
sh
Copy code
git clone https://github.com/alexmassimino9/oil-gas-insights
Install NPM packages
sh
Copy code
npm install
Start the development server
sh
Copy code
npm run dev
License
Distributed under the MIT License. See LICENSE for more information.
Contact
Your Name - [email protected]
Project Link: https://oil-gas-insights.vercel.app/
Acknowledgements
React
TypeScript
Recharts
Material-UI
React Query
Vite
DWS