Results Accordion

This section describes the BfmResultsAccordionComponent component.

Composition

The BfmResultsAccordionComponent is composed of the following components:

• BfmResultsAccordionItemComponent - Item component for the results accordion.

Usage

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

results-accordion.component.ts

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

@Component({
  standalone: true,
  selector: 'results-accordion',
  imports: [BfmResultsAccordionComponent],
  templateUrl: './results-accordion.component.html',
})
export class ResultsAccordionComponent {}

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

results-accordion.component.html

<bfm-results-accordion 
  [displayZeroValues]="false"
  [levels]="levels"
  [noContentDescription]="'Selecione o período de análise acima para visualizar o resultado mensal.'"
  [noContentMessage]="'Sem informações para análise!'"
/>

Inputs

The BfmResultsAccordionComponent component has the following inputs:

displayZeroValues

Whether to display zero values

Type	Default
boolean	false

levels

Results level object

Type	Default
any	null

noContentDescription

No content text description

Type	Default
string	'Selecione o período de análise acima para visualizar o resultado mensal.'

noContentMessage

No content message

Type	Default
string	'Sem informações para análise!'

Events

The BfmResultsAccordionComponent component has no events.

TOKEN RESULTS_ACCORDION_CONFIG

To customize the BfmResultsAccordionComponent, you can inject the RESULTS_ACCORDION_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
showAccordionItemFirstLevel	Whether to show the first level accordion item	true
showAccordionHeader	Whether to show the accordion header	false
accordionHeaderTitles	Titles for the accordion header columns	['Indicadores', 'Porcentagem sobre as receitas', 'Valor em reais (R$)']
positionResultsTooltipDictionary	Position of the results tooltip dictionary	'content'
resultsTooltipDict	Results tooltip dictionary	null
resultsColorDict	Results color dictionary	null
resultsNameList	List of results names	null
allowExpandBalanceSection	Whether to allow expanding the balance section	true
balanceStartDescription	Description for the balance start	'Saldo inicial geral'
balanceEndDescription	Description for the balance end	'Saldo final geral'

The RESULTS_ACCORDION_CONFIG default values are:

{
  showAccordionItemFirstLevel: true,
  showAccordionHeader: false,
  accordionHeaderTitles: ['Indicadores', 'Porcentagem sobre as receitas', 'Valor em reais (R$)'],
  positionResultsTooltipDictionary: 'content',
  resultsTooltipDict: null,
  resultsColorDict: null,
  resultsNameList: null,
  allowExpandBalanceSection: true,
  balanceStartDescription: 'Saldo inicial geral',
  balanceEndDescription: 'Saldo final geral',
}

Example

To customize the BfmResultsAccordionComponent, you can inject the RESULTS_ACCORDION_CONFIG token in your module.

app.config.ts

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

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: RESULTS_ACCORDION_CONFIG,
      useValue: {
        showAccordionItemFirstLevel: true,
        showAccordionHeader: false,
        accordionHeaderTitles: ['Indicadores Customizados', 'Porcentagem', 'Valor (R$)'],
        positionResultsTooltipDictionary: 'content',
        resultsTooltipDict: null,
        resultsColorDict: null,
        resultsNameList: null,
        allowExpandBalanceSection: true,
        balanceStartDescription: 'Saldo inicial geral',
        balanceEndDescription: 'Saldo final geral',
      },
    },
  ],
};