From f3de758363cc4cd533a3e8a8a6225aa05836ed46 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Tue, 12 Sep 2017 09:06:03 -0700
Subject: [PATCH] [heatmap] fix default sorting (#3450)

Currently the heatmap axis are sorted randomly, this PR makes it such
that it's properly sorted.

Also allowing for specifying the left and bottom margins
---
 .../javascripts/explore/stores/visTypes.js    |  1 +
 superset/assets/visualizations/heatmap.js     | 24 ++++++++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/superset/assets/javascripts/explore/stores/visTypes.js b/superset/assets/javascripts/explore/stores/visTypes.js
index 318d3327c..fad261c13 100644
--- a/superset/assets/javascripts/explore/stores/visTypes.js
+++ b/superset/assets/javascripts/explore/stores/visTypes.js
@@ -943,6 +943,7 @@ export const visTypes = {
           ['xscale_interval', 'yscale_interval'],
           ['canvas_image_rendering'],
           ['normalize_across'],
+          ['left_margin', 'bottom_margin'],
         ],
       },
     ],
diff --git a/superset/assets/visualizations/heatmap.js b/superset/assets/visualizations/heatmap.js
index dad613fbb..af03739b5 100644
--- a/superset/assets/visualizations/heatmap.js
+++ b/superset/assets/visualizations/heatmap.js
@@ -21,22 +21,31 @@ function heatmapVis(slice, payload) {
   };
 
   const data = payload.data;
+  const fd = slice.formData;
   // Dynamically adjusts  based on max x / y category lengths
   function adjustMargins() {
     const pixelsPerCharX = 4.5; // approx, depends on font size
-    const pixelsPerCharY = 6.8; // approx, depends on font size
+    const pixelsPerCharY = 10; // approx, depends on font size
     let longestX = 1;
     let longestY = 1;
     let datum;
 
     for (let i = 0; i < data.length; i++) {
       datum = data[i];
-      longestX = Math.max(longestX, datum.x.length || 1);
-      longestY = Math.max(longestY, datum.y.length || 1);
+      longestX = Math.max(longestX, datum.x.toString().length || 1);
+      longestY = Math.max(longestY, datum.y.toString().length || 1);
     }
 
-    margin.left = Math.ceil(Math.max(margin.left, pixelsPerCharY * longestY));
-    margin.bottom = Math.ceil(Math.max(margin.bottom, pixelsPerCharX * longestX));
+    if (fd.left_margin === 'auto') {
+      margin.left = Math.ceil(Math.max(margin.left, pixelsPerCharY * longestY));
+    } else {
+      margin.left = fd.left_margin;
+    }
+    if (fd.bottom_margin === 'auto') {
+      margin.bottom = Math.ceil(Math.max(margin.bottom, pixelsPerCharX * longestX));
+    } else {
+      margin.bottom = fd.bottom_margin;
+    }
   }
 
   function ordScale(k, rangeBands, reverse = false) {
@@ -44,9 +53,7 @@ function heatmapVis(slice, payload) {
     $.each(data, function (i, d) {
       domain[d[k]] = true;
     });
-    domain = Object.keys(domain).sort(function (a, b) {
-      return b - a;
-    });
+    domain = Object.keys(domain).sort();
     if (reverse) {
       domain.reverse();
     }
@@ -58,7 +65,6 @@ function heatmapVis(slice, payload) {
 
   slice.container.html('');
   const matrix = {};
-  const fd = slice.formData;
 
   adjustMargins();