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

     1  import React from 'react';
     2  import Color from 'color';
     3  import styles from './TimelineTooltip.module.css';
     4  
     5  export interface TimelineTooltipProps {
     6    timeLabel: string;
     7    items: {
     8      color?: Color;
     9      value: string;
    10      label: string;
    11    }[];
    12  }
    13  
    14  // TimelineTooltip is a generic tooltip to be used with the timeline
    15  // It contains no logic and render items as they are
    16  // Any formatting should be performed by the caller
    17  function TimelineTooltip({ timeLabel, items }: TimelineTooltipProps) {
    18    return (
    19      <div>
    20        <div className={styles.time}>{timeLabel}</div>
    21        {items.map((a) => (
    22          <TimelineTooltipItem
    23            key={`${a.label}-${a.value}`}
    24            color={a.color}
    25            label={a.label}
    26            value={a.value}
    27          />
    28        ))}
    29      </div>
    30    );
    31  }
    32  
    33  function TimelineTooltipItem({
    34    color,
    35    label,
    36    value,
    37  }: TimelineTooltipProps['items'][number]) {
    38    const ColorDiv = color ? (
    39      <div
    40        className={styles.valueColor}
    41        style={{ backgroundColor: Color.rgb(color).toString() }}
    42      />
    43    ) : null;
    44  
    45    return (
    46      <div className={styles.valueWrapper}>
    47        {ColorDiv}
    48        <div>{label}:</div>
    49        <div className={styles.closest}>{value}</div>
    50      </div>
    51    );
    52  }
    53  
    54  export { TimelineTooltip };