This is a Single Page Application (SPA) built using the latest version of Angular. The application displays a list of charts, allows users to filter these charts by date range, and manage (add, edit, delete) charts through a settings interface. This project leverages several modern web development libraries and frameworks.
- Version: 18
- Framework: Angular is a platform for building mobile and desktop web applications. It is a complete rewrite from the same team that built AngularJS.
- Library: Reactive Extensions for JavaScript (RxJS) is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.
- Library: Angular widgets built from the ground up using Bootstrap 5 CSS. It contains high-quality components based on Bootstrap's markup and CSS.
- Library: Highcharts is a JavaScript charting library that makes it easy to add interactive charts to your web and mobile projects.
- Library: NgRx is a framework for building reactive applications in Angular. NgRx provides libraries for managing global and local state, isolation of side effects, and more.
- Language: TypeScript is a superset of JavaScript that compiles to clean JavaScript output. It provides optional static typing, classes, and interfaces.
View mode
Settings
Modal
The project follows the standard Angular project structure with some additional organization for NgRx state management.
src/
├── app/
│ ├── actions/
│ │ └── chart.actions.ts
│ ├── effects/
│ │ └── chart.effects.ts
│ ├── reducers/
│ │ └── chart.reducer.ts
│ ├── components/
│ │ ├── view-mode/
│ │ │ └── view-mode.component.ts
│ │ └── settings/
│ │ ├── settings.component.ts
│ │ └── chart-modal/
│ │ ├── chart-modal.component.ts
│ │ └── chart-modal.component.html
│ ├── services/
│ │ └── chart.service.ts
│ ├── models/
│ │ └── chart.model.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── app-routing.module.ts
│ └── store.module.ts
├── assets/
├── environments/
│ ├── environment.prod.ts
│ └── environment.ts
├── styles.css
└── index.html