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

     1  import React, { FC, useMemo } from 'react';
     2  import Color from 'color';
     3  import { getFormatter } from '@pyroscope/flamegraph/src/format/format';
     4  import { Profile } from '@pyroscope/models/src';
     5  import { TimelineTooltip } from '../../TimelineTooltip';
     6  import { TooltipCallbackProps } from '../Tooltip.plugin';
     7  
     8  type ExploreTooltipProps = TooltipCallbackProps & {
     9    profile?: Profile;
    10  };
    11  
    12  const ExploreTooltip: FC<ExploreTooltipProps> = ({
    13    timeLabel,
    14    values,
    15    profile,
    16  }) => {
    17    const numTicks = profile?.flamebearer?.numTicks;
    18    const sampleRate = profile?.metadata?.sampleRate;
    19    const units = profile?.metadata?.units;
    20  
    21    const formatter = useMemo(
    22      () =>
    23        numTicks &&
    24        typeof sampleRate === 'number' &&
    25        units &&
    26        getFormatter(numTicks, sampleRate, units),
    27      [numTicks, sampleRate, units]
    28    );
    29  
    30    const total = useMemo(
    31      () =>
    32        values?.length
    33          ? values?.reduce((acc, current) => acc + (current.closest?.[1] || 0), 0)
    34          : 0,
    35      [values]
    36    );
    37  
    38    const formatValue = (v: number) => {
    39      if (formatter && typeof sampleRate === 'number') {
    40        const value = formatter.format(v, sampleRate);
    41        let percentage = (v / total) * 100;
    42  
    43        if (Number.isNaN(percentage)) {
    44          percentage = 0;
    45        }
    46  
    47        return `${value} (${percentage.toFixed(2)}%)`;
    48      }
    49  
    50      return '0';
    51    };
    52  
    53    const items = values.map((v) => {
    54      return {
    55        label: v.tagName || '',
    56        color: Color.rgb(v.color),
    57        value: formatValue(v?.closest?.[1] || 0),
    58      };
    59    });
    60  
    61    return <TimelineTooltip timeLabel={timeLabel} items={items} />;
    62  };
    63  
    64  export default ExploreTooltip;