diff --git a/superset/assets/javascripts/explore/stores/controls.jsx b/superset/assets/javascripts/explore/stores/controls.jsx index 8d470f0aaa3c9..d2851ee7247e4 100644 --- a/superset/assets/javascripts/explore/stores/controls.jsx +++ b/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'), diff --git a/superset/assets/javascripts/explore/stores/visTypes.js b/superset/assets/javascripts/explore/stores/visTypes.js index 4cdabf87cb460..0459b38351704 100644 --- a/superset/assets/javascripts/explore/stores/visTypes.js +++ b/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'], ], }, diff --git a/superset/assets/javascripts/modules/colors.js b/superset/assets/javascripts/modules/colors.js index 8e3e521665464..803b6836d6b2a 100644 --- a/superset/assets/javascripts/modules/colors.js +++ b/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 () { diff --git a/superset/assets/visualizations/heatmap.js b/superset/assets/visualizations/heatmap.js index 002af8a704a44..d86253d63f83a 100644 --- a/superset/assets/visualizations/heatmap.js +++ b/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);