From d1a172bcf433d2b2ea040d57d90a52ace9488f21 Mon Sep 17 00:00:00 2001
From: Alexey Velikiy <cg@corpglory.com>
Date: Fri, 26 Nov 2021 15:26:05 +0300
Subject: [PATCH] render seasonality grid

---
 client/src/components/pods/anomaly_pod.ts | 27 +++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/client/src/components/pods/anomaly_pod.ts b/client/src/components/pods/anomaly_pod.ts
index 39c1400..bd76470 100644
--- a/client/src/components/pods/anomaly_pod.ts
+++ b/client/src/components/pods/anomaly_pod.ts
@@ -55,13 +55,11 @@ export class AnomalyPod extends HasticPod<UpdateDataCallback> {
   }
 
   renderHSR() {
-    
     // TODO: check the case when this._bounds == undefined
     if(this._hsr == undefined) {
       return;
     }
 
-    
     const pointsUp = this._hsr.ts.map(([t, v, [p, q]]) => [t, q]);
     const pointsDown = this._hsr.ts.map(([t, v, [p, q]]) => [t, p]);
 
@@ -78,8 +76,29 @@ export class AnomalyPod extends HasticPod<UpdateDataCallback> {
       .attr('pointer-events', 'none')
       .attr('points', points);
 
-    // TODO: render timestamp
-    // TODO: render seasonality grid
+    // render timestamp
+
+
+    let ts = this._hsr.timestamp;
+    this._renderHSRGridLine(ts, true);
+    ts -= this._hsr.seasonality;
+    while(ts > this.state.xValueRange[0]) {
+      this._renderHSRGridLine(ts, false);
+      ts -= this._hsr.seasonality;
+    }
+  }
+
+  _renderHSRGridLine(timestamp, head) {
+    const x = this.xScale(timestamp);
+    
+    this.metricContainer
+      .append('line')
+      .attr('x1', x)
+      .attr('x2', x)
+      .attr('y1', 0)
+      .attr('y2', this.height)
+      .attr("style", `stroke:blue;stroke-width: ${head ? 2 : 1}`)
+      .attr('opacity', head ? 0.5 : 0.3)
   }
 
 }
\ No newline at end of file