original hsr style #12

client/src/components/Graph.vue

@@ -86,7 +86,7 @@ async function resolveDataThreshold(range: TimeRange): Promise<{
 // TODO: remove code repetition
 async function resolveDataAnomaly(range: TimeRange): Promise<{
   timeserie: LineTimeSerie[],
-
+  bounds: [number, [number, number]][],
   segments: Segment[]
 }> {
 
@@ -107,18 +107,9 @@ async function resolveDataAnomaly(range: TimeRange): Promise<{
           target: "HSR",
           datapoints: hsr.map(([t, v, [l, u]]) => [t, v]),
           color: 'red'
-        },
-        {
-          target: "HSR_Upper_bound",
-          datapoints: hsr.map(([t, v, [u, l]]) => [t, u]),
-          color: 'red'
-        },
-        { 
-          target: "HSR_Lower_bound",
-          datapoints: hsr.map(([t, v, [u, l]]) => [t, l]),
-          color: 'red'
         }
       ],
+      bounds: hsr.map(([t, v, [u, l]]) => [t, [u, l]]),
       segments: segments,
     }
   } catch (e) {

client/src/components/pods/anomaly_pod.ts

@@ -8,12 +8,17 @@ import { SegmentsSet } from '@/types/segment_set';
 
 export type UpdateDataCallback = (range: TimeRange) => Promise<{
   timeserie: LineTimeSerie[],
+  bounds: [number, [number, number]][],
   segments: Segment[]
 }>;
 
+import * as _ from 'lodash';
+
 
 export class AnomalyPod extends HasticPod<UpdateDataCallback> {
 
+  _bounds: [number, [number, number]][];
+
   constructor(
     el: HTMLElement,
     udc: UpdateDataCallback,
@@ -36,15 +41,45 @@ export class AnomalyPod extends HasticPod<UpdateDataCallback> {
     this.udc({ from, to })
       .then(resp => {
         this.updateSegments(resp.segments);
+        this.updateBounds(resp.bounds);
         this.updateData(resp.timeserie, undefined, true);
+        
       })
       .catch(() => { /* set "error" message */ })
   }
 
+  renderMetrics() {
+    this.renderBounds()
+    super.renderMetrics();
+    
+  }
+
+  updateBounds(bounds: [number, [number, number]][]) {
+    this._bounds = bounds;
+  }
+
+  renderBounds() {
+    
+    // TODO: check the case when this._bounds == undefined
+    if(this._bounds == undefined) {
+      return;
+    }
+
+    const pointsUp = this._bounds.map(([t, [u, _]]) => [t, u])
+    const pointsDown = this._bounds.map(([t, [_, l]]) => [t, l]);
+
+    const points = pointsUp.reverse().concat(pointsDown)
+      .map(([t, v]) => `${this.xScale(t)},${this.yScale(v)}`)
+      .join(' ')
 
-  protected updateSegments(segments: Segment[]): void {
-    this.segmentSet.clear();
-    this.segmentSet.setSegments(segments);
+    this.metricContainer
+      .append('g')
+      .append('polygon')
+      .attr('fill', 'green')
+      .attr('stroke', 'none')
+      .attr('fill-opacity', 0.2)
+      .attr('pointer-events', 'none')
+      .attr('points', points);
   }
 
 }

client/src/components/pods/hastic_pod.ts

@@ -41,7 +41,6 @@ export abstract class HasticPod<T> extends LinePod {
     this.renderSegments();
   }
 
-
   protected addEvents(): void {
     this.initBrush();
     this.initPan();
@@ -103,6 +102,11 @@ export abstract class HasticPod<T> extends LinePod {
     this.fetchData();
   }
 
+  protected updateSegments(segments: Segment[]): void {
+    this.segmentSet.clear();
+    this.segmentSet.setSegments(segments);
+  }
+
   abstract fetchData();
 
 }

client/src/components/pods/pattern_pod.ts

@@ -178,12 +178,6 @@ export class PatternPod extends HasticPod<UpdateDataCallback> {
 
   }
 
-  // TODO: maybe not override this
-  protected updateSegments(segments: Segment[]): void {
-    this.segmentSet.clear();
-    this.segmentSet.setSegments(segments);
-  }
-
   // TODO: move to "controller"
   private _tempIdCounted = -1;
   public getNewTempSegmentId(): SegmentId {

client/src/components/pods/threshold_pod.ts

@@ -41,10 +41,4 @@ export class ThresholdPod extends HasticPod<UpdateDataCallback> {
       .catch(() => { /* set "error" message */ })
   }
 
-  // TODO: maybe not override this
-  protected updateSegments(segments: Segment[]): void {
-    this.segmentSet.clear();
-    this.segmentSet.setSegments(segments);
-  }
-
 }

client/src/views/Home.vue

@@ -22,7 +22,7 @@
         Holde key <pre>D</pre> to delete patterns
         <br/>
         <hr/>
-        Correlation score: 
+        Correlation score:
         <input :value="analyticUnitConfig.correlation_score" @change="correlationScoreChange" /> <br/>
         Anti correlation score: 
         <input :value="analyticUnitConfig.anti_correlation_score" @change="antiCorrelationScoreChange" /> <br/>