Dashboard Donut Graph

This section describes the BfmDashboardDonutGraphComponent component.

Usage

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

donut-graph.component.ts

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

@Component({
  standalone: true,
  selector: 'donut-graph',
  imports: [BfmDashboardDonutGraphComponent],
  templateUrl: './donut-graph.component.html',
})
export class DonutGraphComponent {}

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

donut-graph.component.html

<bfm-dashboard-donut-graph 
  [data]="data"
  [loading]="loading"
  [type]="'revenue'"
/>

Inputs

The BfmDashboardDonutGraphComponent component has the following inputs:

data

Graph data

Type	Default
DonutDataItem[]	[]

loading

Whether the graph's data is loading

Type	Default
boolean	false

type

Type of the graph

Type	Default
`"revenue"	"expense"`

Events

The BfmDashboardDonutGraphComponent component has the following events:

onArcMouseEnter

Triggered when a graph arc is hovered

Type
EventEmitter<any>

onArcMouseLeave

Triggered when a graph arc is no longer hovered

Type
EventEmitter<any>

onMouseMove

Triggered when the mouse moves over the graph

Type
EventEmitter<any>