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
simple graph
color themes
flamechart with timings
multiple graph
network graph
Props
interface FlamechartProps {
profile: Profile
focusedFrame?: { key: string }
onRevealFile?: (frame: Frame) => void
theme?: Theme
timings?: Timing[]
initialLeft?: number
initialRight?: number
minLeft?: number
maxRight?: number
bottomTimingLabels?: boolean
bottomPadding?: number
flamechartFactory?: FlamechartFactory
hiddenFrameLabels?: boolean
disableDetailView?: boolean
disableSearchBox?: boolean
disableTimelineCursor?: boolean
rootFilter?: RootFilter
renderTooltip?: (frame: FlamechartFrame, flamechart: Flamechart, theme: Theme) => React.ReactNode
renderTimingTooltip?: (timing: Timing, flamechart: Flamechart, theme: Theme) => React.ReactNode
}
Credits
This package is a forked from speedscope