Dashboard Finance

This section describes the BfmDashboardFinanceComponent component.

Composition

The BfmDashboardFinanceComponent is composed of the following components:

• BfmDashboardBarGraphComponent - Bar graph component.
• BfmDashboardDonutGraphComponent - Donut graph component for the dashboard.
• BfmDashboardLineGraphComponent - Line graph component for the dashboard.
• BfmDashboardValueCardComponent - Value card component.

Usage

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

dashboard-finance.component.ts

import { BfmDashboardFinanceComponent } from "@celerofinancas/ui-reports";

@Component({
  standalone: true,
  selector: 'dashboard-finance',
  imports: [BfmDashboardFinanceComponent],
  templateUrl: './dashboard-finance.component.html',
})
export class DashboardFinanceComponent {}

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

dashboard-finance.component.html

<bfm-dashboard-finance 
  [noTransitoryAccounts]="noTransitoryAccounts"
  [statistics]="[statistics1, statistics2]"
/>

Inputs

The BfmDashboardFinanceComponent component has the following inputs:

noTransitoryAccounts

Whether to show transitory accounts

Type	Default
boolean	false

statistics

Properties of the financial statistics

Type	Default
FINANCE_STATISTICS[]	[]

Events

The BfmDashboardFinanceComponent component has no events.

TOKEN DASHBOARD_FINANCE_TOKEN

To customize the BfmDashboardFinanceComponent, you can inject the DASHBOARD_FINANCE_TOKEN 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
statistics	Array of financial statistics to display	See DASHBOARD_FINANCE_DEFAULT_TOKEN.statistics
statisticProperties	Map containing properties for each financial statistic	See DASHBOARD_FINANCE_DEFAULT_TOKEN.statisticProperties

The DASHBOARD_FINANCE_TOKEN is defined as:

/**
 * Token for the dashboard finance component
 */
export const DASHBOARD_FINANCE_TOKEN = new InjectionToken<{
  statistics?: FINANCIAL_STATISTIC[];
  statisticProperties?: Map<FINANCIAL_STATISTIC, any>;
}>('DASHBOARD_FINANCE_TOKEN');

The DASHBOARD_FINANCE_DEFAULT_TOKEN default values are:

