Comparative Filter

This section describes the BfmComparativeFilterComponent component.

Composition

The BfmComparativeFilterComponent is composed of the following components:

• BfmDateRangeComponent - Date range component.

Usage

If you need more customization, you need to import it in your module and use it in your template.

comparative-filter.component.ts

import { BfmComparativeFilterComponent } from '@celerofinancas/ui-reports';

@Component({
  standalone: true,
  selector: 'comparative-filter',
  imports: [BfmComparativeFilterComponent],
  templateUrl: './comparative-filter.component.html',
})
export class ComparativeFilterComponent {}

Then, in your template, you can use the component like this:

comparative-filter.component.html

<bfm-comparative-filter
  [generateReportButtonLabel]="'Gerar Relatório'"
  [loading]="false"
  [periodList]="[{ name: 'Mensal', value: 'monthly' }, { name: 'Bimestral', value: 'bimonthly' }, { name: 'Trimestral', value: 'quarterly' }, { name: 'Semestral', value: 'semiannual' }, { name: 'Anual', value: 'yearly' }]"
  (costCenterChanges)="handleCostCenterChanges($event)"
  (dateRangeEnd)="handleDateRangeEnd($event)"
  (dateRangeStart)="handleDateRangeStart($event)"
  (periodName)="handlePeriodName($event)"
  (rangeOffset)="handleRangeOffset($event)"
  (reportHasBeenRequested)="handleReportHasBeenRequested($event)"
/>

Inputs

The BfmComparativeFilterComponent component has the following inputs:

generateReportButtonLabel

Label to be displayed on generate report button

Type	Default
string	'Gerar Relatório'

loading

Loader controller to show loading state

Type	Default
boolean	false

periodList

Period dropdown list to be selected

Type
object[]

Default value:

[
  {
    name: 'Mensal',
    value: 'monthly'
  },
  {
    name: 'Bimestral',
    value: 'bimonthly'
  },
  {
    name: 'Trimestral',
    value: 'quarterly'
  },
  {
    name: 'Semestral',
    value: 'semiannual'
  },
  {
    name: 'Anual',
    value: 'yearly'
  }
]

### `textCostCenter`
Text for the cost center label

| Type | Default |
| ---- | ------- |
| `string` | `'Centro de Custo'` |

### `showCostCenterTooltipRight`
Whether to show the cost center tooltip on the Right side

| Type | Default |
| ---- | ------- |
| `boolean` | `false` |

### `costCenterTooltipRightText`
Cost center tooltip text when shown on the Right side

| Type | Default |
| ---- | ------- |
| `string` | `''` |

Events

The BfmComparativeFilterComponent component has the following events:

costCenterChanges

Emit value to apply on cost_center_pk

Type
EventEmitter<any>

dateRangeEnd

Emit values to apply on date_range_end

Type
EventEmitter<any>

dateRangeStart

Emit values to apply on date_range_start

Type
EventEmitter<any>

periodName

Selected period name to be applied as title on comparative report

Type
EventEmitter<any>

rangeOffset

Emit value to apply on offset_period

Type
EventEmitter<any>

reportHasBeenRequested

Emits to parent component when user wants to generate report

Type
EventEmitter<any>

Configuration

To customize the BfmComparativeFilterComponent, you can inject configuration tokens in your module.

COMPARATIVE_REPORT_FILTER_CONFIG

This token is used to provide custom configuration for the comparative report filter behavior. If not provided, the default values will be used.

Properties

Key	Description	Default
periodLabel	Label text for the period selection field.	Período
showIconCostCenter	Boolean or flag to control the visibility of the cost center icon.
textIconInfoCostCenter	Tooltip or descriptive text for the cost center icon.
buttonGenerateLabel	Label text for the "Generate" button.	Gerar Relatório
enableScroll	Boolean to enable or disable header scrolling behavior.	true
textCostCenter	Text for the cost center tooltip.	'Centro de Custo'
showCostCenterTooltipRight	Whether to show the cost center tooltip on the Right side.	-
costCenterTooltipRightText	Tooltip text for the cost center filter when shown on the Right side.	-

Example

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { COMPARATIVE_REPORT_FILTER_CONFIG } from '@celerofinancas/ui-reports';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: COMPARATIVE_REPORT_FILTER_CONFIG,
      useValue: {
        periodLabel: 'Período de Análise',
        buttonGenerateLabel: 'Analisar',
        showIconCostCenter: true,
        textIconInfoCostCenter: 'Você pode criar um Centro de custos para organizar',
        enableScroll: false,
        textCostCenter: 'Centro de Custo',
        showCostCenterTooltipRight: true,
        costCenterTooltipRightText: 'Texto que será apresentando no tooltip a direita'
      },
    },
  ],
};