Angular Chart Visualization Task

Task

Visualize data using charts in Angular.

Requirements

Use a charting library like Chart.js or ngx-charts.
Create a dashboard with the following charts:
- Bar Chart: Visualize monthly sales data.
- Pie Chart: Display product category distribution.
- Line Chart: Show daily active users.
Add interactivity:
- Filter bar chart data by quarter (e.g., Q1, Q2, Q3, Q4).
- Toggle pie chart view between percentages and absolute values.
- Filter line chart data by a custom date range.

Sample Data

1. Monthly Sales Data (Bar Chart)

export const monthlySalesData = [
  { month: 'January', sales: 15000 },
  { month: 'February', sales: 20000 },
  { month: 'March', sales: 18000 },
  { month: 'April', sales: 22000 },
  { month: 'May', sales: 25000 },
  { month: 'June', sales: 24000 },
  { month: 'July', sales: 26000 },
  { month: 'August', sales: 28000 },
  { month: 'September', sales: 23000 },
  { month: 'October', sales: 27000 },
  { month: 'November', sales: 30000 },
  { month: 'December', sales: 32000 },
];

export const productCategoryData = [
  { category: 'Electronics', percentage: 35 },
  { category: 'Fashion', percentage: 25 },
  { category: 'Home Appliances', percentage: 20 },
  { category: 'Books', percentage: 10 },
  { category: 'Other', percentage: 10 },
];

export const dailyActiveUsers = [
  { date: '2024-12-01', users: 500 },
  { date: '2024-12-02', users: 550 },
  { date: '2024-12-03', users: 520 },
  { date: '2024-12-04', users: 600 },
  { date: '2024-12-05', users: 580 },
  { date: '2024-12-06', users: 610 },
  { date: '2024-12-07', users: 650 },
];