use min 30 for margins, accounts for small y axis labels

apache · Apr 5, 2017 · c74de86 · c74de86
1 parent 97eb40a
commit c74de86
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/superset/assets/visualizations/big_number.js b/superset/assets/visualizations/big_number.js
@@ -50,8 +50,9 @@ function bigNumberVis(slice, payload) {
   const valueExt = d3.extent(data, (d) => d[1]);
   const yAxisLabelWidths = valueExt.map(value => getTextWidth(f(value), '10px Roboto'));
   const yAxisMaxWidth = Math.max(...yAxisLabelWidths);
-  const margin = yAxisMaxWidth + (yAxisMaxWidth / 2);
-
+  let margin = yAxisMaxWidth + (yAxisMaxWidth / 2);
+  // make sure margin is minimum 30px, for the case when the y axix label is very small.
+  if (margin < 30) margin = 30;
   const scaleX = d3.time.scale.utc().domain(dateExt).range([margin, width - margin]);
   const scaleY = d3.scale.linear().domain(valueExt).range([height - (margin), margin]);
   const colorRange = [d3.hsl(0, 1, 0.3), d3.hsl(120, 1, 0.3)];