Comparative

This section describes the BfmComparativeComponent component.

Composition

The BfmComparativeComponent is composed of the following components:

• BfmComparativeFilterComponent - Comparative filter component.
• BfmComparativeHeaderComponent - Comparative header component.
• BfmComparativeTableComponent - Comparative table component.

Usage

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

comparative.component.ts

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

@Component({
  standalone: true,
  selector: 'comparative',
  imports: [BfmComparativeComponent],
  templateUrl: './comparative.component.html',
})
export class ComparativeComponent {}

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

comparative.component.html

<bfm-monthly-comparative 
  [noContentDescriptions]="{ title: 'Selecione um período para gerar o relatório', subtitle: 'Para ter a análise do comparativo de resultados, defina os meses nos campos acima e clique em <b>Gerar relatório</b>.' }"
  (downloadCSVFile)="handleDownloadCSVFile($event)"
  (reportHasBeenRequested)="handleReportHasBeenRequested($event)"
/>

Inputs

The BfmComparativeComponent component has the following inputs:

noContentDescriptions

No content descriptions

Type	Default
literal type	{ title: 'Selecione um período para gerar o relatório', subtitle: 'Para ter a análise do comparativo de resultados, defina os meses nos campos acima e clique em <b>Gerar relatório</b>.' }

Events

The BfmComparativeComponent component has the following events:

downloadCSVFile

Download CSV event emitter

Type
EventEmitter<any>

reportHasBeenRequested

Emits to parent component when user wants to generate report

Type
EventEmitter<any>

Configuration

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

COMPARATIVE_REPORT_LIST_CONFIG

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

Properties

Key	Description	Default
noContentDescriptionsTitle	Property is used to display a message prompting the user to select a period in order to generate the report. This helps guide users when no content is available due to the absence of a selected period.
noContentDescriptionsSubtitle	This property or variable is likely used to store or display a subtitle message when there are no content descriptions available in the comparative results page. It can be used to provide additional context or guidance to users when the main content is missing or empty.
indicators	Represents a line of the list in the comparative results report. Change only labels or not represents class, tip or percent. Text is requerid	[]

The COMPARATIVE_REPORT_LIST_CONFIG default values are:

{
  indicators: [
    { class: 'positive', text: 'Receitas' },
    {
      class: 'negative',
      text: 'Redutores',
      percent: 'Porcentagem sobre a receita',
    },
    {
      class: 'result',
      text: 'Receita Líquida',
      tip: 'Receitas - Redutores',
      percent: 'Porcentagem sobre a receita',
    },
    {
      class: 'negative',
      text: 'Custos',
      percent: 'Porcentagem sobre a receita',
    },
    {
      class: 'result',
      text: 'Margem de Contribuição',
      tip: 'Receita Líquida - Custos',
      percent: 'Porcentagem sobre a receita',
    },
    {
      class: 'negative',
      text: 'Despesas Operacionais',
      percent: 'Porcentagem sobre a receita',
    },
    {
      class: 'result',
      text: 'Resultado Operacional',
      tip: 'Margem de Contribuição - Despesas Operacionais',
      percent: 'Porcentagem sobre a receita',
    },
    {
      class: 'negative',
      text: 'Impostos',
      percent: 'Porcentagem sobre a receita',
    },
    {
      class: 'result',
      text: 'Resultado Após Impostos',
      tip: 'Resultado Operacional - Impostos',
      percent: 'Porcentagem sobre a receita',
    },
    { class: 'positive', text: 'Entradas Não Operacionais' },
    { class: 'negative', text: 'Saídas Não Operacionais' },
    {
      class: 'result',
      text: 'Resultado Líquido',
      tip: 'Resultado Após Impostos + (Entradas Não Operacionais - Saídas Não Operacionais)',
      percent: 'Porcentagem sobre a receita',
    },
    { class: 'sum', text: 'Saldo Inicial' },
    { class: 'sum', text: 'Saldo Final' },
  ],
}

Example

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: COMPARATIVE_REPORT_LIST_CONFIG,
      useValue: {
        noContentDescriptionsTitle: 'Selecione um período para gerar o relatório',
        noContentDescriptionsSubtitle: 'Para ter a análise do comparativo de resultados, defina os meses nos campos acima e clique em <b>Analisar</b>.',
        indicators: [
          { class: 'positive', text: 'Receitas' },
          {
            class: 'negative',
            text: 'Redutores',
            percent: 'Porcentagem sobre a receita',
          },
          {
            class: 'result',
            text: 'Receita Líquida',
            tip: 'Receitas - Redutores',
            percent: 'Porcentagem sobre a receita',
          },
          {
            class: 'negative',
            text: 'Custos',
            percent: 'Porcentagem sobre a receita',
          },
          {
            class: 'result',
            text: 'Margem de Contribuição',
            tip: 'Receita Líquida - Custos',
            percent: 'Porcentagem sobre a receita',
          },
          {
            class: 'negative',
            text: 'Despesas Operacionais',
            percent: 'Porcentagem sobre a receita',
          },
          {
            class: 'result',
            text: 'Resultado Operacional',
            tip: 'Margem de Contribuição - Despesas Operacionais',
            percent: 'Porcentagem sobre a receita',
          },
          {
            class: 'negative',
            text: 'Impostos',
            percent: 'Porcentagem sobre a receita',
          },
          {
            class: 'result',
            text: 'Resultado Após Impostos',
            tip: 'Resultado Operacional - Impostos',
            percent: 'Porcentagem sobre a receita',
          },
          { class: 'positive', text: 'Entradas Não Operacionais' },
          { class: 'negative', text: 'Saídas Não Operacionais' },
          {
            class: 'result',
            text: 'Resultado Líquido',
            tip: 'Resultado Após Impostos + (Entradas Não Operacionais - Saídas Não Operacionais)',
            percent: 'Porcentagem sobre a receita',
          },
          { class: 'sum', text: 'Saldo Inicial' },
          { class: 'sum', text: 'Saldo Final' },
        ]
      },
    },
  ],
};