open-index/open-npm huggingface dataset:
npm package: @kylincloud/flamegraph
Description: KylinCloud flamegraph renderer (React adapter)
Latest version: 0.37.4

# @kylincloud/flamegraph

一个可复用的火焰图 / 差分火焰图组件库（React 适配层），基于 Pyroscope flamegraph 思路，适用于 CPU / 内存等采样型 Profiling 数据。

> 说明：本包主要服务于内部项目，API 在 0.x 阶段可能会有不兼容调整，请以当前版本导出的实际 API 为准。

## 功能特性

- 支持单视图与 Diff 差分视图
- 支持表格 / 火焰图 / 表格 + 火焰图 / Sandwich 等布局
- 交互：悬停提示、点击缩放、滚轮缩放、拖拽平移、右键菜单
- 函数名搜索与高亮
- 内置 i18n，中英文自动切换
- 两轴主题：`themePreset` + `themeMode`，支持自动跟随宿主暗色状态
- 保留 `colorMode` 兼容，Web Worker 加速

## 安装

```bash
# npm
npm install @kylincloud/flamegraph

# pnpm
pnpm add @kylincloud/flamegraph
```

> 依赖 `@kylincloud/flamegraph-core` 已由本包内部引入，一般不需要在业务侧单独安装。

**peer 依赖：**
- `react >= 16.14.0`
- `react-dom >= 16.14.0`
- `true-myth ^5.1.2`
- `zod ^3.11.6`

## 快速上手

```tsx
import React from 'react'
import { FlamegraphRenderer, Box } from '@kylincloud/flamegraph'

const profile = {
  version: 1,
  flamebearer: {
    names: ['total', 'fnA', 'fnB'],
    levels: [[0, 100, 0, 0]],
    numTicks: 100,
    maxSelf: 100,
  },
  metadata: {
    appName: 'demo',
    spyName: 'cpu',
    format: 'single',
    sampleRate: 100,
    units: 'samples',
  },
}

export default function App() {
  return (
    <Box themePreset="kylin" themeMode="auto">
      <FlamegraphRenderer
        profile={profile}
        themePreset="kylin"
        themeMode="auto"
        locale="zh-CN"
      />
    </Box>
  )
}
```

> 推荐使用 `profile` prop 而非 `flamebearer`。`profile` 会自动处理 delta 编码的解码。

## 主题模型

推荐使用新主题 API：

```tsx
<FlamegraphRenderer
  profile={profile}
  themePreset="kylin"
  themeMode="auto"
/>
```

- `themePreset?: 'default' | 'kylin'`
- `themeMode?: 'auto' | 'light' | 'dark'`
- `themeMode="auto"` 会优先检查最近宿主节点上的暗色标记，并兼容 `html.dark`、`data-theme="dark"`、`data-theme-mode="dark"`、`data-flamegraph-theme-mode="dark"`
- `FlamegraphRenderer` 默认值为 `themePreset="kylin"`、`themeMode="auto"`
- `Box` 也支持同样的新主题参数；旧的 `theme="dark" | "light" | "kylin"` 继续可用

旧 API 继续兼容，映射关系如下：

- `colorMode="dark"` => `themePreset="default"` + `themeMode="dark"`
- `colorMode="light"` => `themePreset="default"` + `themeMode="light"`
- `colorMode="kylin"` => `themePreset="kylin"` + `themeMode="light"`
- 如果新旧 API 同时传入，`themePreset` / `themeMode` 优先

推荐宿主接入方式：

- 品牌皮肤固定为麒麟风格时，传 `themePreset="kylin" themeMode="auto"`
- 宿主不需要再手动根据 `isDark` 在 `dark` / `kylin` 之间切换
- 如果你还在用 `Box` 包裹火焰图，建议同步给 `Box` 传入同一套新主题参数

## 数据格式

```ts
interface Profile {
  version: number
  flamebearer: {
    names: string[]
    levels: number[][]
    numTicks: number
    maxSelf: number
    sampleRate?: number
    units?: string
    leftTicks?: number
    rightTicks?: number
  }
  metadata: {
    appName?: string
    spyName?: string
    format: 'single' | 'double'
    sampleRate: number
    units: string
  }
}
```

数据格式说明：
- 单视图（single）：每 4 个数字为一组 `[offset, total, self, nameIndex]`
- 差分视图（double）：每 7 个数字为一组 `[leftOffset, leftTotal, leftSelf, rightOffset, rightTotal, rightSelf, nameIndex]`
npm package: @kylincloud/flamegraph-core
Description: KylinCloud flamegraph core engine (framework-agnostic)
Latest version: 0.37.4

# @kylincloud/flamegraph-core

KylinCloud 火焰图渲染核心引擎（框架无关），提供数据模型、解码、转换与渲染辅助能力。

## 适用场景

- 非 React / Vue 场景的 Profile 数据处理
- 自定义渲染管线或服务端预处理
- Profile 转换、Diff、导出等工具能力

> 该包通常由 `@kylincloud/flamegraph` / `@kylincloud/flamegraph-vue` 间接依赖，业务侧一般不需要单独安装。

## 安装（需要时）

```bash
# npm
npm install @kylincloud/flamegraph-core

# pnpm
pnpm add @kylincloud/flamegraph-core
```

## 快速上手

