Skip to content

Latest commit

 

History

History
 
 

grafana-flamegraph

README.md

Grafana Flamegraph component

@grafana/flamegraph is currently in BETA.

This is a Flamegraph component that is used in Grafana and Pyroscope web app to display profiles.

Usage

Currently this library exposes single component Flamegraph that renders whole visualization used for profiling which contains a header, a table representation of the data and a flamegraph.

import { Flamegraph } from '@grafana/flamegraph';

<FlameGraph
  getTheme={() => createTheme({ colors: { mode: 'dark' } })}
  data={dataFrame}
  extraHeaderElements={
    <Button onClick={() => {}} variant="secondary">
      Download
    />
  }
  stickyHeader
  vertical
/>

Props

Name Type Description
data DataFrame DataFrame with the profile data. Optional, if missing or empty the flamegraph is not rendered
stickyHeader boolean Whether the header should be sticky and be always visible on the top when scrolling.
getTheme () => GrafanaTheme2 Provides a theme for the visualization on which colors and some sizes are based.
onTableSymbolClick (symbol: string) => void Interaction hook that can be used to report on the interaction. Fires when user click on a name in the table.
onViewSelected (view: string) => void Interaction hook that can be used to report on the interaction. Fires when user changes the view to show (table/graph/both)
onTextAlignSelected (align: string) => void Interaction hook that can be used to report on the interaction. Fires when user changes the text align.
onTableSort (sort: string) => void Interaction hook that can be used to report on the interaction. Fires when user changes the teble sorting.
extraHeaderElements React.ReactNode Elements that will be shown in the header on the right side of the header buttons. Useful for additional functionality.
vertical boolean If true the flamegraph will be rendered on top of the table.
DataFrame schema

The dataFrame needs to have the following fields:

Name Type Description
name string The name of the node.
labels string[] The labels of the node.
level number The nesting level of the node.
value number The total value of the node.
self number The self value of the node.
valueRight number The total value of the node in the right profile. Optional, if present will show a diff version of the flamegraph.
selfRight number The self value of the node in the right profile. Optional, if present will show a diff version of the flamegraph.