increase size of d3 history chart and add container around it

Author: gpanciera

src/app/components/Chart.jsx

@@ -48,14 +48,14 @@ class Chart extends Component {
   maked3Tree() {
 
     this.removed3Tree();
-    const margin = {
-      top: 0,
-      right: 60,
-      bottom: 200,
-      left: 120,
-    };
-    const width = 600 - margin.right - margin.left;
-    const height = 700 - margin.top - margin.bottom;
+    // const margin = {
+    //   top: 0,
+    //   right: 60,
+    //   bottom: 200,
+    //   left: 120,
+    // };
+    const width = 600; // - margin.right - margin.left;
+    const height = 600; // 700 - margin.top - margin.bottom;
     const chartContainer = d3.select(this.chartRef.current)
       .append('svg') // chartContainer is now pointing to svg
       .attr('width', width)
@@ -207,7 +207,11 @@ class Chart extends Component {
   }
 
   render() {
-    return <div ref={this.chartRef} className="d3Container" />;
+    return (
+      <div className="history-d3-container">
+        <div ref={this.chartRef} className="d3Container" />
+      </div>
+    );
   }
 }
 

src/app/styles/components/d3graph.css

@@ -93,6 +93,14 @@ div.tooltip {
   left: 0;
 }
 
+.history-d3-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100% - 70px);
+  /* border: 2px solid red; */
+}
+
 .perfContainer {
   display: flex;
   flex-direction: column;