2012-07-30 19:44:08 +02:00
|
|
|
/**
|
|
|
|
* @provides javelin-behavior-line-chart
|
|
|
|
* @requires javelin-behavior
|
|
|
|
* javelin-dom
|
|
|
|
* javelin-vector
|
2016-01-28 22:29:27 +01:00
|
|
|
* phui-chart-css
|
2012-07-30 19:44:08 +02:00
|
|
|
*/
|
|
|
|
|
|
|
|
JX.behavior('line-chart', function(config) {
|
|
|
|
|
Fix negative chart values, add storage for charts
Summary:
Ref T13279. I think I'm going to fling some stuff at the wall for a bit here and hope most of it sticks, so this series of changes may not be terribly cohesive or focused. Here:
The range of the chart is locked to "[0, 105% of max]". This is trying to make a pleasing extra margin above the maximum value, but currently just breaks charts with negative values. Later:
- I'll probably let users customize this.
- We should likely select 0 as the automatic minimum for charts with no negative values.
- For charts with positive values, it would be nice to automatically pick a pleasantly round number (25, 100, 1000) as a maximum by default.
We don't have any storage for charts yet. Add some. This works like queries, where every possible configuration gets a short URL slug. Nothing writes or reads this yet.
Rename `fn()` to `css_function()`. This builds CSS functions for D3. The JS is likely to get substantial structural rewrites later on, `fn()` was just particularly offensive.
Test Plan: Viewed a fact series with negative values. Ran `bin/storage upgrade`.
Reviewers: amckinley
Reviewed By: amckinley
Subscribers: yelirekim, PHID-OPKG-gm6ozazyms6q6i22gyam
Maniphest Tasks: T13279
Differential Revision: https://secure.phabricator.com/D20438
2019-04-16 20:08:59 +02:00
|
|
|
function css_function(n) {
|
2016-01-28 22:29:27 +01:00
|
|
|
return n + '(' + JX.$A(arguments).slice(1).join(', ') + ')';
|
|
|
|
}
|
|
|
|
|
2012-07-30 19:44:08 +02:00
|
|
|
var h = JX.$(config.hardpoint);
|
|
|
|
var d = JX.Vector.getDim(h);
|
|
|
|
|
2016-01-28 22:29:27 +01:00
|
|
|
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');
|
2012-07-30 19:44:08 +02:00
|
|
|
|
2016-01-28 22:29:27 +01:00
|
|
|
var g = svg.append('g')
|
Fix negative chart values, add storage for charts
Summary:
Ref T13279. I think I'm going to fling some stuff at the wall for a bit here and hope most of it sticks, so this series of changes may not be terribly cohesive or focused. Here:
The range of the chart is locked to "[0, 105% of max]". This is trying to make a pleasing extra margin above the maximum value, but currently just breaks charts with negative values. Later:
- I'll probably let users customize this.
- We should likely select 0 as the automatic minimum for charts with no negative values.
- For charts with positive values, it would be nice to automatically pick a pleasantly round number (25, 100, 1000) as a maximum by default.
We don't have any storage for charts yet. Add some. This works like queries, where every possible configuration gets a short URL slug. Nothing writes or reads this yet.
Rename `fn()` to `css_function()`. This builds CSS functions for D3. The JS is likely to get substantial structural rewrites later on, `fn()` was just particularly offensive.
Test Plan: Viewed a fact series with negative values. Ran `bin/storage upgrade`.
Reviewers: amckinley
Reviewed By: amckinley
Subscribers: yelirekim, PHID-OPKG-gm6ozazyms6q6i22gyam
Maniphest Tasks: T13279
Differential Revision: https://secure.phabricator.com/D20438
2019-04-16 20:08:59 +02:00
|
|
|
.attr('transform', css_function('translate', padding.left, padding.top));
|
2016-01-28 22:29:27 +01:00
|
|
|
|
|
|
|
g.append('rect')
|
|
|
|
.attr('class', 'inner')
|
|
|
|
.attr('width', size.width)
|
|
|
|
.attr('height', size.height);
|
|
|
|
|
2019-04-17 04:00:05 +02:00
|
|
|
function as_date(value) {
|
|
|
|
return new Date(value * 1000);
|
2012-07-30 19:44:08 +02:00
|
|
|
}
|
|
|
|
|
2019-04-17 04:00:05 +02:00
|
|
|
x.domain([as_date(config.xMin), as_date(config.xMax)]);
|
Fix negative chart values, add storage for charts
Summary:
Ref T13279. I think I'm going to fling some stuff at the wall for a bit here and hope most of it sticks, so this series of changes may not be terribly cohesive or focused. Here:
The range of the chart is locked to "[0, 105% of max]". This is trying to make a pleasing extra margin above the maximum value, but currently just breaks charts with negative values. Later:
- I'll probably let users customize this.
- We should likely select 0 as the automatic minimum for charts with no negative values.
- For charts with positive values, it would be nice to automatically pick a pleasantly round number (25, 100, 1000) as a maximum by default.
We don't have any storage for charts yet. Add some. This works like queries, where every possible configuration gets a short URL slug. Nothing writes or reads this yet.
Rename `fn()` to `css_function()`. This builds CSS functions for D3. The JS is likely to get substantial structural rewrites later on, `fn()` was just particularly offensive.
Test Plan: Viewed a fact series with negative values. Ran `bin/storage upgrade`.
Reviewers: amckinley
Reviewed By: amckinley
Subscribers: yelirekim, PHID-OPKG-gm6ozazyms6q6i22gyam
Maniphest Tasks: T13279
Differential Revision: https://secure.phabricator.com/D20438
2019-04-16 20:08:59 +02:00
|
|
|
y.domain([config.yMin, config.yMax]);
|
2016-01-28 22:29:27 +01:00
|
|
|
|
2019-04-17 04:00:05 +02:00
|
|
|
for (var idx = 0; idx < config.datasets.length; idx++) {
|
|
|
|
var dataset = config.datasets[idx];
|
|
|
|
|
|
|
|
var line = d3.svg.line()
|
|
|
|
.x(function(d) { return x(d.xvalue); })
|
|
|
|
.y(function(d) { return y(d.yvalue); });
|
|
|
|
|
|
|
|
var data = [];
|
|
|
|
for (var ii = 0; ii < dataset.x.length; ii++) {
|
|
|
|
data.push(
|
|
|
|
{
|
|
|
|
xvalue: as_date(dataset.x[ii]),
|
|
|
|
yvalue: dataset.y[ii]
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
g.append('path')
|
|
|
|
.datum(data)
|
|
|
|
.attr('class', 'line')
|
|
|
|
.style('stroke', dataset.color)
|
|
|
|
.attr('d', line);
|
|
|
|
|
|
|
|
g.selectAll('dot')
|
|
|
|
.data(data)
|
|
|
|
.enter()
|
|
|
|
.append('circle')
|
|
|
|
.attr('class', 'point')
|
|
|
|
.attr('r', 3)
|
|
|
|
.attr('cx', function(d) { return x(d.xvalue); })
|
|
|
|
.attr('cy', function(d) { return y(d.yvalue); })
|
|
|
|
.on('mouseover', function(d) {
|
|
|
|
var d_y = d.xvalue.getFullYear();
|
|
|
|
|
|
|
|
// NOTE: Javascript months are zero-based. See PHI1017.
|
|
|
|
var d_m = d.xvalue.getMonth() + 1;
|
|
|
|
|
|
|
|
var d_d = d.xvalue.getDate();
|
|
|
|
|
|
|
|
div
|
|
|
|
.html(d_y + '-' + d_m + '-' + d_d + ': ' + d.yvalue)
|
|
|
|
.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);
|
|
|
|
});
|
|
|
|
}
|
2016-01-28 22:29:27 +01:00
|
|
|
|
|
|
|
g.append('g')
|
|
|
|
.attr('class', 'x axis')
|
Fix negative chart values, add storage for charts
Summary:
Ref T13279. I think I'm going to fling some stuff at the wall for a bit here and hope most of it sticks, so this series of changes may not be terribly cohesive or focused. Here:
The range of the chart is locked to "[0, 105% of max]". This is trying to make a pleasing extra margin above the maximum value, but currently just breaks charts with negative values. Later:
- I'll probably let users customize this.
- We should likely select 0 as the automatic minimum for charts with no negative values.
- For charts with positive values, it would be nice to automatically pick a pleasantly round number (25, 100, 1000) as a maximum by default.
We don't have any storage for charts yet. Add some. This works like queries, where every possible configuration gets a short URL slug. Nothing writes or reads this yet.
Rename `fn()` to `css_function()`. This builds CSS functions for D3. The JS is likely to get substantial structural rewrites later on, `fn()` was just particularly offensive.
Test Plan: Viewed a fact series with negative values. Ran `bin/storage upgrade`.
Reviewers: amckinley
Reviewed By: amckinley
Subscribers: yelirekim, PHID-OPKG-gm6ozazyms6q6i22gyam
Maniphest Tasks: T13279
Differential Revision: https://secure.phabricator.com/D20438
2019-04-16 20:08:59 +02:00
|
|
|
.attr('transform', css_function('translate', 0, size.height))
|
2016-01-28 22:29:27 +01:00
|
|
|
.call(xAxis);
|
|
|
|
|
|
|
|
g.append('g')
|
|
|
|
.attr('class', 'y axis')
|
Fix negative chart values, add storage for charts
Summary:
Ref T13279. I think I'm going to fling some stuff at the wall for a bit here and hope most of it sticks, so this series of changes may not be terribly cohesive or focused. Here:
The range of the chart is locked to "[0, 105% of max]". This is trying to make a pleasing extra margin above the maximum value, but currently just breaks charts with negative values. Later:
- I'll probably let users customize this.
- We should likely select 0 as the automatic minimum for charts with no negative values.
- For charts with positive values, it would be nice to automatically pick a pleasantly round number (25, 100, 1000) as a maximum by default.
We don't have any storage for charts yet. Add some. This works like queries, where every possible configuration gets a short URL slug. Nothing writes or reads this yet.
Rename `fn()` to `css_function()`. This builds CSS functions for D3. The JS is likely to get substantial structural rewrites later on, `fn()` was just particularly offensive.
Test Plan: Viewed a fact series with negative values. Ran `bin/storage upgrade`.
Reviewers: amckinley
Reviewed By: amckinley
Subscribers: yelirekim, PHID-OPKG-gm6ozazyms6q6i22gyam
Maniphest Tasks: T13279
Differential Revision: https://secure.phabricator.com/D20438
2019-04-16 20:08:59 +02:00
|
|
|
.attr('transform', css_function('translate', 0, 0))
|
2016-01-28 22:29:27 +01:00
|
|
|
.call(yAxis);
|
|
|
|
|
|
|
|
var div = d3.select('body')
|
|
|
|
.append('div')
|
|
|
|
.attr('class', 'chart-tooltip')
|
|
|
|
.style('opacity', 0);
|
|
|
|
|
2012-07-30 19:44:08 +02:00
|
|
|
});
|