Jack Westbrook
859c12bbb4
* feat(grafana-ui): build unstable entrypoint for experimental components * feat(plugins): expose grafana/ui/unstable * build(grafana-ui): add rollup plugin to create alias package.json for unstable entrypoint * build(packages): rewrite prepare npm script to generate alias packagejson files * chore(packages): use relative paths in publishConfig for exports generation * chore(frontend): move npmcli/package-json package to root package.json * revert(grafana-ui): remove rollup plugin for generating alias package.json files * chore(grafana-ui): clean up unstable directory postpack to prevent yarn lock issues * build(packages): fix scope for pkgName usage * feat(packages): create separate cjs and esm builds that validate with arethetypeswrong cli * chore(yarn): refresh lock file * fix(packages): make sure alias package.jsons point to existing files
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. |
| keepFocusOnDataChange | boolean | If true any focused block will stay focused when the profile data changes. Same for the sandwich view. |
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. |