Angular Event Tracking and Analytics Dashboard

This challenge focuses on integrating basic event tracking into an Angular application and displaying a simple analytics dashboard. Implementing analytics is crucial for understanding user behavior, identifying areas for improvement, and measuring the impact of changes to your application. This challenge will guide you through setting up event tracking and visualizing the collected data.

Problem Description

You are tasked with building a simple Angular application that tracks three user events: page_view, button_click, and form_submit. The application should:

1. Track Events: Implement event tracking using a service that captures these events and stores them in an array. The events should be objects with a type property (one of the three event types listed above) and a timestamp property (representing the time of the event).
2. Display Analytics Dashboard: Create a component that displays a simple dashboard showing the total count of each event type. The dashboard should update dynamically as events are tracked.
3. Simulate Events: Include buttons or other UI elements within the application that, when clicked, trigger the corresponding events. A simple form with a submit button should also trigger the form_submit event.

Key Requirements:

• Use a dedicated service for event tracking to maintain separation of concerns.
• The dashboard component should subscribe to the event tracking service to receive updates.
• The application should be responsive and provide a clear visual representation of the analytics data.
• The timestamp should be in a human-readable format (e.g., "YYYY-MM-DD HH:mm:ss").

Expected Behavior:

• Clicking a button should trigger the corresponding event and update the dashboard count.
• Submitting the form should trigger the form_submit event and update the dashboard count.
• The dashboard should display the correct counts for each event type in real-time.
• The application should handle events gracefully and avoid errors.

Edge Cases to Consider:

• What happens if the application is reloaded? (The event data should be reset.)
• How will you handle a large number of events? (For this challenge, a simple array is sufficient, but consider scalability in a real-world scenario.)
• Consider how to handle potential errors during event tracking.

Examples

Example 1:

Input: User clicks the "Button Click" button twice, then submits the form once.
Output: Dashboard displays: page_view: 1, button_click: 2, form_submit: 1
Explanation: The dashboard reflects the number of times each event was triggered.

Example 2:

Input: Application is reloaded.
Output: Dashboard displays: page_view: 0, button_click: 0, form_submit: 0
Explanation: The event data is reset upon application reload.

Example 3: (Complex Scenario)

Input: User navigates to different pages (simulated by clicking "Page View" button), clicks buttons, and submits the form multiple times.
Output: Dashboard displays accurate counts for each event type, reflecting all user interactions.
Explanation: The dashboard dynamically updates to reflect the cumulative event counts.

Constraints

• Event Storage: The event data should be stored in memory (an array within the event tracking service). Persistence is not required for this challenge.
• Event Types: Only page_view, button_click, and form_submit are supported.
• Dashboard Display: The dashboard should display the counts in a clear and readable format.
• Performance: The application should remain responsive even with a moderate number of events (e.g., up to 100). Optimization for extremely large datasets is not required.
• Angular Version: Use Angular version 14 or higher.

Notes

• Consider using RxJS Observables to communicate event data between the service and the dashboard component. This will allow for reactive updates to the dashboard.
• Focus on clean code, separation of concerns, and a well-structured Angular application.
• You can use any UI library or styling approach you prefer for the dashboard. The focus is on the event tracking and data display logic.
• Think about how you would extend this system to track more complex events or send data to an external analytics platform in a real-world application.