# Bar Chart Filter Configuration

## Overview
This document describes the filter configuration implementation for the Bar Chart component. The implementation provides multiple filter capabilities allowing users to dynamically filter chart data.

## Filter Configuration Properties

The Bar Chart component includes the following filter configuration inputs:

```typescript
// Filter configuration inputs
@Input() filterFields: any[] = []; // Array of filter field configurations
@Input() enableFilters: boolean = false; // Enable/disable filter functionality
```

## Filter Field Configuration

Each filter field in the `filterFields` array should have the following structure:

```typescript
{
  field: string,        // The field name to filter on
  label?: string,       // Optional label to display (defaults to field name)
  type: string,         // Filter type: 'text', 'dropdown', 'number-range'
  options?: any[]       // Options for dropdown filters (optional)
}
```

### Filter Types

1. **Text Filter** (`type: 'text'`)
   - Simple text input field
   - Allows users to enter text to filter data

2. **Dropdown Filter** (`type: 'dropdown'`)
   - Dropdown selection field
   - Requires `options` array with values

3. **Number Range Filter** (`type: 'number-range'`)
   - Two number input fields (min and max)
   - Allows users to filter by numeric ranges

## Programmatic Filter Methods

The Bar Chart component provides several methods for programmatic filter control:

### setFilterOptions(field: string, options: any[])
Sets filter options for a dropdown filter field.

### getFilterValues(): any
Returns current filter values as an object.

### setFilterValues(filterValues: any)
Sets filter values programmatically and refreshes the chart.

### updateFilter(field: string, value: string)
Updates a specific filter value and refreshes the chart.

### clearFilters()
Clears all filter values and refreshes the chart.

## Usage Examples

### Enable Filters
```html
<app-bar-chart 
  [enableFilters]="true"
  [filterFields]="[
    { field: 'category', label: 'Category', type: 'dropdown', options: ['A', 'B', 'C'] },
    { field: 'name', label: 'Name', type: 'text' },
    { field: 'amount', label: 'Amount', type: 'number-range' }
  ]"
  [table]="'sales_data'"
  [xAxis]="'product'"
  [yAxis]="'amount'">
</app-bar-chart>
```

### Programmatic Filter Control
```typescript
// Set filter options
chartComponent.setFilterOptions('category', [
  { value: 'A', label: 'Category A' },
  { value: 'B', label: 'Category B' },
  { value: 'C', label: 'Category C' }
]);

// Set filter values
chartComponent.setFilterValues({
  'category': 'A',
  'name': 'Product 1'
});

// Get current filter values
const currentFilters = chartComponent.getFilterValues();
console.log(currentFilters);

// Clear all filters
chartComponent.clearFilters();
```

### Filter Options Format
For dropdown filters, options can be provided in multiple formats:

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

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

## Backend Integration

Filters are passed to the backend API as query parameters with the prefix `filter_`. For example:
- 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.

## UI Features

1. **Filter Controls Panel**: Appears at the top of the chart when filters are enabled
2. **Clear Filters Button**: Resets all filters to their default state
3. **Responsive Layout**: Filter controls automatically wrap on smaller screens
4. **Real-time Updates**: Chart updates immediately when filter values change

## Implementation Details

The filter implementation includes:
- Two-way data binding for filter values
- Dynamic filter control generation based on configuration
- Filter parameter building for API calls
- Filter state management
- Integration with existing drilldown functionality