Monthly

This section describes the BfmMonthlyComponent component.

Composition

The BfmMonthlyComponent is composed of the following components:

• BfmCoaValueComponent - COA value component.

Usage

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

monthly-analysis.component.ts

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

@Component({
  standalone: true,
  selector: 'bfm-monthly',
  imports: [BfmMonthlyComponent],
  templateUrl: './monthly-analysis.component.html',
})
export class MonthlyAnalysisComponent {}

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

monthly-analysis.component.html

<bfm-monthly 
  [chartAccountsTabLabel]="'Plano de contas'"
  [customIndicatorsTabLabel]="'Indicadores personalizados'"
  [monthlyAnalysisLabel]="'Análise mensal'"
  [resultsTabLabel]="'Resultados'"
/>

Inputs

The BfmMonthlyComponent component has the following inputs:

chartAccountsTabLabel

Chart Of Accounts Tab Text Label

Type	Default
string	'Plano de contas'

customIndicatorsTabLabel

Custom Indicators Tab Text Label

Type	Default
string	''

monthlyAnalysisLabel

Monthly Analysis Tab Text Label

Type	Default
string	''

resultsTabLabel

Results Tab Text Label

Type	Default
string	''

Events

The BfmMonthlyComponent component has no events.

TOKEN RESULTS_MONTHLY_CONFIG

To customize the BfmMonthlyComponent, you can inject the RESULTS_MONTHLY_CONFIG token in your module.

This token is used to provide custom values to the component. If is not provided, the default values will be used.

Properties

Key	Description	Default
tabsWrapperPosition	Position of the tabs wrapper.	'right'
monthlyAnalysisLabel	Label for the monthly analysis.	'Análise mensal'
resultsTabLabel	Label for the results tab.	'Resultados'
chartAccountsTabLabel	Label for the chart of accounts tab.	'Plano de contas'
customIndicatorsTabLabel	Label for the custom indicators tab.	'Indicadores personalizados'
resultTabsOrder	Order of the result tabs.	[DFM_TABS.chartOfAccounts, DFM_TABS.results, DFM_TABS.custom]
defaultSelectedTab	Default selected tab.	DFM_TABS.chartOfAccounts
useQueryParams	Whether to use query parameters for the selected tab and filters	true
showToggleZeroValuesAndNoTransitoryAccounts	Indicates whether to display a toggle option that allows users to show or hide accounts with zero values and non-transitory accounts in the monthly results report. When set to true, the toggle is visible, enabling users to filter the displayed accounts accordingly	true
transitoryAccountsTooltip	Tooltip text for the transitory accounts toggle	'Ao selecionar, as movimentações transitórias como transferências entre contas, transações internas, resgates e aplicações automáticas e estornos de pagamentos e recebimentos, serão exibidas ou ocultadas no relatório conforme o estado do filtro.'
previusTextHideZeroValues	Text displayed before the "hide zero values" toggle label	'Esconder'
textHideZeroValues	Text for the "hide zero values" toggle label	'zerados'
previusTextTransitoryAccounts	Text displayed before the "transitory accounts" toggle label	'Esconder'
textTransitoryAccounts	Text for the "transitory accounts" toggle label	'movimentações transitórias'

The RESULTS_MONTHLY_CONFIG default values are:

{
    "tabsWrapperPosition": "right",
    "monthlyAnalysisLabel": "Análise mensal",
    "resultsTabLabel": "Resultados",
    "chartAccountsTabLabel": "Plano de contas",
    "customIndicatorsTabLabel": "Indicadores personalizados",
    "resultTabsOrder": [DFM_TABS.chartOfAccounts, DFM_TABS.results, DFM_TABS.custom],
    "defaultSelectedTab": DFM_TABS.chartOfAccounts,
    "useQueryParams": true,
    "showToggleZeroValuesAndNoTransitoryAccounts": true,
    "transitoryAccountsTooltip": "Ao selecionar, as movimentações transitórias como transferências entre contas, transações internas, resgates e aplicações automáticas e estornos de pagamentos e recebimentos, serão exibidas ou ocultadas no relatório conforme o estado do filtro.",
    "previusTextHideZeroValues": "Esconder",
    "textHideZeroValues": "zerados",
    "previusTextTransitoryAccounts": "Esconder",
    "textTransitoryAccounts": "movimentações transitórias",
}

Example

To customize the BfmMonthlyComponent, you can inject the RESULTS_MONTHLY_CONFIG token in your module.

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: RESULTS_MONTHLY_CONFIG,
      useValue: {
        tabsWrapperPosition: 'left',
        monthlyAnalysisLabel: 'Análise mensal personalizada',
        resultsTabLabel: 'Resultados personalizados',
        chartAccountsTabLabel: 'Plano de contas personalizado',
        customIndicatorsTabLabel: 'Indicadores personalizados personalizados',
        resultTabsOrder: [DFM_TABS.results, DFM_TABS.chartOfAccounts, DFM_TABS.custom],
        defaultSelectedTab: DFM_TABS.results,
        useQueryParams: false,
        showToggleZeroValuesAndNoTransitoryAccounts: false,
        transitoryAccountsTooltip: 'Seu tooltip customizado aqui!'
        previusTextHideZeroValues: 'Esconder',
        textHideZeroValues: 'zerados',
        previusTextTransitoryAccounts: 'Esconder',
        textTransitoryAccounts: 'movimentações transitórias',
      },
    },
  ],
};