Welcome to the Angular Frontend for Data Visualization of Microgrids! This project is set up using the Angular CLI and allows you to create interactive data visualizations for microgrids. Follow the instructions below to get started with development.
Before you begin, ensure you have the following prerequisites installed on your system:
Clone this repository to your local machine:
git clone https://github.com/innoTUgrid/frontend.git
Navigate to the project directory:
cd frontend
Install project dependencies:
npm install
To start the development server run:
npm run start
It will automatically reload the application when you make changes to the source code. The application will be available at http://localhost:4200/
.
When you're ready to build your application for production, you can use the following command:
npm run build
This will generate optimized production-ready files in the dist/
directory.
To build the application for production using Docker, you can use the following command:
docker build -t innotugrid-frontend .
This will create a Docker image with the name innotugrid-frontend
. You can then run the image using the following command:
docker run -p 8080:80 -e API_URL=http://localhost:3000 innotugrid-frontend
This will start a container with the application running on port 8080. The API_URL
environment variable is used to specify the URL of the backend API.
The project structure follows Angular CLI conventions. Key directories and files include:
src/app/
: Contains the Angular application code.src/app/components/
: Location for custom components.src/app/services/
: Location for services. Here the data is fetched from the api and calculated for the visualization.src/assets/
: Store static assets such as images and data files.src/app/views/
: Location for the pages that use the components from the components folder. The URLs for the pages are defined in the src/app/app-routing.module.ts
angular.json
: Angular CLI configuration file.This project leverages the following libraries for data visualization and UI components:
Highcharts: A powerful charting library for creating interactive and visually appealing charts.
highcharts-angular: The official wrapper of Highcharts for angular.
Angular Material: A UI component library that follows the Material Design guidelines and provides a set of high-quality UI components for Angular applications.
Also refer to the Angular documentation.
Happy coding! 🚀