@grafana/flamegraph
Version:
Grafana flamegraph visualization component
55 lines (43 loc) • 4.19 kB
Markdown
> **@grafana/flamegraph is currently in BETA**.
This is a Flamegraph component that is used in Grafana and Pyroscope web app to display profiles.
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.
```tsx
import { Flamegraph } from '@grafana/flamegraph';
<FlameGraph
getTheme={() => createTheme({ colors: { mode: 'dark' } })}
data={dataFrame}
extraHeaderElements={
<Button onClick={() => {}} variant="secondary">
Download
/>
}
stickyHeader
vertical
/>
```
| 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. |
| keepFocusOnDataChange | boolean | If true any focused block will stay focused when the profile data changes. Same for the sandwich view. |
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. |