opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added cursor change to indicate that you can zoom

Browse Source 
Added comments to script to make it easier to find
Organized script to make it easier to understand
This commit is contained in:
Airistotal
2015-08-04 12:04:17 -05:00
parent bd03135703
commit 7eb075e711
5 changed files with 159 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/galaxy/scripts/reports_webapp/run_stats.js
+155 -103
View File
@@ -1,4 +1,4 @@
function days_in_month(month,year) {
function days_in_month(month, year) {
return new Date(year, month, 0).getDate();
}
@@ -44,9 +44,8 @@ setTimeout(refresh, 900000); //15 minutes = 900000 ms
function create_chart( inp_data, name, time, title ) {
require( ["d3"], function (e) {
// Initialize starting variables
var data = inp_data;
var margin = {top: 60, right: 30, bottom: 50, left: 60};
var chart_zoom = 1.75;
var hours_array = []
var now = get_utc_time_hours()
@@ -60,31 +59,7 @@ function create_chart( inp_data, name, time, title ) {
days_array.push(date_by_subtracting_days(now, i));
}
function click() {
var classes = d3.select(this).attr("class");
classes = classes.split(" ");
d3.selectAll("." + classes[0]).filter("." + classes[1])
.transition()
.duration(750)
.attr("height", chart_height)
.attr("width", chart_width);
d3.select(this)
.transition()
.duration(750)
.attr("height", chart_height*chart_zoom)
.attr("width", chart_width*chart_zoom);
}
var height = 150;
if(d3.max(data) != 0) {
var zoom = height / d3.max(data);
} else {
var zoom = 1.0;
}
var chart_height = height + margin.top + margin.bottom;
$(".charts").css("height", chart_height * (chart_zoom));
var margin = {top: 60, right: 30, bottom: 50, left: 60};
var width = 300;
var barWidth = 0;
if(time == "hours") {
@@ -94,59 +69,96 @@ function create_chart( inp_data, name, time, title ) {
}
var chart_width = width + margin.left + margin.right;
var chart_zoom = 1.75;
var height = 150;
if(d3.max(data) != 0) {
var zoom = height / d3.max(data);
} else {
var zoom = 1.0;
}
var chart_height = height + margin.top + margin.bottom;
// Function for zooming in and out of charts
function click() {
var classes = d3.select(this).attr("class");
classes = classes.split(" ");
d3.selectAll("." + classes[0]).filter("." + classes[1])
.style("cursor", "zoom-in")
.transition()
.duration(750)
.attr("height", chart_height)
.attr("width", chart_width);
d3.select(this)
.style("cursor", "default")
.transition()
.duration(750)
.attr("height", chart_height*chart_zoom)
.attr("width", chart_width*chart_zoom);
}
// Initialize all chart containers to have the correct height
$(".charts").css("height", chart_height * (chart_zoom));
// Create the chart object
var chart = d3.select("#" + name)
.attr("width", chart_width)
.attr("height", chart_width)
.attr("height", chart_height)
.attr("preserveAspectRatio", "xMidYMin")
.attr("viewBox", "0 0 " + chart_width + " " + chart_height)
.on("click", click);
// Create bars on the chart and assosciate data with it
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) {
// Place the bar in the correct place
curr_margin = +margin.left;
curr_margin += +(i * barWidth);
return "translate(" + curr_margin + "," + margin.top + ")";
})
.on("mouseenter", function(d) {
var i = 1;
var size = d;
// Show tool tip
var i = 1;
var size = d;
while( size >= 10) {
size = size / 10;
i++;
}
while( size >= 10) {
size = size / 10;
i++;
}
var wdth = (i * 4) + 10;
d3.select(d3.event.path[1]).select(".tool_tip")
.select("text")
.attr("transform", "translate( " + (margin.left - 5) + ", " + ((height - (d * zoom)) + +margin.top + 10) + " )" )
.attr("visibility", "visible")
.text(d);
var wdth = (i * 4) + 10;
d3.select(d3.event.path[1]).select(".tool_tip")
.select("text")
.attr("transform", "translate( " + (margin.left - 5) + ", " + ((height - (d * zoom)) + +margin.top + 10) + " )" )
.attr("visibility", "visible")
.text(d);
d3.select(d3.event.path[1]).select(".tool_tip")
.attr("width", wdth + "px")
.attr("height", "15px")
.select("rect")
.attr("transform", "translate( " + ((+margin.left) - wdth) + ", " + ((height - (d * zoom)) + +margin.top) + " )" )
d3.select(d3.event.path[1]).select(".tool_tip")
.attr("width", wdth + "px")
.attr("height", "15px")
.attr("fill","#ebd9b2");
})
.on("mouseleave", function(d) {
d3.select(d3.event.path[1]).select(".tool_tip")
.select("text")
.attr("visibility", "hidden");
.select("rect")
.attr("transform", "translate( " + ((+margin.left) - wdth) + ", " + ((height - (d * zoom)) + +margin.top) + " )" )
.attr("width", wdth + "px")
.attr("height", "15px")
.attr("fill","#ebd9b2");
})
.on("mouseleave", function(d) {
// Remove tool tip
d3.select(d3.event.path[1]).select(".tool_tip")
.select("text")
.attr("visibility", "hidden");
d3.select(d3.event.path[1]).select(".tool_tip")
.select("rect")
.attr("width", "0")
.attr("height", "0")
.attr("fill","")
.text(d);
});
d3.select(d3.event.path[1]).select(".tool_tip")
.select("rect")
.attr("width", "0")
.attr("height", "0")
.attr("fill","")
.text(d);
});
// Add a title to the chart
chart.append("g")
.append("text")
.attr("class", "title")
@@ -156,6 +168,7 @@ function create_chart( inp_data, name, time, title ) {
})
.text(title);
// Add an x axis line to the chart
chart.append("g")
.attr("class", "axis")
.append("path")
@@ -169,14 +182,17 @@ function create_chart( inp_data, name, time, title ) {
return "M" + m_x + " " + m_y + " L " + l_x + " " + l_y;
});
// Declare how high the y axis goes
var y = d3.scale.linear()
.range([height, 0]);
// Create a yAxis object
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat( function(d) { return d3.round( d*d3.max(data), 0 ) });
// Put the y axis on the chart
chart.append("g")
.attr("class", "y axis")
.attr("id", ("y_" + name))
@@ -185,6 +201,7 @@ function create_chart( inp_data, name, time, title ) {
.call(yAxis)
.select(".domain");
// Put a title for y axis on chart
chart.append("g")
.append("text")
.attr("class", "ax_title")
@@ -198,6 +215,7 @@ function create_chart( inp_data, name, time, title ) {
})
.text("Number of Jobs");
// Add color to the chart's bars
bar.append("rect")
.attr("y", function(d) { return height - (d * zoom); })
.attr("height", function(d) { return (d * zoom); })
@@ -213,6 +231,7 @@ function create_chart( inp_data, name, time, title ) {
.attr("y2", 3)
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("pointer-events", "none")
.attr("transform", function(d, i) {
return "translate( " + (barWidth/2) + ", " + height + ")"
});
@@ -258,6 +277,7 @@ function create_chart( inp_data, name, time, title ) {
})
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("pointer-events", "none")
.attr("transform", function(d, i) {
return "translate( 0, " + height + ")";
});
@@ -268,6 +288,7 @@ function create_chart( inp_data, name, time, title ) {
first = false;
bar.append("text")
.attr("fill", "rgb(0,0,0)")
.attr("pointer-events", "none")
.text(function(d, i) {
var time = "";
var locale = "en-us";
@@ -290,7 +311,7 @@ function create_chart( inp_data, name, time, title ) {
text_height += 26;
first = true;
} else {
text_height += 19;
text_height += 18;
}
curr_day = hours_array[i].getDate();
@@ -307,6 +328,7 @@ function create_chart( inp_data, name, time, title ) {
.attr("y2", 3)
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("pointer-events", "none")
.attr("transform", function(d, i) {
return "translate( " + (barWidth/2) + ", " + height + ")"
});
@@ -352,6 +374,7 @@ function create_chart( inp_data, name, time, title ) {
})
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("pointer-events", "none")
.attr("transform", function(d, i) {
return "translate( 0, " + height + ")";
});
@@ -361,7 +384,8 @@ function create_chart( inp_data, name, time, title ) {
curr_month_text = "";
first = false;
bar.append("text")
.attr("fill", "rgb(0,0,0)")
.attr("fill", "rgb(0,100,0)")
.attr("pointer-events", "none")
.text(function(d, i) {
var time = "";
var locale = "en-us";
@@ -384,7 +408,7 @@ function create_chart( inp_data, name, time, title ) {
text_height += 26;
first = true;
} else {
text_height += 19;
text_height += 18;
}
curr_month = days_array[i].getMonth();
@@ -394,16 +418,19 @@ function create_chart( inp_data, name, time, title ) {
});
}
// Put an invisible tool tip on the chart
chart.append("g")
.attr("class", "tool_tip")
.append("rect");
chart.select(".tool_tip")
.append("text");
// Initialize initial zoomed charts
if(name == "jc_dy_chart" || name == "jc_hr_chart") {
d3.select("#" + name)
.attr("height", chart_height * chart_zoom)
.attr("width", chart_width * chart_zoom)
.style("cursor", "default");
}
});
}
@@ -412,27 +439,68 @@ function create_chart( inp_data, name, time, title ) {
function create_histogram( inp_data, name, title ) {
require( ["d3"], function (e) {
//inp_data is an array of numbers that are the amount of minutes per run
// Initialize initial variables
// inp_data is an array of numbers that are the amount of minutes per run
var data = inp_data;
var chart_zoom = 1.75;
// Formatters for counts and times (converting numbers to Dates).
function click(d) {
var classes = d3.select(this).attr("class")
var margin = {top: 60, right: 30, bottom: 50, left: 60};
var height = 150;
var chart_height = height + margin.top + margin.bottom;
var width = 300;
var chart_width = width + margin.left + margin.right;
// Cereate x axis metadata
// Used for x axis, histogram creation, and bar initialization
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, width]);
// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
.bins(x.ticks(20))(data);
// Create an array of the sizes of the bars
var lengths = [];
for(var i = 0; i < data.length; i ++) {
lengths.push(data[i].length)
}
// Find the amount needed to magnify the bars
if(d3.max(data) != 0) {
var zoom = height / d3.max(lengths);
} else {
var zoom = 1.0;
}
// Create y axis metadata
// Used for y axis and bar initialization
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.y; })])
.range([height, 0]);
// Function for zooming in and out of charts
function click() {
var classes = d3.select(this).attr("class");
classes = classes.split(" ");
d3.selectAll("." + classes[0]).filter("." + classes[1])
.style("cursor", "zoom-in")
.transition()
.duration(750)
.attr("height", chart_height)
.attr("width", chart_width);
d3.select(this)
.transition()
.duration(750)
.attr("height", chart_height*chart_zoom)
.attr("width", chart_width*chart_zoom);
.style("cursor", "default")
.transition()
.duration(750)
.attr("height", chart_height*chart_zoom)
.attr("width", chart_width*chart_zoom);
}
// Formatter for x axis times (converting minutes to HH:MM).
var formatMinutes = function(d) {
hours = Math.floor( d / 60 )
minutes = Math.floor(d - (hours * 60))
@@ -447,37 +515,7 @@ function create_histogram( inp_data, name, title ) {
return hours + ":" + minutes;
};
var margin = {top: 60, right: 30, bottom: 50, left: 60};
var height = 150;
var chart_height = height + margin.top + margin.bottom;
var width = 300;
var chart_width = width + margin.left + margin.right;
var lengths = []
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, width]);
// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
.bins(x.ticks(20))(data);
for(var i = 0; i < data.length; i ++) {
lengths.push(data[i].length)
}
if(d3.max(data) != 0) {
var zoom = height / d3.max(lengths);
} else {
var zoom = 1.0;
}
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.y; })])
.range([height, 0]);
// Create a chart object
var chart = d3.select("#" + name)
.attr("viewBox", "0 0 " + chart_width + " " + chart_height)
.attr("width", chart_width)
@@ -485,6 +523,7 @@ function create_histogram( inp_data, name, title ) {
.attr("preserveAspectRatio", "xMidYMin")
.on("click", click);
// Put title on chart
chart.append("g")
.append("text")
.attr("class", "title")
@@ -493,12 +532,15 @@ function create_histogram( inp_data, name, title ) {
})
.text(title);
// Put bars on chart
var bar = chart.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + (+x(d.x) + +margin.left) + "," + (+y(d.y) + +margin.top) + ")"; })
.attr("transform", function(d) {
return "translate(" + (+x(d.x) + +margin.left) + "," + (+y(d.y) + +margin.top) + ")"; })
.on("mouseenter", function(d) {
// Show tool tip
i = 0;
size = d.length;
@@ -523,6 +565,7 @@ function create_histogram( inp_data, name, title ) {
.attr("fill","#ebd9b2");
})
.on("mouseleave", function(d) {
// Remove tool tip
d3.select(d3.event.path[1]).select(".tool_tip")
.select("text")
.attr("visibility", "hidden");
@@ -534,6 +577,7 @@ function create_histogram( inp_data, name, title ) {
.attr("fill","")
});
// Create bar width
var bar_x;
if(data[0] == undefined) {
bar_x = 1;
@@ -541,22 +585,26 @@ function create_histogram( inp_data, name, title ) {
bar_x = x(data[0].dx);
}
// Add color to bar
bar.append("rect")
.attr("x", 1)
.attr("width", bar_x - 1)
.attr("height", function(d) { return height - y(d.y); });
// Create x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(formatMinutes);
// Add x axis to chart
chart.append("g")
.attr("class", "x axis")
.attr("id", "x_" + name)
.attr("transform", "translate( " + margin.left + "," + (+height + +margin.top) + ")")
.call(xAxis);
// Add a title to the x axis
chart.append("g")
.append("text")
.attr("class", "ax_title")
@@ -570,16 +618,19 @@ function create_histogram( inp_data, name, title ) {
})
.text("ETA - hrs:mins");
// Create y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
// Add y axis to chart
chart.append("g")
.attr("class", "y axis")
.attr("id", ("y_" + name))
.attr("transform", "translate( " + margin.left + "," + margin.top + ")")
.call(yAxis);
// Add a title to the y axis
chart.append("g")
.append("text")
.attr("class", "ax_title")
@@ -593,6 +644,7 @@ function create_histogram( inp_data, name, title ) {
})
.text("Number of Jobs");
// Put an invisible tool tip on the chart
chart.append("g")
.attr("class", "tool_tip")
.append("rect");
client/galaxy/style/less/base.less
+1
View File
@@ -1719,6 +1719,7 @@ div.toolTitleNoSection
// ================================================================Reports Webapp Styles
.chart {
cursor: zoom-in;
position: relative;
z-index: 2;
}
static/maps/reports_webapp/run_stats.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
static/scripts/reports_webapp/run_stats.js
+1 -1
View File
File diff suppressed because one or more lines are too long
static/style/blue/base.css
+1 -1
View File
File diff suppressed because one or more lines are too long