mirror of
https://github.com/apache/superset.git
synced 2024-09-19 12:09:42 -04:00
d1f0276408
* Introducing Horizon charts * JS Lintin
238 lines
5.9 KiB
JavaScript
238 lines
5.9 KiB
JavaScript
// Copied and modified from
|
|
// https://github.com/kmandov/d3-horizon-chart
|
|
var d3 = require('d3');
|
|
require('./horizon.css');
|
|
|
|
var horizonChart = function () {
|
|
var colors = ["#313695", "#4575b4", "#74add1", "#abd9e9", "#fee090", "#fdae61", "#f46d43", "#d73027"];
|
|
var bands = colors.length >> 1; // number of bands in each direction (positive / negative)
|
|
var width = 1000;
|
|
var height = 30;
|
|
var offsetX = 0;
|
|
var spacing = 0;
|
|
var mode = 'offset';
|
|
var axis = null;
|
|
var title = null;
|
|
var extent = null; // the extent is derived from the data, unless explicitly set via .extent([min, max])
|
|
var x = null;
|
|
var y = d3.scale.linear().range([0, height]);
|
|
var canvas = null;
|
|
|
|
var b;
|
|
|
|
function my(data) {
|
|
|
|
var horizon = d3.select(this);
|
|
var step = width / data.length;
|
|
|
|
horizon.append('span')
|
|
.attr('class', 'title')
|
|
.text(title);
|
|
|
|
horizon.append('span')
|
|
.attr('class', 'value');
|
|
|
|
canvas = horizon.append('canvas');
|
|
|
|
canvas
|
|
.attr('width', width)
|
|
.attr('height', height);
|
|
|
|
var context = canvas.node().getContext('2d');
|
|
context.imageSmoothingEnabled = false;
|
|
|
|
// update the y scale, based on the data extents
|
|
var _extent = extent || d3.extent(data, function (d) { return d.y; });
|
|
|
|
var max = Math.max(-_extent[0], _extent[1]);
|
|
y.domain([0, max]);
|
|
|
|
//x = d3.scaleTime().domain[];
|
|
axis = d3.svg.axis(x).ticks(5);
|
|
|
|
context.clearRect(0, 0, width, height);
|
|
//context.translate(0.5, 0.5);
|
|
|
|
// the data frame currently being shown:
|
|
var startIndex = ~~ Math.max(0, -(offsetX / step));
|
|
var endIndex = ~~ Math.min(data.length, startIndex + width / step);
|
|
|
|
// skip drawing if there's no data to be drawn
|
|
if (startIndex > data.length) {
|
|
return;
|
|
}
|
|
|
|
// we are drawing positive & negative bands separately to avoid mutating canvas state
|
|
// http://www.html5rocks.com/en/tutorials/canvas/performance/
|
|
var negative = false;
|
|
// draw positive bands
|
|
var i, value, bExtents;
|
|
for (b = 0; b < bands; b++) {
|
|
context.fillStyle = colors[bands + b];
|
|
|
|
// Adjust the range based on the current band index.
|
|
bExtents = (b + 1 - bands) * height;
|
|
y.range([bands * height + bExtents, bExtents]);
|
|
|
|
// only the current data frame is being drawn i.e. what's visible:
|
|
for (i = startIndex; i < endIndex; i++) {
|
|
value = data[i].y;
|
|
if (value <= 0) { negative = true; continue; }
|
|
if (value === undefined) {
|
|
continue;
|
|
}
|
|
context.fillRect(offsetX + i * step, y(value), step + 1, y(0) - y(value));
|
|
}
|
|
}
|
|
|
|
// draw negative bands
|
|
if (negative) {
|
|
|
|
// mirror the negative bands, by flipping the canvas
|
|
if (mode === 'offset') {
|
|
context.translate(0, height);
|
|
context.scale(1, -1);
|
|
}
|
|
|
|
for (b = 0; b < bands; b++) {
|
|
context.fillStyle = colors[bands - b - 1];
|
|
|
|
// Adjust the range based on the current band index.
|
|
bExtents = (b + 1 - bands) * height;
|
|
y.range([bands * height + bExtents, bExtents]);
|
|
|
|
// only the current data frame is being drawn i.e. what's visible:
|
|
for (var ii = startIndex; ii < endIndex; ii++) {
|
|
value = data[ii].y;
|
|
if (value >= 0) {
|
|
continue;
|
|
}
|
|
context.fillRect(offsetX + ii * step, y(-value), step + 1, y(0) - y(-value));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
my.axis = function (_) {
|
|
if (!arguments.length) { return axis; }
|
|
axis = _;
|
|
return my;
|
|
};
|
|
|
|
my.title = function (_) {
|
|
if (!arguments.length) { return title; }
|
|
title = _;
|
|
return my;
|
|
};
|
|
|
|
my.canvas = function (_) {
|
|
if (!arguments.length) { return canvas; }
|
|
canvas = _;
|
|
return my;
|
|
};
|
|
|
|
// Array of colors representing the number of bands
|
|
my.colors = function (_) {
|
|
if (!arguments.length) {
|
|
return colors;
|
|
}
|
|
colors = _;
|
|
|
|
// update the number of bands
|
|
bands = colors.length >> 1;
|
|
|
|
return my;
|
|
};
|
|
|
|
my.height = function (_) {
|
|
if (!arguments.length) { return height; }
|
|
height = _;
|
|
return my;
|
|
};
|
|
|
|
my.width = function (_) {
|
|
if (!arguments.length) { return width; }
|
|
width = _;
|
|
return my;
|
|
};
|
|
|
|
my.spacing = function (_) {
|
|
if (!arguments.length) { return spacing; }
|
|
spacing = _;
|
|
return my;
|
|
};
|
|
|
|
// mirror or offset
|
|
my.mode = function (_) {
|
|
if (!arguments.length) { return mode; }
|
|
mode = _;
|
|
return my;
|
|
};
|
|
|
|
my.extent = function (_) {
|
|
if (!arguments.length) { return extent; }
|
|
extent = _;
|
|
return my;
|
|
};
|
|
|
|
my.offsetX = function (_) {
|
|
if (!arguments.length) { return offsetX; }
|
|
offsetX = _;
|
|
return my;
|
|
};
|
|
|
|
return my;
|
|
};
|
|
|
|
function horizonViz(slice) {
|
|
|
|
function refresh() {
|
|
d3.json(slice.jsonEndpoint(), function (error, payload) {
|
|
var fd = payload.form_data;
|
|
if (error) {
|
|
slice.error(error.responseText);
|
|
return '';
|
|
}
|
|
|
|
var div = d3.select(slice.selector);
|
|
div.selectAll('*').remove();
|
|
var extent = null;
|
|
if (fd.horizon_color_scale === 'overall') {
|
|
var allValues = [];
|
|
payload.data.forEach(function (d) {
|
|
allValues = allValues.concat(d.values);
|
|
});
|
|
extent = d3.extent(allValues, function (d) { return d.y; });
|
|
} else if (fd.horizon_color_scale === 'change') {
|
|
payload.data.forEach(function (series) {
|
|
var t0y = series.values[0].y; // value at time 0
|
|
series.values.forEach(function (d, i) {
|
|
d.y = d.y - t0y;
|
|
});
|
|
});
|
|
}
|
|
div.selectAll(".horizon")
|
|
.data(payload.data)
|
|
.enter()
|
|
.append('div')
|
|
.attr('class', 'horizon')
|
|
.each(function (d, i) {
|
|
horizonChart()
|
|
.height(fd.series_height)
|
|
.width(slice.width())
|
|
.extent(extent)
|
|
.title(d.key)
|
|
.call(this, d.values, i);
|
|
});
|
|
|
|
slice.done();
|
|
});
|
|
}
|
|
return {
|
|
render: refresh,
|
|
resize: refresh
|
|
};
|
|
}
|
|
|
|
module.exports = horizonViz;
|