COA Value

This section describes the BfmCoaValueComponent component.

Composition

The BfmCoaValueComponent is composed of the following components:

• BfmCoaValueListComponent - COA value list component.

Usage

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

coa-value.component.ts

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

@Component({
  standalone: true,
  selector: 'coa-value',
  imports: [BfmCoaValueComponent],
  templateUrl: './coa-value.component.html',
})
export class CoaValueComponent {}

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

coa-value.component.html

<bfm-coa-value 
  [coaValueList]="coaValueList"
  [costCenterPk]="costCenterPk"
  [displayZeroValues]="displayZeroValues"
  [noContentDescriptions]="noContentDescriptions"
  [selectedMonth]="selectedMonth"
  [selectedYear]="selectedYear"
  [showCoaValueGraph]="showCoaValueGraph"
  [showCoaValueList]="showCoaValueList"
  [showFinancialRecordList]="showFinancialRecordList"
  (onBackClick)="handleBackClick($event)"
/>

Inputs

The BfmCoaValueComponent component has the following inputs:

coaValueList

Receive a COA Value List

Type	Default
Record<string, any>	{}

costCenterPk

Cost center primary key

Type	Default
string	''

displayZeroValues

Zero Values Control Boolean

Type	Default
boolean	false

noContentDescriptions

No Content Descriptions

Type	Default
literal type	{ title: 'Sem informações para análise!', subtitle: 'Selecione o período de análise acima para visualizar o resultado mensal.' }

selectedMonth

Receive actual Month Selected

Type	Default
number	null

selectedYear

Receive actual Year Selected

Type	Default
number	null

showCoaValueGraph

Show COA Value Graph

Type	Default
boolean	true

showCoaValueList

Show COA Value List

Type	Default
boolean	true

showFinancialRecordList

Show Financial Record List

Type	Default
boolean	false

Events

The BfmCoaValueComponent component has no events:

Configuration

RESULTS_COA_VALUE_CONFIG

To customize the BfmCoaValueComponent, you can inject the RESULTS_COA_VALUE_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
chartType	Type of chart to be displayed.	`'pie'
chartTypeCutout	Cutout percentage for doughnut chart.	'0%'
chartTypeAspectRatio	Aspect ratio for the chart.	1
expenseColors	Colors for expense categories.	Array<string>
revenueColors	Colors for revenue categories.	Array<string>
showTotalRow	Optional flag to show or hide the total row in the chart.	true
financialRecordColumnList	List of financial record columns.	Array<{ name: string, size: number, align: string }>

The RESULTS_COA_VALUE_CONFIG default values are:

{
  chartType: 'pie',
  chartTypeCutout: '75%',
  chartTypeAspectRatio: 3,
  expenseColors: ['#FF6384', '#36A2EB', '#FFCE56'],
  revenueColors: ['#4BC0C0', '#9966FF', '#FF9F40'],
  showTotalRow: true,
  financialRecordColumnList: [
    { name: 'value', size: 2, align: 'left' },
    { name: 'paid_at', size: 2, align: 'left' },
    { name: 'name', size: 4, align: 'left' },
    { name: 'status', size: 2, align: 'right' },
    { name: 'bank_id', size: 1, align: 'center' },
    { name: 'payment_method', size: 1, align: 'center' },
  ],
}

Example

To customize the BfmCoaValueComponent, you can inject the RESULTS_COA_VALUE_CONFIG token in your module.

app.config.ts

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

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: RESULTS_COA_VALUE_CONFIG,
      useValue: {
        chartType: 'doughnut',
        chartTypeCutout: '50%',
        chartTypeAspectRatio: 2,
        expenseColors: ['#FF6384', '#36A2EB', '#FFCE56'],
        revenueColors: ['#4BC0C0', '#9966FF', '#FF9F40'],
        showTotalRow: false,
        financialRecordColumnList: [
          { name: 'payment_method', size: 1, align: 'center' },
          { name: 'name', size: 4, align: 'left' },
          { name: 'paid_at', size: 2, align: 'left' },
          { name: 'status', size: 2, align: 'right' },
          { name: 'bank_id', size: 1, align: 'center' },
          { name: 'value', size: 2, align: 'left' },
        ],
      },
    },
  ],
};