import { Component } from '@angular/core';

@Component({
  selector: 'app-bar-chart-example',
  template: `
    <div style="padding: 20px;">
      <h2>Bar Chart with Filter Example</h2>
      
      <!-- Example 1: Bar chart with text and dropdown filters -->
      <div style="margin-bottom: 30px;">
        <h3>Example 1: Sales Data with Filters</h3>
        <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'"
          [chartlegend]="true"
          [showlabel]="true">
        </app-bar-chart>
      </div>
      
      <!-- Example 2: Bar chart with drilldown and filters -->
      <div style="margin-bottom: 30px;">
        <h3>Example 2: Sales Data with Drilldown and Filters</h3>
        <app-bar-chart
          [enableFilters]="true"
          [filterFields]="[
            { field: 'year', label: 'Year', type: 'dropdown', options: ['2020', '2021', '2022', '2023'] },
            { field: 'category', label: 'Category', 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>
      </div>
    </div>
  `
})
export class BarChartExampleComponent {
  constructor() { }
}