Socket
Socket
Sign inDemoInstall

@perfsee/flamechart

Package Overview
Dependencies
Maintainers
5
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@perfsee/flamechart

Web-based viewer for performance profiles


Version published
Weekly downloads
19
increased by1800%
Maintainers
5
Weekly downloads
 
Created
Source

flamechart

a flamechart component for react.

example

Usage

import { importMainThreadProfileFromChromeTimeline, FlamechartContainer } from '@perfsee/flamechart'

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

const render = () => <FlamechartContainer profile={profile} />

Notice:

  1. importMainThreadProfileFromChromeTimeline() is very slow, please cache the results.
  2. <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 {
  /**
   * 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

FAQs

Package last updated on 30 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc