# Bar Chart Filter Usage Example

## Overview
This document provides examples of how to use the new filter functionality in the Bar Chart component.

## Basic Filter Example

```html
<app-bar-chart
  [enableFilters]="true"
  [filterFields]="[
    { field: 'region', label: 'Region', type: 'dropdown', options: ['North', 'South', 'East', 'West'] },
    { field: 'product', label: 'Product', type: 'text' },
    { field: 'sales', label: 'Sales Amount', type: 'number-range' }
  ]"
  [table]="'sales_data'"
  [xAxis]="'product'"
  [yAxis]="'amount'"
  [charttitle]="'Sales by Product'">
</app-bar-chart>
```

## Filter Types

### 1. Text Filter
```javascript
{ field: 'name', label: 'Name', type: 'text' }
```

### 2. Dropdown Filter
```javascript
{ field: 'category', label: 'Category', type: 'dropdown', options: ['A', 'B', 'C'] }
```

### 3. Number Range Filter
```javascript
{ field: 'amount', label: 'Amount', type: 'number-range' }
```

## Advanced Example with Drilldown

```html
<app-bar-chart
  [enableFilters]="true"
  [filterFields]="[
    { field: 'year', label: 'Year', type: 'dropdown', options: ['2020', '2021', '2022', '2023'] },
    { field: 'region', label: 'Region', type: 'text' }
  ]"
  [table]="'sales_summary'"
  [xAxis]="'category'"
  [yAxis]="'revenue'"
  [charttitle]="'Revenue by Category'"
  [drilldownEnabled]="true"
  [drilldownApiUrl]="'sales_detail/<category>'"
  [drilldownXAxis]="'product'"
  [drilldownYAxis]="'amount'"
  [drilldownParameter]="'category'">
</app-bar-chart>
```

## Backend Integration

Filters are passed to the backend API as query parameters:
- Text filter: `filter_name=John`
- Dropdown filter: `filter_category=A`
- Number range filter: `filter_amount_min=100&filter_amount_max=500`

The backend should implement logic to filter data based on these parameters.

## Filter Options Format

For dropdown filters, options can be provided in multiple formats:

1. Simple array:
```javascript
options: ['Option 1', 'Option 2', 'Option 3']
```

2. Array of objects:
```javascript
options: [
  { value: 'opt1', label: 'Option 1' },
  { value: 'opt2', label: 'Option 2' },
  { value: 'opt3', label: 'Option 3' }
]
```