export const DASHBOARD_FINANCE_DEFAULT_TOKEN: {
  statistics: FINANCIAL_STATISTIC[];
  statisticProperties: Map<FINANCIAL_STATISTIC, any>;
} = {
  statistics:[
    FINANCIAL_STATISTIC.donutRevenue,
    FINANCIAL_STATISTIC.donutExpense,
    FINANCIAL_STATISTIC.predictedRevenue,
    FINANCIAL_STATISTIC.predictedExpense,
    FINANCIAL_STATISTIC.doneRevenue,
    FINANCIAL_STATISTIC.doneExpense,
    FINANCIAL_STATISTIC.predictedWeekBalance,
    FINANCIAL_STATISTIC.predictedEndOfMonthBalance,
    FINANCIAL_STATISTIC.lateRevenue,
    FINANCIAL_STATISTIC.lateExpense,
    FINANCIAL_STATISTIC.lineDailyBalance,
    FINANCIAL_STATISTIC.barMonthlyComparative,
  ],
  statisticProperties: new Map<FINANCIAL_STATISTIC, any>([
    [
      FINANCIAL_STATISTIC.groupedLate,
      {
        presentationMethod: PRESENTATION_METHOD.groupedCard,
        title: 'Em atraso',
        items: [
          {
            title: 'Entradas',
            type: 'revenue',
            identifier: 'late-revenue',
            tooltip: 'Valor total de recebimentos em atraso de todo o período',
          },
          {
            title: 'Saídas',
            type: 'expense',
            identifier: 'late-expense',
            tooltip: 'Valor total de pagamentos em atraso de todo o período',
          },
        ],
      },
    ],
    [
      FINANCIAL_STATISTIC.groupedPredicted,
      {
        presentationMethod: PRESENTATION_METHOD.groupedCard,
        title: 'Previsão de saldo total',
        tooltip:
          'Previsão do valor total de saldo nas contas bancárias para os próximos 7 e 30 dias.',
        items: [
          {
            title: 'Para 7 dias',
            type: 'predicted',
            identifier: 'predicted-week',
          },
          {
            title: 'Para o final do mês',
            type: 'predicted',
            identifier: 'predicted-month',
          },
        ],
      },
    ],
    [
      FINANCIAL_STATISTIC.groupedRevenue,
      {
        presentationMethod: PRESENTATION_METHOD.groupedCard,
        items: [
          {
            title: 'Previstas',
            subtitle: 'até o final do mês',
            type: 'revenue',
            identifier: 'predicted',
            tooltip: 'Valor total de entradas previstas até o último dia deste mês.',
          },
          {
            title: 'Realizadas',
            subtitle: 'no mês atual',
            type: 'revenue',
            identifier: 'done',
            tooltip: 'Valor total de entradas recebidas até o momento, no mês atual.',
          },
          {
            title: 'Total',
            subtitle: 'Previsto e Realizado',
            type: 'revenue',
            identifier: 'total',
            tooltip:
              'Valores totais recebidos, previsto para receber e atrasado, até o fim deste mês.',
          },
        ],
      },
    ],
    [
      FINANCIAL_STATISTIC.groupedExpense,
      {
        presentationMethod: PRESENTATION_METHOD.groupedCard,
        items: [
          {
            title: 'Previstas',
            subtitle: 'até o final do mês',
            type: 'expense',
            identifier: 'predicted',
            tooltip: 'Valor total de saídas previstas até o último dia deste mês.',
          },
          {
            title: 'Realizadas',
            subtitle: 'no mês atual',
            type: 'expense',
            identifier: 'done',
            tooltip: 'Valor total de saídas realizadas até o momento, no mês atual.',
          },
          {
            title: 'Total',
            subtitle: 'Previsto e Realizado',
            type: 'expense',
            identifier: 'total',
            tooltip: 'Valores totais pagos, á pagar e atrasados, até o fim deste mês.',
          },
        ],
      },
    ],
    [
      FINANCIAL_STATISTIC.donutRevenue,
      {
        presentationMethod: PRESENTATION_METHOD.donutGraph,
        title: 'Entradas do mês',
        tooltip:
          'Entradas recebidas e a receber (previstas e total de atrasadas) até o último dia do mês atual',
        type: 'revenue',
      },
    ],
    [
      FINANCIAL_STATISTIC.donutExpense,
      {
        presentationMethod: PRESENTATION_METHOD.donutGraph,
        title: 'Saídas do mês',
        tooltip:
          'Saídas pagas e a pagar (previstas e total de atrasadas) até o último dia do mês atual',
        type: 'expense',
      },
    ],
    [
      FINANCIAL_STATISTIC.predictedRevenue,
      {
        presentationMethod: PRESENTATION_METHOD.valueCard,
        title: 'Entradas previstas',
        subtitle: 'até o final do mês',
        tooltip: 'Total de entradas previstas até o último dia do mês atual',
        sideTagType: 'revenue',
        showLinkButton: true,
        trackingModel: TRACKING_MODELS.dashFinancePredictedRevenue,
        cashFlowFilters: {
          date_type: 'due',
          date_range_start: getToday(),
          date_range_end: toShortISO(lastDayOfMonth(new Date())),
          financial_record_type: 'revenue',
          is_predicted: true,
        },
      },
    ],
    [
      FINANCIAL_STATISTIC.predictedExpense,
      {
        presentationMethod: PRESENTATION_METHOD.valueCard,
        title: 'Saídas previstas',
        subtitle: 'até o final do mês',
        tooltip: 'Total de saídas previstas até o último dia do mês atual',
        sideTagType: 'expense',
        showLinkButton: true,
        trackingModel: TRACKING_MODELS.dashFinancePredictedExpense,
        cashFlowFilters: {
          date_type: 'due',
          date_range_start: getToday(),
          date_range_end: toShortISO(lastDayOfMonth(new Date())),
          financial_record_type: 'expense',
          is_predicted: true,
        },
      },
    ],
    [
      FINANCIAL_STATISTIC.doneRevenue,
      {
        presentationMethod: PRESENTATION_METHOD.valueCard,
        title: 'Entradas realizadas',
        subtitle: 'no mês atual',
        tooltip: 'Total de entradas realizadas até hoje referente ao mês atual',
        sideTagType: 'revenue',
        showLinkButton: true,
        trackingModel: TRACKING_MODELS.dashFinanceDoneRevenue,
        cashFlowFilters: {
          date_type: 'payment',
          date_range_start: toShortISO(setDate(new Date(), 1)),
          date_range_end: getToday(),
          financial_record_type: 'revenue',
          is_done: true,
        },
      },
    ],
    [
      FINANCIAL_STATISTIC.doneExpense,
      {
        presentationMethod: PRESENTATION_METHOD.valueCard,
        title: 'Saídas realizadas',
        subtitle: 'no mês atual',
        tooltip: 'Total de saídas realizadas até hoje referente ao mês atual',
        sideTagType: 'expense',
        showLinkButton: true,
        trackingModel: TRACKING_MODELS.dashFinanceDoneExpense,
        cashFlowFilters: {
          date_type: 'payment',
          date_range_start: toShortISO(setDate(new Date(), 1)),
          date_range_end: getToday(),
          financial_record_type: 'expense',
          is_done: true,
        },
      },
    ],
    [
      FINANCIAL_STATISTIC.predictedWeekBalance,
      {
        presentationMethod: PRESENTATION_METHOD.valueCard,
        title: 'Previsão do saldo',
        subtitle: 'para 7 dias',
        enableColorFromValue: true,
        tooltip: 'Valor do saldo previsto para daqui 7 dias',
      },
    ],
    [
      FINANCIAL_STATISTIC.predictedEndOfMonthBalance,
      {
        presentationMethod: PRESENTATION_METHOD.valueCard,
        title: 'Previsão do saldo',
        subtitle: 'para o final do mês',
        enableColorFromValue: true,
        tooltip: 'Valor do saldo previsto para o último dia do mês atual',
      },
    ],
    [
      FINANCIAL_STATISTIC.lateRevenue,
      {
        presentationMethod: PRESENTATION_METHOD.valueCard,
        title: 'Entradas em atraso',
        tooltip: 'Total de entradas em atraso de todo o período',
        sideTagType: 'revenue',
        showLinkButton: true,
        trackingModel: TRACKING_MODELS.dashFinanceLateRevenue,
        cashFlowFilters: {
          financial_record_type: 'revenue',
          is_late: true,
        },
      },
    ],
    [
      FINANCIAL_STATISTIC.lateExpense,
      {
        presentationMethod: PRESENTATION_METHOD.valueCard,
        title: 'Saídas em atraso',
        tooltip: 'Total de saídas em atraso de todo o período',
        sideTagType: 'expense',
        showLinkButton: true,
        trackingModel: TRACKING_MODELS.dashFinanceLateExpense,
        cashFlowFilters: {
          financial_record_type: 'expense',
          is_late: true,
        },
      },
    ],
    [
      FINANCIAL_STATISTIC.lineDailyBalance,
      {
        presentationMethod: PRESENTATION_METHOD.lineGraph,
        title: 'Saldo final de cada dia',
        tooltip: 'Valores realizados (últimos 15 dias) e previstos (para 15 dias)',
        showPredictedData: true,
        showDoneData: true,
      },
    ],
    [
      FINANCIAL_STATISTIC.barMonthlyComparative,
      {
        presentationMethod: PRESENTATION_METHOD.barGraph,
        title: 'Resultado mensal',
        tooltip:
          'Comparativo mensal de entradas e saídas dos últimos dois meses e do mês atual com previsão',
      },
    ],
  ])
};

