From f5dffa621b211ec86308ad8bbce559cfade549d8 Mon Sep 17 00:00:00 2001
From: Lovedeep Singh <lovedeepsingh@C02DF7AYML7H.local>
Date: Tue, 13 Sep 2022 00:58:36 +0530
Subject: [PATCH 1/3] fixed legend overlap issue upto 48 element

---
 src/line-graph.js | 56 +++++++++++++++++++++++------------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/line-graph.js b/src/line-graph.js
index a745592..1a00541 100644
--- a/src/line-graph.js
+++ b/src/line-graph.js
@@ -275,14 +275,14 @@ export class LineGraph extends HTMLElement {
    */
   setLegend(svg, height, data) {
     // These variables are used to create legends and also adjust distance between different legends
-    var j = 6;
-    var k = 12;
-    var l = 6;
-    var m = 12;
-    var n = 18;
-    var o = 24;
-    var p = 18;
-    var q = 24;
+    var j = 12;
+    var k = 24;
+    var l = 12;
+    var m = 24;
+    var n = 36;
+    var o = 48;
+    var p = 36;
+    var q = 48;
    
 
     var legend = svg.append("g")
@@ -307,44 +307,44 @@ export class LineGraph extends HTMLElement {
 
       .attrs({
         "x": (d, i) => {
-          if(i < 6) {
+          if(i < 12) {
             return 18;
           }
 
-          if(i >= 6 && i < 12) {
+          if(i >= 12 && i < 24) {
             return 220;
           } 
 
-          if( i >= 12 && i < 18) {
+          if( i >= 24 && i < 36) {
             return 422;
           }
 
-          if( i >= 18 && i < 24) {
+          if( i >= 36 && i < 48) {
             return 624;
           }
 
-          if( i >= 24 && i < 30) {
+          if( i >= 48 && i < 60) {
             return 826;
           }
         },
         "y": (d, i) => {
-            if(i < 6) {
+            if(i < 12) {
               return i * 20 + 30;
             }
 
-            if(i >= 6 && i < 12) {
+            if(i >= 12 && i < 24) {
               return (i - j) * 20 + 30;
             }
             
-            if(i >= 12 && i < 18) {
+            if(i >= 24 && i < 36) {
               return (i - k) * 20 + 30;
             }
 
-            if(i >= 18 && i < 24) {
+            if(i >= 36 && i < 48) {
               return (i - p) * 20 + 30;
             }
             
-            if(i >= 24 && i < 30) {
+            if(i >= 48 && i < 60) {
               return (i - q) * 20 + 30;
             }
 
@@ -369,45 +369,45 @@ export class LineGraph extends HTMLElement {
         "x": (d, i) => {    
           
 
-          if(i < 6) {
+          if(i < 12) {
             return 36;
           }
 
-          if(i >= 6 && i < 12) {
+          if(i >= 12 && i < 24) {
             return 238;
           } 
 
-          if( i >= 12 && i < 18) {
+          if( i >= 24 && i < 36) {
             return 440;
           }
 
-          if( i >= 18 && i < 24) {
+          if( i >= 36 && i < 48) {
             return 642;
           }
 
-          if( i >= 24 && i < 30) {
+          if( i >= 48 && i < 60) {
             return 844;
           }
         },
         "y": (d, i) => {
 
-          if(i < 6) {
+          if(i < 12) {
             return i * 20 + 39;
           }
 
-          if(i >= 6 && i < 12) {
+          if(i >= 12 && i < 24) {
             return (i - l) * 20 + 39;
           }
 
-          if(i >= 12 && i < 18) {
+          if(i >= 24 && i < 36) {
             return (i - m) * 20 + 39;
           }
 
-          if(i >= 18 && i < 24) {
+          if(i >= 36 && i < 48) {
             return (i - n) * 20 + 39;
           }
           
-          if(i >= 24 && i < 30) {
+          if(i >= 48 && i < 60) {
             return (i - o) * 20 + 39;
           }
 

From 890420033bf541d89029dfe4afd8de4266e2ede2 Mon Sep 17 00:00:00 2001
From: lovedeep92 <lovedeep.singh@rackspace.com>
Date: Tue, 13 Sep 2022 16:20:42 +0530
Subject: [PATCH 2/3] make changes

---
 src/line-graph.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/line-graph.js b/src/line-graph.js
index 1a00541..5c2905a 100644
--- a/src/line-graph.js
+++ b/src/line-graph.js
@@ -480,7 +480,6 @@ export class LineGraph extends HTMLElement {
    * @param ttlD An object with key unit and color and group
    * @returns Tooltip html body
    */
-   
   tooltipTemplate(d,ttlD){
     return `
     <table>

From f10f450dcd094703130a0e47d103218ad4ddf438 Mon Sep 17 00:00:00 2001
From: lovedeep92 <lovedeep.singh@rackspace.com>
Date: Wed, 14 Sep 2022 02:22:21 +0530
Subject: [PATCH 3/3] add vertical scroller

---
 src/line-graph.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/line-graph.js b/src/line-graph.js
index 5c2905a..cc9c9d5 100644
--- a/src/line-graph.js
+++ b/src/line-graph.js
@@ -41,7 +41,20 @@ export class LineGraph extends HTMLElement {
       mode: 'open'
     });
     if (svg) {
-      this.shadowRoot.appendChild(svg);
+      const style = document.createElement("style");
+      style.textContent = `
+        .custom_div {
+          overflow-y:scroll; 
+          overflow-x:hidden;
+          width: 850px;
+          height: 300px;
+      }
+      `;
+      this.shadowRoot.appendChild(style);
+      let svg_new = document.createElement('div');
+      svg_new.setAttribute("class", "custom_div");
+      svg_new.append(svg);
+      this.shadowRoot.appendChild(svg_new);
       this.renderGraph(this.parseData(data), svg);
     }
   }