You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by cc...@apache.org on 2018/08/29 22:21:07 UTC
[incubator-superset] branch master updated: [SIP-5] Refactor and
repair partition (#5718)
This is an automated email from the ASF dual-hosted git repository.
ccwilliams pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 00f2771 [SIP-5] Refactor and repair partition (#5718)
00f2771 is described below
commit 00f2771f23b5d72c2f40c6906de0c59707c479bf
Author: Krist Wongsuphasawat <kr...@gmail.com>
AuthorDate: Wed Aug 29 15:21:04 2018 -0700
[SIP-5] Refactor and repair partition (#5718)
* Extract slice and formData
* reorder functions
* fix tooltip
* remove commented code
* remove commented code and rename variables
* remove verboseMap
* rename kx, ky to zoomX, zoomY
---
superset/assets/src/visualizations/partition.css | 21 +-
superset/assets/src/visualizations/partition.js | 299 ++++++++++++++---------
2 files changed, 210 insertions(+), 110 deletions(-)
diff --git a/superset/assets/src/visualizations/partition.css b/superset/assets/src/visualizations/partition.css
index e23cca7..a0fdaed 100644
--- a/superset/assets/src/visualizations/partition.css
+++ b/superset/assets/src/visualizations/partition.css
@@ -1,3 +1,7 @@
+.partition {
+ position: relative;
+}
+
.partition .chart {
display: block;
margin: auto;
@@ -18,10 +22,25 @@
.partition g text {
font-weight: bold;
- pointer-events: none;
fill: rgba(0, 0, 0, 0.8);
}
.partition g:hover text {
fill: rgba(0, 0, 0, 1);
}
+
+.partition .partition-tooltip {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ padding: 5px;
+ pointer-events: none;
+ background-color: rgba(255,255,255, 0.75);
+ border-radius: 5px;
+}
+
+.partition-tooltip td {
+ padding-left: 5px;
+ font-size: 11px;
+}
diff --git a/superset/assets/src/visualizations/partition.js b/superset/assets/src/visualizations/partition.js
index 23e4474..fa7bbad 100644
--- a/superset/assets/src/visualizations/partition.js
+++ b/superset/assets/src/visualizations/partition.js
@@ -1,19 +1,14 @@
/* eslint no-param-reassign: [2, {"props": false}] */
-/* eslint no-use-before-define: ["error", { "functions": false }] */
import d3 from 'd3';
-import {
- d3TimeFormatPreset,
-} from '../modules/utils';
+import PropTypes from 'prop-types';
+import { hierarchy } from 'd3-hierarchy';
+import { d3TimeFormatPreset } from '../modules/utils';
import { getColorFromScheme } from '../modules/colors';
-
import './partition.css';
-d3.hierarchy = require('d3-hierarchy').hierarchy;
-d3.partition = require('d3-hierarchy').partition;
-
+// Compute dx, dy, x, y for each node and
+// return an array of nodes in breadth-first order
function init(root) {
- // Compute dx, dy, x, y for each node and
- // return an array of nodes in breadth-first order
const flat = [];
const dy = 1.0 / (root.height + 1);
let prev = null;
@@ -33,36 +28,85 @@ function init(root) {
return flat;
}
+// Declare PropTypes for recursive data structures
+// https://github.com/facebook/react/issues/5676
+const lazyFunction = f => (() => f().apply(this, arguments));
+ const leafType = PropTypes.shape({
+ name: PropTypes.string,
+ val: PropTypes.number.isRequired,
+});
+ const parentShape = {
+ name: PropTypes.string,
+ val: PropTypes.number.isRequired,
+ children: PropTypes.arrayOf(PropTypes.oneOfType([
+ PropTypes.shape(lazyFunction(() => parentShape)),
+ leafType,
+ ])),
+};
+ const nodeType = PropTypes.oneOfType([
+ PropTypes.shape(parentShape),
+ leafType,
+]);
+
+const propTypes = {
+ data: PropTypes.arrayOf(nodeType), // array of rootNode
+ width: PropTypes.number,
+ height: PropTypes.number,
+ colorScheme: PropTypes.string,
+ dateTimeFormat: PropTypes.string,
+ equalDateSize: PropTypes.bool,
+ groupBy: PropTypes.arrayOf(PropTypes.string),
+ useLogScale: PropTypes.bool,
+ metrics: PropTypes.arrayOf(PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.object,
+ ])),
+ numberFormat: PropTypes.string,
+ partitionLimit: PropTypes.number,
+ partitionThreshold: PropTypes.number,
+ useRichTooltip: PropTypes.bool,
+ timeSeriesOption: PropTypes.string,
+};
+
// This vis is based on
// http://mbostock.github.io/d3/talk/20111018/partition.html
-function partitionVis(slice, payload) {
- const data = payload.data;
- const fd = slice.formData;
- const div = d3.select(slice.selector);
- const metrics = fd.metrics || [];
+function Icicle(element, props) {
+ PropTypes.checkPropTypes(propTypes, props, 'prop', 'Icicle');
+
+ const {
+ width,
+ height,
+ data,
+ colorScheme,
+ dateTimeFormat,
+ equalDateSize,
+ groupBy,
+ useLogScale = false,
+ metrics = [],
+ numberFormat,
+ partitionLimit,
+ partitionThreshold,
+ useRichTooltip,
+ timeSeriesOption = 'not_time',
+ } = props;
+
+ const div = d3.select(element);
// Chart options
- const logScale = fd.log_scale || false;
- const chartType = fd.time_series_option || 'not_time';
+ const chartType = timeSeriesOption;
const hasTime = ['adv_anal', 'time_series'].indexOf(chartType) >= 0;
- const format = d3.format(fd.number_format);
- const timeFormat = d3TimeFormatPreset(fd.date_time_format);
+ const format = d3.format(numberFormat);
+ const timeFormat = d3TimeFormatPreset(dateTimeFormat);
div.selectAll('*').remove();
- d3.selectAll('.nvtooltip').remove();
- const tooltip = d3
- .select('body')
+ const tooltip = div
.append('div')
- .attr('class', 'nvtooltip')
- .style('opacity', 0)
- .style('top', 0)
- .style('left', 0)
- .style('position', 'fixed');
+ .classed('partition-tooltip', true);
function drawVis(i, dat) {
const datum = dat[i];
- const w = slice.width();
- const h = slice.height() / data.length;
+ const w = width;
+ const h = height / data.length;
const x = d3.scale.linear().range([0, w]);
const y = d3.scale.linear().range([0, h]);
@@ -83,7 +127,7 @@ function partitionVis(slice, payload) {
viz.style('padding-top', '3px');
}
- const root = d3.hierarchy(datum);
+ const root = hierarchy(datum);
function hasDateNode(n) {
return metrics.indexOf(n.data.name) >= 0 && hasTime;
@@ -103,12 +147,12 @@ function partitionVis(slice, payload) {
// the time column, perform a date-time format
if (n.parent && hasDateNode(n.parent)) {
// Format timestamp values
- n.weight = fd.equal_date_size ? 1 : n.value;
+ n.weight = equalDateSize ? 1 : n.value;
n.value = n.name;
n.name = timeFormat(n.name);
}
- if (logScale) n.weight = Math.log(n.weight + 1);
- n.disp = n.disp && !isNaN(n.disp) && isFinite(n.disp) ? format(n.disp) : '';
+ if (useLogScale) n.weight = Math.log(n.weight + 1);
+ n.disp = n.disp && !Number.isNaN(n.disp) && isFinite(n.disp) ? format(n.disp) : '';
});
// Perform sort by weight
root.sort((a, b) => {
@@ -121,20 +165,20 @@ function partitionVis(slice, payload) {
// Prune data based on partition limit and threshold
// both are applied at the same time
- if (fd.partition_threshold && fd.partition_threshold >= 0) {
+ if (partitionThreshold && partitionThreshold >= 0) {
// Compute weight sums as we go
root.each((n) => {
n.sum = n.children ? n.children.reduce((a, v) => a + v.weight, 0) || 1 : 1;
if (n.children) {
// Dates are not ordered by weight
if (hasDateNode(n)) {
- if (fd.equal_date_size) {
+ if (equalDateSize) {
return;
}
const removeIndices = [];
// Keep at least one child
for (let j = 1; j < n.children.length; j++) {
- if (n.children[j].weight / n.sum < fd.partition_threshold) {
+ if (n.children[j].weight / n.sum < partitionThreshold) {
removeIndices.push(j);
}
}
@@ -145,7 +189,7 @@ function partitionVis(slice, payload) {
// Find first child that falls below the threshold
let j;
for (j = 1; j < n.children.length; j++) {
- if (n.children[j].weight / n.sum < fd.partition_threshold) {
+ if (n.children[j].weight / n.sum < partitionThreshold) {
break;
}
}
@@ -154,11 +198,11 @@ function partitionVis(slice, payload) {
}
});
}
- if (fd.partition_limit && fd.partition_limit >= 0) {
+ if (partitionLimit && partitionLimit >= 0) {
root.each((n) => {
- if (n.children && n.children.length > fd.partition_limit) {
+ if (n.children && n.children.length > partitionLimit) {
if (!hasDateNode(n)) {
- n.children = n.children.slice(0, fd.partition_limit);
+ n.children = n.children.slice(0, partitionLimit);
}
}
});
@@ -168,7 +212,6 @@ function partitionVis(slice, payload) {
n.sum = n.children ? n.children.reduce((a, v) => a + v.weight, 0) || 1 : 1;
});
- const verboseMap = slice.datasource.verbose_map;
function getCategory(depth) {
if (!depth) {
return 'Metric';
@@ -176,8 +219,7 @@ function partitionVis(slice, payload) {
if (hasTime && depth === 1) {
return 'Date';
}
- const col = fd.groupby[depth - (hasTime ? 2 : 1)];
- return verboseMap[col] || col;
+ return groupBy[depth - (hasTime ? 2 : 1)];
}
function getAncestors(d) {
@@ -192,55 +234,65 @@ function partitionVis(slice, payload) {
function positionAndPopulate(tip, d) {
let t = '<table>';
- if (!fd.rich_tooltip) {
- t += (
- '<thead><tr><td colspan="3">' +
- `<strong class='x-value'>${getCategory(d.depth)}</strong>` +
- '</td></tr></thead><tbody>'
- );
- t += (
- '<tr class="emph">' +
- '<td class="legend-color-guide" style="opacity: 0.75">' +
- `<div style='border: thin solid grey; background-color: ${d.color};'` +
- '></div>' +
- '</td>' +
- `<td>${d.name}</td>` +
- `<td>${d.disp}</td>` +
- '</tr>'
- );
- } else {
+ if (useRichTooltip) {
const nodes = getAncestors(d);
- nodes.forEach((n) => {
+ nodes.reverse().forEach((n) => {
const atNode = n.depth === d.depth;
t += '<tbody>';
t += (
- `<tr class='${atNode ? 'emph' : ''}'>` +
- `<td class='legend-color-guide' style='opacity: ${atNode ? '1' : '0.75'}'>` +
+ '<tr>' +
+ '<td>' +
'<div ' +
`style='border: 2px solid ${atNode ? 'black' : 'transparent'};` +
`background-color: ${n.color};'` +
'></div>' +
'</td>' +
+ `<td>${getCategory(n.depth)}</td>` +
`<td>${n.name}</td>` +
`<td>${n.disp}</td>` +
- `<td>${getCategory(n.depth)}</td>` +
'</tr>'
);
});
+ } else {
+ t += (
+ '<thead><tr><td colspan="3">' +
+ `<strong>${getCategory(d.depth)}</strong>` +
+ '</td></tr></thead><tbody>'
+ );
+ t += (
+ '<tr>' +
+ '<td>' +
+ `<div style='border: thin solid grey; background-color: ${d.color};'` +
+ '></div>' +
+ '</td>' +
+ `<td>${d.name}</td>` +
+ `<td>${d.disp}</td>` +
+ '</tr>'
+ );
}
t += '</tbody></table>';
+ const [tipX, tipY] = d3.mouse(element);
tip.html(t)
- .style('left', (d3.event.pageX + 13) + 'px')
- .style('top', (d3.event.pageY - 10) + 'px');
+ .style('left', (tipX + 15) + 'px')
+ .style('top', (tipY) + 'px');
+ }
+
+ const nodes = init(root);
+
+ let zoomX = w / root.dx;
+ let zoomY = h / 1;
+
+ // Keep text centered in its division
+ function transform(d) {
+ return `translate(8,${d.dx * zoomY / 2})`;
}
const g = viz
.selectAll('g')
- .data(init(root))
- .enter()
+ .data(nodes)
+ .enter()
.append('svg:g')
.attr('transform', d => `translate(${x(d.y)},${y(d.x)})`)
- .on('click', click)
.on('mouseover', (d) => {
tooltip
.interrupt()
@@ -260,40 +312,6 @@ function partitionVis(slice, payload) {
.style('opacity', 0);
});
- let kx = w / root.dx;
- let ky = h / 1;
-
- g.append('svg:rect')
- .attr('width', root.dy * kx)
- .attr('height', d => d.dx * ky);
-
- g.append('svg:text')
- .attr('transform', transform)
- .attr('dy', '0.35em')
- .style('opacity', d => d.dx * ky > 12 ? 1 : 0)
- .text((d) => {
- if (!d.disp) {
- return d.name;
- }
- return `${d.name}: ${d.disp}`;
- });
-
- // Apply color scheme
- g.selectAll('rect')
- .style('fill', (d) => {
- d.color = getColorFromScheme(d.name, fd.color_scheme);
- return d.color;
- });
-
- // Zoom out when clicking outside vis
- // d3.select(window)
- // .on('click', () => click(root));
-
- // Keep text centered in its division
- function transform(d) {
- return `translate(8,${d.dx * ky / 2})`;
- }
-
// When clicking a subdivision, the vis will zoom in to it
function click(d) {
if (!d.children) {
@@ -303,8 +321,8 @@ function partitionVis(slice, payload) {
}
return false;
}
- kx = (d.y ? w - 40 : w) / (1 - d.y);
- ky = h / d.dx;
+ zoomX = (d.y ? w - 40 : w) / (1 - d.y);
+ zoomY = h / d.dx;
x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
y.domain([d.x, d.x + d.dx]);
@@ -314,20 +332,83 @@ function partitionVis(slice, payload) {
.attr('transform', nd => `translate(${x(nd.y)},${y(nd.x)})`);
t.select('rect')
- .attr('width', d.dy * kx)
- .attr('height', nd => nd.dx * ky);
+ .attr('width', d.dy * zoomX)
+ .attr('height', nd => nd.dx * zoomY);
t.select('text')
.attr('transform', transform)
- .style('opacity', nd => nd.dx * ky > 12 ? 1 : 0);
+ .style('opacity', nd => nd.dx * zoomY > 12 ? 1 : 0);
d3.event.stopPropagation();
return true;
}
+
+ g.on('click', click);
+
+ g.append('svg:rect')
+ .attr('width', root.dy * zoomX)
+ .attr('height', d => d.dx * zoomY);
+
+ g.append('svg:text')
+ .attr('transform', transform)
+ .attr('dy', '0.35em')
+ .style('opacity', d => d.dx * zoomY > 12 ? 1 : 0)
+ .text((d) => {
+ if (!d.disp) {
+ return d.name;
+ }
+ return `${d.name}: ${d.disp}`;
+ });
+
+ // Apply color scheme
+ g.selectAll('rect')
+ .style('fill', (d) => {
+ d.color = getColorFromScheme(d.name, colorScheme);
+ return d.color;
+ });
}
+
for (let i = 0; i < data.length; i++) {
drawVis(i, data);
}
}
-module.exports = partitionVis;
+Icicle.propTypes = propTypes;
+
+function adaptor(slice, payload) {
+ const { selector, formData, datasource } = slice;
+ const {
+ color_scheme: colorScheme,
+ date_time_format: dateTimeFormat,
+ equal_date_size: equalDateSize,
+ groupby: groupBy,
+ log_scale: useLogScale,
+ metrics,
+ number_format: numberFormat,
+ partition_limit: partitionLimit,
+ partition_threshold: partitionThreshold,
+ rich_tooltip: useRichTooltip,
+ time_series_option: timeSeriesOption,
+ } = formData;
+ const { verbose_map: verboseMap } = datasource;
+ const element = document.querySelector(selector);
+
+ return Icicle(element, {
+ data: payload.data,
+ width: slice.width(),
+ height: slice.height(),
+ colorScheme,
+ dateTimeFormat,
+ equalDateSize,
+ groupBy: groupBy.map(g => verboseMap[g] || g),
+ useLogScale,
+ metrics,
+ numberFormat,
+ partitionLimit: partitionLimit && parseInt(partitionLimit, 10),
+ partitionThreshold: partitionThreshold && parseInt(partitionThreshold, 10),
+ useRichTooltip,
+ timeSeriesOption,
+ });
+}
+
+export default adaptor;