github.com/grafana/pyroscope@v1.18.0/public/app/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  import profileMetrics from '../constants/profile-metrics.json';
     7  
     8  const typeToDescriptionMap: Record<string, string> = Object.values(
     9    profileMetrics
    10  ).reduce((acc, { type, description }) => ({ ...acc, [type]: description }), {});
    11  
    12  const chartTitleKeys = {
    13    ...typeToDescriptionMap,
    14    exception: typeToDescriptionMap.exceptions, // alias
    15    unknown: '',
    16  
    17    baseline: 'Baseline time range',
    18    comparison: 'Comparison time range',
    19    selection_included: 'Selection-included Exemplar Flamegraph',
    20    selection_excluded: 'Selection-excluded Exemplar Flamegraph',
    21  };
    22  
    23  type ChartTitleKey = keyof typeof chartTitleKeys;
    24  
    25  export interface ChartTitleProps {
    26    children?: ReactNode;
    27    className?: string;
    28    color?: Color;
    29    icon?: ReactNode;
    30    postfix?: ReactNode;
    31    titleKey?: ChartTitleKey;
    32  }
    33  
    34  export function getChartTitle(key: ChartTitleKey) {
    35    return chartTitleKeys[key];
    36  }
    37  
    38  export default function ChartTitle({
    39    children,
    40    className,
    41    color,
    42    icon,
    43    postfix,
    44    titleKey = 'unknown',
    45  }: ChartTitleProps) {
    46    return (
    47      <div className={clsx([styles.chartTitle, className])}>
    48        {(icon || color) && (
    49          <span
    50            className={clsx(styles.colorOrIcon, icon && styles.icon)}
    51            style={
    52              !icon && color ? { backgroundColor: color.rgb().toString() } : {}
    53            }
    54          >
    55            {icon}
    56          </span>
    57        )}
    58        <p className={styles.title}>{children || getChartTitle(titleKey)}</p>
    59        {postfix}
    60      </div>
    61    );
    62  }