add annotation option and a linear color map for heatmap viz. (#3634)

* add annotation option and a linear color map for heatmap viz.

* error fixes.

* fixes for requested changes

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

@@ -202,6 +202,7 @@ export const controls = {
       ['blue_white_yellow', 'blue/white/yellow'],
       ['white_black', 'white/black'],
       ['black_white', 'black/white'],
+      ['dark_blue', 'light/dark blue'],
     ],
     default: 'blue_white_yellow',
     clearable: false,
@@ -1086,6 +1087,14 @@ export const controls = {
     description: t('Whether to display the legend (toggles)'),
   },
 
+  show_values: {
+    type: 'CheckboxControl',
+    label: t('Show Values'),
+    renderTrigger: true,
+    default: false,
+    description: t('Whether to display the numerical values within the cells'),
+  },
+
   x_axis_showminmax: {
     type: 'CheckboxControl',
     label: t('X bounds'),

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

@@ -976,6 +976,7 @@ export const visTypes = {
           ['left_margin', 'bottom_margin'],
           ['y_axis_bounds', 'y_axis_format'],
           ['show_legend', 'show_perc'],
+          ['show_values'],
           ['sort_x_axis', 'sort_y_axis'],
         ],
       },

superset/assets/javascripts/modules/colors.js

@@ -94,6 +94,13 @@ export const spectrums = {
     'black',
     'white',
   ],
+  dark_blue: [
+    '#EBF5F8',
+    '#6BB1CC',
+    '#357E9B',
+    '#1B4150',
+    '#092935',
+  ],
 };
 
 export const getColorFromScheme = (function () {

superset/assets/visualizations/heatmap.js

@@ -130,6 +130,24 @@ function heatmapVis(slice, payload) {
     .attr('height', height)
     .style('position', 'relative');
 
+  if (fd.show_values) {
+    const cells = svg.selectAll('rect')
+      .data(data)
+      .enter()
+      .append('g')
+      .attr('transform', `translate(${margin.left}, ${margin.top})`);
+
+    cells.append('text')
+      .attr('transform', d => `translate(${xRbScale(d.x)}, ${yRbScale(d.y)})`)
+      .attr('y', yRbScale.rangeBand() / 2)
+      .attr('x', xRbScale.rangeBand() / 2)
+      .attr('text-anchor', 'middle')
+      .attr('dy', '.35em')
+      .text(d => valueFormatter(d.v))
+      .attr('font-size', Math.min(yRbScale.rangeBand(), xRbScale.rangeBand()) / 3 + 'px')
+      .attr('fill', d => d.v >= payload.data.extents[1] / 2 ? 'white' : 'black');
+  }
+
   if (fd.show_legend) {
     const legendScaler = colorScalerFactory(
       fd.linear_color_scheme, null, null, payload.data.extents);