github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/components/ChartTitle.tsx (about)

     1  import React, { ReactNode } from 'react';
     2  import Color from 'color';
     3  import clsx from 'clsx';
     4  import styles from './ChartTitle.module.scss';
     5  
     6  const chartTitleKeys = {
     7    objects: 'Total number of objects in RAM',
     8    goroutines: 'Total number of goroutines',
     9    bytes: 'Total amount of RAM',
    10    samples: 'Total CPU time',
    11    lock_nanoseconds: 'Total time spent waiting on locks',
    12    lock_samples: 'Total number of contended locks',
    13    diff: 'Baseline vs. Comparison Diff',
    14    trace_samples: 'Total aggregated span duration',
    15    exceptions: 'Total number of exceptions thrown',
    16    unknown: '',
    17  
    18    baseline: 'Baseline Flamegraph',
    19    comparison: 'Comparison Flamegraph',
    20    selection_included: 'Selection-included Exemplar Flamegraph',
    21    selection_excluded: 'Selection-excluded Exemplar Flamegraph',
    22  };
    23  
    24  interface ChartTitleProps {
    25    children?: ReactNode;
    26    className?: string;
    27    color?: Color;
    28    icon?: ReactNode;
    29    postfix?: ReactNode;
    30    titleKey?: keyof typeof chartTitleKeys;
    31  }
    32  
    33  export default function ChartTitle({
    34    children,
    35    className,
    36    color,
    37    icon,
    38    postfix,
    39    titleKey = 'unknown',
    40  }: ChartTitleProps) {
    41    return (
    42      <div className={clsx([styles.chartTitle, className])}>
    43        {(icon || color) && (
    44          <span
    45            className={clsx(styles.colorOrIcon, icon && styles.icon)}
    46            style={
    47              !icon && color ? { backgroundColor: color.rgb().toString() } : {}
    48            }
    49          >
    50            {icon}
    51          </span>
    52        )}
    53        <p className={styles.title}>{children || chartTitleKeys[titleKey]}</p>
    54        {postfix}
    55      </div>
    56    );
    57  }