github.com/grafana/pyroscope@v1.18.0/public/app/components/TimelineChart/CrosshairSync.plugin.ts (about)

     1  const defaultOptions = {
     2    syncCrosshairsWith: [],
     3  };
     4  
     5  // Enhances the default Plot object with the API from the crosshair plugin
     6  // https://github.com/flot/flot/blob/de34ce947d8ebfb2cac0b682a130ba079d8d654b/source/jquery.flot.crosshair.js#L74
     7  type PlotWithCrosshairsSupport = jquery.flot.plot &
     8    jquery.flot.plotOptions & {
     9      setCrosshair(pos: { x: number; y: number }): void;
    10      clearCrosshair(): void;
    11    };
    12  
    13  (function ($) {
    14    function init(plot: PlotWithCrosshairsSupport) {
    15      function getOptions() {
    16        return plot.getOptions() as jquery.flot.plotOptions &
    17          typeof defaultOptions;
    18      }
    19  
    20      function accessExternalInstance(id: string) {
    21        // Access another flotjs instance
    22        // https://github.com/flot/flot/blob/de34ce947d8ebfb2cac0b682a130ba079d8d654b/source/jquery.flot.js#L969
    23        const p: PlotWithCrosshairsSupport = $(`#${id}`).data('plot');
    24        return p;
    25      }
    26  
    27      function onPlotHover(
    28        syncCrosshairsWith: (typeof defaultOptions)['syncCrosshairsWith'],
    29        e: unknown,
    30        position: { x: number; y: number }
    31      ) {
    32        syncCrosshairsWith.forEach((id) =>
    33          accessExternalInstance(id).setCrosshair(position)
    34        );
    35      }
    36  
    37      function clearCrosshairs(
    38        syncCrosshairsWith: (typeof defaultOptions)['syncCrosshairsWith']
    39      ) {
    40        syncCrosshairsWith.forEach((id) =>
    41          accessExternalInstance(id).clearCrosshair()
    42        );
    43      }
    44  
    45      plot.hooks!.bindEvents!.push(() => {
    46        const options = getOptions();
    47  
    48        plot
    49          .getPlaceholder()
    50          .bind('plothover', onPlotHover.bind(null, options.syncCrosshairsWith));
    51  
    52        plot
    53          .getPlaceholder()
    54          .bind(
    55            'mouseleave',
    56            clearCrosshairs.bind(null, options.syncCrosshairsWith)
    57          );
    58      });
    59  
    60      plot.hooks!.shutdown!.push(() => {
    61        const options = getOptions();
    62  
    63        clearCrosshairs(options.syncCrosshairsWith);
    64  
    65        plot
    66          .getPlaceholder()
    67          .bind(
    68            'mouseleave',
    69            clearCrosshairs.bind(null, options.syncCrosshairsWith)
    70          );
    71  
    72        plot
    73          .getPlaceholder()
    74          .unbind(
    75            'plothover',
    76            onPlotHover.bind(null, options.syncCrosshairsWith)
    77          );
    78      });
    79    }
    80  
    81    $.plot.plugins.push({
    82      init,
    83      options: defaultOptions,
    84      name: 'crosshair-sync',
    85      version: '1.0',
    86    });
    87  })(jQuery);
    88  
    89  // TS1208: 'CrosshairSync.plugin.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file.
    90  // Add an import, export, or an empty 'export {}' statement to make it a module.
    91  export {};