@perfsee/flamechart
v1.13.1
Published
Web-based viewer for performance profiles
Downloads
12
Keywords
Readme
flamechart
a flamechart component for react.
Usage
import { importMainThreadProfileFromChromeTimeline, FlamechartContainer } from '@perfsee/flamechart'
const rawChromeProfile = require('example-chrome-profile.json')
const profile = importMainThreadProfileFromChromeTimeline(rawChromeProfile)
const render = () => <FlamechartContainer profile={profile} />
Notice:
importMainThreadProfileFromChromeTimeline()
is very slow, please cache the results.<FlamechartContainer />
use '100%' for the height and width, please wrap it with a div parent element with defined width & height.
Example
Props
interface FlamechartProps {
/**
* the profile object returned by import functions
*/
profile: Profile
/**
* the default focused frame key object
*/
focusedFrame?: { key: string }
/**
* callback when `open file` action triggered
*/
onRevealFile?: (frame: Frame) => void
/**
* custom theme
*/
theme?: Theme
/**
* extra timing values will be drawn down across the chart
*/
timings?: Timing[]
/**
* initial start time when first rendering the chart
*/
initialLeft?: number
/**
* initial end time when first rendering the chart
*/
initialRight?: number
/**
* min value for chart start time
*/
minLeft?: number
/**
* max value for chart end time
*/
maxRight?: number
/**
* show timing labels at the bottom of the chart
*/
bottomTimingLabels?: boolean
/**
* distance to pad below content in the chart
*/
bottomPadding?: number
/**
* flamechart factory
*/
flamechartFactory?: FlamechartFactory
/**
* hidden frame labels
*/
hiddenFrameLabels?: boolean
/**
* whether show stack detail view when focused on certain frame
*/
disableDetailView?: boolean
/**
* disable search box and ctrl-f shortcuts
*/
disableSearchBox?: boolean
/**
* disable the timeline cursor following the mouse
*/
disableTimelineCursor?: boolean
/**
* only matched frames will be shown as root frames
*/
rootFilter?: RootFilter
/**
* render custom tooltip
*/
renderTooltip?: (frame: FlamechartFrame, flamechart: Flamechart, theme: Theme) => React.ReactNode
/**
* render custom tooltip for timings
*/
renderTimingTooltip?: (timing: Timing, flamechart: Flamechart, theme: Theme) => React.ReactNode
}
Credits
This package is a forked from speedscope