github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/DiffLegend.tsx (about)

     1  import React from 'react';
     2  import { NewDiffColor } from './color';
     3  import { FlamegraphPalette } from './colorPalette';
     4  import styles from './DiffLegend.module.css';
     5  
     6  export type sizeMode = 'small' | 'large';
     7  interface DiffLegendProps {
     8    palette: FlamegraphPalette;
     9    showMode: sizeMode;
    10  }
    11  
    12  export default function DiffLegend(props: DiffLegendProps) {
    13    const { palette, showMode } = props;
    14    const values = decideLegend(showMode);
    15  
    16    const color = NewDiffColor(palette);
    17  
    18    return (
    19      <div
    20        data-testid="flamegraph-legend"
    21        className={`${styles['flamegraph-legend']} ${styles['flamegraph-legend-list']}`}
    22      >
    23        {values.map((v) => (
    24          <div
    25            key={v}
    26            className={styles['flamegraph-legend-item']}
    27            style={{
    28              backgroundColor: color(v).rgb().toString(),
    29            }}
    30          >
    31            {v > 0 ? '+' : ''}
    32            {v}%
    33          </div>
    34        ))}
    35      </div>
    36    );
    37  }
    38  
    39  function decideLegend(showMode: sizeMode) {
    40    switch (showMode) {
    41      case 'large': {
    42        return [-100, -80, -60, -40, -20, -10, 0, 10, 20, 40, 60, 80, 100];
    43      }
    44  
    45      case 'small': {
    46        return [-100, -40, -20, 0, 20, 40, 100];
    47      }
    48  
    49      default:
    50        throw new Error(`Unsupported ${showMode}`);
    51    }
    52  }