```ts
import { normalize, diffTwoProfiles } from '@kylincloud/flamegraph-core'

// 统一成可消费的 Flamebearer 结构（自动解码 delta levels）
const flamebearer = normalize({ profile })

// Diff 两份 profile（返回 double 格式）
const diffProfile = diffTwoProfiles(leftProfile, rightProfile)
```

## 数据格式

```ts
interface Profile {
  version: number
  flamebearer: {
    names: string[]
    levels: number[][]
    numTicks: number
    maxSelf: number
    sampleRate?: number
    units?: string
    leftTicks?: number
    rightTicks?: number
  }
  metadata: {
    appName?: string
    spyName?: string
    format: 'single' | 'double'
    sampleRate: number
    units: string
  }
}
```

数据格式说明：
- 单视图（single）：每 4 个数字为一组 `[offset, total, self, nameIndex]`
- 差分视图（double）：每 7 个数字为一组 `[leftOffset, leftTotal, leftSelf, rightOffset, rightTotal, rightSelf, nameIndex]`
npm package: @kylincloud/flamegraph-vue
Description: Vue 3 adapter for kylincloud flamegraph
Latest version: 0.37.4

# @kylincloud/flamegraph-vue

一个可复用的火焰图 / 差分火焰图组件库（Vue 3 适配层），基于 Pyroscope flamegraph 思路，适用于 CPU / 内存等采样型 Profiling 数据。

> 说明：本包主要服务于内部项目，API 在 0.x 阶段可能会有不兼容调整，请以当前版本导出的实际 API 为准。

## 功能特性

- 支持单视图与 Diff 差分视图
- 支持表格 / 火焰图 / 表格 + 火焰图 / Sandwich 等布局
- 交互：悬停提示、点击缩放、滚轮缩放、拖拽平移、右键菜单
- 函数名搜索与高亮
- 内置 i18n，中英文自动切换
- 两轴主题：`themePreset` + `themeMode`，支持自动跟随宿主暗色状态
- 保留 `colorMode` 兼容，Web Worker 加速

## 安装

```bash
# npm
npm install @kylincloud/flamegraph-vue

# pnpm
pnpm add @kylincloud/flamegraph-vue
```

> 依赖 `@kylincloud/flamegraph-core` 已由本包内部引入，一般不需要在业务侧单独安装。

**peer 依赖：**
- `vue >= 3.3.0`
- `true-myth ^5.1.2`
- `zod ^3.11.6`

## 快速上手

```vue
<template>
  <FlamegraphRendererVue
    :profile="profile"
    theme-preset="kylin"
    theme-mode="auto"
    locale="zh-CN"
  />
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
import { FlamegraphRendererVue } from '@kylincloud/flamegraph-vue'
import type { Profile } from '@kylincloud/flamegraph-vue'

const profile = shallowRef<Profile>({
  version: 1,
  flamebearer: {
    names: ['total', 'fnA', 'fnB'],
    levels: [[0, 100, 0, 0]],
    numTicks: 100,
    maxSelf: 100,
  },
  metadata: {
    appName: 'demo',
    spyName: 'cpu',
    format: 'single',
    sampleRate: 100,
    units: 'samples',
  },
})
</script>
```

> 推荐使用 `profile` prop 而非 `flamebearer`。`profile` 会自动处理 delta 编码的解码。

## 主题模型

推荐使用新主题 API：

```vue
<FlamegraphRendererVue
  :profile="profile"
  theme-preset="kylin"
  theme-mode="auto"
/>
```

- `themePreset?: 'default' | 'kylin'`
- `themeMode?: 'auto' | 'light' | 'dark'`
- `themeMode="auto"` 会优先检查最近宿主节点上的暗色标记，并兼容 `html.dark`、`data-theme="dark"`、`data-theme-mode="dark"`、`data-flamegraph-theme-mode="dark"`
- 渲染器默认值为 `themePreset="kylin"`、`themeMode="auto"`

旧 API 继续兼容，映射关系如下：

- `colorMode="dark"` => `themePreset="default"` + `themeMode="dark"`
- `colorMode="light"` => `themePreset="default"` + `themeMode="light"`
- `colorMode="kylin"` => `themePreset="kylin"` + `themeMode="light"`
- 如果新旧 API 同时传入，`themePreset` / `themeMode` 优先

推荐宿主接入方式：

- 品牌皮肤固定为麒麟风格时，直接传 `theme-preset="kylin" theme-mode="auto"`
- 宿主不需要再手动根据 `isDark` 在 `dark` / `kylin` 之间切换
- 右键菜单等 Teleport 到 `body` 的节点会继承组件解析后的主题，无需业务额外处理

## 数据格式

```ts
interface Profile {
  version: number
  flamebearer: {
    names: string[]
    levels: number[][]
    numTicks: number
    maxSelf: number
    sampleRate?: number
    units?: string
    leftTicks?: number
    rightTicks?: number
  }
  metadata: {
    appName?: string
    spyName?: string
    format: 'single' | 'double'
    sampleRate: number
    units: string
  }
}
```

数据格式说明：
- 单视图（single）：每 4 个数字为一组 `[offset, total, self, nameIndex]`
- 差分视图（double）：每 7 个数字为一组 `[leftOffset, leftTotal, leftSelf, rightOffset, rightTotal, rightSelf, nameIndex]`