Angular Chart Visualization Task

Angular Chart Visualization Task

Task

Visualize data using charts in Angular.

---

Requirements

1. Use a charting library like Chart.js or ngx-charts.
2. 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.
3. 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 },
];