Expand tooltips range like in segments rendering (#9)

src/controllers/anomaly_controller.ts

@@ -49,10 +49,10 @@ export class AnomalyController {
     return this._anomalySegmentsSearcher.bind(this);
   }
 
-  private _anomalySegmentsSearcher(point: number): AnomalySermentPair[] {
+  private _anomalySegmentsSearcher(point: number, rangeDist: number): AnomalySermentPair[] {
     var result: AnomalySermentPair[] = [];
     this._anomalyTypesSet.anomalyTypes.forEach(at => {
-      var segs = at.segments.findSegments(point);
+      var segs = at.segments.findSegments(point, rangeDist);
       segs.forEach(s => {
         result.push({ anomalyType: at, segment: s });
       })

src/graph_tooltip.ts

@@ -40,6 +40,7 @@ export class GraphTooltip {
     var seriesList = this.getSeriesFn();
     var allSeriesMode = this.panel.tooltip.shared;
     var group, value, absoluteTime, hoverInfo, i, series, seriesHtml, tooltipFormat;
+    var rangeDist = Math.abs(xAxes[0].max - xAxes[0].min);
 
     // if panelRelY is defined another panel wants us to show a tooltip
     // get pageX from position on x axis and pageY from relative position in original panel
@@ -113,7 +114,7 @@ export class GraphTooltip {
         plot.highlight(hoverInfo.index, hoverInfo.hoverIndex);
       }
 
-      seriesHtml += this._appendAnomaliesHTML(pos.x);
+      seriesHtml += this._appendAnomaliesHTML(pos.x, rangeDist);
 
       this._renderAndShow(absoluteTime, seriesHtml, pos, xMode);
     }
@@ -136,7 +137,7 @@ export class GraphTooltip {
 
       group += '<div class="graph-tooltip-value">' + value + '</div>';
 
-      group += this._appendAnomaliesHTML(pos.x);
+      group += this._appendAnomaliesHTML(pos.x, rangeDist);
 
       this._renderAndShow(absoluteTime, group, pos, xMode);
     }
@@ -188,9 +189,9 @@ export class GraphTooltip {
     }
   };
 
-  private _appendAnomaliesHTML(pos: number): string {
+  private _appendAnomaliesHTML(pos: number, rangeDist: number): string {
     var result = '';
-    var segments = this._anomalySegmentsSearcher(pos);
+    var segments = this._anomalySegmentsSearcher(pos, rangeDist);
     if(segments.length === 0) {
       return '';
     }

src/model/anomaly.ts

@@ -6,7 +6,7 @@ import { Metric } from './metric';
 import _ from 'lodash';
 
 export type AnomalySermentPair = { anomalyType: AnomalyType, segment: AnomalySegment };
-export type AnomalySegmentsSearcher = (point: number) => AnomalySermentPair[];
+export type AnomalySegmentsSearcher = (point: number, rangeDist: number) => AnomalySermentPair[];
 
 export type AnomalyKey = string;
 

src/model/segment_array.ts

@@ -47,8 +47,11 @@ export class SegmentArray<T extends Segment> implements SegmentsSet<T> {
     this._segments.push(segment);
   }
 
-  findSegments(point: number): T[] {
-    return this._segments.filter(s => (s.from <= point) && (point <= s.to));
+  findSegments(point: number, rangeDist: number): T[] {
+    return this._segments.filter(s => {
+      var expanded = s.expandDist(rangeDist, 0.01);
+      return (expanded.from <= point) && (point <= expanded.to);
+    });
   }
 
   removeInRange(from: number, to: number): T[] {

src/model/segment_set.ts

@@ -4,7 +4,7 @@ export interface SegmentsSet<T extends Segment> {
   getSegments(from?: number, to?: number): T[];
   setSegments(segments: T[]): void;
   addSegment(segment: T): void;
-  findSegments(point: number): T[];
+  findSegments(point: number, rangeDist: number): T[];
   removeInRange(from: number, to: number): T[];
   remove(key: SegmentKey): boolean;
   has(key: SegmentKey): boolean;