Merge pull request #160 from RhoInc/fix-y-tick-labels

Fix y tick labels
RhoInc · Jul 23, 2019 · 0dce4ff · 0dce4ff
2 parents 8661a8f + eedc24b
commit 0dce4ff
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 5,020 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/queryOverview.js b/queryOverview.js
@@ -718,9 +718,7 @@
         Other controls
       \---------------------------------------------------------------------------------****/
             '.qo-control-grouping--other-controls {' +
-            '    float: right;' + //'    display: flex;' +
-                //'    flex-wrap: wrap;' +
-                //'    justify-content: space-evenly;' +
+                '    float: right;' +
                 '    width: 25%;' +
                 '}',
             '.qo-control-grouping--other-controls .control-group {' +
@@ -813,10 +811,6 @@
                 '    padding-left: 8px;' +
                 '    margin-right: 5px !important;' +
                 '}',
-            '.qo-component--chart .y.axis .tick text {' +
-                '    font-family: "Lucida Console", "Courier New", "Monospace";' +
-                '    font-size: 14px;' +
-                '}',
             '.qo-footnote {' +
                 '    width: 100%;' +
                 '    text-align: center;' +
@@ -1645,7 +1639,7 @@
                 })
             ) *
                 this.config.fontSize *
-                0.5 +
+                0.6 +
             this.config.fontSize * 1.5 * 1.5 +
             6; //Set the left margin to the minimum of one quarter of the container width and the maximum number of characters in the y-axis tick labels (minimum: 100 pixels).
 

diff --git a/src/chart/onDraw/setLeftMargin.js b/src/chart/onDraw/setLeftMargin.js
@@ -8,7 +8,7 @@ export default function setLeftMargin() {
 
     //Find maximum number of characters in the y-axis tick labels (minimum: 7 characters).
     this.config.maxYAxisTickLabelLength =
-        Math.max(7, max(this.y_dom, d => d.length)) * this.config.fontSize * 0.5 +
+        Math.max(7, max(this.y_dom, d => d.length)) * this.config.fontSize * 0.6 +
         this.config.fontSize * 1.5 * 1.5 +
         6;
 

diff --git a/src/styles.js b/src/styles.js
@@ -63,9 +63,6 @@ export default function styles(document) {
 
                 '.qo-control-grouping--other-controls {' +
                 '    float: right;' +
-                //'    display: flex;' +
-                //'    flex-wrap: wrap;' +
-                //'    justify-content: space-evenly;' +
                 '    width: 25%;' +
                 '}',
                 '.qo-control-grouping--other-controls .control-group {' +
@@ -191,10 +188,6 @@ export default function styles(document) {
             '    padding-left: 8px;' +
             '    margin-right: 5px !important;' +
             '}',
-            '.qo-component--chart .y.axis .tick text {' +
-            '    font-family: "Lucida Console", "Courier New", "Monospace";' +
-            '    font-size: 14px;' +
-            '}',
             '.qo-footnote {' +
             '    width: 100%;' +
             '    text-align: center;' +

diff --git a/test-page/index.html b/test-page/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>Query Overview</title>
+        <title>Query Overview: Test Page</title>
         <meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>
 
         <script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
@@ -10,6 +10,7 @@
 
         <link type = 'text/css' rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/gh/RhoInc/Webcharts/css/webcharts.min.css'>
         <link type = 'text/css' rel = 'stylesheet' href = './index.css'>
+
     </head>
 
     <body>