Angular Analytics Dashboard Component

This challenge requires you to build a reusable Angular component that displays key user engagement metrics. Implementing analytics dashboards is crucial for understanding user behavior, identifying trends, and making data-driven product decisions. This component will simulate a common scenario for displaying such data.

Problem Description

Your task is to create an Angular component named AnalyticsDashboardComponent that visualizes user analytics data. This component should be flexible enough to accept different data sets and display them in a structured manner.

Key Requirements:

1. Component Structure: Create a new Angular component (AnalyticsDashboardComponent).
2. Data Input: The component should accept an array of objects as input via an @Input() property. Each object will represent a specific metric and contain at least a label (string) and a value (number).
3. Data Display:
   • The component should iterate through the input data and display each metric as a row.
   • Each row should clearly show the metric's label and its corresponding value.
   • Consider a visual distinction for the value, perhaps in a different text color or font weight.
4. Total Value: The component should also calculate and display the sum of all values from the input data under a "Total" label.
5. Styling: Basic styling should be applied to make the dashboard readable. For instance, use a table or a list structure, and ensure labels and values are aligned.
6. Reusability: The component should be designed to be reusable across different parts of an application, accepting various sets of analytics data.

Expected Behavior:

When the AnalyticsDashboardComponent receives an array of metric objects, it should render a clear, organized list or table of these metrics along with their values, followed by a summary of the total value.

Edge Cases:

• Empty Data: If the input array is empty, the component should gracefully display a message like "No analytics data available." instead of an empty dashboard.
• Zero Values: Metrics with a value of 0 should be displayed correctly.

Examples

Example 1:

// Input data passed to the component
const analyticsData = [
  { label: 'Page Views', value: 1500 },
  { label: 'Unique Visitors', value: 750 },
  { label: 'Sessions', value: 1200 },
];

<!-- Expected HTML rendering (simplified) -->
<div>
  <table>
    <tbody>
      <tr>
        <td>Page Views</td>
        <td>1500</td>
      </tr>
      <tr>
        <td>Unique Visitors</td>
        <td>750</td>
      </tr>
      <tr>
        <td>Sessions</td>
        <td>1200</td>
      </tr>
      <tr>
        <td><strong>Total</strong></td>
        <td><strong>3450</strong></td>
      </tr>
    </tbody>
  </table>
</div>

Explanation: The component receives three metrics. It displays each metric's label and value. Finally, it calculates and displays the sum of all values (1500 + 750 + 1200 = 3450) under the "Total" label.

Example 2:

// Input data passed to the component
const emptyData: any[] = [];

<!-- Expected HTML rendering -->
<div>
  <p>No analytics data available.</p>
</div>

Explanation: When an empty array is provided, the component displays a user-friendly message indicating that there is no data to show.

Constraints

• The input data will always be an array of objects.
• Each object in the array will have a label property of type string and a value property of type number.
• The value will always be a non-negative integer.
• The component should be implemented using TypeScript and Angular.

Notes

• Consider using Angular's ngFor directive for iterating over the input data.
• You'll need to define an interface or type for the input data objects to ensure type safety.
• Basic CSS can be added to the component's stylesheet (.scss or .css) to improve readability.
• Think about how you will calculate the total sum efficiently.