mirror of
https://github.com/apache/superset.git
synced 2024-09-19 12:09:42 -04:00
52bbb38188
Before we limited the table size to 10 rows, now there's no limit and it will overflow properly with a scrollbar.
109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
// JS
|
|
var $ = window.$ || require('jquery');
|
|
var d3 = window.d3 || require('d3');
|
|
d3.parcoords = require('../vendor/parallel_coordinates/d3.parcoords.js');
|
|
d3.divgrid = require('../vendor/parallel_coordinates/divgrid.js');
|
|
|
|
// CSS
|
|
require('../vendor/parallel_coordinates/d3.parcoords.css');
|
|
require('../stylesheets/parallel_coordinates.css');
|
|
|
|
function parallelCoordVis(slice) {
|
|
|
|
function refresh() {
|
|
$('#code').attr('rows', '15');
|
|
$.getJSON(slice.jsonEndpoint(), function (payload) {
|
|
var fd = payload.form_data;
|
|
var data = payload.data;
|
|
|
|
var cols = fd.metrics;
|
|
if (fd.include_series) {
|
|
cols = [fd.series].concat(fd.metrics);
|
|
}
|
|
|
|
var ttypes = {};
|
|
ttypes[fd.series] = 'string';
|
|
fd.metrics.forEach(function (v) {
|
|
ttypes[v] = 'number';
|
|
});
|
|
|
|
var ext = d3.extent(data, function (d) {
|
|
return d[fd.secondary_metric];
|
|
});
|
|
ext = [ext[0], (ext[1] - ext[0]) / 2, ext[1]];
|
|
var cScale = d3.scale.linear()
|
|
.domain(ext)
|
|
.range(['red', 'grey', 'blue'])
|
|
.interpolate(d3.interpolateLab);
|
|
|
|
var color = function (d) {
|
|
return cScale(d[fd.secondary_metric]);
|
|
};
|
|
var container = d3.select(slice.selector);
|
|
container.selectAll('*').remove();
|
|
var eff_height = fd.show_datatable ? (slice.height() / 2) : slice.height();
|
|
|
|
container.append('div')
|
|
.attr('id', 'parcoords_' + slice.container_id)
|
|
.style('height', eff_height + 'px')
|
|
.classed("parcoords", true);
|
|
|
|
var parcoords = d3.parcoords()('#parcoords_' + slice.container_id)
|
|
.width(slice.width())
|
|
.color(color)
|
|
.alpha(0.5)
|
|
.composite("darken")
|
|
.height(eff_height)
|
|
.data(data)
|
|
.dimensions(cols)
|
|
.types(ttypes)
|
|
.render()
|
|
.createAxes()
|
|
.shadows()
|
|
.reorderable()
|
|
.brushMode("1D-axes");
|
|
|
|
if (fd.show_datatable) {
|
|
// create data table, row hover highlighting
|
|
var grid = d3.divgrid();
|
|
container.append("div")
|
|
.style('height', eff_height + 'px')
|
|
.datum(data)
|
|
.call(grid)
|
|
.classed("parcoords grid", true)
|
|
.selectAll(".row")
|
|
.on({
|
|
mouseover: function (d) {
|
|
parcoords.highlight([d]);
|
|
},
|
|
mouseout: parcoords.unhighlight
|
|
});
|
|
// update data table on brush event
|
|
parcoords.on("brush", function (d) {
|
|
d3.select(".grid")
|
|
.datum(d)
|
|
.call(grid)
|
|
.selectAll(".row")
|
|
.on({
|
|
mouseover: function (d) {
|
|
parcoords.highlight([d]);
|
|
},
|
|
mouseout: parcoords.unhighlight
|
|
});
|
|
});
|
|
}
|
|
slice.done();
|
|
})
|
|
.fail(function (xhr) {
|
|
slice.error(xhr.responseText);
|
|
});
|
|
}
|
|
|
|
return {
|
|
render: refresh,
|
|
resize: refresh
|
|
};
|
|
}
|
|
|
|
module.exports = parallelCoordVis;
|