FlameGraph AutoSize Sample

A React component demonstrating an auto-sizing Flame Graph visualization with interactive controls. This component provides a responsive flame graph that automatically adjusts to its container size while maintaining proper proportions.

Demo

Features

• Auto-Sizing Container: Dynamically adjusts the flame graph size based on container dimensions
• Interactive Controls: Adjust container width using a slider
• Hierarchical Data Visualization: Displays hierarchical data in a flame graph format
• Customizable Height: Configurable graph height
• Tooltip Support: Optional tooltip functionality for data points

Installation

# Clone the repository
git clone [repository-url]

# Install dependencies
npm install

# Start the development server
npm run dev

Example Usage

import { AutoSizeFlameGraphViewer } from './AutoSizeFlameGraphViewer';

// Sample hierarchical data structure
const data = {
  name: "root",
  value: 1000,
  children: [
    {
      name: "child1",
      value: 500,
      children: []
    },
    {
      name: "child2",
      value: 500,
      children: []
    }
  ]
};

// Rendering the flame graph
const FlameGraphDemo = () => {
  const [width, setWidth] = React.useState(300);
  
  return (
    <div style={{ width: `${width}px`, height: '200px', border: '2px solid black' }}>
      <AutoSizeFlameGraphViewer 
        enableTooltips={false} 
        height={300} 
        data={data} 
      />
    </div>
  );
};

Data Structure

The flame graph expects hierarchical data in the following format:

{
  name: string,      // Node name
  value: number,     // Node value
  children: [        // Array of child nodes
    {
      name: string,
      value: number,
      children: []
    }
  ]
}

Component Props

Prop	Type	Required	Description
data	Object	Yes	Hierarchical data object
height	Number	Yes	Height of the flame graph in pixels
enableTooltips	Boolean	No	Enable/disable tooltips
onChange	Function	No	Callback for node selection changes

Tooltip Customization

The component supports custom tooltips with the following features:

.Tooltip {
  position: absolute;
  z-index: 3;
  background-color: #000;
  color: #fff;
  padding: 0.5rem;

  .tt-name {
    background-color: red;
  }

  .tt-value {
    background-color: blue;
  }
}

Technologies Used

• React: Component-based UI development
• react-flame-graph: Core flame graph visualization library
• Ant Design: UI components including Slider and Typography
• SCSS: Styling for tooltips and layout
• Emotion: CSS-in-JS styling solution

Interactive Features

The sample includes a width control slider that demonstrates the auto-sizing capabilities:

<div style={{ width: 300 }}>
  <Typography.Title level={5}>Container Div Width {width}</Typography.Title>
  <Slider 
    onChange={(newValue) => setWidth(newValue)} 
    min={300} 
    max={1000} 
    defaultValue={width} 
    value={width} 
  />
</div>

Development

This project uses Vite for development. To get started:

1. Clone the repository
2. Install dependencies with npm install
3. Start the development server with npm run dev
4. Open your browser to http://localhost:5173

Building for Production

npm run build

The build artifacts will be stored in the dist/ directory.