Skip to main content

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

TypeDefault
DonutDataItem[][]

loading​

Whether the graph's data is loading

TypeDefault
booleanfalse

type​

Type of the graph

TypeDefault
`"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>