[revert] reverting big num changes (#2567)

* Revert "[big num] make sure scatterplot dots align properly (#2559)"

This reverts commit f24ddfd.

* Revert "Revert "measure x axis labels too and use the longest to determine margins" (#2550)"

This reverts commit fe68bc3.

* Revert "[bug num vis] fix sizing for single digits (#2548)"

This reverts commit 3d2c791.

* revert all big num changes.

* fix linting

* make document global, fix linting

superset/assets/.eslintrc

@@ -5,6 +5,9 @@
       "experimentalObjectRestSpread": true
     }
   },
+  "globals": {
+    "document": true,
+  },
   "rules": {
     "prefer-template": 0,
     "new-cap": 0,
@@ -14,8 +17,5 @@
     "func-names": 0,
     "react/jsx-no-bind": 0,
     "no-confusing-arrow": 0,
-  },
-  "globals": {
-    "document": true,
   }
 }

superset/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -57,22 +57,19 @@ class ChartContainer extends React.PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.shouldRenderViz(prevProps)) {
+    if (
+        (
+          prevProps.queryResponse !== this.props.queryResponse ||
+          prevProps.height !== this.props.height ||
+          this.props.triggerRender
+        ) && !this.props.queryResponse.error
+        && this.props.chartStatus !== 'failed'
+        && this.props.chartStatus !== 'stopped'
+      ) {
       this.renderViz();
     }
   }
 
-  shouldRenderViz(prevProps) {
-    const hasHeightChanged = prevProps.height !== this.props.height;
-    const hasQueryChanged = prevProps.queryResponse !== this.props.queryResponse;
-    const hasErrors = this.props.queryResponse && this.props.queryResponse.error;
-
-    return (hasQueryChanged || hasHeightChanged || this.props.triggerRender)
-            && !hasErrors
-            && this.props.chartStatus !== 'failed'
-            && this.props.chartStatus !== 'stopped';
-  }
-
   getMockedSliceObject() {
     const props = this.props;
     const getHeight = () => {
@@ -105,7 +102,7 @@ class ChartContainer extends React.PureComponent {
 
       height: getHeight,
 
-      render_template: function (s) {
+      render_template: (s) => {
         const context = {
           width: this.width,
           height: this.height,

superset/assets/javascripts/modules/utils.js

@@ -189,14 +189,6 @@ export function customizeToolTip(chart, xAxisFormatter, yAxisFormatters) {
   });
 }
 
-export function getTextWidth(text, fontDetails) {
-  const canvas = document.createElement('canvas');
-  const context = canvas.getContext('2d');
-  context.font = fontDetails;
-  const metrics = context.measureText(text);
-  return metrics.width;
-}
-
 export function initJQueryAjaxCSRF() {
   // Works in conjunction with a Flask-WTF token as described here:
   // http://flask-wtf.readthedocs.io/en/stable/csrf.html#javascript-requests

superset/assets/visualizations/big_number.css

@@ -2,18 +2,18 @@
 .big_number_total g.axis text {
   font-size: 10px;
   font-weight: normal;
-  color: #333333;
-  fill: #333333;
+  color: gray;
+  fill: gray;
   text-anchor: middle;
   alignment-baseline: middle;
-  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: none;
 }
 
 .big_number text.big,
 .big_number_total text.big{
-  stroke: #333333;
+  stroke: black;
   text-anchor: middle;
-  fill: #333333;
+  fill: black;
 }
 
 .big_number g.tick line,
@@ -25,16 +25,6 @@
 .big_number .domain,
 .big_number_total .domain{
   fill: none;
-  stroke: #333333;
+  stroke: black;
+  stroke-width: 1;
 }
-
-.line-tooltip {
-  position: absolute;
-  text-align: left;
-  padding: 10px;
-  background: #ffffff;
-  border: 1px solid #ccc;
-  border-radius: 2px;
-  pointer-events: none;
-}
-