mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-25 06:50:55 +01:00
f5c686d6a4
Summary: Mostly, this has just been sitting in my sandbox for a long time. I may also touch some charting stuff with subprojects/milestones, but don't have particular plans to do that. D3 seems a bit more flexible, and it's easier to push more of the style logic into CSS so you can fix my design atrocities. gRaphael also hasn't been updated in ~3+ years. Test Plan: {F1085433} {F1085434} Reviewers: chad Reviewed By: chad Subscribers: cburroughs, yelirekim Differential Revision: https://secure.phabricator.com/D15155
123 lines
2.8 KiB
JavaScript
123 lines
2.8 KiB
JavaScript
/**
|
|
* @provides javelin-behavior-line-chart
|
|
* @requires javelin-behavior
|
|
* javelin-dom
|
|
* javelin-vector
|
|
* phui-chart-css
|
|
*/
|
|
|
|
JX.behavior('line-chart', function(config) {
|
|
|
|
function fn(n) {
|
|
return n + '(' + JX.$A(arguments).slice(1).join(', ') + ')';
|
|
}
|
|
|
|
var h = JX.$(config.hardpoint);
|
|
var d = JX.Vector.getDim(h);
|
|
|
|
var padding = {
|
|
top: 24,
|
|
left: 48,
|
|
bottom: 48,
|
|
right: 32
|
|
};
|
|
|
|
var size = {
|
|
frameWidth: d.x,
|
|
frameHeight: d.y,
|
|
};
|
|
|
|
size.width = size.frameWidth - padding.left - padding.right;
|
|
size.height = size.frameHeight - padding.top - padding.bottom;
|
|
|
|
var x = d3.time.scale()
|
|
.range([0, size.width]);
|
|
|
|
var y = d3.scale.linear()
|
|
.range([size.height, 0]);
|
|
|
|
var xAxis = d3.svg.axis()
|
|
.scale(x)
|
|
.orient('bottom');
|
|
|
|
var yAxis = d3.svg.axis()
|
|
.scale(y)
|
|
.orient('left');
|
|
|
|
var svg = d3.select('#' + config.hardpoint).append('svg')
|
|
.attr('width', size.frameWidth)
|
|
.attr('height', size.frameHeight)
|
|
.attr('class', 'chart');
|
|
|
|
var g = svg.append('g')
|
|
.attr('transform', fn('translate', padding.left, padding.top));
|
|
|
|
g.append('rect')
|
|
.attr('class', 'inner')
|
|
.attr('width', size.width)
|
|
.attr('height', size.height);
|
|
|
|
var line = d3.svg.line()
|
|
.x(function(d) { return x(d.date); })
|
|
.y(function(d) { return y(d.count); });
|
|
|
|
var data = [];
|
|
for (var ii = 0; ii < config.x[0].length; ii++) {
|
|
data.push(
|
|
{
|
|
date: new Date(config.x[0][ii] * 1000),
|
|
count: +config.y[0][ii]
|
|
});
|
|
}
|
|
|
|
x.domain(d3.extent(data, function(d) { return d.date; }));
|
|
|
|
var yex = d3.extent(data, function(d) { return d.count; });
|
|
yex[0] = 0;
|
|
yex[1] = yex[1] * 1.05;
|
|
y.domain(yex);
|
|
|
|
g.append('path')
|
|
.datum(data)
|
|
.attr('class', 'line')
|
|
.attr('d', line);
|
|
|
|
g.append('g')
|
|
.attr('class', 'x axis')
|
|
.attr('transform', fn('translate', 0, size.height))
|
|
.call(xAxis);
|
|
|
|
g.append('g')
|
|
.attr('class', 'y axis')
|
|
.attr('transform', fn('translate', 0, 0))
|
|
.call(yAxis);
|
|
|
|
var div = d3.select('body')
|
|
.append('div')
|
|
.attr('class', 'chart-tooltip')
|
|
.style('opacity', 0);
|
|
|
|
g.selectAll('dot')
|
|
.data(data)
|
|
.enter()
|
|
.append('circle')
|
|
.attr('class', 'point')
|
|
.attr('r', 3)
|
|
.attr('cx', function(d) { return x(d.date); })
|
|
.attr('cy', function(d) { return y(d.count); })
|
|
.on('mouseover', function(d) {
|
|
var d_y = d.date.getFullYear();
|
|
var d_m = d.date.getMonth();
|
|
var d_d = d.date.getDate();
|
|
|
|
div
|
|
.html(d_y + '-' + d_m + '-' + d_d + ': ' + d.count)
|
|
.style('opacity', 0.9)
|
|
.style('left', (d3.event.pageX - 60) + 'px')
|
|
.style('top', (d3.event.pageY - 38) + 'px');
|
|
})
|
|
.on('mouseout', function() {
|
|
div.style('opacity', 0);
|
|
});
|
|
|
|
});
|