mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
getting something to show
This commit is contained in:
parent
b91460db4f
commit
a2f14b3787
17
panoramix/static/widgets/viz_heatmap.css
Normal file
17
panoramix/static/widgets/viz_heatmap.css
Normal file
@ -0,0 +1,17 @@
|
||||
.heatmap .axis text {
|
||||
font: 10px sans-serif;
|
||||
}
|
||||
|
||||
.heatmap .axis path,
|
||||
.heatmap .axis line {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.heatmap svg {
|
||||
cursor: move;
|
||||
}
|
||||
.heatmap .axis .tick:first-child {
|
||||
display: none;
|
||||
}
|
152
panoramix/static/widgets/viz_heatmap.js
Normal file
152
panoramix/static/widgets/viz_heatmap.js
Normal file
@ -0,0 +1,152 @@
|
||||
// Inspired from http://bl.ocks.org/mbostock/3074470
|
||||
px.registerViz('heatmap', function(slice) {
|
||||
function refresh() {
|
||||
d3.json("https://gist.githubusercontent.com/mbostock/3074470/raw/c028fa03cde541bbd7fdcaa27e61f6332af3b556/heatmap.json", function(error, heatmap) {
|
||||
if (error) {
|
||||
slice.error(error);
|
||||
return;
|
||||
}
|
||||
var X = 0, Y = 1;
|
||||
var canvasDim = [slice.width(), slice.height()];
|
||||
var canvasAspect = canvasDim[Y] / canvasDim[X];
|
||||
var heatmapDim = [heatmap[X].length, heatmap.length];
|
||||
var heatmapAspect = heatmapDim[Y] / heatmapDim[X];
|
||||
|
||||
if (heatmapAspect < canvasAspect)
|
||||
canvasDim[Y] = canvasDim[X] * heatmapAspect;
|
||||
else
|
||||
canvasDim[X] = canvasDim[Y] / heatmapAspect;
|
||||
|
||||
var color = d3.scale.linear()
|
||||
.domain([95, 115, 135, 155, 175, 195])
|
||||
.range(["#0a0", "#6c0", "#ee0", "#eb4", "#eb9", "#fff"]);
|
||||
|
||||
var scale = [
|
||||
d3.scale.linear()
|
||||
.domain([0, heatmapDim[X]])
|
||||
.range([0, canvasDim[X]]),
|
||||
d3.scale.linear()
|
||||
.domain([0, heatmapDim[Y]])
|
||||
.range([canvasDim[Y], 0])
|
||||
];
|
||||
|
||||
var container = d3.select(slice.selector);
|
||||
|
||||
var canvas = container.append("canvas")
|
||||
.attr("width", heatmapDim[X])
|
||||
.attr("height", heatmapDim[Y])
|
||||
.style("width", canvasDim[X] + "px")
|
||||
.style("height", canvasDim[Y] + "px")
|
||||
.style("position", "absolute");
|
||||
|
||||
var svg = container.append("svg")
|
||||
.attr("width", canvasDim[X])
|
||||
.attr("height", canvasDim[Y])
|
||||
.style("position", "relative");
|
||||
|
||||
var tip = d3.tip()
|
||||
.attr('class', 'd3-tip')
|
||||
.offset([10, 0])
|
||||
.html(function (d) {
|
||||
var k = d3.mouse(this);
|
||||
var m = Math.floor(scale[X].invert(k[0]))
|
||||
var n = Math.floor(scale[Y].invert(k[1]))
|
||||
return "Intensity Count: " + heatmap[n][m];
|
||||
})
|
||||
svg.call(tip);
|
||||
|
||||
var zoom = d3.behavior.zoom()
|
||||
.center(canvasDim.map(
|
||||
function(v) {return v / 2}))
|
||||
.scaleExtent([1, 10])
|
||||
.x(scale[X])
|
||||
.y(scale[Y])
|
||||
.on("zoom", zoomEvent);
|
||||
|
||||
svg.append("rect")
|
||||
.style("pointer-events", "all")
|
||||
.attr("width", canvasDim[X])
|
||||
.attr("height", canvasDim[Y])
|
||||
.attr("id", "mycanvas")
|
||||
.style("fill", "none")
|
||||
.call(zoom);
|
||||
|
||||
var axis = [
|
||||
d3.svg.axis()
|
||||
.scale(scale[X])
|
||||
.orient("top"),
|
||||
d3.svg.axis()
|
||||
.scale(scale[Y])
|
||||
.orient("right")
|
||||
];
|
||||
|
||||
var axisElement = [
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(-1," + (canvasDim[Y]-1) + ")"),
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
];
|
||||
|
||||
svg.on('mousemove', tip.show); //Added
|
||||
svg.on('mouseout', tip.hide); //Added
|
||||
|
||||
var context = canvas.node().getContext("2d");
|
||||
var imageObj;
|
||||
var imageDim;
|
||||
var imageScale;
|
||||
createImageObj();
|
||||
drawAxes();
|
||||
|
||||
// Compute the pixel colors; scaled by CSS.
|
||||
function createImageObj() {
|
||||
imageObj = new Image();
|
||||
var image = context.createImageData(heatmapDim[X], heatmapDim[Y]);
|
||||
|
||||
for (var y = 0, p = -1; y < heatmapDim[Y]; ++y) {
|
||||
for (var x = 0; x < heatmapDim[X]; ++x) {
|
||||
//console.log("heatmap x and y :: ",x,y,heatmap[y][x]);
|
||||
var c = d3.rgb(color(heatmap[y][x]));
|
||||
image.data[++p] = c.r;
|
||||
image.data[++p] = c.g;
|
||||
image.data[++p] = c.b;
|
||||
image.data[++p] = 255;
|
||||
}
|
||||
}
|
||||
context.putImageData(image, 0, 0);
|
||||
imageObj.src = canvas.node().toDataURL();
|
||||
imageDim = [imageObj.width, imageObj.height];
|
||||
imageScale = imageDim.map(
|
||||
function(v, i){return v / canvasDim[i]});
|
||||
}
|
||||
|
||||
function drawAxes() {
|
||||
axisElement.forEach(function(v, i) {v.call(axis[i])});
|
||||
}
|
||||
|
||||
function zoomEvent() {
|
||||
var s = d3.event.scale;
|
||||
var n = imageDim.map(
|
||||
function(v) {return v * s});
|
||||
var t = d3.event.translate.map(function(v, i) {
|
||||
return Math.min(
|
||||
0,
|
||||
Math.max(v, canvasDim[i] - n[i] / imageScale[i]));
|
||||
});
|
||||
zoom.translate(t);
|
||||
var it = t.map(
|
||||
function(v, i) {return v * imageScale[i]});
|
||||
context.clearRect(0, 0, canvasDim[X], canvasDim[Y]);
|
||||
context.drawImage(imageObj, it[X], it[Y], n[X], n[Y]);
|
||||
drawAxes();
|
||||
}
|
||||
|
||||
});
|
||||
slice.done();
|
||||
}
|
||||
return {
|
||||
render: refresh,
|
||||
resize: refresh,
|
||||
};
|
||||
});
|
||||
|
@ -1190,6 +1190,38 @@ class ParallelCoordinatesViz(BaseViz):
|
||||
df = df[[self.form_data.get('series')] + self.form_data.get('metrics')]
|
||||
return df.to_json(orient="records")
|
||||
|
||||
class HeatmapViz(BaseViz):
|
||||
viz_type = "heatmap"
|
||||
verbose_name = "Heatmap"
|
||||
is_timeseries = False
|
||||
js_files = ['lib/d3.tip.js', 'widgets/viz_heatmap.js']
|
||||
css_files = ['lib/d3.tip.css', 'widgets/viz_heatmap.css']
|
||||
fieldsets = (
|
||||
{
|
||||
'label': None,
|
||||
'fields': (
|
||||
'granularity',
|
||||
('since', 'until'),
|
||||
'metric',
|
||||
'x',
|
||||
'y',
|
||||
)
|
||||
},)
|
||||
def query_obj(self):
|
||||
d = super(HeatmapViz, self).query_obj()
|
||||
fd = self.form_data
|
||||
d['metrics'] = fd.get('metrics')
|
||||
second = fd.get('secondary_metric')
|
||||
if second not in d['metrics']:
|
||||
d['metrics'] += [second]
|
||||
d['groupby'] = [fd.get('series')]
|
||||
return d
|
||||
|
||||
def get_json_data(self):
|
||||
df = self.get_df()
|
||||
df = df[[self.form_data.get('series')] + self.form_data.get('metrics')]
|
||||
return df.to_json(orient="records")
|
||||
|
||||
|
||||
viz_types_list = [
|
||||
TableViz,
|
||||
@ -1211,6 +1243,7 @@ viz_types_list = [
|
||||
FilterBoxViz,
|
||||
IFrameViz,
|
||||
ParallelCoordinatesViz,
|
||||
HeatmapViz,
|
||||
]
|
||||
|
||||
viz_types = OrderedDict([(v.viz_type, v) for v in viz_types_list])
|
||||
|
Loading…
Reference in New Issue
Block a user