pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[SIP-5] Refactor and update heatmap (#5704) 

* Extract slice and formData

* Define data shape

* update style

* organize imports

* fix heatmap axis labels

* add new line

* adjust indent
This commit is contained in:
Krist Wongsuphasawat 2018-08-27 21:49:54 -07:00 committed by Chris Williams
parent 4ae08c2c64
commit fcf2c756c0
2 changed files with 198 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
superset/assets/src/visualizations/heatmap.css
View File

@ -6,20 +6,24 @@
}
.heatmap .axis text {
font: 10px sans-serif;
font: 12px sans-serif;
text-rendering: optimizeLegibility;
fill: #555;
}
.heatmap .background-rect {
stroke: #ddd;
fill-opacity: 0;
pointer-events: all;
}
.heatmap .axis path,
.heatmap .axis line {
fill: none;
stroke: #000;
stroke: #ddd;
shape-rendering: crispEdges;
}
.heatmap svg {
}
.heatmap canvas, .heatmap img {
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
@ -41,3 +45,8 @@
.heatmap .legendCells .cell:last-child text {
opacity: 1;
}
.dashboard .heatmap .axis text {
font-size: 10px;
opacity: .75;
}

255
superset/assets/src/visualizations/heatmap.js
View File

@ -1,21 +1,85 @@
import d3 from 'd3';
// eslint-disable-next-line no-unused-vars
import d3legend from 'd3-svg-legend';
import PropTypes from 'prop-types';
import 'd3-svg-legend';
import d3tip from 'd3-tip';
import { colorScalerFactory } from '../modules/colors';
import '../../stylesheets/d3tip.css';
import './heatmap.css';
const propTypes = {
data: PropTypes.shape({
records: PropTypes.arrayOf(PropTypes.shape({
x: PropTypes.string,
y: PropTypes.string,
v: PropTypes.number,
perc: PropTypes.number,
rank: PropTypes.number,
})),
extents: PropTypes.arrayOf(PropTypes.number),
}),
width: PropTypes.number,
height: PropTypes.number,
bottomMargin: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
colorScheme: PropTypes.string,
columnX: PropTypes.string,
columnY: PropTypes.string,
leftMargin: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
metric: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
]),
normalized: PropTypes.bool,
numberFormat: PropTypes.string,
showLegend: PropTypes.bool,
showPercentage: PropTypes.bool,
showValues: PropTypes.bool,
sortXAxis: PropTypes.string,
sortYAxis: PropTypes.string,
xScaleInterval: PropTypes.number,
yScaleInterval: PropTypes.number,
yAxisBounds: PropTypes.arrayOf(PropTypes.number),
};
function cmp(a, b) {
return a > b ? 1 : -1;
}
// Inspired from http://bl.ocks.org/mbostock/3074470
// https://jsfiddle.net/cyril123/h0reyumq/
function heatmapVis(slice, payload) {
const data = payload.data.records;
const fd = slice.formData;
function Heatmap(element, props) {
PropTypes.checkPropTypes(propTypes, props, 'prop', 'Heatmap');
const {
data,
width,
height,
bottomMargin,
canvasImageRendering,
colorScheme,
columnX,
columnY,
leftMargin,
metric,
normalized,
numberFormat,
showLegend,
showPercentage,
showValues,
sortXAxis,
sortYAxis,
xScaleInterval,
yScaleInterval,
yAxisBounds,
} = props;
const { records, extents } = data;
const margin = {
top: 10,
@ -23,7 +87,7 @@ function heatmapVis(slice, payload) {
bottom: 35,
left: 35,
};
const valueFormatter = d3.format(fd.y_axis_format);
const valueFormatter = d3.format(numberFormat);
// Dynamically adjusts based on max x / y category lengths
function adjustMargins() {
@ -31,33 +95,32 @@ function heatmapVis(slice, payload) {
const pixelsPerCharY = 6; // approx, depends on font size
let longestX = 1;
let longestY = 1;
let datum;
for (let i = 0; i < data.length; i++) {
datum = data[i];
for (let i = 0; i < records.length; i++) {
const datum = records[i];
longestX = Math.max(longestX, datum.x.toString().length || 1);
longestY = Math.max(longestY, datum.y.toString().length || 1);
}
if (fd.left_margin === 'auto') {
if (leftMargin === 'auto') {
margin.left = Math.ceil(Math.max(margin.left, pixelsPerCharY * longestY));
if (fd.show_legend) {
margin.left += 40;
}
} else {
margin.left = fd.left_margin;
margin.left = leftMargin;
}
if (fd.bottom_margin === 'auto') {
margin.bottom = Math.ceil(Math.max(margin.bottom, pixelsPerCharX * longestX));
} else {
margin.bottom = fd.bottom_margin;
if (showLegend) {
margin.right += 40;
}
margin.bottom = (bottomMargin === 'auto')
? Math.ceil(Math.max(margin.bottom, pixelsPerCharX * longestX))
: bottomMargin;
}
function ordScale(k, rangeBands, sortMethod) {
let domain = {};
const actualKeys = {}; // hack to preserve type of keys when number
data.forEach((d) => {
records.forEach((d) => {
domain[d[k]] = (domain[d[k]] || 0) + d.v;
actualKeys[d[k]] = d[k];
});
@ -83,46 +146,45 @@ function heatmapVis(slice, payload) {
return d3.scale.ordinal().domain(domain).range(d3.range(domain.length));
}
slice.container.html('');
// eslint-disable-next-line no-param-reassign
element.innerHTML = '';
const matrix = {};
adjustMargins();
const width = slice.width();
const height = slice.height();
const hmWidth = width - (margin.left + margin.right);
const hmHeight = height - (margin.bottom + margin.top);
const fp = d3.format('.2%');
const xScale = ordScale('x', null, fd.sort_x_axis);
const yScale = ordScale('y', null, fd.sort_y_axis);
const xRbScale = ordScale('x', [0, hmWidth], fd.sort_x_axis);
const yRbScale = ordScale('y', [hmHeight, 0], fd.sort_y_axis);
const xScale = ordScale('x', null, sortXAxis);
const yScale = ordScale('y', null, sortYAxis);
const xRbScale = ordScale('x', [0, hmWidth], sortXAxis);
const yRbScale = ordScale('y', [hmHeight, 0], sortYAxis);
const X = 0;
const Y = 1;
const heatmapDim = [xRbScale.domain().length, yRbScale.domain().length];
const minBound = fd.y_axis_bounds[0] || 0;
const maxBound = fd.y_axis_bounds[1] || 1;
const colorScaler = colorScalerFactory(fd.linear_color_scheme, null, null, [minBound, maxBound]);
const minBound = yAxisBounds[0] || 0;
const maxBound = yAxisBounds[1] || 1;
const colorScaler = colorScalerFactory(colorScheme, null, null, [minBound, maxBound]);
const scale = [
d3.scale.linear()
.domain([0, heatmapDim[X]])
.range([0, hmWidth]),
.domain([0, heatmapDim[X]])
.range([0, hmWidth]),
d3.scale.linear()
.domain([0, heatmapDim[Y]])
.range([0, hmHeight]),
.domain([0, heatmapDim[Y]])
.range([0, hmHeight]),
];
const container = d3.select(slice.selector);
const container = d3.select(element);
const canvas = container.append('canvas')
.attr('width', heatmapDim[X])
.attr('height', heatmapDim[Y])
.style('width', hmWidth + 'px')
.style('height', hmHeight + 'px')
.style('image-rendering', fd.canvas_image_rendering)
.style('image-rendering', canvasImageRendering)
.style('left', margin.left + 'px')
.style('top', margin.top + 'px')
.style('position', 'absolute');
@ -132,9 +194,9 @@ function heatmapVis(slice, payload) {
.attr('height', height)
.style('position', 'relative');
if (fd.show_values) {
if (showValues) {
const cells = svg.selectAll('rect')
.data(data)
.data(records)
.enter()
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
@ -147,22 +209,22 @@ function heatmapVis(slice, payload) {
.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');
.attr('fill', d => d.v >= extents[1] / 2 ? 'white' : 'black');
}
if (fd.show_legend) {
if (showLegend) {
const colorLegend = d3.legend.color()
.labelFormat(valueFormatter)
.scale(colorScaler)
.shapePadding(0)
.cells(50)
.shapeWidth(10)
.shapeHeight(3)
.labelOffset(2);
.labelFormat(valueFormatter)
.scale(colorScaler)
.shapePadding(0)
.cells(10)
.shapeWidth(10)
.shapeHeight(10)
.labelOffset(3);
svg.append('g')
.attr('transform', 'translate(10, 5)')
.call(colorLegend);
.attr('transform', `translate(${width - 40}, ${margin.top})`)
.call(colorLegend);
}
const tip = d3tip()
@ -177,14 +239,14 @@ function heatmapVis(slice, payload) {
const k = d3.mouse(this);
const m = Math.floor(scale[0].invert(k[0]));
const n = Math.floor(scale[1].invert(k[1]));
const metric = typeof fd.metric === 'object' ? fd.metric.label : fd.metric;
const metricLabel = typeof metric === 'object' ? metric.label : metric;
if (m in matrix && n in matrix[m]) {
const obj = matrix[m][n];
s += '<div><b>' + fd.all_columns_x + ': </b>' + obj.x + '<div>';
s += '<div><b>' + fd.all_columns_y + ': </b>' + obj.y + '<div>';
s += '<div><b>' + metric + ': </b>' + valueFormatter(obj.v) + '<div>';
if (fd.show_perc) {
s += '<div><b>%: </b>' + fp(fd.normalized ? obj.rank : obj.perc) + '<div>';
s += '<div><b>' + columnX + ': </b>' + obj.x + '<div>';
s += '<div><b>' + columnY + ': </b>' + obj.y + '<div>';
s += '<div><b>' + metricLabel + ': </b>' + valueFormatter(obj.v) + '<div>';
if (showPercentage) {
s += '<div><b>%: </b>' + fp(normalized ? obj.rank : obj.perc) + '<div>';
}
tip.style('display', null);
} else {
@ -196,48 +258,50 @@ function heatmapVis(slice, payload) {
});
const rect = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
.attr('transform', `translate(${margin.left}, ${margin.top})`)
.append('rect')
.attr('pointer-events', 'all')
.on('mousemove', tip.show)
.on('mouseout', tip.hide)
.style('fill-opacity', 0)
.attr('stroke', 'black')
.attr('width', hmWidth)
.attr('height', hmHeight);
.classed('background-rect', true)
.on('mousemove', tip.show)
.on('mouseout', tip.hide)
.attr('width', hmWidth)
.attr('height', hmHeight);
rect.call(tip);
const xAxis = d3.svg.axis()
.scale(xRbScale)
.outerTickSize(0)
.tickValues(xRbScale.domain().filter(
function (d, i) {
return !(i % (parseInt(fd.xscale_interval, 10)));
return !(i % (xScaleInterval));
}))
.orient('bottom');
const yAxis = d3.svg.axis()
.scale(yRbScale)
.outerTickSize(0)
.tickValues(yRbScale.domain().filter(
function (d, i) {
return !(i % (parseInt(fd.yscale_interval, 10)));
return !(i % (yScaleInterval));
}))
.orient('left');
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(' + margin.left + ',' + (margin.top + hmHeight) + ')')
.call(xAxis)
.call(xAxis)
.selectAll('text')
.style('text-anchor', 'end')
.attr('transform', 'rotate(-45)');
.attr('x', -4)
.attr('y', 10)
.attr('dy', '0.3em')
.style('text-anchor', 'end')
.attr('transform', 'rotate(-45)');
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.call(yAxis);
const context = canvas.node().getContext('2d');
context.imageSmoothingEnabled = false;
@ -246,8 +310,8 @@ function heatmapVis(slice, payload) {
const imageObj = new Image();
const image = context.createImageData(heatmapDim[0], heatmapDim[1]);
const pixs = {};
data.forEach((d) => {
const c = d3.rgb(colorScaler(fd.normalized ? d.rank : d.perc));
records.forEach((d) => {
const c = d3.rgb(colorScaler(normalized ? d.rank : d.perc));
const x = xScale(d.x);
const y = yScale(d.y);
pixs[x + (y * xScale.domain().length)] = c;
@ -278,4 +342,53 @@ function heatmapVis(slice, payload) {
createImageObj();
}
module.exports = heatmapVis;
Heatmap.propTypes = propTypes;
function adaptor(slice, payload) {
const { selector, formData } = slice;
const {
bottom_margin: bottomMargin,
canvas_image_rendering: canvasImageRendering,
all_columns_x: columnX,
all_columns_y: columnY,
linear_color_scheme: colorScheme,
left_margin: leftMargin,
metric,
normalized,
show_legend: showLegend,
show_perc: showPercentage,
show_values: showValues,
sort_x_axis: sortXAxis,
sort_y_axis: sortYAxis,
xscale_interval: xScaleInterval,
yscale_interval: yScaleInterval,
y_axis_bounds: yAxisBounds,
y_axis_format: numberFormat,
} = formData;
const element = document.querySelector(selector);
return Heatmap(element, {
data: payload.data,
width: slice.width(),
height: slice.height(),
bottomMargin,
canvasImageRendering,
colorScheme,
columnX,
columnY,
leftMargin,
metric,
normalized,
numberFormat,
showLegend,
showPercentage,
showValues,
sortXAxis,
sortYAxis,
xScaleInterval: parseInt(xScaleInterval, 10),
yScaleInterval: parseInt(yScaleInterval, 10),
yAxisBounds,
});
}
export default adaptor;