Example

dashboard-finance.component.ts

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

import { BfmDashboardFinanceComponent } from '@celerofinancas/ui-reports';
import { DASHBOARD_FINANCE_TOKEN, FINANCIAL_STATISTIC } from '@celerofinancas/ui-reports';

@Component({
  standalone: true,
  selector: 'dashboard-finance',
  imports: [BfmDashboardFinanceComponent],
  templateUrl: './dashboard-finance.component.html',
  providers: [
    {
      provide: DASHBOARD_FINANCE_TOKEN,
      useValue: {
        statistics: [
          FINANCIAL_STATISTIC.donutRevenue,
          FINANCIAL_STATISTIC.donutExpense,
          FINANCIAL_STATISTIC.predictedRevenue,
          FINANCIAL_STATISTIC.predictedExpense,
        ],
        statisticProperties: new Map([
          // Custom properties for specific statistics
        ]),
      },
    },
  ],
})
export class DashboardFinanceComponent {
  noTransitoryAccounts = false;
  statistics = [
    FINANCIAL_STATISTIC.donutRevenue,
    FINANCIAL_STATISTIC.donutExpense,
  ];
}

DASHBOARD_FINANCE_GRAPHS_TOKEN

To customize the graph configurations in the BfmDashboardFinanceComponent, you can inject the DASHBOARD_FINANCE_GRAPHS_TOKEN token in your module.

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

Properties

Key	Description	Type	Default
enableLineAutoScale	Whether to enable auto scaling for line graphs	boolean	false

The DASHBOARD_FINANCE_GRAPHS_TOKEN is defined as:

/**
 * Configuration interface for dashboard finance graphs.
 */
export interface DashboardFinanceGraphConfig {
  enableLineAutoScale?: boolean;
}

/**
 * Token for dashboard finance graphs configuration
 */
export const DASHBOARD_FINANCE_GRAPHS_TOKEN = new InjectionToken<DashboardFinanceGraphConfig>(
  'DASHBOARD_FINANCE_GRAPHS_TOKEN',
);

The DASHBOARD_FINANCE_GRAPHS_DEFAULT_CONFIG default values are:

export const DASHBOARD_FINANCE_GRAPHS_DEFAULT_CONFIG: DashboardFinanceGraphConfig = {
  enableLineAutoScale: false,
};

Example

dashboard-finance-with-graphs.component.ts

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

import { BfmDashboardFinanceComponent } from '@celerofinancas/ui-reports';
import { 
  DASHBOARD_FINANCE_TOKEN, 
  DASHBOARD_FINANCE_GRAPHS_TOKEN, 
  FINANCIAL_STATISTIC 
} from '@celerofinancas/ui-reports';

@Component({
  standalone: true,
  selector: 'dashboard-finance-with-graphs',
  imports: [BfmDashboardFinanceComponent],
  templateUrl: './dashboard-finance-with-graphs.component.html',
  providers: [
    {
      provide: DASHBOARD_FINANCE_TOKEN,
      useValue: {
        statistics: [
          FINANCIAL_STATISTIC.lineDailyBalance,
          FINANCIAL_STATISTIC.barMonthlyComparative,
        ],
      },
    },
    {
      provide: DASHBOARD_FINANCE_GRAPHS_TOKEN,
      useValue: {
        enableLineAutoScale: true,
      },
    },
  ],
})
export class DashboardFinanceWithGraphsComponent {
  noTransitoryAccounts = false;
}