This project is a web application built with Angular, Material, and Chart.js to visualize tower data. It includes a data table to display tower information and a bar chart to show the total number of cell towers implemented.
To run the application locally, follow the steps below:
-
Clone the repository to your local machine:
-
Navigate to the project's directory:
-
Install the dependencies using npm:
npm install -
Start the development server:
ng serve -
Open your web browser and navigate to
http://localhost:4200to see the application in action.
The application consists of two main components: the data table and the bar chart.
The data table component (table-pagination.component) displays tower data in a paginated and sortable format. It utilizes Angular Material's MatTable and MatPaginator to provide an interactive and user-friendly experience. The tower data is retrieved from a backend API and displayed in a tabular format, with columns for tower ID, height, ect...
- Pagination: The data table supports pagination, allowing the user to navigate through the data by clicking on the page numbers or using the previous/next buttons.
The bar chart component (chart.component) visualizes the total number of cell towers implemented. It uses Chart.js library to render a bar chart with the tower count on the y-axis and the time period on the x-axis. The bar chart provides a visual representation of tower deployment over time.
- Data Visualization: The bar chart displays the total number of cell towers implemented over a specific time period. Each bar represents the tower count for a particular period, allowing the user to identify trends and patterns easily.
The Tower Data Visualization project is based on various open-source libraries and frameworks, including:
- Angular: https://angular.io/
- Angular Material: https://material.angular.io/
- Chart.js: https://www.chartjs.org/