[heatmap] numerous improvements (#3456)

* [heatmap] numerous improvements

* flexibility as to how to sort X and Y axis (alpha/value, desc/asc)
* option to show a legend
* fixed margins, maximize real estate
* allowed users to define bounds

* Tunning

superset/assets/javascripts/explore/stores/controls.jsx

@@ -36,6 +36,12 @@ const timeColumnOption = {
     'A reference to the [Time] configuration, taking granularity into ' +
     'account'),
 };
+const sortAxisChoices = [
+  ['alpha_asc', 'Alphabetical ascending'],
+  ['alpha_desc', 'Alphabetical descending'],
+  ['value_asc', 'Value ascending'],
+  ['value_desc', 'Value descending'],
+];
 
 const groupByControl = {
   type: 'SelectControl',
@@ -156,6 +162,22 @@ export const controls = {
     description: '',
   },
 
+  sort_x_axis: {
+    type: 'SelectControl',
+    label: 'Sort X Axis',
+    choices: sortAxisChoices,
+    clearable: false,
+    default: 'alpha_asc',
+  },
+
+  sort_y_axis: {
+    type: 'SelectControl',
+    label: 'Sort Y Axis',
+    choices: sortAxisChoices,
+    clearable: false,
+    default: 'alpha_asc',
+  },
+
   linear_color_scheme: {
     type: 'ColorSchemeControl',
     label: 'Linear Color Scheme',
@@ -202,6 +224,7 @@ export const controls = {
   canvas_image_rendering: {
     type: 'SelectControl',
     label: 'Rendering',
+    renderTrigger: true,
     choices: [
       ['pixelated', 'pixelated (Sharp)'],
       ['auto', 'auto (Smooth)'],
@@ -236,6 +259,14 @@ export const controls = {
     default: false,
   },
 
+  show_perc: {
+    type: 'CheckboxControl',
+    label: 'Show percentage',
+    renderTrigger: true,
+    description: 'Whether to include the percentage in the tooltip',
+    default: true,
+  },
+
   bar_stacked: {
     type: 'CheckboxControl',
     label: 'Stacked Bars',

superset/assets/javascripts/explore/stores/visTypes.js

@@ -929,10 +929,10 @@ export const visTypes = {
     label: 'Heatmap',
     controlPanelSections: [
       {
-        label: 'Axis & Metrics',
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
-          ['all_columns_x'],
-          ['all_columns_y'],
+          ['all_columns_x', 'all_columns_y'],
           ['metric'],
         ],
       },
@@ -941,9 +941,11 @@ export const visTypes = {
         controlSetRows: [
           ['linear_color_scheme'],
           ['xscale_interval', 'yscale_interval'],
-          ['canvas_image_rendering'],
-          ['normalize_across'],
+          ['canvas_image_rendering', 'normalize_across'],
           ['left_margin', 'bottom_margin'],
+          ['y_axis_bounds', 'y_axis_format'],
+          ['show_legend', 'show_perc'],
+          ['sort_x_axis', 'sort_y_axis'],
         ],
       },
     ],
@@ -954,6 +956,18 @@ export const visTypes = {
       all_columns_y: {
         validators: [v.nonEmpty],
       },
+      y_axis_bounds: {
+        label: 'Value bounds',
+        renderTrigger: false,
+        description: (
+          'Hard value bounds applied for color coding. Is only relevant ' +
+          'and applied when the normalization is applied against the whole ' +
+          'heatmap.'
+        ),
+      },
+      y_axis_format: {
+        label: 'Value Format',
+      },
     },
   },