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

     1  /* eslint-disable import/first */
     2  import 'react-dom';
     3  import React from 'react';
     4  
     5  import ReactFlot from 'react-flot';
     6  import 'react-flot/flot/jquery.flot.time.min';
     7  import '@webapp/components/TimelineChart/Selection.plugin';
     8  import 'react-flot/flot/jquery.flot.crosshair';
     9  import '@webapp/components/TimelineChart/TimelineChartPlugin';
    10  import '@webapp/components/TimelineChart/Tooltip.plugin';
    11  import '@webapp/components/TimelineChart/Annotations.plugin';
    12  import '@webapp/components/TimelineChart/ContextMenu.plugin';
    13  import '@webapp/components/TimelineChart/CrosshairSync.plugin';
    14  
    15  interface TimelineChartProps {
    16    onSelect: (from: string, until: string) => void;
    17    className: string;
    18    ['data-testid']?: string;
    19  }
    20  
    21  class TimelineChart extends ReactFlot<TimelineChartProps> {
    22    componentDidMount() {
    23      this.draw();
    24  
    25      // TODO: use ref
    26      $(`#${this.props.id}`).bind('plotselected', (event, ranges) => {
    27        this.props.onSelect(
    28          Math.round(ranges.xaxis.from / 1000).toString(),
    29          Math.round(ranges.xaxis.to / 1000).toString()
    30        );
    31      });
    32    }
    33  
    34    componentDidUpdate() {
    35      this.draw();
    36    }
    37  
    38    componentWillReceiveProps() {}
    39  
    40    // copied directly from ReactFlot implementation
    41    // https://github.com/rodrigowirth/react-flot/blob/master/src/ReactFlot.jsx
    42    render() {
    43      const style = {
    44        height: this.props.height || '100px',
    45        width: this.props.width || '100%',
    46      };
    47  
    48      return (
    49        <div
    50          data-testid={this.props['data-testid']}
    51          className={this.props.className}
    52          id={this.props.id}
    53          style={style}
    54        />
    55      );
    56    }
    57  }
    58  
    59  export default TimelineChart;