Adjusted height of title so that plot filled up more space (#27)

* Adjusted height of title so that plot filled up more space

* Fixed title initial render in wrong location

* Changed title font size from 24px to 20px

Author: GarreBrenn

dist/topsoil.js

@@ -15500,7 +15500,7 @@ class AbstractPlot {
     constructor(root, data, options, layers) {
         this.root = root;
         this._margin = {
-            top: 110,
+            top: 50,
             right: 75,
             bottom: 75,
             left: 75
@@ -15523,7 +15523,8 @@ class AbstractPlot {
             .append("text")
             .attr("class", "title-text")
             .attr("font-family", "sans-serif")
-            .attr("font-size", "24px");
+            .attr("font-size", "20px")
+            .style("text-anchor", "middle");
         this.leftTextBox = this.svg
             .append("text")
             .attr("class", "left textbox")
@@ -15606,24 +15607,25 @@ class AbstractPlot {
             .attr("width", this._canvasWidth)
             .attr("height", this._canvasHeight);
         const titleDimensions = this.titleLabel.node().getBoundingClientRect();
+        console.log(this._margin.left + "," + this._margin.top);
         this.titleLabel
             .text(this._options.title)
-            .attr("x", (this._canvasWidth / 2) - (titleDimensions.width / 2))
-            .attr("y", -(this._margin.top / 2) + (titleDimensions.height / 3));
+            .attr("x", (this._canvasWidth / 2))
+            .attr("y", -(this._margin.top / 2));
         const textBoxWidth = (width / 2) - (titleDimensions.width / 2) - 10;
         //TODO: correct positioning
         this.leftTextBox
             //.text(this.leftText())
             .attr("x", ((width - this._canvasWidth) / 2))
-            .attr("y", ((height - this._canvasHeight) / 2) + 10)
+            .attr("y", ((height - this._canvasHeight) / 2) - 18)
             .attr("fill", "red")
             .attr("width", textBoxWidth);
         //TODO: correct positioning
         this.rightTextBox
             //.text(this.rightText())
             .attr("text-anchor", "end")
             .attr("x", this._canvasWidth + ((width - this._canvasWidth) / 2))
-            .attr("y", ((height - this._canvasHeight) / 2) + 10)
+            .attr("y", ((height - this._canvasHeight) / 2) - 18)
             .attr("fill", "red")
             .attr("width", textBoxWidth);
     }

dist/topsoil.js.map

@@ -13,7 +13,7 @@ export default abstract class AbstractPlot implements Plot {
   protected _data: DataEntry[];
   protected _options: Config;
   protected _margin = {
-    top: 110,
+    top: 50,
     right: 75,
     bottom: 75,
     left: 75
@@ -56,7 +56,8 @@ export default abstract class AbstractPlot implements Plot {
       .append("text")
       .attr("class", "title-text")
       .attr("font-family", "sans-serif")
-      .attr("font-size", "24px");
+      .attr("font-size", "20px")
+      .style("text-anchor", "middle")
 
     this.leftTextBox = this.svg
       .append("text")
@@ -163,18 +164,20 @@ export default abstract class AbstractPlot implements Plot {
 
     const titleDimensions = (this.titleLabel.node() as SVGElement).getBoundingClientRect();
 
+    console.log(this._margin.left + "," + this._margin.top);
+
     this.titleLabel
       .text(this._options.title)
-      .attr("x", (this._canvasWidth / 2) - (titleDimensions.width / 2))
-      .attr("y", -(this._margin.top / 2) + (titleDimensions.height / 3));
+      .attr("x", (this._canvasWidth / 2))
+      .attr("y", -(this._margin.top / 2));
 
     const textBoxWidth = (width / 2) - (titleDimensions.width / 2) - 10;
 
     //TODO: correct positioning
     this.leftTextBox
       //.text(this.leftText())
       .attr("x", ((width - this._canvasWidth) / 2))
-      .attr("y", ((height - this._canvasHeight) / 2) + 10)
+      .attr("y", ((height - this._canvasHeight) / 2) - 18)
       .attr("fill", "red")
       .attr("width", textBoxWidth);
 
@@ -183,7 +186,7 @@ export default abstract class AbstractPlot implements Plot {
       //.text(this.rightText())
       .attr("text-anchor", "end")
       .attr("x", this._canvasWidth + ((width - this._canvasWidth) / 2))
-      .attr("y", ((height - this._canvasHeight) / 2) + 10)
+      .attr("y", ((height - this._canvasHeight) / 2) - 18)
       .attr("fill", "red")
       .attr("width", textBoxWidth);
   }