Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-09 14:45:35 +00:00
Code Issues Projects Releases Wiki Activity

Area chart tooltip dragging added

Browse Source
This commit is contained in:
Colin McLeod
2015-06-06 16:48:01 -07:00
parent b449bb3724
commit 03eb66a4d0
1 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/js/directives/directive-area-chart.js
View File

@@ -14,6 +14,9 @@ angular.module('app').directive('areaChart', ['$window', function ($window) {
margin = {top: 15, right: 15, bottom: 35, left: 50}, margin = {top: 15, right: 15, bottom: 35, left: 50},
fmt = d3.format('.3r'), fmt = d3.format('.3r'),
fmtLong = d3.format('.2f'), fmtLong = d3.format('.2f'),
func = series.func,
drag = d3.behavior.drag(),
dragging = false;
// Define Axes // Define Axes
xAxis = d3.svg.axis().outerTickSize(0).orient("bottom").tickFormat(d3.format('.2r')), xAxis = d3.svg.axis().outerTickSize(0).orient("bottom").tickFormat(d3.format('.2r')),
yAxis = d3.svg.axis().outerTickSize(0).orient("left").tickFormat(fmt), yAxis = d3.svg.axis().outerTickSize(0).orient("left").tickFormat(fmt),
@@ -78,8 +81,7 @@ angular.module('app').directive('areaChart', ['$window', function ($window) {
height = width * 0.6, height = width * 0.6,
w = width - margin.left - margin.right, w = width - margin.left - margin.right,
h = height - margin.top - margin.bottom, h = height - margin.top - margin.bottom,
data = [], data = [];
func = series.func;
if (series.xMax == series.xMin) { if (series.xMax == series.xMin) {
var yVal = func(series.xMin); var yVal = func(series.xMin);
@@ -96,7 +98,7 @@ angular.module('app').directive('areaChart', ['$window', function ($window) {
// Update Chart Size // Update Chart Size
svg.attr("width", width).attr("height", height); svg.attr("width", width).attr("height", height);
// Update domain and scale for axes; // Update domain and scale for axes;
x.range([0, w]).domain([series.xMin, series.xMax]); x.range([0, w]).domain([series.xMin, series.xMax]).clamp(true);
xAxis.scale(x); xAxis.scale(x);
xLbl.attr("transform", "translate(0," + h + ")"); xLbl.attr("transform", "translate(0," + h + ")");
xTxt.attr("x", w/2); xTxt.attr("x", w/2);
@@ -109,21 +111,46 @@ angular.module('app').directive('areaChart', ['$window', function ($window) {
// Remove existing elements // Remove existing elements
vis.selectAll('path.area').remove(); vis.selectAll('path.area').remove();
vis.insert("path",':first-child') // Area/Path to appear behind everything else var path = vis.insert("path",':first-child') // Area/Path to appear behind everything else
.datum(data) .datum(data)
.attr("class", "area") .attr("class", "area")
.attr('fill', 'url(#gradient)') .attr('fill', 'url(#gradient)')
.attr("d", area) .attr("d", area)
.on("mouseover", function() { tip.style("display", null); }) .on('mouseover', showTip)
.on("mouseout", function() { tip.style("display", "none"); }) .on('mouseout', hideTip)
.on('mousemove', function() { .on('mousemove', moveTip)
var xPos = d3.mouse(this)[0], x0 = x.invert(xPos), y0 = func(x0), flip = (xPos > w * 0.75); .call(drag);
tip.attr("transform", "translate(" + xPos + "," + y(y0) + ")");
tip.selectAll('rect').attr("x", flip? '-4.5em' : "0.5em").style("text-anchor", flip? 'end' : 'start'); drag
tip.selectAll('text.label').attr("x", flip? "-1em" : "1em").style("text-anchor", flip? 'end' : 'start'); .on('dragstart', function() {
tip.select('text.label.x').text(fmtLong(x0) + ' ' + labels.xAxis.unit); dragging = true;
tip.select('text.label.y').text(fmtLong(y0) + ' ' + labels.yAxis.unit); moveTip.call(this);
}); showTip();
})
.on("dragend", function() {
dragging = false;
hideTip();
})
.on('drag', moveTip)
}
function showTip() {
tip.style("display", null);
}
function hideTip() {
if (!dragging) {
tip.style("display", "none");
}
}
function moveTip() {
var xPos = d3.mouse(this)[0], x0 = x.invert(xPos), y0 = func(x0), flip = (x0 / x.domain()[1] > 0.75);
tip.attr("transform", "translate(" + x(x0) + "," + y(y0) + ")");
tip.selectAll('rect').attr("x", flip? '-4.5em' : "0.5em").style("text-anchor", flip? 'end' : 'start');
tip.selectAll('text.label').attr("x", flip? "-1em" : "1em").style("text-anchor", flip? 'end' : 'start');
tip.select('text.label.x').text(fmtLong(x0) + ' ' + labels.xAxis.unit);
tip.select('text.label.y').text(fmtLong(y0) + ' ' + labels.yAxis.unit);
} }
} }