github.com/grafana/pyroscope@v1.18.0/public/app/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 '@pyroscope/components/TimelineChart/Selection.plugin';
     8  import 'react-flot/flot/jquery.flot.crosshair';
     9  import '@pyroscope/components/TimelineChart/TimelineChartPlugin';
    10  import '@pyroscope/components/TimelineChart/Tooltip.plugin';
    11  import '@pyroscope/components/TimelineChart/ContextMenu.plugin';
    12  import '@pyroscope/components/TimelineChart/CrosshairSync.plugin';
    13  import { rangeIsAcceptableForZoom } from './util';
    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        // Before invoking the onselect, we ensure the selection is valid
    28  
    29        const xAxisPixelsInChart = event.currentTarget.clientWidth;
    30  
    31        if (
    32          rangeIsAcceptableForZoom(
    33            ranges.xaxis,
    34            this.props.data,
    35            xAxisPixelsInChart
    36          )
    37        ) {
    38          this.props.onSelect(
    39            Math.round(ranges.xaxis.from / 1000).toString(),
    40            Math.round(ranges.xaxis.to / 1000).toString()
    41          );
    42        }
    43      });
    44    }
    45  
    46    componentDidUpdate() {
    47      this.draw();
    48    }
    49  
    50    componentWillReceiveProps() {}
    51  
    52    // copied directly from ReactFlot implementation
    53    // https://github.com/rodrigowirth/react-flot/blob/master/src/ReactFlot.jsx
    54    render() {
    55      const style = {
    56        height: this.props.height || '100px',
    57        width: this.props.width || '100%',
    58      };
    59  
    60      return (
    61        <div
    62          data-testid={this.props['data-testid']}
    63          className={this.props.className}
    64          id={this.props.id}
    65          style={style}
    66        />
    67      );
    68    }
    69  }
    70  
    71  export default TimelineChart;