@johfe/perfsee-flamechart

flamechart

a flamechart component for react.


$3

``js
import { importMainThreadProfileFromChromeTimeline, FlamechartContainer } from '@johfe/perfsee-flamechart'

const rawChromeProfile = require('example-chrome-profile.json')
const profile = importMainThreadProfileFromChromeTimeline(rawChromeProfile)

const render = () =>
`

Notice:

1. importMainThreadProfileFromChromeTimeline() is very slow, please cache the results.
2. use '100%' for the height and width, please wrap it with a div parent element with defined width & height.

$3

simple graph

color themes

flamechart with timings

multiple graph

network graph

$3

`ts
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
}
``

$3

This package is a forked from speedscope