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

     1  import { formatAsOBject } from '@webapp/util/formatDate';
     2  import Color from 'color';
     3  
     4  // Same green as button
     5  export const ANNOTATION_COLOR = Color('#2ecc40');
     6  
     7  type FlotMarkings = {
     8    xaxis: {
     9      from: number;
    10      to: number;
    11    };
    12    yaxis?: {
    13      from: number;
    14      to: number;
    15    };
    16    color: Color;
    17  }[];
    18  
    19  // Unify these types
    20  export interface Selection {
    21    from: string;
    22    to: string;
    23    color: Color;
    24    overlayColor: Color;
    25  }
    26  
    27  // FIXME: right now the selection functionality is spread in 2 places
    28  // normal markings (function below)
    29  // and in the TimelineChartSelection plugin
    30  // which is confusing and should be fixed
    31  function constructSelection(
    32    m: Selection,
    33    selectionType: 'double' | 'single'
    34  ): FlotMarkings {
    35    const from = new Date(formatAsOBject(m.from)).getTime();
    36    const to = new Date(formatAsOBject(m.to)).getTime();
    37  
    38    // 'double' selection uses built-in Flot selection
    39    // built-in Flot selection for 'single' case becomes 'transparent'
    40    // to use custom apperance and color for it
    41    const boundary = {
    42      lineWidth: 1,
    43      color: selectionType === 'double' ? m.color.rgb() : Color('transparent'),
    44    };
    45  
    46    return [
    47      {
    48        xaxis: { from, to },
    49        color: selectionType === 'double' ? m.overlayColor : Color('transparent'),
    50      },
    51  
    52      // A single vertical line indicating boundaries from both sides (left and right)
    53      { ...boundary, xaxis: { from, to: from } },
    54      { ...boundary, xaxis: { from: to, to } },
    55    ];
    56  }
    57  
    58  /**
    59   * generate markings from selection
    60   */
    61  export function markingsFromSelection(
    62    selectionType: 'single' | 'double',
    63    left?: Selection,
    64    right?: Selection
    65  ): FlotMarkings {
    66    let res: FlotMarkings = [];
    67  
    68    if (left) {
    69      res = res.concat(constructSelection(left, selectionType));
    70    }
    71    if (right) {
    72      res = res.concat(constructSelection(right, selectionType));
    73    }
    74    return res;
    75  }