fix: No result message styling (#23)

* "No Results" message position and style
* Updated build and README.md file

README.md

@@ -128,6 +128,12 @@ possible in your explanation and we'll address it as quick as we can.
     yarn build
     ```
 
+    If yarn build fails try using:
+
+    ```shell
+    bin/build
+    ```
+
 4.  **Building your code automatically in the background**
 
     Recommended: Webpack can detect changes and build automatically

src/layout_auto.css

@@ -8,7 +8,7 @@
   z-index: 1;
 }
 
-table.reportTable { 
+table.reportTable {
   width: 100%;
   table-layout: auto;
   opacity: 0;

src/layout_fixed.css

@@ -25,7 +25,7 @@ table.reportTable th {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: break-spaces;
-}	
+}
 
 table.reportTable td {
   max-width: 0;

src/report_table.js

@@ -1,6 +1,8 @@
 import {VisPluginTableModel} from './vis_table_plugin';
 import * as d3 from './d3loader';
 
+const NO_RESULTS_MESSAGE = 'No results';
+
 const themes = {
   traditional: require('./theme_traditional.css'),
   looker: require('./theme_looker.css'),
@@ -32,27 +34,38 @@ const loadStylesheet = function (link) {
 };
 
 const renderTableNoResults = function () {
-  // Locate visContainer
-  const visContainer = d3.select('#visContainer').node();
+  const visContainer = document.querySelector('#visContainer');
+  const noResultsMessage = buildNoResultsContainer();
 
-  // If no visContainer add it and print no results messaging
-  // else clear contents and add no results messaging
-  if (!visContainer) {
-    d3.select('#vis')
-      .append('div')
-      .attr('id', 'visContainer')
-      .style('height', '80vh')
-      .style('display', 'flex')
-      .style('align-items', 'center')
-      .style('justify-content', 'center')
-      .style('font-size', '13px')
-      .style('font-family', '"Open Sans", "Helvetica", "Arial", sans-serif')
-      .style('text-anchor', 'middle') // legacy
-      .style('text-align', 'center') // legacy
-      .text('No Results');
-  } else {
-    d3.select('#visContainer').html('').text('No Results');
+  // If visContainer exists remove to add a new with styling for no results message
+  if (visContainer) {
+    visContainer.parentNode.removeChild(visContainer);
   }
+
+  // Append No Results message
+  document.querySelector('#vis').append(noResultsMessage);
+};
+
+const buildNoResultsContainer = () => {
+  const noResultsMessage = document.createElement('div');
+
+  noResultsMessage.setAttribute('id', 'visContainer');
+  // Set cssText property. TODO - Set a class and import stylesheet
+  noResultsMessage.style.cssText = `
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Roboto';
+    text-anchor: middle;
+    text-align: center;
+    font-size: 1rem;
+    font-weight: 500;
+    color: rgb(38, 45, 51);
+  `;
+  noResultsMessage.innerText = NO_RESULTS_MESSAGE;
+
+  return noResultsMessage;
 };
 
 const buildReportTable = function (